Scree
A paragraph that holds its typographic line until triggered, then every word becomes a matter-js rigid body that drops, tumbles, collides, and piles at the floor — grab a fallen word and fling it. Highlight words carry the lone accent and settle atop the neutral heap.
canvaspro
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/screeManual — install dependencies, then copy the source
npm install matter-jsProps
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | a short line | The body text. Every word becomes a falling rigid body. |
| highlightWords | string[] | [] | Words rendered in the accent color — they settle atop the neutral pile. Matched case-insensitively, ignoring surrounding punctuation. |
| accent | string | warm amber | The single accent hue reserved for {@link highlightWords}. |
| wordColor | string | near-white | Color of the ordinary words. |
| trigger | ScreeTrigger | "hover" | What fires the collapse. |
| gravity | number | 1 | Gravity strength — higher drops faster/heavier. |
| speed | number | 1 | Simulation-rate multiplier (matter timeScale). |
| restitution | number | 0.24 | Bounciness of the words (0 = dead, ~0.6 = lively). |
| mouseStiffness | number | 0.2 | Grab strength of the pointer constraint when flinging a word. |
| fontSize | number | 22 | Word font size in px. |
| wordSpacing | number | 6 | Extra horizontal/vertical spacing between words in px. |
| resetOnLeave | boolean | true | For the hover and scroll triggers: rebuild the paragraph when the pointer leaves / the block scrolls away, so the effect replays. |
| paused | boolean | false | Freeze the simulation in place. |
| seed | number | 7 | Deterministic seed for tumble bias + the settling shuffle. |
Also accepts all props of Omit<React.ComponentPropsWithoutRef<"div">, "children" | "color"> — they pass through to the underlying element. | |||
Honors prefers-reduced-motion with a designed static fallback, pauses offscreen and on hidden tabs, and passes className through.