Shader Studio

Eleven animated WebGL visualisations, designed in the browser and taken away as code, as a 4K still, or as a seamless loop — and shown applied to real artwork rather than only full-bleed on a black stage.

Live demo: shader.plaimaker.space

What it is

One fragment shader over two triangles. No three.js, no gradient library, no stack of blurred divs — a few kilobytes against ~700KB for a three.js-backed alternative.

Every visualisation is the same three moves in a different order: bend the coordinate, cut it up, read colour last. That ordering is the whole effect. Animating colours, or translating blurred shapes, gives you something that slides; moving the coordinates the colour is sampled from gives you something that flows, and that is the part CSS cannot do.

src/lib/shaders/ is the single source of truth for the GLSL. The live preview, the still exporter, the video recorder, the brand mockups and the copy-paste output all read the same assembled string, so the code a visitor takes away is byte-for-byte the shader they were looking at.

The visualisations

• Wave — the original gradient field, a domain warp of noise against a travelling fold. The ramp is read twice across the warped plane, once forward and once reversed, then crossed — which is what puts the far ends of the palette next to each other mid-frame.
• Rail — lit strokes running away to a vanishing point. Dividing by the distance down the frame turns a fan of converging lines into parallel ones, so they can be cut with a plain fract(); dividing the other way gives depth, and walking the ramp along it is what makes the gradient read as a trail receding rather than as a pattern sliding up the screen.
• Fog — banks of coloured cloud, lit from within: a stack of fractal-noise fields, each warped by another, layered a few slices deep so the front reads brighter than the back.
• Halftone — a field printed as marks that grow with it. The field is read once per cell, at the cell centre, so every mark in a cell is one size and the eye reads the field off their areas the way a printing screen does. Three fields and four shapes, chosen rather than dialled.
• Prism — light fanned from a centre and cut across upright facets, each sampling the fan at a shifted place, with a bright hairline down every seam.
• Cascade — a smooth diagonal fan quantised onto a square grid, which is exactly how a staircase edge happens, used on purpose and at a size you can see.
• Aurora — curtains of light standing up from a rippling hem into a dark sky, each layer reading a different slice of the ramp.
• Paper — blobs of ink morphing on a risograph sheet. The ramp is read straight off a warped noise field with its first colour as the paper, so the narrow colour next to it becomes the misregistered fringe every blob wears, and a static dither breaks the edges into print speckle.
• Morph — Halftone's screen printing islands of ink that keep changing shape, with the field laid under the dots as a soft wash so the cores glow while the edges break into separate dots.
• ASCII — a gradient with patches of it rewritten as code: a monospace grid, a small bitmap font packed into floats, each cell rerolling its character on its own schedule.
• Grain — soft colour fields folding across a sheet of paper, a fan of petals turning around a wandering centre, with noise on the threshold so every edge breaks into stipple. Ported from the Grain paper component in Taccuino.

Every visualisation shares one library of colour ramps (src/lib/shaders/ramps.ts), so switching visualisation keeps the palette you have built. Randomise rerolls the motion and where the colours sit along the ramp, but never the colours themselves; Reset returns a shader to its slider defaults.

Brand applied

A gradient judged full-bleed is a different thing from a gradient judged as the bottom half of a poster, and the second is what most of these end up being. The Brand applied view puts the live shader inside thirteen real pieces of artwork — a poster pair, a three-card Instagram carousel, a spread, a landing hero (full bleed, the artwork is the page), a landing section (the artwork as one panel beside the copy), a cover, an Instagram story, the thumbnail a Figma file shows in the browser, a newsletter, a social profile, a phone's lock and home screens, a pricing page and an event ticket — with editable type over it. The ticket leans toward the pointer. Change a colour and it changes in the poster. All mockups shows every layout at once.

The Instagram cards each treat the artwork differently on purpose: one cut in half by a header, one read through frosted glass, one reduced to a border around a floating card. A gradient that only works full-bleed fails two of those, and it is worth knowing that before it is a grid of nine.

