Trellis
A perspective-tilted wireframe sheet running a real wave simulation: pointer movement lays a wake of circular ripples that propagate outward, visibly interfere where wakes cross, and reflect off the edges; clicks drop a heavier stone, and a soft seeded rain keeps the sheet alive when idle. Wave slope bends the graphite wires and wave height lights the crests emerald with a bright-core-plus-halo glow. CPU wave grid streamed to the GPU each frame, fixed-timestep and frame-rate independent, DPR-clamped, offscreen-paused; reduced motion renders two frozen interfering ripples.
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/trellisManual — install dependencies, then copy the source
npm install oglProps
| Prop | Type | Default | Description |
|---|---|---|---|
| divisions | number | 24 | Grid lines across the sheet. Higher = finer weave. Clamped 4–80. |
| tilt | number | 0.5 | Perspective lean of the sheet, 0–1. 0 lies flat facing the viewer; 1 tips hard away at the top with strong foreshortening and depth fade. |
| waveSpeed | number | 1 | Propagation speed of ripples across the sheet, 0.1–1.5. This is real wave speed — higher values race the wavefronts outward. |
| damping | number | 0.4 | How quickly ripples die out, 0–1. Low values let wakes cross the whole sheet and reflect off the edges; high values swallow them near the source. |
| idleRain | number | 1 | Idle rain: average tiny seeded ripples per second that keep the sheet alive when nobody is interacting. 0 disables. Clamped ≤8. |
| colors | [string, string] | graphite + emerald (#34d399) | [line, crest] — graphite wire color and the glow that lights the crests. |
| interactive | boolean | true | Pointer wake + click stones. Waves and rain continue when false. |
| speed | number | 1 | Global clock multiplier for the simulation and idle breathing. |
| intensity | number | 1 | Response strength, 0–2: line bend, crest brightness and bloom. |
| paused | boolean | Freeze the render loop, holding the current frame. | |
Also accepts all props of React.ComponentPropsWithoutRef<"div"> — 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.