EFFECTS,EARNED.

[ 01 ]Magnetic

<Magnetic />

↳ children attract toward the cursor inside a radius, lerped, and spring back on leave. for buttons and chips that want to be pressed.

[ 02 ]Text scramble

<TextScramble />

↳ glyph-cycling decode-in on viewport enter. characters resolve left to right out of mono noise — ▌▞#01.

[ 03 ]Char stagger

<CharStagger />

↳ per-character y/rotate masked reveal on enter. the darkroom signature, one glyph at a time — built for headings.

[ 04 ]Image trail

<ImageTrail />

↳ cursor motion spawns a trail of mono tiles that pop, drift, and fade. capped at 12 live nodes; each tile removes itself.

[ 05 ]Marquee skew

<MarqueeSkew />

↳ an infinite strip that skews up to ±4deg with scroll velocity, lerping back to zero when the page settles. scroll fast past it.

[ 06 ]Tilt card

<TiltCard />

↳ 3d perspective tilt that follows the cursor, plus a volt glare sheen tracking across the surface. for spec cards.

[ 07 ]Counter scrub

<CounterScrub />

↳ a big tabular number scrubbed by scroll progress between from and to. scrub the page up and down to drive it.

[ 08 ]Text loop

<TextLoop />

↳ vertical word rotator — masked slide, pause, next. loops seamlessly via a clone of the first word.

[ 09 ]Ripple button

<RippleButton />

↳ emits a volt ripple ring from the exact click point. rings remove themselves when the animation ends.

[ 10 ]Drag strip

<DragStrip />

↳ horizontally draggable strip — pointer events plus inertia — with a volt scrollbar indicator below. eight lanes, in sequence.

[ 11 ]Spotlight list

<SpotlightList />

↳ index rows where a soft volt radial follows the cursor inside the hovered row. hover and move slowly.

[ 12 ]Parallax layers

<ParallaxLayers />

↳ children drift at their own scroll rates via data-speed, scrubbed by gsap. negative speeds move against the page.

[ 13 ]Flip clock

<FlipClock />

↳ retro split-flap digits — css 3d half-flaps — ticking live bengaluru time. the hq stamp, mechanized.

[ 14 ]Typewriter

<Typewriter />

↳ types and deletes an array of phrases with a blinking volt caret block. the thesis, keyed in live.

[ 15 ]Glitch hover

<GlitchHover />

↳ channel-split jitter on hover via ::before/::after copies of data-text. brief, sharp, then perfectly still.

[ 16 ]Progress dial

<ProgressDial />

↳ a small svg dial filled by the scroll progress of a target section id — here, this entire page. almost done.

[ 17 ]Axis field

<AxisField />

↳ every glyph is a particle — weight runs 400→900 with cursor proximity while a damped spring pulls each char up to 6px toward the pointer.

[ 18 ]Slant accel

<SlantAccel />

↳ scroll velocity leans the type up to ±10deg (skewX — satoshi has no slnt axis) while weight relaxes 700→500. scroll hard past this.

[ 19 ]Shadow cast

<ShadowCast />

↳ the cursor is a light source — the type's shadow falls away from it, offset and blur scaling with distance. on phones, opt-in tilt drives the light.

[ 20 ]Proximity scale

<ProximityScale />

↳ five cells where flex-grow follows cursor proximity 1→2.2 — neighbors shrink via flexbox and a second line earns its reveal past 1.8.

[ 21 ]Scramble matrix

<ScrambleMatrix />

↳ binary and katakana rain falls inside the text's bounding box at 20fps while the real string condenses out of the noise, left to right, in 1.2s.

[ 22 ]Stencil cursor

<StencilCursor />

↳ an 80px disc in mix-blend-difference that inverts everything it crosses. off by default — flip the switch and sweep the page.

[ 23 ]Verlet chain

<VerletChain />

↳ three hanging chains — 12 verlet points each, two constraint passes per frame. drag a bottom node past 180px of stretch and the latch fires.

[ 24 ]Cloth

<Cloth />

↳ a 14×10 verlet grid pinned along its top row, drawn as a canvas wireframe. move the cursor through it — the wind is you.

[ 25 ]Thermal trail

<ThermalTrail />

