Fluid — Manual

A generative art instrument. Up to three stacked fields — chosen from twenty-four engines — are bent through a lens, coloured through a gradient you control, quantized into pixels, screened with halftone dots and finished with grain. Load a photo and its luminance drives the structure while the palette drives the colour, so anything melts into glowing chromatic imagery. Everything renders live on your GPU; there is no server, no account, no upload.

You land on a fresh piece every visit, with your last design kept. Tap the canvas to reseed, hit SHUFFLE for a new one, or load your own photo.

The row above the artwork holds the things you reach for while looking at it, rather than while building it.

Shuffle

a whole new random design. Tapping the canvas reseeds the current one instead, keeping its character.

Undo / Redo

step back and forward through the pieces you have made this session. Each button names where it is going, and dims at the ends of the history. ⌘Z and ⇧⌘Z do the same.

Save

keeps the current design in Saved, under the artwork.

Frame

puts the piece in a post — a mat around the art, with size, corner radius and an optional shadow, plus your own image dropped on top.

Text & logo

lay type or a logo over the artwork, for a cover or a title card.

Cursor

what the pointer does on the art: OFF, RIPPLE, LENS, VORTEX or PUSH. Live only — in STILL the pointer leaves a frozen piece alone.

Embed / Designs

the embed snippets, and the designs you have saved.

Live / Still

LIVE animates; STILL freezes the drift for a clean static export. You can still tweak sliders and reseed while frozen.

REC

records the animation live, with a timer. Hidden in STILL.

Layers

what the stack is currently made of, one chip per layer, with its blend and mix. Remove one from here, or add another.

Recent

the pieces you have just been through — the visual form of undo.

Saved

everything you kept with the Save button. They survive a reload.

Explore

a wall of ready-made pieces to start from. Tap one to load it.

Optional — the piece is complete without one. Bring an image with LOAD PHOTO, paste from the clipboard, or drag a file anywhere onto the page. Photos are read by your GPU only; they never upload anywhere.

CAMERA starts the front camera live (selfies are mirrored so they read naturally). FLIP switches facing. FREEZE captures the current frame as a still source.

When a source loads, a before/after divider appears — drag it to compare the original against the melt. It clamps at 70%, so the effect can never be fully hidden.

Liquify

how much the field displaces the photo — the melt amount.

Photo blend

how much the photo drives the structure vs pure noise.

1:1 / 4:5 / 5:4 / 3:2 / 16:9 / 9:16

square, portrait, two landscapes, wide, and story. The piece reflows, centered; a loaded image cover-fits the frame.

Reposition

with an image loaded, drag the artwork to pan it inside the frame; CENTER IMAGE resets it.

The section is one line: the ramp itself, named. Most colour decisions are "is this right?", which you answer by looking at it. Everything that edits it lives behind MORE, which opens a floating editor you can drag anywhere on the page — it never covers the artwork against your will, and never blocks it.

Palettes

eight designer gradients — AURORA (navy→teal→green→pink), SUNSET (plum→magenta→orange→gold), OCEAN (midnight→blue→cyan→seafoam), DUSK (indigo→violet→blush), EMBER (black→crimson→amber→cream), MINT (teal→mint→cream), IRIS (indigo→blue→lilac), and CHROME (a procedural liquid metal). All nine tiles sit in one grid, so nothing hides behind an arrow.

Custom

your own gradient — your exact brand colours. Choose how many colours to work with (2 / 3 / 4): with 2 or 3, Fluid blends the full dark→light gradient between them; with 4 you design every stop yourself. Editing any swatch drops into Custom; tap a preset to start over.

Editor

pick a stop, then work it on the saturation/brightness pad, the hue strip, or numerically in HSB, RGB or hex — whichever moved, every control shows the same stop. Custom colours travel in the share link and embeds, so the piece reproduces anywhere.

The piece can be up to three layers, each running its own engine. The tabs at the top of the card choose which layer you are editing; the strip below always edits the selected one. + ADD LAYER stacks another, REMOVE LAYER takes the current one away, and SHUFFLE rerolls the engine and its settings.

Blend

how a layer meets the one under it — normal, multiply, screen, add, difference or overlay. Layers 2 and 3 each carry their own.

