Scroll Depth Layers
A parallax scene where every layer derives from one shared scroll source.
- Category
- Animations
- Added
- 2026-09-20
- Deps
- 1
- Updated
- 2026-09-20
This is a viberdy Pro component
The live preview, the props panel and the write-up are open to everyone. The full source, the AI prompt and CLI install are part of Pro.
Props
"use client";
import { createContext, useContext, useRef, type ReactNode } from "react";
import { motion, useScroll, useTransform, type MotionValue } from "framer-motion";
const DepthContext = createContext<{
progress: MotionValue<number>;
intensity: number;
} | null>(null);
export function ScrollDepthScene({
children,
intensity = 1,
fadeEdges = true,
showLabel = true,
label = "Depth layers",
}: {
children: ReactNode;
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}About this animation
Scroll parallax is usually assembled per element: every layer calls `useScroll` itself and computes its own transform. It works until the page is under load, at which point several observers watching the same element can report on different frames and the layers visibly slip out of register. Creating one scroll source for the scene and sharing it through context removes that class of bug entirely — all layers are derived from the same value, so they are synchronised by construction rather than by luck. Tying that source to the section's own passage through the viewport, via the start-end to end-start offset, is what makes the component portable: drop it anywhere on a page and the timing is identical, with no magic numbers to retune when a section moves. Depth is signed so negative layers move against the scroll and positive ones with it, which is the relationship that produces recession rather than a uniform drift. As with any Framer scroll composition, each layer has to be its own component, because `useTransform` cannot be called inside a map callback once the list length can vary.
Curator’s note
Built for viberdy 2.1 as the scroll counterpart to Pointer Parallax Scene. One observer, many derived layers.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Pointer Parallax Scene
animationsA depth system where layers separate under the pointer from one shared motion source.
Scroll Velocity Skew
animationsSkews its content based on how fast the page is being scrolled, relaxing back to flat at rest.
Line Mask Reveal
animationsReveals text one line at a time, each sliding up from behind its own clipping mask.