01 / INTERACTIONPreview
Magnetic Focus
A button with a little gravity. Bounded pointer movement, a soft pool of light, and reliable keyboard and touch behavior.
Open playgroundPreparing the playground…
Preparing the playground…
For interfaces that feel like something. Expressive React components, live controls, and the source to make them yours.
REACT / TYPESCRIPT / SCOPED CSS
Loading LOOP30 clip…
Type that transforms. Color that drifts. An interaction that pulls you closer. Pick a study and find your own expression.
A button with a little gravity. Bounded pointer movement, a soft pool of light, and reliable keyboard and touch behavior.
Open playgroundA moment of beautiful disorder. Characters rearrange into real, accessible text, with deterministic timing and a motion preference fallback.
Open playgroundA spectrum that moves with purpose. Slow color shifts inside selectable text, with adjustable speed and saturation. Pure CSS, no canvas.
Open playgroundThe original character renderer. Source-colored video, Fine density, pointer waves and motion controls.
Open playgroundA delicate fish-bound wake. Manual caudal-fin regions, measured relative motion, and two expressive presets.
Open playgroundA headline gives way to a quiet, rising current. Every fragment begins where the ink ends.
Open playgroundAn edge loses its hold. Small pieces leave the hero, opening a new ground beneath it.
Open playgroundStone, grit and dust follow different paths. A textured mineral study leaves in layers, revealing another surface.
Open playgroundStart with a live preview. See how it responds to your cursor, your text, and your ideas.
Adjust the timing and intensity. Pause, replay, and test with your motion preferences.
Copy the React component and its CSS Module from the playground. Keep the control in your project.
Keep the parts you love. Change everything else. The best thing you build with these effects should look like you.
Find your next detail