Mix

how much of the layer is present, from nothing to full strength.

Twenty-four engines

the generator. NOISE is domain-warped value noise (the default). FLOW is the curl of a noise potential — divergence-free, so it swirls like fluid and smoke. CELLULAR is Voronoi noise — crystalline cells whose edges vs centers are blended by Warp. GYROID slices a 3D gyroid through time for interwoven organic bands. TRUCHET draws random corner arcs per cell into woven maze / circuit lines. INTERFERE overlaps moving ripple sources into moiré rings. KALEIDO folds the field into mirrored sectors for a mandala. LINES is rotated parallel bands (Warp rotates them); GRID crosses two rulings into a lattice; GOLDEN is a phyllotaxis sunflower spiral built on the golden angle; SMOKE is a soft turbulent plume; CRYSTAL sums plane-waves into a quasicrystal (Warp sets the symmetry order); HONEYCOMB is a true hex lattice of walls and cells; BLOOM is a living mesh gradient — the four palette colours drift as soft 2D blobs and blend directly, made for grainy-gradient posters and soft logo fills; SWEEP lays the colours corner-to-corner across the frame — a directional gradient whose boundary breathes with noise (Warp = wobble). Pair it with 2 custom colours for a clean two-tone gradient background. MARBLE drags ink bands through combed swirls like paper marbling (Warp = drag depth); PLAID weaves two crossed stripe setts into a tartan with an over/under shimmer (Warp = thread density); CURTAIN hangs thin luminous verticals that ruffle and sway like an aurora (Warp = ruffle depth). STITCH threads 64 pegs on a ring into times-table string art whose chord density glows along an epicycloid caustic (Warp = the multiplier k, so the species itself changes); PURSUIT nests whirling polygons that spiral into a vortex like mice chasing corner to corner (Warp = chase fraction; seed picks triangle through hexagon); CHLADNI draws the nodal sand figures of a vibrating plate, sweeping between resonances (Warp = eigenmode order); CASSINI contours the potential of four drifting foci into nested Cassini ovals that pinch through figure-eights (Warp = contour density); TOPO draws the elevation contours of a drifting landmass, like a survey map (Warp = ruggedness); EDDY is a von Kármán vortex street — the staggered double row of counter-rotating eddies that sheds behind a cylinder. The vortex rows are exact, and rather than drawing them directly it traces every pixel backwards through their velocity field to find the dye it started as, so the fluid is genuinely stretched and wound into the cores the way it is in a dye photograph (Warp = circulation, so the eddies roll tighter without the spacing changing).

Everything here applies to the whole piece, not to one layer.

Speed

animation rate. 0 freezes the drift; the piece itself stays.

Zoom

scale of the forms — low is large slow shapes, high is dense detail.

Warp

how violently the field folds — slides CELLULAR cells toward edges, tightens FLOW, packs TRUCHET bands, and adds KALEIDO sectors.

Grain

analog noise over the final image.

Symmetry

folds the frame into mirrored sectors — a kaleidoscope over whatever the stack is already doing. 0 is off.

Lens — bend the space

a named transform of the complex plane that every engine is sampled through. SQUARE is the conformal map z² (angles double around the centre). INVERT is circle inversion 1/z (inside and outside trade places). MÖBIUS is a disk automorphism whose pole slowly orbits, so the whole space breathes. DROSTE is the log-polar Escher spiral — the piece repeats into itself. HYPERBOLIC compresses the pattern without limit toward a circular rim (the Poincaré-disk metric). JULIA iterates z²+c and samples the engine along the orbit for fractal filigree. CUBE is the conformal map z³ (angles triple). EXP is e^z — horizontal strips unroll into radial fans. SINE folds the plane through sin z into mirror lattices. JOUKOWSKI is z + 1/z, the airfoil transform of aerodynamics. NEWTON samples through the basins of the Newton iteration for z³ = 1 — three attractors with infinitely tangled shores. MODULAR folds space into the SL(2,ℤ) fundamental domain, the hyperbolic tessellation behind number theory. GROUND is the odd one out: not a map of the plane onto itself but a camera. It tips the plane away from you and reads each screen row as a ray, so depth goes as 1/(horizon - y) and any engine becomes a floor receding to a vanishing point. Above the horizon no ray meets the plane, so the far side is mirrored into a sky. AMOUNT blends flat space toward the transformed domain.

