Components — Saumya UI

0 dots · bouncy

Move across the text.

The dots keep reacting under solid content. Swipe fast and they get thrown further than the same path taken slowly. Click for a shockwave.

Stiffness · 90

Damping · 9

Cursor drag · 0.9

Critical damping is 2·√stiffness — about 19 here. Below it the dots overshoot and ring; above it they crawl home. Drop drag to 0 and the field stops caring how fast you move, which is how a lerped grid always behaves.

Magnetic Dots

A dot grid backdrop driven by a real spring, not a lerp. Dots carry velocity, so they get flung past their rest position and ring back — and the field reads how fast you move, not just where you are: a swipe throws dots further than the same path taken slowly. Click for an expanding shockwave. The canvas is pointer-transparent and listeners bind to the container, so it keeps reacting under headlines and buttons. Fixed 1/120s sub-stepping keeps the spring stable and frame-rate independent; the dirty rect bounds the cost to the influence radius.

Move across the field — or drag, on touch. React never re-renders while it moves.

Falloff

Damping · 18

Slabs · 15

Damping under ~10 overshoots and wobbles; over ~30 it goes syrupy. The default is 18 — the difference between those numbers is the entire feel of the component.

Iso Momentum

An isometric slab field where every slab's height tracks pointer proximity and springs independently. The pointer flows through a motion value into each slab's path `d` string at 60fps — no React state, no re-renders while it moves. Pointer events, so it works under touch and pen, not just a mouse.

motion valuesseamless wrapscroll velocityexponential decayzero re-renders

Scroll me — fast, slow, and backwards

01 Flick down and the strip accelerates left and shears with it. Flick up hard enough and it crosses zero and runs the other way. Let go and it coasts back to the base drift instead of stopping dead — that easing is the whole point.

02 Flick down and the strip accelerates left and shears with it. Flick up hard enough and it crosses zero and runs the other way. Let go and it coasts back to the base drift instead of stopping dead — that easing is the whole point.

03 Flick down and the strip accelerates left and shears with it. Flick up hard enough and it crosses zero and runs the other way. Let go and it coasts back to the base drift instead of stopping dead — that easing is the whole point.

04 Flick down and the strip accelerates left and shears with it. Flick up hard enough and it crosses zero and runs the other way. Let go and it coasts back to the base drift instead of stopping dead — that easing is the whole point.

05 Flick down and the strip accelerates left and shears with it. Flick up hard enough and it crosses zero and runs the other way. Let go and it coasts back to the base drift instead of stopping dead — that easing is the whole point.

06 Flick down and the strip accelerates left and shears with it. Flick up hard enough and it crosses zero and runs the other way. Let go and it coasts back to the base drift instead of stopping dead — that easing is the whole point.

07 Flick down and the strip accelerates left and shears with it. Flick up hard enough and it crosses zero and runs the other way. Let go and it coasts back to the base drift instead of stopping dead — that easing is the whole point.

08 Flick down and the strip accelerates left and shears with it. Flick up hard enough and it crosses zero and runs the other way. Let go and it coasts back to the base drift instead of stopping dead — that easing is the whole point.

09 Flick down and the strip accelerates left and shears with it. Flick up hard enough and it crosses zero and runs the other way. Let go and it coasts back to the base drift instead of stopping dead — that easing is the whole point.

10 Flick down and the strip accelerates left and shears with it. Flick up hard enough and it crosses zero and runs the other way. Let go and it coasts back to the base drift instead of stopping dead — that easing is the whole point.

11 Flick down and the strip accelerates left and shears with it. Flick up hard enough and it crosses zero and runs the other way. Let go and it coasts back to the base drift instead of stopping dead — that easing is the whole point.

12 Flick down and the strip accelerates left and shears with it. Flick up hard enough and it crosses zero and runs the other way. Let go and it coasts back to the base drift instead of stopping dead — that easing is the whole point.

13 Flick down and the strip accelerates left and shears with it. Flick up hard enough and it crosses zero and runs the other way. Let go and it coasts back to the base drift instead of stopping dead — that easing is the whole point.

14 Flick down and the strip accelerates left and shears with it. Flick up hard enough and it crosses zero and runs the other way. Let go and it coasts back to the base drift instead of stopping dead — that easing is the whole point.

Decay · 0.35s

Coupling · 1.2

Skew · 6°

Playback

Drop decay to 0.05s and the strip snaps to a halt the instant you stop — that is exactly the broken-feeling version. 0.35s is the default.

Velocity Marquee

An infinite strip whose speed and skew couple to scroll velocity — it accelerates as you scroll, reverses when you scroll back, and eases to a base drift when you stop. The wrap is a modulo on a measured content width (seamless in both directions, no CSS-animation restart), and the velocity is smoothed by an exponential moving average so it coasts instead of snapping.

Type that answers the cursor.

Every glyph measures its own distance from the pointer, springs independently, and resolves to a font-variation-settings string. The boxes are pinned to their resting widths, so nothing reflows and no cached centre ever goes stale — the letters swell in place instead of shoving each other along the line.

Move across the text — zero React re-renders

Radius · 120px

Peak wght · 800

Stiffness · 280

Push peak weight to 900 and drag across a word: the line holds its wrapping exactly. Without the pinned boxes, that is the setting where it starts to jitter and re-wrap under the cursor.

Kinetic Type

Per-glyph variable-font response to pointer proximity — axes swell near the cursor and relax away from it, continuously and reversibly. Glyph boxes are pinned to their resting widths so animating `wght` can't shift neighbours, stale the cached centres, or re-wrap the line; centres are measured once and only re-read on resize or font swap. The accessibility tree reads one clean string.

External motion value

Scrub slowly through the middle — no crossings, no knots.

Spring · both directions

Click repeatedly — it reverses cleanly from wherever it is.

3 subpaths → 2 · the middle line collapses into the X

Morph Icon

True SVG path interpolation between two icons — not a cross-fade. Ships its own path normalizer with no dependency: a cursor-based parser (correct on packed arc flags, where a number regex silently fails), every command reduced to cubics including the full endpoint→centre arc conversion, equal-arc-length resampling, and a rotation/direction search that minimises total travel so the morph never ties itself in a knot. Multiple subpaths are paired by centroid, and an unmatched one collapses into its nearest counterpart.

Range

Easing

Effect

native if available

Panel 1