AI CSS Animations

Slide Projector

A taupe and brushed-aluminium slide projector on a teak table throws a dusty warm beam across a dark 1970s living room. Its round tray clicks forward as five vacation slides drop in, dim, snap into focus and glow on a beaded screen, ending on a hand-lettered title slide.

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
3D · Photos
What Claude made from the prompt below in Claude Code: one HTML file rendered frame by frame to video. Silent preview.

About this style

Slide shows of 35mm color transparencies, often shot on Kodachrome, were a family ritual from the 1950s into the 1980s, projected in darkened living rooms onto beaded tripod screens. Kodak's Carousel projector, introduced in 1961, held 80 slides in a round tray on top of the machine and let each one drop into the gate by gravity. The click of each advance, the warm beam and the dust drifting through it are as much a part of the memory as the pictures. Kodak stopped making slide projectors in 2004, and the look now stands for memory and family history in films and brand work.

The prompt

Make a 10-second home slide show: a rotary-tray slide projector on a coffee table clicks through five vacation slides onto a tripod screen, dust drifting in its beam.

<inputs>
If I don't give you something, use the default and don't ask.
- Show: "Summer at Lake Ilsabet, 1972" (fictional), hand-lettered on the last slide.
- Slides, in order: 1 the lake at dawn with a canoe at a dock; 2 a striped beach umbrella and a red cooler on sand; 3 a roadside fruit stand with crates of peaches; 4 a pine ridge at sunset over the water; 5 the lake at dusk with the title lettered across it.
- Projector: Lumaray 760 (fictional), on its nameplate.
- Length: 10 seconds.
</inputs>

<direction>
- Scene, 1 unit = 1 m: a 1970s living room at night. A teak coffee table (top #6E4527 with generated grain and a soft satin reflection) carries the projector at lower left; a tripod screen stands 2.6 m away at upper right; behind it a papered wall #4A3A2E with a faint vertical stripe, and a curtain at the far right.
- Camera: fov 34, low behind and to the left of the projector, so the projector fills the lower left (about x 120–860, y 560–1000), the beam crosses the frame on a rising diagonal, and the projected picture spans about x 960–1780, y 140–690. A slow easeInOutSine dolly of 0.12 m to the right with a slight push runs across the piece.
- Light, so everything reads from the first frame: a warm table lamp off-frame left is the key (SpotLight #FFC98A, PCFSoftShadowMap, 2048 map) raking across the projector and the table; a dim cool fill from a window off-frame right (#8FA6C8); a PointLight near the screen, tinted by the current slide's average color, spills a little onto the screen frame and the wall. Bake an environment once with PMREMGenerator.fromScene from a small dark room holding two warm softboxes, so metal and plastic show long soft highlights. ACESFilmic tone mapping, exposure about 1.1, sRGB output. The projector's lit faces read as clear mid-tones, never near black; the walls sit at 12–20% brightness, not black.
- The projector, built like the real machine: a low case 0.34 × 0.11 × 0.28 (RoundedBoxGeometry, radius 0.012) in warm taupe satin plastic #8A7F72 (roughness 0.45) with a brushed aluminium top deck #B9B7B1 (metalness 0.9, roughness 0.35, fine brushing from a generated roughness map); twelve horizontal cooling slots on the side with a warm glow inside; a black front with a lens barrel 0.06 across and 0.10 long, its focus ring knurled (a generated bump map), the front glass showing a bright warm core; a front elevation foot; a side panel with a forward/reverse rocker, focus buttons and a power switch with an amber pilot light; the nameplate LUMARAY 760. On top, the round tray, 0.24 across: a black ring #1E1C1A with 80 radial slots and the numbers 1–80 printed in white around its rim (a CanvasTexture), about 30 white card slide mounts standing in their slots, each with a tiny printed number, a smoky clear dust cover (MeshPhysicalMaterial, transmission 0.6, roughness 0.2) with a center locking ring, and the gate at the front where a slide drops into the body.
- The screen: a matte beaded surface #EAE7E0 (a fine seeded speckle in its normal map) in a black metal frame with a top bar and case, on three thin tripod legs. The picture is a plane just in front of it showing the current slide: the mount's rounded-corner aperture, a hot center (+12%) falling to −25% at the corners, a slight keystone (top 3% wider) because the projector aims up, and edges softened 2px.
- The beam: a frustum from the lens to the picture's four corners, drawn with an additive ShaderMaterial (depthWrite false) at 5–9% brightness, brighter near the lens, with faint streaks along its length, tinted by the slide's average color. Dust: 1,400 seeded Points inside the frustum, drifting slowly on seeded sines (closed-form), visible only inside the beam, soft dots 1–3px that brighten and dim by ±30% at under 1 Hz as they turn.
- The slides: CanvasTextures at 1200×800, painted in code to read as color transparencies rather than flat vector art: saturated reds, deep blues and warm yellows, warm-shifted shadows, soft focus (1–2px blur), seeded grain at 5% and slight vignetting, each framed by the black edge of its mount's aperture. The title slide's lettering is "Pacifico" 400, 96px, white with a soft darker edge, across the dusk sky.
- The advance, the signature: the shutter dims the picture to 15% over 0.08s; the slide rises out of the gate back into the tray (0.12s); the tray turns one slot (4.5°) in 0.18s with a small overshoot; the next slide drops into the gate (0.12s, ending in a 2mm bounce); the shutter opens over 0.1s and the picture comes up 3px soft, snaps into focus over 0.2s, then breathes once (scale 1.01 and back over 0.4s) as the slide warms. Each advance takes 0.6s, with at least 1.4s between starts.
- Premium: a real machine in a real room, a tray you can count, a beam with dust in it, slides that look like transparencies and an advance you can almost hear. Cheap: a grey box with a white cone and stock photos crossfading on a white rectangle.
- Banned: real brands or trademarks (no Kodak, no Carousel), people or faces in the slides, bloom over the whole frame, lens flares, light rays filling the room, a black or unlit projector, sharp vector-looking slides, the picture cutting to black between slides, anything flashing more than 3 times per second.
</direction>

<structure>
- 0.0–0.8s: the room in lamplight; the projector's lamp warms: the lens core, the beam and slide 1 rise from 0 to full.
- 0.8–2.0s: slide 1 holds; dust drifts; the dolly begins.
- 2.0–2.6s: advance to slide 2.
- 2.6–3.4s: slide 2 holds.
- 3.4–4.0s: advance to slide 3.
- 4.0–4.8s: slide 3 holds.
- 4.8–5.4s: advance to slide 4.
- 5.4–7.0s: slide 4, the pine ridge at sunset, holds.
- 7.0–7.6s: advance to the title slide.
- 7.6–8.6s: the title slide settles into focus as the dolly comes to rest.
- 8.6–10.0s: hold; only the dust drifts.
For other lengths, add or remove slides at the same 1.4s spacing; keep the title slide last and at least 1s 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.
- Slides, tray numbers and surface textures are generated once at load; the tray angle, slide drops, shutter, focus, dolly and dust positions are closed-form functions of t.
</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 the projector reads as a real, well-lit machine (a tray with slots and numbers, the dust cover, lens, vents) from the first frame, the beam meets the picture's corners, dust shows only inside the beam, each advance dims the picture without going black, the slides look like transparencies rather than vector art, and the 6s frame shows slide 4 fully in focus. 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 inspirationPhoto animation inspiration