AI CSS Animations

Robot Assembly Line

Toy robots ride an indexed conveyor through three stations while yellow industrial arms seat bodies, screw on heads and press power buttons. Each robot's eyes switch on, it blinks twice, tilts its head and waves, and a counter rolls from 41 to 44.

Written and rendered by AI CSS Animations Oct 18, 2026

Type
prompt
Made with
Claude Opus 5.5 in Claude Code
Built in
three.js
Topics
Characters · 3D
What Claude made from the prompt below in Claude Code: one HTML file rendered frame by frame to video. Silent preview.

About this style

Robotic assembly lines date to 1961, when the first Unimate industrial arm went to work at a General Motors plant in New Jersey; the word robot itself comes from Karel Čapek's 1920 play R.U.R. Real lines are indexed: the conveyor moves a fixed distance and stops, every station works at once, then it moves again. Animated toy robots built from rounded boxes, screws and glowing eyes are a favorite of explainer videos, tech brands and children's media because they turn a process into a cast of characters.

The prompt

Make a 10-second 3D toy-factory film: little robots ride a conveyor, industrial arms assemble them, and each one blinks to life and waves.

<inputs>
If I don't give you something, use the default and don't ask.
- Factory: Kettlebolt Works (fictional).
- Title: "Line 3, morning shift"
- Station tags: "1 · BODY", "2 · HEAD", "3 · POWER ON"
- Counter: "Built today", from 41 to 44.
- Robots, in line order: 07 coral, 08 sky blue, 09 butter yellow, 10 mint.
- Length: 10 seconds.
</inputs>

<direction>
- Look: a bright tabletop miniature shot like a premium toy commercial: glossy plastic, brushed steel, a ribbed rubber belt and soft studio light. Every object is clearly lit from the first frame; nothing sinks into dark.
- Palette: studio sweep #E3F1EC rising to #F4FAF7 behind; floor #D6EAE2; conveyor frame #2F3A48; steel rollers and trim #C9CED6; belt rubber #3C4452; arms safety yellow #F4B730 with graphite joints #2B2F36; robot shells coral #FF6E5A, sky #4FB3F2, butter #F7CF4A and mint #6FD8B4, with cream panels #F6EFE0; power button #E8433A; eyes off #1D2431, eyes on #7DF2FF (emissive); text #1E2A33, secondary #5B6B74.
- The line, in world units along x: a feed chute at x −8.4, station 1 at −4.8, station 2 at −1.2, station 3 at 2.4, the belt's end at 6.0, then an outfeed platform (a low steel deck with a hazard-striped edge in yellow and graphite) with two spots at 6.9 and 8.2. The belt is 1.4 wide on a frame 0.9 high, with nine visible rollers and raised ribs every 0.3 units.
- The robot, about 1.9 units tall when complete, built with care:
  - legs unit: two stubby cylinders (radius 0.16) with ball knees and rounded boots, joined by a hip block that carries a steel socket;
  - body: RoundedBoxGeometry 0.95 × 0.9 × 0.7 (radius 0.12) in the robot's color, with an inset cream chest panel holding the red power button and two small round buttons, a five-slot speaker grille, four steel screw heads and a stenciled number from a CanvasTexture; capsule arms with ball shoulders and elbows, ending in two-finger claws;
  - head: RoundedBoxGeometry 0.8 × 0.62 × 0.66 (radius 0.14) with a dark glass visor inset on the front holding two capsule eyes, bolt ears on the sides, and an antenna (a thin rod with a ball tip) on a spring;
  - neck: a short steel cylinder with a threaded ring.
