AI CSS Animations

Factory Automation

Top-down on a pale celadon floor, a terracotta drill feeds ore to a brick smelter, inserter arms swing plates into a cobalt assembler that stamps brass gears, then the line is copied eight times and the camera pulls back on a whole working factory. Inspired by Factorio.

Written and rendered by AI CSS Animations Oct 19, 2026

Type
prompt
Made with
Claude Opus 5.5 in Claude Code
Built in
Canvas
Topics
Diagrams · Shapes
What Claude made from the prompt below in Claude Code: one HTML file rendered frame by frame to video. Silent preview.

About this style

Factory automation games ask players to mine raw resources and build production lines of conveyor belts, robotic arms and machines that turn them into ever more complex products, then scale those lines up until they run on their own. Factorio, which entered early access in 2016 and reached version 1.0 in 2020, made the genre widely popular, and many others followed in 2D and 3D. Its look is a top-down grid of machines with visible moving parts, belts that carry every item in plain sight, and the pleasure of a layout that flows. Educators and engineers also use it to explain throughput, ratios and bottlenecks.

The prompt

Make a 10-second top-down factory-automation scene: a drill, a belt, a smelter and an assembler connect into one working line, then the line is copied and scaled up into a whole factory, with every item visible on every belt.

<inputs>
If I don't give you something, use the default and don't ask.
- Factory: Fennick Works, Line 3 (fictional).
- Title: "From ore to gears"
- Machines and rates: drill 2 ore/s · smelter 1 ore → 1 plate, 2 plates/s · assembler 2 plates → 1 gear, up to 4 gears/s.
- One module (a drill and a smelter) makes 120 plates a minute, enough for 60 gears a minute. Eight modules make 960 plates a minute, which two assemblers turn into 480 gears a minute.
- Final line: "8 drills · 8 smelters · 2 assemblers · 480 gears a minute"
- Length: 10 seconds.
</inputs>

