Welcome to Vanilla Breeze
This bell pulls live notifications from /go/notify/messages — the same contract documented at /docs/concepts/service-contracts/. Static articles like this one are the no-JS / no-backend fallback.
data-morph
Shape morphing animations, evenodd cutouts, and two-layer shaped borders — advanced CSS shape() techniques.
Shape Animation
Apply data-morph to any element to animate its clip-path between matching-point shapes using CSS keyframes. All animations respect prefers-reduced-motion.
| Value | Effect | Duration |
|---|---|---|
pulse |
Subtle inset throb between full and slightly inset rectangles | 3s |
breathe |
Organic morphing between curved top and curved bottom shapes | 4s |
wave |
Horizontal wave undulation on top and bottom edges | 2.5s |
Morph animation examples
<section data-morph="pulse"> Pulsing shape</section> <section data-morph="breathe"> Breathing shape</section> <section data-morph="wave"> Waving shape</section>Shape animation works because shape() supports interpolation between matching-point paths. Both keyframe states must have the same number of points for smooth transitions.
Theme overrides
The cyber theme uses steps(8) timing for a glitchy digital feel. The kawaii theme uses bouncy easing for playful motion.
Cutouts
Apply data-cutout to punch a hole through an element using the evenodd fill rule. The outer rectangle stays, the inner shape is removed.
| Value | Inner Shape |
|---|---|
circle |
Centered circle cutout |
diamond |
Centered diamond cutout |
arch-window |
Arched window opening |
hex |
Centered hexagon cutout |
badge-corner |
Quarter-circle in top-right corner |
Cutout examples
<section data-cutout="circle" style="background: linear-gradient(135deg, var(--color-primary), var(--color-accent)); aspect-ratio: 1;"> <!-- Content shows through the gradient; hole reveals whatever is behind --></section>Cutouts work by defining two closed paths in one shape(): the outer rectangle and the inner shape. The evenodd fill rule means the overlapping area (the inner shape) is transparent.
Shaped Borders
Apply data-border-shape to a wrapper element for a colored shape outline. Uses a two-layer technique: a ::before pseudo-element provides the colored background at full shape, and the inner content clips to the same shape inset by --shape-border.
| Value | Shape |
|---|---|
hexagon |
Six-sided hexagonal frame |
diamond |
Rotated square diamond frame |
arch |
Rounded arch frame |
Shaped border examples
<span data-border-shape="hexagon"> <img src="avatar.jpg" alt="Profile" width="200" height="200"></span>Adjust border thickness with --shape-border (default: 4px). The border color comes from --color-primary by default.