Still water
Lo-fi for slow mornings.
Pixel UI
A component library drawn on the GPU. Backgrounds, heroes, buttons, cards, text effects and form controls, all rendered on a pixel grid and dithered into a palette. 125 components, each one a plain web component: one script tag, then copy a tag.
On the GPU
Shaders run on one shared WebGL context, drawn at pixel resolution and scaled up crisp.
Real elements
Buttons are buttons, inputs submit with forms, tabs are tabs. Keyboard and screen readers just work.
Polite
Only what's on screen draws, finished effects rest the GPU, and reduced motion is respected everywhere.
Scenes 10
Sakura grove
A cherry tree in full bloom over a misty forest, with a lantern and a bench.
Alpine hills
Snow peaks behind rolling green hills, pines and valley mist.
Sunset lake
A flat-colour sunset over a lake, with a boat drifting across.
Galaxy
A spiral galaxy with planets in orbit; the pointer tilts it.
Riso rays
A two-ink riso print: light bursting from the horizon under a crescent moon.
Riso vortex
A two-ink riso print of the sky swirling round a lone street lamp.
Train window
A train window with the countryside rushing past.
Poppy field
A stormy sky over a field of red poppies blowing in the wind.
Castle
A pixel castle on a hill at night, windows flickering and a flag waving.
Anime vista
A summer sky with towering clouds, a snowy peak and grass in the breeze.
Layouts 6
Horizon band
A clean page with a landscape rising along the bottom of the hero.
Window
A train window onto the countryside, set into a normal page.
Split hero
Copy on one side, a framed scene on the other.
Fade into page
A scene that dissolves into the content below it.
Scene cards
Cards with a little living scene as their header.
Riso editorial
A two-ink print look for a magazine or a portfolio.
Hero sections 18
Laser hero
Lasers strike a rocky peak; the headline sits in the haze above.
Disc hero
A spinning rainbow disc beside the title, for music and launches.
Flame hero
Soft fire rising behind a big serif statement.
Glass keycap hero
A glass keycap splitting light, with the title set huge on black.
Podium hero
A stone slab in a spotlight, with thin wide-spaced type above.
Orb hero
A breathing orb with an input underneath: an AI product hero.
Ink hero
Marbled red ink behind editorial serif type.
Frosted portrait hero
A photo behind hammered glass with a clear window, beside the title.
Statue image hero
The dotted marble statue, alive: it breathes in depth and its highlights glow.
Cat image hero
The dotted cat, alive: it breathes, glows and drifts in depth.
Laser image hero
Your still of lasers on rock, alive: the beams flicker and bloom, heat rises off the peak.
Disc image hero
A product shot of a disc, alive: the rainbow blooms and breathes, the whole shot drifts in depth.
Fire image hero
A photo of fire, alive: the flames flicker, heat haze ripples above them.
Glass image hero
A glass object on black, alive: its colours glow and pulse, the light sweeps across.
Spotlight image hero
A product on a spotlit stone, alive: the camera breathes slowly, grain and light drift.
Ink image hero
An abstract artwork, alive: depth parallax under the pointer, glowing highlights.
Dot statue hero
A marble statue in white dots that shimmer, scan and scatter.
Dot art hero
A dotted portrait that shimmers, scans and scatters from the pointer.
3D & Shaders 19
Laser peak
A bundle of laser lines striking a rocky peak in a red haze.
Disc
A spinning disc with a diffraction rainbow sweeping across it.
Flame
Soft, wispy fire rising out of the dark, with drifting sparks.
Liquid chrome
A raymarched blob of liquid metal that morphs, with a droplet that follows the pointer.
Glass keycap
A solid-glass keycap, turning in the dark, splitting light into colour.
Stone podium
A slab of rough stone floating in a single spotlight, a stage for your product.
Marbled ink
Red ink flowing over black, marbled with cream and gold.
Aura
Grainy, blurred bands of colour drifting like a long exposure.
Reeded glass
Light seen through fluted glass: glowing vertical reeds.
Orb
A glowing sphere of moving light: the look of an AI that is listening.
Silk
Satin folds that flow and catch the light.
Morphing shape
A 3D shape that melts from sphere to box to torus to octahedron.
Mountain flight
A flight over endless mountains at sunset, with fog.
Neon tunnel
An endless neon wormhole that steers with the pointer.
Line waves
Dozens of glowing lines forming a living landscape.
Clouds
Layers of sunset clouds drifting past the sun.
Caustics
Light dancing on the bottom of a swimming pool.
Mesh gradient
A smooth, grainy mesh gradient, the clean way.
Particle swarm
Hundreds of points of light orbiting in 3D.
Image effects 10
Liquid image
The picture turns to liquid and bulges toward the pointer.
Colour split
Move fast and the picture splits into red, green and blue.
Image morph
One picture melts into another through a glowing edge.
Ripple
Water ripples spread from the pointer.
Light streak
The picture smears into long streaks of light, like a long exposure.
Dot art
Any picture as one-colour dot art that shimmers, scans and scatters.
Alive
Your picture, exactly as it is, brought to life: depth, glow, haze and light.
Frosted window
The picture behind hammered glass, with a clear window that follows the pointer.
Code portrait
The picture rebuilt from rows of glitching glyphs.
Zoom blur
A radial zoom blur that rushes toward the pointer.
Backgrounds 10
Mesh gradient
Soft colour blobs that drift into each other, the classic SaaS gradient, rebuilt out of pixels.
Marble warp
Domain-warped noise that folds over itself like marbled paper.
Aurora
Curtains of light rippling over a night sky.
Crystal cells
Glowing crystal cells whose edges catch the light.
Liquid metal
A chrome surface that ripples like mercury.
Synthwave horizon
A sun setting behind a grid that scrolls toward you forever.
Nebula
Deep-space gas clouds with stars twinkling through.
Topographic
Contour lines like a living map.
Dot matrix
A field of dots that ripples out from the pointer.
Fire
Pixel flames licking up from the bottom.
ASCII 12
Glow horizon
A pale world rising from below, its atmosphere burning blue and thinning into noise.
Liquid flow
A slow, domain-warped gradient that pours through the characters.
Aurora
Curtains of light rippling over a starry sky.
Moonlit ocean
Swells rolling toward you under a full moon, and its road across the water.
Mountain flight
Fly low over a ridged mountain range toward a setting sun.
Spiral galaxy
A spiral galaxy turning slowly, dust lanes and all.
Planet
A planet turning in space: continents, cloud and a lit atmosphere.
Night city
Three layers of skyline sliding past, windows switching on and off.
Warp tunnel
Down an endless tunnel of light.
Digital rain
Columns of characters falling, each at its own speed.
Storm
Storm clouds rolling by, lit from inside by lightning.
Dunes
Desert dunes under a low sun, the air shimmering with heat.
Sections 3
Hero
A whole hero section on a GPU pixel background that dissolves in.
Divider
A moving pixel edge between two sections, instead of a hard line.
Marquee
An endless row of logos whose ends dissolve into dithered pixels.
Buttons 2
Glow button
A button with light chasing round its pixel border.
Pixel button
A chunky pixel button that presses down into its shadow, with a pal on top.
Cards 1
Text 8
Shine text
A dithered band of colour that sweeps across the words.
Reveal text
Words that resolve out of a mosaic when they scroll into view.
Glitch text
Colour split and slipping rows, in bursts.
Wave text
Letters that ripple like a flag.
Melt text
Letters that drip and melt down the page.
Scan text
A scanline that sweeps down, lighting the letters as it passes.
Counter
A big number that counts up in pixel type when it scrolls into view.
Keycap
Pixel keycaps that press down when you press the real key.
Media 1
Forms 4
Input
A text field whose pixel border lights up as you type.
Checkbox
A pixel checkbox whose tick draws itself in, block by block.
Toggle
A pixel switch: a pal walks across to flip it.
Slider
A range input whose track is lit on the GPU.
Navigation 1
Overlays 3
Dialog
A modal that dissolves in, pixel by pixel, in any look.
Toast
Notifications with a pixel fuse that burns down while they are up.
Tooltip
A pixel speech bubble that types its words out.
Feedback 2
Loader
Little pixel spinners drawn on the GPU.
Progress
A segmented progress bar with a pal running along the front.
Data 2
Chart
Small dithered area, line and bar charts, drawn on the GPU.
Flap board
A split-flap board, like a station departures sign. It can count down too.
Motion 2
Reveal
Content that dissolves in, pixel by pixel, when it scrolls into view.
Cursor trail
A pixel comet, or a soft glow, that follows the pointer across the page.
Physics & time 4
Sand
Your text crumbles into sand, piles up, and flows back into words.
Quake
One press and the page falls down. Throw the pieces, then put it all back.
Liquid
Your section half full of pixel water, and the things in it float.
Rewind
A VCR for any part of your page. Everything that changes in it can be rewound.
Games & sound 4
Breakout
Your words are the bricks. Press play and the text becomes a level.
RPG dialogue
A JRPG dialogue box: a pal talks, the words type out, you pick an answer.
Handheld
A pocket game console, and anything you put inside plays on its screen.
Chiptune
8-bit sounds for your whole page, from one tag. No audio files.