Power-User Systems

Parallax Rail

A pinned section where scrolling down drives content sideways across depth planes moving at different rates.

Cook BookParallax Scroll-driven animation Translate Orchestration Mask Compositing

Controls

planes3

travel1.0 ×

depthSpread0.45

damping30

fadeEdges0.12

railGap24 px

Install

bun add motion clsx tailwind-merge

Then copy 2 files into your project:

components/registry/parallax-rail/parallax-rail.tsx
lib/utils.ts

Props

Prop	Type	Default	Description
planes	number	3	How many depth planes to render.
travel	number	1	Multiplier on the front rail's travel across the pin.
depthSpread	number	0.45	How much slower the backmost plane moves than the front.
damping	number	30	Spring damping on the scrub — higher tracks scroll exactly.
fadeEdges	number	0.12	Width of the soft mask at each rail edge.
railGap	number	24	Vertical gap between planes.

What It Demonstrates

Parallax: Background and foreground move at different speeds while scrolling, creating depth.
Scroll-driven animation: An animation whose progress is tied directly to scroll position.
Translate: Move an element along the X or Y axis.
Orchestration: Deliberately timing multiple animations so they feel like one coordinated motion.
Mask: Hiding or revealing parts of an element using a shape or gradient — like clip-path, but with soft, fadeable edges.
Compositing: Letting the GPU move or fade an element on its own layer without redoing layout or paint.

Related Components

Appears In

"use client"; import { useEffect, useRef, useState, type ReactNode, type RefObject } from "react"; import { motion, useScroll, useSpring, useTransform } from "motion/react"; import { cn } from "@/lib/utils"; export interface ParallaxRailProps { layers?: ReactNode[]; className?: string; planes?: number; travel?: number; depthSpread?: number; damping?: number; fadeEdges?: number; railGap?: number; pinHeight?: string; scrollContainerRef?: RefObject<HTMLElement | null>; reducedMotion?: boolean; } export default function ParallaxRail({ layers = [], className, planes = 3, travel = 1, depthSpread = 0.45, damping = 30, fadeEdges = 0.12, railGap = 24, pinHeight, scrollContainerRef, reducedMotion = false, }: ParallaxRailProps) { const trackRef = useRef<HTMLDivElement>(null); const portRef = useRef<HTMLDivElement>(null); const railRef = useRef<HTMLDivElement>(null); const [overflow, setOverflow] = useState(0); const [measuredPin, setMeasuredPin] = useState<number | null>(null); useEffect(() => { const port = portRef.current; const rail = railRef.current; const scroller = scrollContainerRef?.current ?? null; if (!port || !rail) return; const measure = () => { setOverflow(Math.max(0, rail.scrollWidth - port.clientWidth)); setMeasuredPin(scroller ? scroller.clientHeight : null); }; const observer = new ResizeObserver(measure); observer.observe(port); observer.observe(rail); if (scroller) observer.observe(scroller); measure(); return () => observer.disconnect(); }, [scrollContainerRef, planes]); const { scrollYProgress } = useScroll({ target: trackRef, ...(scrollContainerRef ? { container: scrollContainerRef } : {}), offset: ["start start", "end end"], }); const smooth = useSpring(scrollYProgress, { damping, stiffness: 220, restDelta: 0.0005, }); const visible = layers.slice(0, Math.max(1, planes)); const depth = Math.max(1, visible.length - 1); const mask = `linear-gradient(to right, transparent, #000 ${(fadeEdges * 100).toFixed(1)}%, #000 ${(100 - fadeEdges * 100).toFixed(1)}%, transparent)`; return ( <div ref={trackRef} className={cn("relative", className)}> <div ref={portRef} className="sticky top-0 flex flex-col justify-center overflow-hidden" style={{ height: measuredPin ? `${measuredPin}px` : (pinHeight ?? "100svh"), gap: `${railGap}px`, ...(fadeEdges > 0 ? { maskImage: mask, WebkitMaskImage: mask } : {}), }} > {visible.map((layer, i) => ( <Plane key={i} progress={smooth} factor={1 - depthSpread * ((visible.length - 1 - i) / depth)} overflow={overflow} travel={travel} still={reducedMotion} innerRef={i === visible.length - 1 ? railRef : undefined} > {layer} </Plane> ))} </div> </div> ); } function Plane({ children, progress, factor, overflow, travel, still, innerRef, }: { children: ReactNode; progress: ReturnType<typeof useSpring>; factor: number; overflow: number; travel: number; still: boolean; innerRef?: RefObject<HTMLDivElement | null>; }) { const x = useTransform(progress, [0, 1], [0, -overflow * travel * factor]); return ( <motion.div ref={innerRef} className="flex w-max shrink-0 items-center will-change-transform" style={still ? undefined : { x }} > {children} </motion.div> ); }

Parallax Rail

Controls

Install

Props

What It Demonstrates

Related Components

Mirage

Ascii Engine

Submerge

MasonryPro

Command Palette

Physics Engine

Appears In

Controls