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-parallax
Section-local, transform-only depth motion driven by a CSS view-progress timeline. CSS-only, no JavaScript.
Subtle scroll-driven depth
The data-parallax attribute applies a transform-only depth animation to a single media layer inside a section. The motion is driven by the CSS view() progress timeline, so it tracks the element's own travel through the viewport without scroll listeners and without JavaScript.
Hero with parallax media layer
<section data-parallax-group> <figure data-parallax style="--vb-parallax-to: -18%; --vb-parallax-scale: 1.08"> <img src="/images/hero.jpg" alt="" /> </figure> <header> <h1>Built on motion that respects readers.</h1> <p>Foreground copy stays still while the figure drifts behind it.</p> </header></section>Attributes and properties
| Attribute | Role |
|---|---|
data-parallax | Applies the parallax animation to the element. Use on the media layer (a <figure>, <img>, or wrapper) — not on the section that contains it. |
data-parallax-group | Authoring marker for the section that owns a parallax layer. Has no CSS attached this pass; reserved for future composition rules. |
| CSS Property | Default | Description |
|---|---|---|
--vb-parallax-from | 0% | Starting translateY value when the element enters the viewport. |
--vb-parallax-to | -12% | Ending translateY value when the element exits. |
--vb-parallax-scale | 1 | Constant scale applied to the layer. A small scale (1.05–1.1) lets the layer drift without revealing its edges. |
Browser support and fallback
The animation requires animation-timeline: view(). In supporting browsers (Chrome 115+, Safari 18+, Firefox behind a flag) the layer animates. Elsewhere the layer renders at its starting transform — the static composition is the fallback, and the demo above is designed to look correct without motion.
The rule is wrapped in an @supports block, so unsupported browsers see no animation declarations at all — no flash, no JS shim, no layout shift.
Reduced motion
When the user has prefers-reduced-motion: reduce set, the animation is removed and the layer is reset to its starting transform. The motion is suppressed at the CSS level — there is no JS to bypass.
Guidance
- One layer per section. Stack-of-parallax patterns are hard to read and degrade on mobile. Reach for
data-stageif you need richer scroll-linked storytelling. - Keep the range conservative. Values past 25% start to feel disruptive and reveal layout edges. The defaults are intentionally small.
- Animate only
transform. The shipped rule usestransformexclusively so the browser can composite the layer on the GPU. Do not extend the keyframes to animatetop,background-position, or layout properties. - The static layout must work. If the page only makes sense with motion, the design is too aggressive — soften it.