Power-User Systems
Weave
A sheet of cloth on a position-based solver — particles and distance constraints relaxed to convergence every fixed step, with no forces, no rotations and no contacts. Drag it, load it, and pull until the constraints fail and the tear runs. Every quad is shaded by its own extension against the tear threshold, so the load path through the sheet is visible long before anything breaks.
Install
# Weave needs no npm packagesThen copy 2 files into your project:
- components/registry/weave/weave.tsx
- hooks/use-animation-loop.ts
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| cols | number | 26 | Particles across the sheet. Constraint count grows as roughly twice cols times rows and every one is visited on every relaxation pass, so this and rows together are the honest cost dial. |
| rows | number | 18 | Particles down the sheet. Taller than it is wide is what makes the drape read as fabric; a square grid hangs like a banner and never folds. |
| iterations | number | 6 | Relaxation passes over the constraint list per fixed step. Position-based dynamics has no exact solve — it converges, and this is how far it gets. One pass is rubber, six is linen, and past ten you are paying for a stiffness you cannot see. |
| gravity | number | 9.8 | Uniform downward acceleration. Zero leaves the sheet floating so wind alone drives it, which is the clearest way to watch a strain wave cross the mesh. |
| wind | number | 4.2 | Lateral forcing, applied with a travelling phase rather than uniformly — a uniform push only translates the sheet and never ripples it. |
| stiffness | number | 0.9 | Fraction of each constraint's length error corrected per pass. One with enough passes is inextensible canvas; low values are jersey that stretches under its own weight. It trades against iterations almost multiplicatively — halving one and doubling the other lands in nearly the same place. |
| damping | number | 0.02 | Velocity bled off per step. Verlet carries velocity implicitly in the gap between the current and previous position, so this scales that gap rather than a stored vector — which is why it reads as air resistance and not as friction. |
| tearThreshold | number | 1.9 | Extension at which a constraint fails, as a multiple of its rest length. Evaluated after all relaxation passes, never during them: strain measured mid-solve is an artefact of the sweep order, and tearing on it produces failures that follow the constraint list rather than the load. Above about four nothing tears at any wind you can set. |
| pinMode | "top-row" | "corners" | "top-and-bottom" | "free" | "corners" | Which particles are held. Corners is the one worth pulling on — the load concentrates into two diagonals you can see in the strain field long before anything tears. Free drops the whole sheet, and is the honest demonstration that none of this is keyframed. |
| shading | "strain" | "wireframe" | "solid" | "strain" | How each quad is filled. Strain shades it by the extension of its own four edges, which is the point of the component: the load path through a hanging sheet is invisible in a wireframe and obvious the moment it is coloured. |
| tint | string (hex) | "#a855f7" | The cloth at rest — zero strain. Also the anchors and the ring on a held particle. |
| strainColor | string (hex) | "#f87171" | The far end of the strain ramp, reached exactly at the tear threshold — so a quad going fully hot is a prediction rather than a decoration. |
What It Demonstrates
- Drag
- Moving an element by grabbing it, often with momentum when released.
- Stiffness / Tension
- How strongly the spring pulls toward its target. Higher feels snappier.
- Damping
- How quickly a spring settles. Lower damping means more bounce and oscillation.
- Velocity
- How fast and in which direction an element is moving. A spring carries it into the next animation when interrupted, so a flicked element keeps its speed.
- Momentum
- Motion that carries velocity, especially after a drag or interruption.
- Frame rate (FPS)
- Frames drawn per second. 60fps is the baseline for smooth motion; 120fps on newer displays.
Related Components
Physics Engine
A from-scratch 2D rigid-body physics lab — fixed-timestep impulse solver, drag-to-throw bodies, force and velocity overlays, and a live energy readout on a blueprint grid.
Rotunda
Real HTML panels on a drag-spun 3D cylinder. A hand-rolled perspective projection written onto DOM elements rather than a canvas — so the text stays selectable, the links stay clickable, and a screen reader still reads every panel while the ring turns.
Infinite Canvas
A pannable, zoomable infinite board holding real DOM cards — one world element under a single translate-and-scale, so focus survives and nothing ever remounts when the camera moves. Drag the background to pan with inertia; the wheel zooms to the cursor by holding the world point under it fixed; cards drag independently and glide onto the grid on release; the corner minimap mirrors the extent and jumps the camera where you click. Camera state lives in one ref written by handlers and the loop, and every consumer — world transform, backdrop plane, minimap — derives from it in a single write pass per frame, so React never renders a camera frame. Arrow keys pan and plus and minus zoom when the board holds focus.
Black Hole
A real-time Schwarzschild black hole raytraced per-pixel in a WebGL2 shader — null geodesics bend a lensed accretion disk over the event horizon, with Doppler beaming, gravitational redshift, a photon ring, and a lensed starfield, all under a cinematic orbit.
Ascii Engine
A lit, raymarched 3D solid rendered at exactly one pixel per character cell, then quantised into a glyph ramp drawn once with fillText. Drag to orbit it through a full three-sixty. Real geometry underneath, terminal on top — and no scene graph, no mesh, and no second library to get there.
Vortex Bloom
A molten-gold-and-obsidian vortex funnel spiraling into a luminous SDF core — lotus, gem, or flame — raymarched per-pixel in a WebGL2 shader, with a GPU dust field spiraling down the flow toward the throat, all under a draggable orbit and a real two-pass bloom.