All 55 styles and prompts as plain text
Base prompt
Build this as one self-contained HTML file with a single 1920 × 1080 canvas that scales to fit the window. Draw every frame as a pure function of time t in seconds, so the animation can be paused, scrubbed and played backwards. Make it 4 seconds long and loop it, add play/pause and a scrub bar, respect prefers-reduced-motion, and use no video or image files. Google Fonts are fine, and if the style needs 3D, load Three.js from cdnjs.
01 · Academy Leader
Make a 4-second SMPTE film countdown leader, 4 to 1, with a sweeping clock wedge, gate weave, flicker, dust and grain regenerated every frame at 24 fps, and a 1 kHz two-pop beep on the 2.
02 · Kinetic Type
Make a 4-second kinetic typography piece at 120 BPM: “EVERY”, “FRAME”, “IS A”, “DECISION” slam in one per beat with expo-out scale, horizontal stretch and fading echo frames on alternating colour fields, then cut to a tilted marquee lockup.
03 · Swiss Grid
Animate a Swiss-style 5 × 3 grid of geometric modules (quarter circles, half circles, triangles, squares) in red, blue, yellow and black that pop in and turn in quarter steps on a diagonal stagger with quint in-out easing, next to a “Grid Systems” type block.
04 · Liquid Chrome
Write a WebGL fragment shader of liquid chrome metaballs: eight charges orbiting, the surface normal taken from the field gradient, reflecting a painted studio environment with an iridescent fresnel rim.
05 · Boids
Simulate a 320-agent boids flock (separation, alignment, cohesion) following a moving attractor, then send a predator through it that scatters the flock. Bake it at 60 fps so it can be scrubbed, and draw each boid as a triangle with short trails.
06 · Particle Type
Make about 2,800 particles orbit in an ellipse, fly into the letters of a word from left to right with expo-out timing, shimmer while held, then release outward on curl noise. Additive colours from magenta to cyan to yellow.
07 · Product Turntable
Build a Three.js product turntable: a glossy perfume bottle made with a lathe, a gold cap and a printed label, on a pedestal with soft shadows and image-based studio lighting, rotating while the camera slowly pushes in.
08 · Handwriting
Animate the word “hello” writing itself in one continuous cursive stroke with a broad calligraphy nib at 35°, so line width follows stroke direction, on paper with ascender, x-height and baseline guides, then add an underline swash.
09 · Flow Field
Make a generative flow field: about 950 agents trace paths through a Perlin noise vector field, each stroke draws on with cubic easing and later retracts like ink, in cyan, cream, orange and violet on midnight blue.
10 · Signal Error
Make a 4-second VHS signal-error piece: the word “SIGNAL” with RGB channel split, horizontal slice displacement, glyph corruption, scanlines, a rolling bar and flashes of SMPTE colour bars, fired in bursts at 15 fps.
11 · Cloth
Simulate a 34 × 22 Verlet cloth hanging from a rod, blown by noise wind and pushed through by a sphere, then release half its pins at 2.7 s. Shade each quad by its normal, add stripes, and bake it at 60 fps.
12 · Isometric City
Build an isometric city: a 10 × 10 grid of blocks on a 2:1 dimetric projection that rise with back-out easing from the centre, then ripple in a radial height wave, painted back to front with three-tone face shading.
13 · Blueprint
Animate a blueprint technical drawing constructing itself: dash-dot centre lines, a compass-drawn circle, an inscribed hexagon and star, then diameter and radius dimension callouts and a title block that types itself.
14 · Bar Chart Race
Make a bar chart race from real data: seconds on screen per discipline as this reel plays, with bars that grow, ranks that glide smoothly past each other, and a big running clock.
15 · Data Story
Make a data-story motion graphic: a count-up headline number, seven staggered bars with one highlighted, a donut chart that sweeps in by segment, and a line chart that draws itself with a pulsing end dot. Mark the data as illustrative.
16 · Night Drive
Make an 80s synthwave title: a sliced sun rising behind neon-edged mountains, a scrolling magenta perspective grid, stars, chrome “NIGHT DRIVE” lettering sliding in, a script “Opus” signature and a lens sparkle.
17 · Particle Galaxy
Build a Three.js particle galaxy: 40,000 points in five spiral arms, coloured from an orange core to a blue rim, additive blending, a glowing core sprite and a slow orbiting camera.
18 · Text on a Path
Set a looping sentence of type along a figure-eight path, arc-length parameterised so letters are evenly spaced and rotated to the tangent, flowing continuously, with a ring of mono text counter-rotating in the middle.
19 · Paper Cut-out
Make a stop-motion paper cut-out scene at 12 fps (on twos): torn-edge hills, a rising paper sun with rays, drifting clouds, a paper plane and letter tiles spelling “HANDMADE”, with edges re-cut every drawing so the paper boils.
20 · Reaction–Diffusion
Run a Gray-Scott reaction-diffusion simulation on a 256 × 144 grid, seeded with the word “GROW”, with coral parameters (f 0.0545, k 0.062), baked at 30 fps and coloured from deep blue through teal and cream to coral.
21 · 1-Bit Dither
Render a lit, ringed planet per pixel at 240 × 135 and ordered-dither it through a 4 × 4 Bayer matrix to the four Game Boy DMG greens, with a blinking PRESS START in a 3 × 5 pixel font.
22 · Character Rig
Rig a simple bean character with 11 bones and forward kinematics: show the rig walking a 0.9-second cycle, fade the skin on, then blend out of the walk and wave one arm. Add a blink and a ground shadow.
23 · ASCII Torus
Render a spinning torus as ASCII art on a 96 × 40 character grid with a z-buffer, choosing glyphs from “.,-~:;=!*#$@” by luminance, in an amber terminal palette with a typed command line.
24 · Route Map
Animate a route map: a city drawn from code with a river, parks and a street grid, pins that drop in, a route traced street by street behind a car marker, a camera that pushes in to follow it, and an ETA card counting down.
25 · Tesseract
Animate a rotating 4D hypercube: rotate it in the XW and YZ planes, project 4D to 3D to 2D by hand, draw glowing edges coloured by depth, add onion-skin trails and a live rotation readout.
26 · Campfire
Make a particle campfire where every flame, smoke puff and ember is a closed-form function of its spawn time: additive flame sprites from white to orange to red, grey smoke, ballistic embers, logs and a flickering ground glow.
27 · Logo Sting
Make a logo sting: a line draws across the frame and folds into a four-colour ring that snaps together with back-out easing, the wordmark rises through a mask letter by letter, the version number springs in with elastic easing, then a sheen sweeps across.
28 · Voronoi Cells
Write a WebGL Voronoi shader: 36 seeds drifting on Lissajous paths, flat colour cells with dark borders from the nearest and second-nearest distances, and contour rings radiating from each seed.
29 · Broadcast Package
Build a broadcast graphics package inside title safe: a lower third with a name bar and role strap that wipe in and out, a LIVE bug with a running clock, and a scrolling news ticker over a blurred studio background.
30 · Extruded Type
Make extruded 3D type from 40 stacked offset layers: the word “DEPTH” with a gradient face and an extrusion direction that swings like a moving light, letters that pop in and bob, over a perspective floor grid.
31 · Shape Morph
Morph a shape through circle, square, triangle, star and heart by resampling each outline to 160 matching points, on a light table with a peg bar and red past and green future onion skins.
32 · Night Rain
Make a night rain scene: 500 slanted drops, splash rings on a wet street, a skyline with lit windows and a flickering neon sign, a rippled reflection and one lightning strike.
33 · Riso Halftone
Make a two-colour risograph halftone: fluorescent pink and blue dot screens at 45° and 15°, multiplied on paper, a text mask revealed left to right, animated wave fields, misregistration jitter and registration marks.
34 · Camera Fly-through
Build a Three.js camera fly-through: the camera follows a closed Catmull-Rom spline through 60 neon rings and floating blocks, banking into turns, with exponential fog and a grid floor.
35 · Bouncing Ball
Animate the classic bouncing ball with real gravity: squash on contact, stretch along velocity, decaying arcs, a spinning striped ball, spacing dots every frame, a timing chart and a label for each animation principle.
36 · Maze
Generate a 48 × 27 maze with a depth-first backtracker and animate the carving, then run a breadth-first search and draw the shortest path from corner to corner.
37 · Op Art Moiré
Make op-art moiré: two drifting sets of concentric rings combined with XOR so the interference patterns animate, then a rotating wedge burst and a pink multiply wipe. Bridget Riley in motion.
38 · Emoji & Stickers
Animate die-cut stickers with white borders and drop shadows: a laughing face with flying tears, a heart with a double-beat pulse and ripple, a spinning star with sparkles, and a “NICE!” word sticker that squashes in.
39 · Split-Flap Board
Build a Solari split-flap departures board: 6 rows × 22 flaps that cycle through the character drum at 18 flips a second with a staggered start, each flap folding on its hinge with shading, plus a live clock.
40 · Choropleth
Make an animated hex-binned choropleth map of a fictional island: hexes pop in west to east, then values tween month by month through a six-step sequential palette, with a legend, a month label and one highlighted hex. Mark the data as illustrative.
41 · Variable Weight
Sweep a variable font from weight 100 to 900 in a travelling sine wave across seven lines of repeated words, colour mapped to weight, with a live “wght” readout.
42 · Rope Physics
Simulate six Verlet ropes hanging weighted letter tiles that spell “MOTION”, then swing a wrecking ball on a pendulum through them. Bake it at 60 fps.
43 · Parallax Dolly
Make a parallax dolly across five noise-generated mountain planes moving at different speeds, with colour fading by distance, fog bands, a pine-tree foreground, a setting sun and a flapping flock.
44 · Melting Type
Make melting type: render “MELT” in a glossy pink gradient, slice it into 6 px columns, stretch each column’s lower half by its own noise-driven drip curve, drop falling droplets and let a puddle grow.
45 · Product UI
Animate a phone UI: a list staggers in, a cursor clicks a toggle that springs over, then a card expands into a detail screen as a shared-element transition, with pink spec notes for the stagger, spring and duration.
46 · Fractal Zoom
Write a WebGL Mandelbrot zoom that dives continuously into Seahorse Valley (−0.7436 + 0.1318i) with smooth escape-time colouring, a slow rotation and a live zoom-factor readout.
47 · Icon Explainer
Make an icon explainer, “How a frame reaches you”: four flat icons (code, GPU, monitor, eye) pop in on springs, dashed connectors draw between them, packets travel along them, and a closing fact card appears.
48 · Lit Scene
Build a lit Three.js scene: a 16 × 16 grid of instanced columns in a travelling height wave, coloured by height, lit by one shadow-casting key light with a soft sky fill, and an orbiting camera.
49 · Smoke Plume
Write a WebGL smoke plume: fractal noise advected upward, shaped by a widening envelope, lit from its own density gradient, warm at the source and cool at the top, with an ember glow at the base.
50 · Raymarched Clay
Write a raymarching shader: a rotating torus smooth-unioned with three orbiting spheres above a floor, with soft shadows, ambient occlusion, rim light and a pastel clay palette.
51 · Growing Tree
Grow a tree with a recursive branching system: branches grow ring by ring with cubic easing, blossoms pop at the tips, the tree sways in the wind and petals drift down.
52 · Org Chart
Animate an org chart from real data: the director at the top, a bus line drawing out, one node per discipline in its colour, and the pieces of this reel hanging under each, popping in on springs.
53 · Audio Visualizer
Build an audio visualizer: a radial spectrum of 64 log-spaced FFT bins around a pulsing bass counter, plus a waveform line, driven by the Web Audio API from a track the viewer loads, with a beat-synced fallback when silent.
54 · In Flux
Write a domain-warping shader, fbm(p + fbm(p + fbm(p))), in indigo, violet, peach and cream with film grain, and raise the words “in flux” in an italic serif over it letter by letter.
55 · End Card
Make an end card: the name rises letter by letter through a mask, a rule draws out, three credit lines settle in, three overlapping cyan, magenta and yellow circles pop in with screen blending, and a registration mark turns.
If the showreel doesn’t load for you, open it on its own page.