Rolling Mill
A scroll-scrubbed container rotator with a beveled slab face: a gunmetal plate starts tilted back in 3D perspective and rotates flat while scaling up as it scrolls through the viewport, header text traveling in coordinated motion, cool white edge-light glowing at max tilt and dimming upright, and a neutral reflection band sliding down the plate face with the angle.
motionpro
Pro
The preview is live. The source is Pro.
One purchase, lifetime access: every pro component's source, CLI install with your own registry token, and all future drops.
Installation
CLI
npx shadcn@latest add @crucible/rolling-millManual — install dependencies, then copy the source
npm install motionProps
| Prop | Type | Default | Description |
|---|---|---|---|
| title | React.ReactNode | Header content that travels in coordinated motion above the plate. | |
| children | React.ReactNode | a stat sheet | Content rendered on the plate face. |
| tilt | number | 24 | Backward tilt in degrees at the start of the scroll. |
| scale | [number, number] | [0.94, 1.05] | [from, to] scale of the plate across the scroll. |
| scrollContainer | React.RefObject<HTMLElement | null> | Scroll container to track instead of the window. Pass a ref to an internal overflow-y-auto element (this component's own demo does). | |
| heat | number | 0.85 | 0–1: strength of the edge-light and the reflection band. |
| colors | [string, string] | [edgeLight, sheen] — the bright edge color and the counter-sheen it dims toward. | |
Also accepts all props of Omit<React.ComponentPropsWithoutRef<"section">, "title"> — they pass through to the underlying element. | |||
Honors prefers-reduced-motion with a designed static fallback, and passes className through.