ComponentsScroll
Depth layers
Outline copies drift apart in depth as you scroll.
Scroll inside the preview ↓
Installation
$ npx shadcn@latest add @textlab/depth-layersNeeds @textlab in your components.json. Setup takes a minute.
Usage
usage.tsx
import { DepthLayers } from "@/components/textlab/depth-layers/depth-layers";
<DepthLayers as="h2" text="Parallax" layers={6} />Variants
stackfanProps
| Prop | Type | Default | Description |
|---|---|---|---|
| text* | string | – | The copy. |
| variant | "stack" | "fan" | "stack" | Separate vertically like layered prints, or fan open around a corner. |
| layers | number | 5 | Outline copies behind the solid one. |
| spread | number | 0.12em (stack), 4° (fan) | Largest gap between neighbouring copies. |
| container | RefObject<HTMLElement> | – | Scrollable ancestor. Defaults to the window. |
| as | ElementType | "span" | Rendered element. |
| reducedMotion | "user" | "always" | "never" | "user" | user follows the OS setting; always shows the still version. |
| className | string | – | Merged onto the root. |
When to use it
Reach for it
- Big, bold section titles on scroll-led pages.
- Posters and editorial covers.
Skip it
- Thin or small type; outlines disappear.
- Tight layouts; layers extend below the text.
Accessibility and motion
Accessibility
- Copies are aria-hidden; the title is read once.
- The solid copy never moves, so the title stays readable.
Motion
- Widest at the middle of the viewport, closed at the edges.
- A spring smooths scroll jitter.
Reduced motion. Only the solid title, no layers.
Performance
- N transformed copies; transform and opacity only.