AI CSS Animations

Infrared Landscape

A drifting view across a valley on false-color infrared film: forests burn magenta and scarlet, meadows glow pink, the river runs black with cyan reflections under a deep blue sky, and cloud shadows race across the hills until the sun breaks through, all in film grain.

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
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

False-color infrared film was developed during the Second World War to tell living vegetation from camouflage, because healthy leaves reflect near-infrared light strongly. Its three layers record green, red and near-infrared and print them as blue, green and red, so foliage turns magenta and scarlet, water goes dark and skies deepen. Kodak sold it as Aerochrome to scientists, foresters, aerial surveyors and photographers until it was discontinued in 2009. Photographers, music video directors and fashion shoots now recreate its look.

The prompt

Make a 10-second landscape on false-color infrared film: the camera drifts across a valley where leaves glow magenta and scarlet, water runs black and the sky goes deep blue, as cloud shadows race over the hills and the sun breaks through.

<inputs>
If I don't give you something, use the default and don't ask.
- Place: Velmora Valley (fictional).
- Title: "Velmora Valley, in infrared"
- Line: "Leaves reflect infrared light, so this film paints them red."
- Frame tag: "False-color infrared · frame 14"
- Length: 10 seconds.
</inputs>

<direction>
- Look: a landscape photograph on false-color infrared film, moving: one slow, steady drift across a valley on a late afternoon. Living foliage burns magenta and scarlet, meadows turn pink and coral, water goes near-black with cyan reflections, the sky deepens to a hard blue and clouds stay white. Film grain, a soft red halation around the brightest whites and a slight blue-cyan crossover in the shadows make it a photograph, not a filter.
- Color follows the film's physics, so use it for every surface: the film records green as blue, red as green and near-infrared as red. Broadleaf leaves reflect near-infrared strongly, so they print hot magenta-red; conifers reflect less, so they print deeper crimson; grass prints pink; dry grass, dirt and stone print pale yellow to grey-lilac; water absorbs infrared, so it prints near-black; red paint prints yellow; the sky prints deep blue; white stays white.
- Palette: sky #0E2E8C at the top through #2F6FD0 to #7FB6EE at the horizon; clouds #FFFFFF with #C9D6F2 shading; far ridge lavender-blue #6A6FB8 with its forests as #9A5FB0 stipple; broadleaf canopy lit #FF3E7A, mid #E0245E, shade #8C1240; conifers lit #C8264E, shade #5E0E2C; meadow #FF9AA8, sunlit #FFC2C0, shaded #D86B86; dry grass and roads #E8D79A; rock #B9B4C8 with #7E97B0 shadows; river #0C1430 with cyan reflections #4FA8E0; the farmhouse roof (red paint) #F2D33A and walls #F4F0E8; shadows leaning blue-cyan #3A4F86. No green anywhere.
- The valley, as parallax layers painted once at load into wide offscreen canvases, each in a sunlit and a shaded version (see the light, below):
  1. sky: the gradient, a few high wisps, and six cumulus of 20–40 overlapping soft puffs with flat bases, drifting right at 10–20px/s and placed so none enters the title's patch of clear deep blue (x 1100–1800, y 100–260);
  2. far ridge, horizon at y 470: a seeded fBm skyline hazed lavender-blue, its forest a soft magenta-violet stipple and a rocky summit in pale lilac;
  3. mid hills, two layers: broadleaf woods as packed rounded crowns (each crown a cluster of 5–9 blobs 30–80px, lit from the upper left, with a hot rim on the sun side and a crimson core) and stands of conifers as narrow layered spires in crimson, with seeded clearings and a pale yellow switchback road;
  4. valley floor: rolling pink meadows with mown stripes, crimson hedgerows, a small farmhouse with a yellow roof beside a barn, and a pale road;
  5. the river, winding from the left middle to the bottom right: near-black, with streaks of cyan sky reflection that slide as the camera drifts, two small white glints, and magenta willows along its banks;
  6. foreground: a birch at the left edge (white bark with black marks) whose leaves frame the top-left corner in hot pink, and tall pink meadow grass along the bottom edge.