Screen — Square / Hex / ASCII / Dither / Glitch

the pixel geometry. SQUARE is the classic mosaic (with optional halftone dots). HEX is a honeycomb. ASCII maps each cell's brightness to a character from a dark→light ramp ( .:-=+*#%@ ). DITHER uses an ordered Bayer threshold; Threshold controls the bright-pixel density. GLITCH tears the frame into displaced scan blocks. Pixelate sets the cell size.

Pixelate

mosaic / hex / glyph cell size. 1 is off (square only); 48 is brutalist.

Halftone + dot size

CMYK-style dot screen over a square field — dots over pixels is the signature look.

Finish

re-lights the palette colour as a material: GLASS, METAL, SAND, LIQUID or MOLTEN. NONE leaves the flat colour alone.

Copy link

a URL that reproduces this exact piece — every slider, the seed, the whole stack, your custom colours. Open it anywhere, remix from there.

For Claude

a ready-to-paste prompt for Claude Code or Cursor, with the embed snippet already baked in. Hand it to an agent and the piece lands in your site.

Iframe / full-bleed / CSS

three ways to put the piece on a site: a responsive iframe, a fixed full-bleed background that never eats clicks, or a CSS snippet for a static exported image. See DEV.

Size presets

pick a target — Wallpaper (1080p, 1440p, 4K, ultrawide, phone), Web (hero, OG image, background, X header), Social (post, story), or Icon. The export is exactly those pixels and the frame reflows to match. 4K / ultrawide are heavy and scale down if the GPU can't hold them.

PNG / JPG / WebP

PNG and WebP keep transparency and are crisp; JPG is much smaller. The readout shows the exact pixels and format.

Filename

names the download. Leave it empty and the piece names itself with a codename like neon-current.

Export image

renders exactly the on-screen look at the chosen size. On phones it opens the native share sheet instead of downloading.

Record clip

the REC chip on the canvas captures the animation as it plays, with a live timer — MP4 (H.264) where the browser allows, so it plays everywhere; Firefox saves WebM. Resolution cycles 1080p / 2K / 4K.

Export clip

4, 8 or 15 seconds rendered offline, frame by frame, so the result is smooth regardless of what your machine could manage in real time.

Clips and exports always render the pure effect — no divider, no UI.

Everything after #p= is the piece, as plain numbers in fixed positions: speed, zoom, warp, grain, pixel, dot, halftone, palette, seed, liquify, blend, aspect, source preset, engine, screen, threshold, symmetry — then your four custom colours packed one per slot, the dither, each extra layer with its blend and mix, the finish, and the lens with its amount.

The format is append-only: new features take new slots on the end, so a link written a year ago still opens. Trailing zeros are trimmed, which is why two links can be different lengths and both be complete.

https://fluid.krackeddevs.com/#p=0.28,0.6,3.5,0.02,1,10,0,8,44,0,0,1,0,0,0,0,0,0,0,0,656898,7027205,15242255,16768906,0,0,0,0,5

fluid.krackeddevs.com/today opens one piece per UTC day — the same piece for everyone, derived from the date alone. There is no storage behind it, so yesterday stays reproducible: /api/today?date=YYYY-MM-DD replays any day as JSON.

Iframe embeds, an MCP server for Claude (claude mcp add --transport http fluid https://fluid.krackeddevs.com/mcp), and a plain JSON API live on the DEV page.

Two npm packages ship the renderer itself, so you are not bound to an iframe:

fluid-core

the engine as a library — mount a piece on your own canvas and drive it from code. See the demo.

fluid-bg

a drop-in animated background: the <fluid-bg> custom element, a React component, or a CDN tag. It renders in your page, not in a frame.

Free forever — all computation happens on the viewer's device, so there is nothing to pay for and nothing to outgrow. No account, no upload, no app backend. Reduced-motion users start paused. If the camera is blocked (some embedded browsers), loading a photo still works — errors always say what still works.