Particle text
Three thousand-odd particles seeded at random positions, eased into letterforms sampled from an offscreen 2D canvas. Mouse repels within 70px. Click explodes outward, particles return on a quadratic ease.
The lab
Things
we’ve built.
Twenty interaction, animation and WebGL experiments — particles, shaders, spring physics, raw canvas. Hover, drag, click — every demo is opt-in interactive.
Cursor velocity grid
A 22 × 14 grid of dots, each spring-coupled to its home position. Cursor proximity pushes outward; cursor velocity adds tail. Each dot scales by current input speed.
01Capture
Every channel a customer might use — WhatsApp, SMS, missed call, web form.
drag02Qualify
Asks the questions the business actually wants asked, in the right tone.
drag03Book
Offers slots from a calendar your team already runs. No double-handling.
drag04Follow up
Nudges at the intervals you set. Pulls reviews at peak goodwill.
dragDrag-stack with spring return
Four cards stacked with rotational offset. Pointer-capture for grab, velocity-on-release, spring back to home each frame. No animation library — raw integration on requestAnimationFrame.
Image ripple + RGB split
Plane geometry with 64 × 64 vertex subdivision, sin-wave ripple displacement on Z based on cursor proximity, fragment shader splits R/G/B channels along the cursor direction. Cover-fit UVs handled in-shader.
Generated locally · no audio file
Audio-reactive blob
Icosahedron with 64-step subdivision. Vertex shader reads simplex noise plus FFT bass/high analyser bands; mesh swells, breathes and ridges in time. The drone is generated locally — no audio file, no microphone.
Flow field with cursor pull
Two hundred and twenty particles wandering through a value-noise vector field, leaving trails as the previous frame is faintly cleared. Cursor proximity within 200px tilts particle headings toward the pointer.
Magnetic button
A button that pulls toward the cursor inside a 110px reach, with the inner label trailing harder than the body. Two independent springs, both eased on rAF — no library. The default cursor is hidden inside so the magnet feels physical.
Studio · 2026Solis
★01
Solis
Digital
★013D tilt card
Card rotates on X and Y based on cursor position over its bounds. A radial gradient glare follows the pointer in screen-blend mode. Both transform and glare are eased on rAF for that Apple-website feel.
CRAFT— EST 2026LONDONSTUDIOCRAFT— EST 2026LONDONSTUDIOCRAFT— EST 2026LONDONSTUDIOCRAFT— EST 2026LONDONSTUDIO
Scroll-velocity marquee
A type-set marquee with a base drift speed of 0.6 px/frame. Page scroll velocity is sampled and added to the speed each frame, decaying back over ~14 frames. Scroll faster — letters fly faster, even backwards.
0Builds shipped
0%Avg. close rate
0mAvg. response
Counter on enter view
Three counters animate from zero on first scroll into view, with a quartic ease-out and 110ms stagger. Hover to replay. Tabular-nums to keep the digits from jiggling as they tick up.
Cursor particle trail
Up to 8 particles emitted per frame along the cursor delta, each with random jitter and ~60-frame life. Frame is cleared with a faint fill, leaving a soft trail. Cursor proximity ring drawn on top.
Live ASCII rasterizer
Image is drawn into a 96×36 offscreen canvas every frame, sampled per-pixel into a ten-step luminance ramp. Cursor proximity boosts contrast around the pointer so detail surfaces under the mouse.
SOLISclick or move to glitch
Glitch text with RGB split
Three layers — base, red, blue — driven by clip-path keyframes that step through bands of the letterforms 0–100% of the way down. The R and B layers offset on X with screen blend mode for the chromatic aberration.
solis ~ build
Terminal typewriter
Eight scripted lines reveal in sequence with a 22ms-per-character interval and per-line offset. Hover to re-run. Reduced-motion users get the full output instantly. The cursor is a single blinking block, no library.
Liquid blob morph
Two SVG paths sampled at 8 angular control points, with sin and cos wobble across two frequencies. Cursor position adds a directional bias so the blob leans toward the pointer, smoothed via the geometry alone.
Voronoi proximity cells
54 sites laid out on a slightly-randomised grid, each one spring-coupled to its home. A 5px-stepped voronoi pass decides cell colours. Cursor proximity pushes the nearest sites outward, deforming the partition live.
Game of Life
A toroidal grid stepped at ~9fps. Drag to seed live cells around the pointer; double-click to reset to a 18% random fill. Every 11th living cell renders in accent — the colony is mostly black with a sparse orange dust.
STUDIO IN MOTION
Stagger wave
Each letter is offset and scaled by a Gaussian centered on the cursor X. With no cursor, the centre drifts on a slow sine. Letters within the wave shift to accent and lift up by 24px — like a proximity ripple.
CRAFT·CODE·COPY·CHROME·CRAFT·CODE·COPY·CHROME·CRAFT·CODE·COPY·CHROME·CRAFT·CODE·COPY·CHROME·
CRAFT·CODE·COPY·CHROME·CRAFT·CODE·COPY·CHROME·CRAFT·CODE·COPY·CHROME·CRAFT·CODE·COPY·CHROME·
CRAFT·CODE·COPY·CHROME·CRAFT·CODE·COPY·CHROME·CRAFT·CODE·COPY·CHROME·CRAFT·CODE·COPY·CHROME·
3D skew marquee
Three lanes scroll independently — top and bottom forward, middle reversed — under a 38° X-tilt and -4° Z-skew. The middle lane runs in accent. Mostly visual showmanship, but it feels like a stage backdrop.
Gradient sphere
High-poly icosahedron displaced by simplex noise across two frequencies, with cursor pinch on the side facing the pointer. Fragment combines diffuse and rim light, colour-mixed across base/accent/highlight.
Want one of these in your build?Start a brief →