- Light, all from t:
  - cloud shadows: a seeded low-resolution noise mask moving right at 70px/s marks where clouds shade the land. Each land layer shows its sunlit version where the mask is clear and its shaded version beneath clouds (35% darker, pushed toward crimson and blue-cyan), blended through the soft mask, so shadows race across the hills;
  - the sun breaks through from 3.2 s: the mask's threshold rises over 2 s and light floods the valley from left to right, the canopies turning hot pink and scarlet;
  - late light from 6.6 s: a warm infrared rim (#FF6FA0) grows on sun-facing crown edges and on the far ridge, crown shadows lengthen to the right, and the top of the sky deepens 10%.
- Film: seeded grain at 7%, renewed 24 times per second; halation, a soft red-orange halo (#FF5A3A at 12%, 18px) around the clouds' brightest edges and the river glints; a 14% vignette; the blacks lifted slightly toward #10183A.
- Camera: one slow drift, trucking right 160px and pushing in 4% across the piece on easeInOutSine, with layer parallax of 0.15× (far ridge), 0.4× and 0.55× (mid hills), 0.7× (valley floor), 0.85× (river) and 1.3× (foreground). The birch sways ±1.2°, its leaves fluttering on their own sines.
- Type (HTML over the canvas): the title in Instrument Serif 400 italic, 88px, #FFFFFF, right-aligned at (1800, 180) over the deep sky; the line in Figtree 500, 26px, #DDE6FF, right-aligned beneath it, at most 640px wide; the frame tag in Space Mono 400, 20px, #FFE7EF at 85%, right-aligned at (1800, 1000) over the dark river.
- Premium: color that obeys the film everywhere (every living leaf red, conifers deeper, water black, red paint yellow, sky deep blue), light that changes with racing cloud shadows, grain and halation, real parallax. Cheap: a hue-rotate filter over an ordinary green landscape, everything uniformly pink, flat layers with no light.
Banned: green foliage, hue-rotate or invert filters, neon glow, purple-everything vaporwave color, people or animals, real place names, photo textures, lens flares, bloom beyond the halation, anything flashing more than 3 times per second.
</direction>

<structure>
- 0.0–1.4s: under broken cloud: the valley in shaded crimson, with patches of hot magenta moving where the sun gets through; the drift begins.
- 1.4–3.2s: drifting: cloud shadows sweep over the farmhouse and the river; the river's cyan streaks slide; the birch sways.
- 3.2–5.2s: the sun breaks through and light floods down the hills from left to right, every canopy turning hot; the title rises 10px as it fades in at 4.6 s.
- 5.2–6.6s: full sun. The 6.0 s frame is the whole valley in bright infrared color, one cloud shadow lingering on the far ridge, the title in place.
- 6.6–8.4s: late light: rims grow, shadows lengthen and the sky deepens; the line rises in at 7.0 s and the frame tag types on at 7.8 s.
- 8.4–10.0s: hold: the drift eases to rest by 8.8 s; only the grain, the clouds and the birch's leaves move.
For other lengths, stretch the cloud-shadow and full-sun beats; keep the break of sun at 2 s 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.
- Paint each layer's sunlit and shaded versions once at load (keep load under 10 s); each frame composites them through the cloud mask (a 192 × 108 noise canvas scaled up smoothly, its offset and threshold functions of t), applies the drift and parallax, adds the late-light rims and halation, then a grain tile chosen by floor(t × 24) from a few seeded tiles.
</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 no pixel reads green, broadleaf canopies are hotter than the conifers, the river is near-black with cyan streaks, the roof prints yellow, cloud shadows visibly race across the hills before 3.2 s and the light floods in after it, the grain is present but calm, the title reads cleanly on the sky and the tag on the river, and the 6.0 s and final frames are complete compositions. 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 inspiration