Each layout reveals on a staggered timeline — the cards rise, then the headline and the wordmark arrive — in a few CSS keyframes rather than an animation library. Replaying it restarts the CSS animations in place rather than remounting the stage, because a replay must not cost a WebGL context.

Each layout is drawn at true size and scaled to fit, so a 38px headline stays a headline instead of resizing into a caption on a narrow screen. Every canvas on the page runs off one shared clock: independent clocks started at different mount times would show the same shader at different moments, and a poster pair whose halves disagree reads as a bug rather than as a brand.

Exports

• Code — React (TSX), vanilla JS, a self-contained HTML page, raw GLSL, or the CSS fallback. Self-contained and dependency-free; a browser without WebGL gets a still gradient, not a black box.

• Stills — PNG at 1920×1080, 4K, square, vertical or ultrawide, rendered fresh at that size rather than upscaled from the preview. While a mockup is on stage, the export can instead be the composited piece: artwork, scrims and copy, without any of the studio's own chrome.

• Video — a seamless loop, MP4 (H.264) or WebM, 5–20 seconds at 24, 30 or 60 fps. Seamless by construction: for a recording, every time term in the shader is swapped for one that closes on a whole number of cycles over the chosen duration, and the noise drift walks a circle through the field instead of a straight line — so t = 0 and t = duration render identical frames.

  Recording runs in real time (10 seconds of video takes 10 seconds) because MediaRecorder timestamps frames by the wall clock. What the recorder does control precisely is which instant each frame shows: the stream is captured manually and frame i is drawn at exactly i / fps on the shader's clock, so frame timing survives a dropped rAF tick.

• Share — the whole parameter set is packed into the URL hash, so a link is the gradient. Nothing is stored server-side.

Quick start

Requires Node.js 22 or newer. The project uses pnpm.

git clone https://github.com/OmarMota/shader-studio.git
cd shader-studio
pnpm install
pnpm dev             # http://localhost:3000

There are no environment variables to set.

Scripts

Command	What it does
pnpm dev	Start the Next.js dev server
pnpm build	Production build (standalone output); postbuild copies static assets in
pnpm start	Serve the production build
pnpm lint	ESLint (Next.js core-web-vitals + TypeScript rules)
pnpm typecheck	tsc --noEmit

Project structure

src/
├── app/
│   ├── layout.tsx            # fonts, metadata
│   ├── page.tsx              # renders <Studio />
│   ├── globals.css           # Tailwind v4, theme tokens, the reveal keyframes
│   └── icon.svg
├── components/
│   ├── Studio.tsx            # the app: state, toolbar, side panel, views
│   ├── ShaderCanvas.tsx      # one live WebGL canvas on the shared clock
│   ├── BrandStage.tsx        # the nine "Brand applied" layouts
│   ├── GalleryView.tsx       # every mockup at once, from one offscreen renderer
│   ├── ExportDialog.tsx      # Code / Image / Video export
│   ├── RampEditor.tsx        # the draggable gradient-stop editor
│   ├── AboutDialog.tsx
│   ├── ShaderGlyph.tsx       # the per-visualisation picker glyphs
│   ├── VisualisationIcon.tsx, ShaderIcon.tsx
│   └── ui.tsx                # shared controls (buttons, selects, sliders, modal)
└── lib/
    ├── shaders/
    │   ├── common.ts         # vertex shader, uniforms, shared GLSL, buildFrag
    │   ├── index.ts          # the registry: SHADERS, switch / randomise helpers
    │   ├── ramps.ts          # the shared colour-ramp library
    │   └── wave.ts, rail.ts, fog.ts, halftone.ts, prism.ts,
    │       cascade.ts, aurora.ts, paper.ts, morph.ts, ascii.ts,
    │       grain.ts
    ├── renderer.ts           # one GL context, a cached program per shader
    ├── clock.ts              # the single clock every canvas reads
    ├── export-code.ts        # React / JS / HTML / GLSL / CSS output
    ├── export-media.ts       # PNG stills and seamless video loops
    ├── mockup-export.ts      # composited mockup stills and videos
    ├── share.ts              # compact URL-hash encoding
    └── icons.ts, icon-painter.ts

