Experimental Lab

Depth, particles and orbits — handled with care.

Experimental doesn't have to mean fragile. Every piece in the lab is built with lightweight CSS 3D, SVG or Canvas 2D instead of a heavy WebGL runtime, pauses when it is off-screen and offers a static alternative when motion is unwelcome.

H.30
pointerhovercontinuouszero deps
Particle Sphere
A rotating Fibonacci-lattice particle sphere on canvas that tilts toward and parts around the pointer.
3D & Experimental · React / Canvas
H.29
dragkeyboardcontinuouszero deps
Rotating Product Stage
A CSS 3D product stage with drag-to-rotate inertia, keyboard turns and per-face lighting presets.
3D & Experimental · React / CSS / Tailwind
E.18
pointerhovercontinuouszero deps
Dot Matrix Field
A halftone dot grid that swells and lights up around the pointer, drawn on one canvas.
Backgrounds & Effects · React / Canvas / Tailwind
H.32
clickhovercontinuousmotion
Orbital Skills
An interactive orbital diagram of tools and skills with upright labels and a selectable centre.
3D & Experimental · React / Motion / CSS / Tailwind
H.60
dragkeyboardcontinuouszero deps
Wireframe Globe
A rotating canvas globe with a depth-faded graticule, pulsing markers and travelling great-circle arcs.
3D & Experimental · React / Canvas
H.62
pointerhovercontinuouszero deps
Morphing Blob
An organic SVG blob that morphs continuously, leans toward the pointer and can merge with a gooey twin.
3D & Experimental · React / SVG / Tailwind
E.49
pointerviewportcontinuouszero deps
Topographic Lines
Animated contour lines traced with marching squares over an evolving noise terrain.
Backgrounds & Effects · React / Canvas / Tailwind
E.50
pointerhovercontinuouszero deps
Pixel Trail
A canvas grid whose cells light up under the pointer and fade out, leaving a pixel trail.
Backgrounds & Effects · React / Canvas / Tailwind
E.51
pointerviewportcontinuouszero deps
Signal Lines
Stacked horizontal lines displaced by layered noise waves — a ridgeline, oscilloscope feel.
Backgrounds & Effects · React / Canvas / Tailwind
E.79
pointerclickcontinuouszero deps
Water Ripple
A refractive water surface: pointer and raindrops send ripples across a tinted, tiled pool.
Backgrounds & Effects · React / Canvas / Tailwind
H.91
pointerkeyboardtweenzero deps
Isometric Grid
A CSS-3D isometric field of blocks that rise and glow near the pointer — or a bar-chart city.
3D & Experimental · React / CSS / Tailwind
H.92
clickdragtweenmotion
Paper Fold
A panel that folds and unfolds like paper: 3D accordion creases with shading, toggled or scrubbed.
3D & Experimental · React / Motion / CSS / Tailwind
E.109
pointerclickcontinuouszero deps
ASCII Field
An animated ASCII-art field: noise, waves or rings sampled on a character grid and mapped to a density ramp.
Backgrounds & Effects · React / Canvas / Tailwind
E.111
pointerclickspringzero deps
Warp Grid
Grid lines that bend around the pointer like a gravitational lens and spring back when it leaves.
Backgrounds & Effects · React / Canvas / Tailwind
C.104
clickhovercontinuouszero deps
Falling Text
A sentence whose words or letters break loose and fall with real 2D physics — then can be dragged, thrown and reset.
Typography & Text · React / CSS / Tailwind
B.98
dragpointerspringmotion
Pan & Zoom Canvas
An infinite-feeling canvas: drag to pan with inertia, wheel or pinch to zoom around the cursor, with controls and keys.
Cards & Containers · React / Motion / Tailwind
E.140
pointerviewportcontinuouszero deps
Metaballs
Lava-lamp blobs that drift, merge and split through an implicit field — your pointer joins in as one more.
Backgrounds & Effects · React / Canvas / Tailwind
E.141
pointerviewportcontinuouszero deps
Voronoi Field
A drifting Voronoi mosaic with hairline cell edges — the pointer becomes a seed and the cells make room.
Backgrounds & Effects · React / Canvas / Tailwind
E.139
pointerviewportzero deps
Glass Refraction
A liquid-glass pane that bends the content behind it, with a specular rim that leans toward the pointer.
Backgrounds & Effects · React / CSS / SVG / Tailwind
E.142
pointerclickspringzero deps
Particle Text
Type sampled into a swarm of particles that spring home, scatter from the pointer and re-form.
Backgrounds & Effects · React / Canvas / Tailwind
E.170
pointerdragcontinuouszero deps
Ink Trail
Pointer strokes leave ink that bleeds, drifts and fades like ink dropped in water, cycling through a palette.
Backgrounds & Effects · React / Canvas / Tailwind
E.171
pointerviewportspringzero deps
Ribbon Trail
Silky spring-chain ribbons that chase the pointer, tapering and twisting, and drift on a Lissajous path when idle.
Backgrounds & Effects · React / Canvas / Tailwind
H.181
pointerhoverspringmotion
Holo Card
A holographic foil card that tilts toward the pointer while rainbow foil, glitter and glare shift with the light.
3D & Experimental · React / Motion / CSS / Tailwind
H.182
pointerhoverspringmotion
Extruded Text
Display text with real 3D depth from stacked, shaded layers that turns toward the pointer on a spring.
3D & Experimental · React / Motion / CSS / Tailwind
E.199
pointerviewportcontinuouszero deps
Electric Arc
Crackling electric arcs between anchors: forked, flickering bolts that re-route constantly and reach for a nearby pointer.
Backgrounds & Effects · React / Canvas / Tailwind
E.200
pointerviewportcontinuouszero deps
Fireflies
Glowing fireflies drifting on smooth noise paths, blinking on their own rhythms and gently drawn toward the pointer.
Backgrounds & Effects · React / Canvas / Tailwind
H.211
clickkeyboardtweenmotion
Dice Roller
CSS 3D dice with real pips that hop and tumble through several turns, then settle on a random face and announce the total.
3D & Experimental · React / Motion / CSS / Tailwind
E.202
pointerviewportcontinuouszero deps
Weather Effect
Rain, snow or sleet over content: wind-angled streaks that splash, drifting flakes with sway and depth, and a pointer gust.
Backgrounds & Effects · React / Canvas / Tailwind

Technology requirements

Everything this set needs, combined. Each component remains a separate, self-contained file.

ReactCanvasCSSTailwindMotionSVG

npm dependencies: motion
Peer: react, tailwindcss

npm install motion

Next collectionForm Craft