Market

A real Navier-Stokes fluid solved on the GPU: colored dye constantly stirred into curls and glowing with bloom. It flows on its own, and dragging the pointer stirs it by hand. Made for hero and full-screen backgrounds.

WebGL 2

A dark mobile-app site: three phones drawn in JSX float in front of track lines, followed by a bento of features, a four-screen gallery, ratings and reviews, pricing and FAQ. No store badges, no screenshots.

MotionCSSSVG

A deep indigo night, neon outlines and glow, uppercase display type, and a striped-sun horizon with a perspective grid. Switch to cyberpunk for yellow paper, ink-black type, square corners and hard shadows. For music, games, events and bold developer-tool landing pages.

CSS

A slowly turning dot-matrix globe with glowing city markers and arcs flying between continents. Drag to spin it. Made for hero sections about reach and networks.

WebGL

The stage stays pinned while the section scrolls, and four chapters change with scroll progress: copy rises and falls away, the counter rolls, and 24 dots regroup from a scatter into streams, a traced ring and finally a bar chart. Scrolling back plays it in reverse, with an adjustable catch-up lag.

SVG

An industrial product-company site: announcement bar, a hero with a vector-drawn product, client wordmarks, switchable feature tabs, counting stats, product cards, reviews, service plans and an FAQ, closing on a bold quote block.

MotionSVG

Notched pixel outlines, Press Start 2P headings, stepped motion and a 16-color palette: every control is a block from an arcade menu. For games, indie dev sites and nostalgic event pages.

CSS

Five luminous lines ripple across a dark field and swell near the pointer, with a centered headline, buttons and a three-up stat strip on top. Plain Canvas 2D, no shader needed and light on the GPU.

MotionCanvas

A ray-marched blob of liquid silver at the center, its surface slowly rippling with noise and its reflections following the pointer. A focal point for product heroes.

WebGL

A work grid you can filter, sort and switch between grid and list. On every change the cards fly from their old spots to the new ones, thumbnails morph between the two views, and filtered-out cards fade in place while the rest close the gap, with an adjustable spring and stagger. Thumbnails are pure CSS gradients.

MotionCSS

A scene seen through reeded glass: it is sliced into strips of refraction with fine highlights and shadows, and drifts slowly from side to side behind the glass. The scene is a sunset, colour blooms or a big word, all drawn on a canvas at runtime; the reeds can be waves, zigzags or irregular lines.

WebGL 2Canvas

A pill drops in from the top, then stretches like a drop of water into a body with a description and an action, and folds back before leaving. The outline is a morphing SVG path on an overshooting spring. For success, failure and update notices that need one line and one action.

MotionSVG

A dark-first SaaS site: a glowing hero over a product dashboard drawn entirely in JSX, then logos, an eight-up feature grid, three steps, stats, quotes, pricing and FAQ.

MotionCSSSVG

A strict twelve-column grid, the Radix twelve-step grey scale and one accent, flush-left tight grotesk headlines, sections divided by rules instead of colour blocks, no shadows and no gradients. Optional column overlay. For studios, institutions, publications, documentation and anything that wants clarity and order.

CSS

A headline split by line, word or character rises out of masks one piece after another with a slight tilt, then exits in order. Lines are measured at the current width and re-split when it changes. Works for Chinese and English; made for editorial hero headlines and section openers.

CSS

Turns a letter, a word or a shape into flowing chrome: stripes run along the outline with a touch of colour dispersion at the edges. The text is drawn on a canvas and used as the mask, so no image assets are needed; circle, daisy, diamond and metaballs shapes are built in.

WebGL 2Canvas

Icons swell smoothly as the pointer nears them and pull their neighbors along, like the macOS dock. Great for app navigation, toolbars and portfolio link bars.

Motion

A product mark at the center with invented brand tiles drifting along dashed orbits, plus centered and directory-grid layouts. Made for integration and ecosystem sections.

MotionSVG

Interfaces that look pressed from clay: four stacked shadows inflate cards and buttons, inputs and tab tracks sink in, and pressing a button flips it from raised to dented. Stone neutrals plus one bright colour, for friendly finance, kids, health and education products.

CSS

Concentric rings of your own text rotate slowly; the pointer dissolves glyphs into drifting dust and a click sucks it into a point. Dark and light surfaces. An atmospheric backdrop for brand and portfolio pages.

Canvas

Shapes take turns becoming each other: circle, petals, star, squircle… Each layer follows a beat later, stacking into a trailing bloom of colour. Easing and hold time are tunable. For hero visuals, brand motion or a waiting state.

SVG

Coloured smoke churns inside a gem-shaped outline with light glowing through its edges, like fire sealed in crystal. The shape can be a diamond, circle, daisy or metaballs, and the colours range from flame to fluorescent to infrared.

WebGL 2

Fuzzy filtering as you type with matched letters highlighted, a selection bar that glides between rows on arrow keys, and Enter to run. Groups, shortcut hints and an empty state included. Made for a global ⌘K search and quick jump.

Motion

Beams of light fall in from off-screen with a soft bloom along the edges. Stage lighting for launch and event pages.

WebGL 2