A dusk scene built from three SVG layers (sky, hills, pines) that drift at different speeds as it crosses the viewport.
Field notes / Day 4
Leaving the valley before sunrise
Above the treeline
2,640 m
The last switchback opens onto bare rock and a sky that has not decided what colour to be.
npx shadcn@latest add https://hyperblur.dev/r/scroll-parallax-layers.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/scroll-parallax-layers.tsx.
import { ScrollParallaxLayers } from "@/components/hyperblur/scroll-parallax-layers"
<ScrollParallaxLayers sceneHeight={420}><h2>Above the treeline</h2></ScrollParallaxLayers>| Prop | Type | Default | Description |
|---|---|---|---|
| scroller | RefObject<HTMLElement | null> | HTMLElement | null | A nested scroll container to follow instead of the window. Ignored when `height` is set. | |
| height | number | string | Renders the component inside its own scroll viewport of this height, useful for cards and embeds. Leave unset to follow the window or `scroller`. | |
| autoplay | boolean | false | Only with `height`. Scrolls the viewport up and down on its own until the visitor scrolls it. Static under reduced motion. |
| sceneHeight | number | string | 320 | Height of the scene. Numbers are pixels. |
| strength | number | 1 | Multiplier for how far the layers travel. Clamped between 0 and 1.3. |
| accent | string | "#ffb26b" | Sun and horizon glow color. |
| before | ReactNode | Content rendered above the scene inside the scroll flow. | |
| after | ReactNode | Content rendered below the scene inside the scroll flow. | |
| children | ReactNode | Overlay centered on top of the scene, such as a headline. |