Adding a visualisation

Nothing outside src/lib/shaders/ needs to change: the picker, the panel, the share link, all the exporters and the brand view are written against the registry in src/lib/shaders/index.ts.

1. Create src/lib/shaders/<name>.ts exporting a ShaderDef (prism.ts is a compact example):
   • params: ShaderParam[] — the controls. Each key becomes a uniform float u_<key>, generated, so a control and its uniform cannot drift apart. Give a param a roll: [min, max] range if Randomise should move it; give it options: [...] to render a picker instead of a slider (the shader receives the chosen index).
   • a GLSL body — one void main() — passed through buildFrag(params, BODY) to produce frag. buildFrag prepends the shared uniform block and helper library from common.ts (the ramp, noise, turns(), drift(), sharpness(), slat(), grain()…).
   • id, name, a one-line tagline, a longer note for the About dialog, usesBackground, and defaultRamp — the id of a ramp from ramps.ts it opens on.
2. Register it in src/lib/shaders/index.ts: import it and append it to the end of SHADERS. The compact share link stores a shader as its index in that list, so reordering or inserting breaks existing links.
3. Optionally give it a picker glyph in src/components/ShaderGlyph.tsx (a case in glyph() and an entry in FLOW). Without one it falls back to a plain dot.

The shader body has three rules to keep:

• No backticks in a GLSL comment. The body is a template literal; one backtick ends it, and the resulting TypeScript error points somewhere else entirely.
• Every time term goes through turns() or drift(). That is what closes the animation into a seamless loop for video export. A raw u_time silently breaks recording for that shader.
• Anything periodic needs a repeats-per-pixel estimate. WebGL 1 has no fwidth without an extension, so each body works out analytically how many repeats it packs into a pixel and passes it through sharpness() into slat(). Skip it and fine detail turns to moiré.

Neither typecheck nor build looks inside the GLSL string: a broken shader builds fine and then falls back to a flat CSS gradient in the browser. Check the browser console, and see AGENTS.md for how to compile shaders headlessly.

Notes for future edits

• Ramps read well here when they walk a path — hue and lightness both moving one way. Every shader butts the two ends of the ramp against each other somewhere, so palettes that double back turn to mud at the seam. This is why Randomise moves the stops but never the colours or their order.
• The renderer keeps one GL context and compiles a program per visualisation, cached. Switching is a swap, not a teardown: contexts are scarce and slow, and the brand view can have three of these on screen at once.
• Renderer.resize skips its work when the size is unchanged. Anything creating a renderer must size the canvas through it, not by assigning canvas.width first — the viewport and the u_resolution uniform are set in the same place, and a frame that divides by a zero resolution comes out as one flat colour.
• Links from the single-shader era still open. They name no shader, and decodeParams reads that as the wave rather than as today's default.

Deployment

next.config.ts builds with output: "standalone", and postbuild copies .next/static (and public/, if present) into .next/standalone, so the result runs anywhere with node .next/standalone/server.js. The live site builds from main on a Node host.

The config also overrides the year-long s-maxage Next puts on a prerendered page with s-maxage=60, stale-while-revalidate=300, so a CDN with no purge hook picks up a new deploy within the minute. Hashed assets under /_next/static keep their immutable year.

Tech stack

• Next.js 16 (App Router) and React 19
• TypeScript
• Raw WebGL 1 and GLSL — no 3D or gradient library
• Tailwind CSS v4
• Hugeicons icons
• MediaRecorder for video, Canvas 2D for composited mockups

Contributing

Contributions are welcome — new visualisations especially. See CONTRIBUTING.md for setup, conventions and how to open a pull request.

License

MIT © 2026 Omar Mota