Paper Layers Scene

Stack 3 to 5 torn-edge paper sheets from back to front into a single scene: each sheet has its own colour, an irregular torn edge generated deterministically from a seed, a soft paper shadow that follows the torn shape, and optional paper-fibre grain. As the page scrolls or the cursor moves, sheets closer to the front shift further, giving a layered cut-paper parallax. Each layer can hold your own SVG drawings or text, and the top-most children slot is a normally readable heading area — a good fit for storytelling heroes and editorial layouts.

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

<PaperLayersScene/>

    </div>
  );
}

Installation

npx webberui@latest add https://webberui.com/r/paper-layers-scene.en.json

Usage

import { PaperLayersScene } from "@/components/ui/paper-layers-scene";

<PaperLayersScene
  mode="both"
  layers={[
    { id: "far", color: "#efe7da", height: "74%" },
    { id: "mid", color: "#e2d4bd", height: "56%" },
    { id: "near", color: "#c2ab8a", height: "36%", tornEdge: "both" },
    { id: "front", color: "#97805c", height: "18%", content: <MyGrassSvg /> },
  ]}
>
  <h2 className="pt-10 text-center text-3xl font-semibold">A Slow Reading Weekend</h2>
</PaperLayersScene>

Inside a nested scroll container

By default the component tracks window scroll. When it sits inside a fixed-height overflow-y-auto container, pass that container's ref to container. When mode includes scroll, the layer parallax follows how far the scene has scrolled inside the container.

const scrollerRef = React.useRef<HTMLDivElement>(null);

<div ref={scrollerRef} className="h-[400px] overflow-y-auto">
  <PaperLayersScene container={scrollerRef} />
</div>

When the window itself is the scroll container, container can be omitted and behavior is unchanged.

Props

PaperLayer

How it works

• The torn edge is a clip-path: polygon(...): a deterministic RNG seeded by seed and the layer index places 24 to 48 points along the edge, mixing a low-frequency undulation with small high-frequency jitter. No Math.random, so the shape matches between SSR and the client.
• The shadow is two stacked drop-shadows on the outer element while the clip-path sits on the inner one, so the shadow follows the torn shape. Override the whole shadow string with the --wb-paper-layers-shadow CSS variable.
• Scroll parallax tracks the scene itself with useScroll: layers rest at zero when the scene is centred in the viewport, and near layers rise faster than far ones as you scroll down.
• Cursor parallax uses the scene centre as its origin and is spring-smoothed; when the cursor leaves, layers ease back to centre over --wb-paper-layers-ease-duration (default 600ms).
• Every sheet bleeds past the scene on the left, right and bottom, so even large offsets never reveal a sheet's edge.

Accessibility

• All paper layers are decorative and the whole group is aria-hidden; headings and text in children are unaffected and read normally by screen readers
• Touch devices (no hover, coarse pointer) automatically disable cursor parallax and keep only scroll parallax
• When the system "Reduce motion" setting is on, all sheets stay still while keeping the paper texture, torn edges and shadows