↳ the cursor leaves heat — stamps accumulate in a low-res field, decay 4% a frame, and render through a token colormap: cold is dim, hot is volt.

[ 26 ]Melt

<Melt />

↳ leave this section alone for 8 seconds and the headline liquefies into 6px blocks that pool at the floor. any input restores it instantly.

[ 27 ]Noise scrape

<NoiseScrape />

↳ the metrics are under the static — drag to scrape it away (36px brush, destination-out). six idle seconds and the noise heals over.

[ 28 ]Slit scan

<SlitScan />

↳ a 24-frame rolling buffer re-rendered in bands, each band sampling a different moment — time smeared across space. cursor speed widens the spread.

[ 29 ]Ascii video

<AsciiVideo />

↳ a drifting particle field sampled at 12px cells and re-drawn as brightness-mapped glyphs — ' .:-=+*#@' — at a deliberate 15fps. toggle to compare.

[ 30 ]Voronoi shatter

<VoronoiShatter />

↳ the plate is pre-cut into 24 polygon shards (a jittered grid, computed once). hover pushes each shard away from the cursor; leave and it reassembles.

[ 31 ]Stroke inflate

<StrokeInflate />

↳ a divider that breathes — eight svg segments inflate 1→6px with cursor proximity while the parent's padding eases so neighbors feel the push.

[ 32 ]Topology warp

<TopologyWarp />

↳ layout as a surface — the hovered panel bulges forward in perspective while its siblings recede and lean away. keyboard focus gets the same physics.

[ 33 ]Dimension fold

<DimensionFold />

↳ a 320×200 card hiding 1200px — click and a clip-path aperture unfolds a pannable strip of the six world scenes. esc folds it shut.

[ 34 ]Zoom fold

<ZoomFold />

↳ a camera move built from type — the wordmark blows up ~30× and the next panel enters through an expanding circle cut from the counter of the D.

[ 35 ]Subpixel fringe

<SubpixelFringe />

↳ type that misregisters under speed — feDisplacementMap roughs the edges with scroll velocity while volt and ink clones drift apart by fractions of a pixel.

[ 36 ]RGB tear

<RgbTear />

↳ whip the cursor across the card and it tears into volt and ink plates along the velocity vector, springing back to register when you rest.

[ 37 ]Infinite canvas

<InfiniteCanvas />

↳ a 2d pannable map of the estate — drag with inertia (v·0.92 decay), wheel pans, arrow keys walk, and soft bounds spring you back at the edges.

[ 38 ]Fluid ink

<FluidInk />

↳ single-pass curl-noise advection in a 256² ping-pong shader — the cursor injects dye and velocity, the field swirls it into volt ink. webgl, with a canvas fallback.

[ 39 ]Glass refract

<GlassRefract />

↳ a physical-glass panel — transmission 1, ior 1.4 — slowly turning over drifting token stripes. the refraction is real, computed, and free of stock footage.

[ 40 ]WebGPU field

<WebGPUField />

↳ 4096 points advected by a sine field in a wgsl compute shader, rendered additively. feature-detected — browsers without navigator.gpu get the canvas flow field.

[ 41 ]Synth kit

<synth.ts />

↳ no audio files anywhere — a click is a 1200hz triangle with an 80ms envelope, a whoosh is filtered noise. everything is gated on the footer sound flag, default off.

[ 42 ]Doppler strip

<DopplerStrip />

↳ five stations in a stereo field — sweeping across them fires panned whooshes, pitch rising with cursor speed. spatial audio from a pannernode, nothing recorded.

[ 43 ]Granular scrub

<GranularScrub />

↳ a 2s offline-rendered tone sliced into 80ms hann grains by an inline audioworklet (blob url). cursor x scrubs position; speed sets grain density. opt-in, twice.

[ 44 ]Mic voxelizer

<MicVoxelizer />

↳ a 16×8 lattice scaled by 64 analyser bins. the mic is never auto-requested — explicit button, audio stays in the tab, and a synth drives it if you decline.

[ 45 ]Haptic typing

<HapticTyping />

↳ each keystroke fires an 8ms vibration burst plus the synth tick — the same engine that gives the contact, help, and sales forms their [12·40·12] success pattern.