<direction>
- Look: a top-down automation factory drawn as a crisp, warm technical illustration: a tiled concrete floor, machines with real moving parts, belts whose slats crawl and whose every item can be followed, inserter arms that swing items from belt to machine, and a pull-back as one working line is copied into a whole factory.
- Palette, light and warm rather than brown and industrial: floor celadon concrete #CFDDD3 with tile seams #B5C7BC and faint stains #C3D3C8; ore patch slate rock #4E5866 with iron-ore lumps #7E92B0 and rust specks #B5643A; belts graphite #2C3036 with slats #3C424A, side rails #8D96A0 and mustard direction chevrons #F2B53A; drills terracotta #C8613F with decks #A84E33 and steel bits #AEB8C2; smelters cream brick #E8DCC6 with firebrick tops #8E3B2E and furnace mouths #FF8A3D to #FFD27A; assemblers cobalt #2F57B8 with cream decks #EEE6D6; inserters mustard #F2B53A with graphite joints #2C3036, stack inserters with cobalt grippers; items: ore lumps #6E86A8, plates silver #D9DEE4 with a dark edge #8A939D, gears brass #D7A33F with tooth lines #9C7426; build ghosts cobalt #2F57B8 at 25% with a dashed outline; panel cream #F7F2E7 with ink #1F2328 and terracotta accent #C8613F. Terracotta and cobalt sit on cool celadon; mustard marks everything that moves.
- Light and shadow: one light from the upper left: every machine and item has lit top faces, a darker lower-right edge and a soft 6px shadow down-right (#9DB0A4 at 60%), so the floor reads as a surface and the machines as objects on it.
- The factory, 34 × 16 tiles of 44px at the final zoom (x 212–1708, y 300–1004 on the stage):
  - ore patch along the left edge, columns 0–4;
  - eight drills (2 × 2) in column 1–2 at rows 0, 2, 4 … 14, each pushing ore onto a 2-tile belt (columns 3–4) that ends at an inserter (column 5) feeding a smelter (columns 6–7); a second inserter (column 8) drops plates onto the plate bus;
  - the plate bus: a two-lane belt down column 9 from row 0 to row 15, turning east along row 15; modules alternate lanes;
  - assembler A (3 × 3) at columns 12–14, rows 11–13, and assembler B at columns 18–20, rows 11–13, each fed from row 15 by a stack inserter (lifting whatever plates have reached it, up to 4 per swing) and each emptied north by a stack inserter (2 gears per swing) onto a gear belt along row 9 that runs east into a 2 × 2 chest at columns 30–31, rows 8–9;
  - the area above row 8 east of column 12 stays open floor, under the panel.
- Machines, each with construction detail:
  - drill: a terracotta chassis with four bolt heads, a vented deck, a steel bit disc with four spiral flutes turning once per second, an output chute; an ore lump pops onto the belt every 0.5 s;
  - smelter: a ring of cream bricks under a firebrick cap, a round furnace mouth whose glow breathes ±8% at no more than 1.5 Hz, a chimney releasing soft smoke puffs (#9AA6A0 at 30%) that drift and fade;
  - assembler: a cobalt housing with a cream deck, a central gantry arm that swings a stamping head once per gear, small status lamp (steady mustard while running);
  - inserter: a mustard two-segment arm on a round base that swings 180° from pickup to drop in 0.2 s and returns in 0.15 s (easeInOutSine), the item held in its gripper, the arm's elbow bending as it swings;
  - belts: straight, corner (a quarter-circle with curved slats) and the two-lane bus; slats move with the items.
- Item flow, exact and closed form: belts move at 4 tiles per second, slats included. Every item has a scheduled life (spawned by a drill, carried, lifted by an inserter, inside a machine, produced, carried again) computed once at load from the rates, so items never overlap, never jump and never back up: ore 2 tiles apart on module belts, plates half a tile apart on each bus lane, gears a quarter tile apart on the gear belt. Inserters swing exactly when an item reaches their pickup point.
- Building: a machine first appears as a cobalt ghost, then builds in 0.25 s (scale 0.9 to 1, four corner brackets ticking in, a ring of 8 dust motes); belts build tile by tile at 40 tiles per second like a line being drawn. Copy and paste: a cobalt dashed selection rectangle with corner handles draws around the first module (0.3 s), lifts a ghost copy, and stamps seven copies up the column, 0.12 s apart, each building at once.
- Panel (HTML over the canvas, x 1340–1800, y 96–330, cream, a 1px ink border, 12px radius, soft shadow): rows "Ore", "Plates" and "Gears", each a label in Chivo 600, 22px, and a rated value in Chivo Mono 500, 26px, tabular, "/min"; beneath, a gear-rate sparkline (2px terracotta line, stepped) and the machine counts. Values roll like an odometer over 0.4 s when machines are built: Ore 0 → 120 → 960, Plates 0 → 120 → 960, Gears 0 → 60 → 480.
- Camera: one continuous move on cubic-bezier(0.45, 0, 0.2, 1) in three stages: close on the bottom drill at 2.4× (a tile 106px), easing to 1.6× on the first module and assembler A, then pulling back to 1.0× on the whole factory. No shake.
- Type: kicker "FENNICK WORKS · LINE 3" in Chivo 700, 20px, tracked 0.16em, terracotta, top-left at (120, 96); title Chivo 800, 72px, ink, beneath; the final line in Chivo 500, 26px, ink, beneath the title on baseline 252, clear of the factory.
- Premium: machines with moving parts, items you can follow from ore to gear, inserters that really carry them, belts that never back up, honest ratios. Cheap: colored squares sliding along lines, items teleporting into machines, a static diagram with arrows.
Banned: real game names, sprites, icons or color schemes; dark brown industrial palettes; items overlapping or jumping; belts backing up; glow except the furnace mouths; neon; motion blur; camera shake; anything flashing more than 3 times per second.
</direction>

<structure>
- 0.0–1.0s: close on the bottom drill on its ore patch, bit turning, one ore lump waiting in its chute; the kicker and title rise 12px as they fade in.
- 1.0–2.4s: the belt draws to the right (1.0 s); the smelter ghost appears and builds (1.2 s); both inserters build (1.3 s); the first ore swings in at 1.5 s, the furnace mouth lights, and the first plate drops onto the bus at about 2.4 s as the bus draws from that drop point down and east (2.0–2.4 s); it extends up the column during the copy. The panel slides in; Ore and Plates roll to 120.
- 2.4–4.8s: the camera eases to 1.6×; assembler A builds (2.6 s) with its two stack inserters, then the gear belt and the chest (3.4 s); plates ride the bus and are lifted in; the gantry stamps and the first gear drops onto the gear belt at about 4.8 s; Gears rolls to 60.
- 4.8–6.0s: copy and scale: the selection draws round the module (4.8 s) and seven copies stamp up the column (5.0–5.7 s) as the bus extends with them; assembler B builds (5.75 s); the camera pulls back to the whole factory; Ore and Plates roll to 960 and Gears to 480. At 6.0 s every machine is built, the whole factory is in frame and the belts are filling: a complete composition.
- 6.0–7.6s: full flow: every bus lane fills with plates, every inserter swings in a staggered rhythm, smoke rises from eight chimneys, gears stream into the chest; the sparkline steps up.
- 7.6–8.6s: the final line rises in; a small mustard check chip "target met" pops beside Gears.
- 8.6–10.0s: hold: the factory runs, the camera still.
For other lengths, change the number of copies stamped; keep the first line's timing and at least 1 s of hold.
</structure>

<build>
- One self-contained index.html (inline CSS and JS), a 1920×1080 (16:9) stage scaled to fit the window, designed for 60fps. No image, video, texture or model files: every shape and texture is generated in code.
- window.seek(t), t in seconds, computes every visual from t alone: no CSS transitions or CSS animations, no setTimeout/setInterval, no state carried between frames, randomness only from a seeded PRNG. Anything cumulative is solved analytically from t or precomputed once at load at a fixed step. Past the end, seek clamps to the last frame.
- Without ?render in the URL, drive seek from requestAnimationFrame so it plays in a browser (loop after a 1s end hold); with ?render, don't start that loop.
- Google Fonts via <link> are fine; await document.fonts.load() for each face before defining window.seek.
- Engine: Canvas 2D, repainting every frame from scratch, the backing store sized from CSS size × devicePixelRatio. Canvas won't fetch fonts itself, so the awaited loads matter.
- Machine build times, the camera and the panel are closed-form functions of t. Item schedules (every ore, plate and gear, with its spawn time, path, pickup and drop times) are computed once at load from the rates and the build times; seek(t) only evaluates each item's position from its schedule. Draw the floor, ore patch and static parts of each machine once into cached canvases; redraw belts' slats, items, arms, bits, smoke and the furnace glow each frame.
</build>

<check>
Before showing me, step through one frame per second (t = 0…10): screenshot each and look at it. Fix overlaps, clipped or cramped text, and anything off-style or Banned. Check that every item can be followed and none overlap, jump or wait on a belt; each inserter swing carries an item from a belt to a machine or back; ratios hold (one module feeds 120 plates a minute; eight feed 960, which make 480 gears a minute in two assemblers); machines read as drills, smelters and assemblers with moving parts; the panel stays clear of the factory; the 6.0 s and final frames are complete compositions; and the final line sits clear of the factory and the title. Confirm seek(10) and seek(11) match, so the final frame holds.
</check>

Ours, and free to use under CC0: copy it, change it, ship it. No credit needed.

Similar prompts

More like this on the motion design inspiration board: Motion graphics inspirationDiagram animation inspiration