Depth Story | Craft | Muhammed Sanjid

Overview

A scene built from layers at different depths. Moving the pointer tilts the scene and shifts each layer by an amount set by its depth, so near layers travel further than far ones, and a soft light follows the pointer. As the page scrolls, layers drift at their own speeds. As the scene arrives, focus pulls from the background to the depth you choose, and layers in front of or behind that depth soften with a gentle blur. On first view the layers rise in from back to front.

Installation

Install dependencies:

$ pnpm add motion

Add the utility function for class merging:

lib/utils.ts

tsx

1import { ClassValue, clsx } from "clsx";2import { twMerge } from "tailwind-merge";3
4export function cn(...inputs: ClassValue[]) {5  return twMerge(clsx(inputs));6}

Copy the component code into your project:

components/ui/depth-story.tsx

tsx

1"use client";2
3import { useRef } from "react";4import type { PointerEvent as ReactPointerEvent, ReactNode } from "react";5import { motion, useMotionTemplate, useMotionValue, useReducedMotion, useScroll, useSpring, useTransform } from "motion/react";6import type { MotionValue } from "motion/react";7import { cn } from "@/lib/utils";8
9export type DepthLayer = {10  id: string;11  content: ReactNode;12  /** 0 is the far background, 1 is closest to the viewer. */13  depth?: number;14  /** @deprecated Pixel speed from the old API; converted to depth. */15  speed?: number;16  className?: string;17};18
19export type DepthStoryProps = {20  layers: DepthLayer[];21  /** CSS height of the scene. */22  height?: string;23  /** Strength of the pointer parallax. */24  intensity?: number;25  /** Layers drift at different speeds as the page scrolls. */26  scroll?: boolean;27  /** Tilt the whole scene toward the pointer. */28  tilt?: boolean;29  /** Pull focus from the back to `focusDepth` as the scene scrolls in; other layers blur. */30  rackFocus?: boolean;31  focusDepth?: number;32  className?: string;33};34
35const POINTER = { stiffness: 120, damping: 20, mass: 0.6 };36
37export function DepthStory({38  layers,39  height = "min(28rem, 72vh)",40  intensity = 1,41  scroll = true,42  tilt = true,43  rackFocus = true,44  focusDepth = 0.5,45  className,46}: DepthStoryProps) {47  const reduce = !!useReducedMotion();48  const root = useRef<HTMLDivElement>(null);49
50  // Pointer, normalised to -1…1 and smoothed.51  const rawX = useMotionValue(0);52  const rawY = useMotionValue(0);53  const px = useSpring(rawX, POINTER);54  const py = useSpring(rawY, POINTER);55
56  // 0 as the scene enters from below, 0.5 centred, 1 as it leaves.57  const { scrollYProgress } = useScroll({ target: root, offset: ["start end", "end start"] });58  const s = useSpring(scrollYProgress, { stiffness: 200, damping: 40 });59  const focus = useTransform(s, [0.12, 0.42], [0, focusDepth], { clamp: true });60
61  const rotateX = useTransform(py, (v) => (tilt ? v * -3.5 : 0));62  const rotateY = useTransform(px, (v) => (tilt ? v * 4.5 : 0));63  const glareX = useTransform(px, (v) => 50 + v * 40);64  const glareY = useTransform(py, (v) => 50 + v * 40);65  const glare = useMotionTemplate`radial-gradient(520px circle at ${glareX}% ${glareY}%, color-mix(in oklch, var(--color-paper) 22%, transparent), transparent 60%)`;66
67  const onMove = (e: ReactPointerEvent<HTMLDivElement>) => {68    if (reduce || e.pointerType !== "mouse" || !root.current) return;69    const r = root.current.getBoundingClientRect();70    rawX.set(((e.clientX - r.left) / r.width - 0.5) * 2);71    rawY.set(((e.clientY - r.top) / r.height - 0.5) * 2);72  };73  const onLeave = () => {74    rawX.set(0);75    rawY.set(0);76  };77
78  return (79    <div80      ref={root}81      onPointerMove={onMove}82      onPointerLeave={onLeave}83      className={cn("relative isolate w-full [perspective:1200px]", className)}84      style={{ height }}85    >86      <motion.div87        style={reduce ? undefined : { rotateX, rotateY }}88        className="relative size-full overflow-hidden rounded-[24px] bg-(--color-paper-2) shadow-[0_0_0_1px_var(--color-rule),0_1px_2px_rgba(0,0,0,0.04),0_24px_60px_-28px_rgba(0,0,0,0.35)]"89      >90        {layers.map((layer, i) => (91          <Layer92            key={layer.id}93            layer={layer}94            index={i}95            px={px}96            py={py}97            s={s}98            focus={focus}99            intensity={intensity}100            scroll={scroll}101            rackFocus={rackFocus}102            reduce={reduce}103          />104        ))}105        {!reduce ? <motion.div aria-hidden className="pointer-events-none absolute inset-0 mix-blend-soft-light" style={{ backgroundImage: glare }} /> : null}106        <div aria-hidden className="pointer-events-none absolute inset-0 rounded-[24px] shadow-[inset_0_1px_0_color-mix(in_oklch,var(--color-paper)_40%,transparent)]" />107      </motion.div>108    </div>109  );110}111
112function Layer({113  layer,114  index,115  px,116  py,117  s,118  focus,119  intensity,120  scroll,121  rackFocus,122  reduce,123}: {124  layer: DepthLayer;125  index: number;126  px: MotionValue<number>;127  py: MotionValue<number>;128  s: MotionValue<number>;129  focus: MotionValue<number>;130  intensity: number;131  scroll: boolean;132  rackFocus: boolean;133  reduce: boolean;134}) {135  const depth = Math.max(0, Math.min(1, layer.depth ?? (layer.speed !== undefined ? layer.speed / 30 : index / 4)));136  // Nearer layers travel further, both with the pointer and with the scroll.137  const x = useTransform(() => px.get() * depth * 26 * intensity);138  const y = useTransform(() => py.get() * depth * 16 * intensity + (scroll ? (s.get() - 0.5) * -depth * 160 : 0));139  const scale = useTransform(() => 1 + depth * 0.05 + (scroll ? (s.get() - 0.5) * depth * 0.1 : 0));140  const filter = useTransform(() => {141    const b = rackFocus ? Math.min(4.5, Math.abs(depth - focus.get()) * 6.5) : 0;142    return b < 0.15 ? "none" : `blur(${b.toFixed(2)}px)`;143  });144
145  return (146    <motion.div147      aria-hidden={layer.content == null || undefined}148      style={reduce ? undefined : { x, y, scale, filter }}149      // Oversized so edges never show while layers drift.150      className="absolute -inset-[8%] will-change-transform"151    >152      <motion.div153        initial={reduce ? false : { opacity: 0, y: 24 * (depth + 0.2) }}154        whileInView={{ opacity: 1, y: 0 }}155        viewport={{ once: true, amount: 0.3 }}156        transition={{ duration: 0.9, ease: [0.23, 1, 0.32, 1], delay: reduce ? 0 : 0.08 + depth * 0.25 }}157        className={cn("absolute inset-[6.9%] flex items-center justify-center", layer.className)}158      >159        {layer.content}160      </motion.div>161    </motion.div>162  );163}

Adjust import paths according to your folder structure.

Basic Usage

tsx

1import { DepthStory } from "@/components/ui/depth-story";2
3<DepthStory4  focusDepth={0.5}5  layers={[6    { id: "sky", depth: 0, content: <Sky /> },7    { id: "hills", depth: 0.3, content: <Hills /> },8    { id: "title", depth: 0.5, content: <Title /> },9    { id: "foreground", depth: 0.9, content: <Foreground /> },10  ]}11/>

Props

Prop	Type	Required	Default	Description
layers	{ id, content, depth?, className? }[]	Yes	—	Back to front. depth runs from 0 (far) to 1 (near).
height	string	No	"min(28rem, 72vh)"	CSS height of the scene.
intensity	number	No	1	Strength of the pointer parallax.
scroll	boolean	No	true	Layers drift at different speeds as the page scrolls.
tilt	boolean	No	true	Tilt the scene toward the pointer.
rackFocus	boolean	No	true	Pull focus from the back to focusDepth as the scene scrolls in.
focusDepth	number	No	0.5	Depth that ends up sharp. Put your text layer here.
className	string	No	—	Classes for the wrapper.

Best Practices

Three to six layers is plenty. Give each a clearly different depth so the motion reads.
Put text on the focusDepth layer so it is always the sharpest thing in the scene.
Layers are drawn about 16% larger than the frame so their edges never show; keep important content away from the outer edges.
Pointer effects only run with a mouse. Touch still gets the scroll drift, and reduced motion shows a still, sharp scene.