- The arms: three six-axis industrial arms stand behind the belt, one per station: turret base, shoulder link, elbow, forearm, wrist and tool, with exposed piston rods and a cable loop. Arm 1's gripper takes bodies from a parts shelf behind it; arm 2's gripper takes heads from a second shelf and screws them on with two full turns; arm 3 ends in a rubber-tipped pusher for the power button. Solve each arm with two-link analytic IK in its vertical plane plus base yaw, so the tool tip lands exactly on its target; a carried part rides the tool tip, then joins the robot.
- Rhythm, like a real indexed line: the belt moves only between dwells, one station (3.6 units) in 0.6 s on easeInOutCubic, carrying its ribs and every robot on it together; during a dwell all three arms work at once. Arm moves take 0.35–0.5 s on cubic-bezier(0.5, 0, 0.2, 1) and stop dead; parts seat with a 0.04-unit drop and a 2% squash.
- Waking up: the eyes fade on over 0.3 s as one bright line wipes down the visor, then two blinks (eye scaleY to 0.1 and back in 0.12 s, 0.3 s apart); the head lifts and tilts 12° toward the camera while the antenna wobbles on a damped spring; the right arm rises and the claw waves ±28° twice at 2 Hz. A robot leaving the belt hops to its platform spot in small hops of 0.25 s, each landing with a 4% squash.
- Light: RoomEnvironment through PMREMGenerator for soft reflections; a HemisphereLight #FFFFFF over #CFE4DA at 0.9; a key DirectionalLight from front-left above at 2.2 with soft shadows (PCFSoftShadowMap, 2048 map, radius 4); a white rim light from behind right. Plastic is MeshPhysicalMaterial (roughness 0.32, clearcoat 0.6); steel metalness 1, roughness 0.3; rubber roughness 0.9. ACESFilmic, exposure 1.1, sRGB output. Every foot sits on a soft, dark contact shadow.
- Camera: fov 32, a three-quarter view from front-right at pitch 18°, so the line recedes toward the upper left and station 3 and the platform are nearest, about 40% larger on screen than station 1. Fit the whole line with 80px margins while keeping a title zone (top-left, to x 900 and y 230) and a counter zone (bottom-left, to x 560, from y 860) clear of geometry. The camera pushes in 4% across the piece on easeInOutSine.
- Type (HTML over the canvas): kicker "KETTLEBOLT WORKS" in "Sora" 700, 20px, tracked 0.16em, #C9382B; title in Sora 700, 60px, #1E2A33, top-left at (120, 96), under the kicker; station tags in Sora 600, 20px, white on #2F3A48 pills, projected onto the belt frame's front face under each station; the counter label "BUILT TODAY" in Sora 600, 20px, tracked 0.14em, #5B6B74, at (120, 900), with the number beneath it in "Azeret Mono" 600, 64px, rolling up by one (an odometer roll, 0.35 s, easeOutCubic) each time a robot's eyes come on.
- Premium: real construction (screws, grilles, pistons, a ribbed belt), arms that land exactly on their targets and stop, an indexed rhythm, and robots whose wake-up has personality. Cheap: floating primitives, a belt that slides forever, arms waving near parts without touching them.
Banned: sparks, welding flashes, smoke, dark or moody lighting, bloom, robots with mouths or human faces, parts passing through each other, arms missing their targets, sliding feet, real brand logos, anything flashing more than 3 times per second.
</direction>

<structure>
- 0.0–1.0s: the line at rest, arms poised: 07 (complete, eyes dark) at station 3, 08 (legs and body) at station 2, 09 (legs only) at station 1, and 10's legs waiting in the feed chute; the kicker, title, tags and counter (41) rise in.
- 1.0–2.6s: dwell 1: arm 1 seats a butter body on 09; arm 2 lowers a sky head onto 08 and screws it on; arm 3 presses 07's button at 1.6 s and 07 wakes, blinks, tilts its head and waves; the counter rolls to 42.
- 2.6–3.2s: index: 07 rides to the belt's end and hops to the far platform spot; 08 moves to station 3, 09 to station 2, and 10's legs slide from the chute to station 1.
- 3.2–4.8s: dwell 2: a mint body onto 10, a butter head onto 09, power to 08, which wakes and waves; on the platform 07 turns its head to watch; the counter rolls to 43.
- 4.8–5.4s: index: 08 hops to the near platform spot; 09 moves to station 3 and 10 to station 2.
- 5.4–7.0s: dwell 3: arm 2 screws a mint head onto 10; arm 3 powers 09, which wakes and waves while 07 and 08 wave back from the platform; the counter rolls to 44. At 6.0 s two arms are at work and three robots are waving: a busy, complete frame.
- 7.0–8.4s: the arms return to rest one after another, 0.15 s apart; 07, 08 and 09 settle into a final pose, right claws raised and heads tilted toward the camera; 10 stands finished but dark-eyed at station 2.
- 8.4–10.0s: hold, perfectly still, the antenna springs settled.
For other lengths, add or remove whole dwell-and-index cycles and keep 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: three.js as an ES module pinned to three@0.160.0 through an import map on jsDelivr (`three` and `three/addons/`). WebGLRenderer with antialias, preserveDrawingBuffer: true and setPixelRatio(window.devicePixelRatio); render once at the end of every seek. Text is HTML over the canvas.
- RoundedBoxGeometry (three/addons/geometries/RoundedBoxGeometry.js) and RoomEnvironment (three/addons/environments/RoomEnvironment.js) are fine. Every belt offset, arm angle, part position and wake-up state is a closed-form function of t read from one keyed timeline; nothing is integrated frame to 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 every arm's tool tip meets its part or button exactly, no parts pass through each other, the belt and the robots on it move together and only during indexes, every robot shows clear shading and a soft contact shadow in every frame, the station tags and counter stay clear of the arms, and the counter reads 44 at the end. 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: 3D motion design inspirationCharacter animation inspiration