A handheld thermal camera feed of a kitchen window at night: a cat lifts its head on the sill, tea steams in a mug and a radiator warms the wall, while a spot meter hops between readings, a paw print fades on the sill and the image wipes from ironbow to rainbow to white-hot.
Written and rendered by AI CSS Animations Oct 19, 2026
A thermal camera sees long-wave infrared, the heat every object gives off, and turns each pixel's temperature into a color through a palette such as ironbow, rainbow or white-hot. Warm bodies glow and cold surfaces go dark; glass is opaque to this light, so a window shows reflected heat rather than the view outside, and fur reads cooler than eyes because it insulates. Once a military and industrial tool, it is now used by firefighters, building inspectors, electricians, vets and wildlife filmmakers. Its look has become shorthand for seeing the invisible.
Make a 10-second thermal camera feed: a cat on a windowsill, a steaming mug and a radiator seen in heat, with live temperature readouts, a spot meter that hops between them and palette switches from ironbow to rainbow to white-hot. <inputs> If I don't give you something, use the default and don't ask. - Camera: Kelvra TC-320 (fictional), a 320 × 240 handheld thermal camera. - Scene: a kitchen window at night, 23:40: a cat on the sill above a radiator, a mug of tea beside it, a cold window behind. - Readings: window glass 6.2°C · cat's eye 37.6°C · tea 61.8°C, cooling to 61.3°C · radiator 54.3°C · coldest spot 5.8°C - Palettes, in order: IRONBOW, RAINBOW, WHITE HOT - Length: 10 seconds. </inputs> <direction> - Look: a real handheld thermal camera's live feed: a soft, low-resolution image (320 × 240 upscaled smoothly) where heat is color and cold is dark, with a few thin instrument overlays. It should feel measured, not stylized: shapes are read by temperature, never by outlines. - Layout: the feed is 4:3, 1200 × 900 at x 120–1320, y 90–990, with 8px rounded corners in a 2px #3A3F46 bezel; the instrument panel fills x 1380–1800; around them, the stage is matte graphite #15171B. - The temperature field, in °C per sensor pixel (320 × 240, origin at the top left), rebuilt every frame from t: - window: the upper part of the frame, x 20–300, y 0–132: two panes split by a mullion at x 160, the glass at 5.5–7.0°C (coldest in the corners, 5.8°C at the lower-left corner) inside a 6px frame at 12–14°C. Glass is opaque to long-wave infrared, so there is no view outside: the panes show instead a faint mirrored heat reflection of the camera's operator, a heavily blurred head-and-shoulders warmth +3°C above the glass in the right pane, the detail that makes it real; - wall: 18.5–20°C around the window and below the sill, with a warm stain rising above the radiator (+6°C at the sill, fading over 60 sensor px). Air itself is invisible to the camera, so the radiator's heat shows only where it warms surfaces; - sill: a wooden sill across the frame at y 132–146, 21°C, warming to 26°C above the radiator; - radiator: a panel radiator at x 150–300, y 165–235 with 12 vertical channels at 54.3°C and the gaps between them at 47°C, cooler toward the bottom (42°C), and a pipe and valve at its left at 58°C; - cat: lying in a loaf on the sill top at x 40–150, y 84–132, its head at the right end. Fur insulates, so its coat reads 29–33°C, cooler than its body; its eyes are hottest (37.6°C), the inner ears 36°C, the nose cool (27°C), the tucked paws 31°C, and the tail 27–29°C, cooling toward its tip. Its flank warms 1.2°C and rises a sensor pixel on each breath (0.5 Hz). Its head lifts and turns toward the camera (3.4–4.4 s), the ears rotate, and its tail flicks once (7.0 s); - mug: on the sill top at x 228–262, y 100–132: ceramic walls at 55°C, a cooler handle (41°C), the tea's surface 2°C hotter than the rim, cooling by Newton's law from 61.8°C to 61.3°C over the piece (toward 21°C with a time constant of about 810 s); a steam plume rising and curling above it (42°C at the mug fading to the background), made of seeded noise advected upward at 18 sensor px per second; - paw print: at 6.2 s the cat shifts its front paws forward, leaving a paw-shaped warm print on the sill (27°C) that cools back toward 21°C over 3 s; - optics and sensor: blur the field with a 1.3-pixel Gaussian (the lens), add fixed-pattern column noise (±0.05°C) and temporal noise (±0.08°C, seeded by frame number), so flat areas look alive but calm; the range is locked at 4.0–64.0°C so colors stay stable. - Palettes, 256-entry lookup tables interpolated from these stops: - IRONBOW: 0.00 #08031C, 0.14 #24096A, 0.28 #5F0E8E, 0.42 #A01E86, 0.56 #DA3E4A, 0.70 #F47A13, 0.84 #FDBE33, 0.94 #FFE98A, 1.00 #FFFBE8; - RAINBOW: 0.00 #12002E, 0.15 #2E06B4, 0.30 #0060FF, 0.44 #00C8E8, 0.58 #1FE26A, 0.72 #E9F000, 0.86 #FF8A00, 0.95 #FF2A2A, 1.00 #FFFFFF; - WHITE HOT: #000000 to #FFFFFF with a gamma of 0.9. - Each switch is a vertical wipe crossing the feed left to right in 0.6 s with a 60px feathered edge, never a hard cut of the whole frame; the scale bar and chips change with it. - Overlays on the feed, white #F2F4F6 with a 1px black outline at 50% so they read on any palette: - a spot meter: a 40px crosshair with a 12px gap and its reading beside it in Share Tech Mono 400, 28px. It glides between targets on cubic-bezier(0.45, 0, 0.2, 1) over 0.6 s, and its value eases to each new reading over 0.3 s like a real meter, never flickering through digits; - auto markers: a small hot triangle #FF5A36 tracking the hottest pixel (the tea) and a cold triangle #4AA8FF at the coldest (the glass corner), each with its value in 22px; - 40px corner brackets (2px) at the feed's corners; - status at the top left: "TC-320 · 320×240 · ε 0.95" in Share Tech Mono 22px; at the top right a clock "23:40:12" counting seconds; "REC" with a steady dot (it never blinks); - a NUC moment: from 5.0 to 5.4 s the image holds still while a small "NUC" tag shows, as the sensor's shutter recalibrates, then the image resumes; no flash and no black frame; - a "ZOOM 1.6×" tag while zoomed. - Instrument panel (x 1380–1800): the active palette's name in Rajdhani 600, 36px, tracked 0.1em, at y 150; the three palette names as chips beneath it (Rajdhani 600, 22px), the active one filled; a vertical scale bar 48 × 600 at x 1390, y 240–840 showing the active palette, ticked every 10°C from 4 to 64 with labels in Share Tech Mono 22px; at x 1560–1800 from y 260, four readings at 110px pitch: SPOT, MAX, MIN and Δ, each label in Share Tech Mono 20px #9AA3AD over its value in Share Tech Mono 40px #F2F4F6. MAX follows the tea, MIN reads 5.8, Δ is MAX − MIN (56.0 falling to 55.5). - Camera motion: handheld but steady, the image drifting ±6px on slow seeded sines (0.2–0.4 Hz); one digital zoom to 1.6× centered on the cat's head (3.0–3.5 s) and back to 1× (4.4–4.9 s), honestly softer while zoomed. - Premium: a believable temperature field (fur cooler than eyes, a window that shows reflected heat instead of the outside, a mug that cools, a fading paw print, warmth only where surfaces are warmed), smooth low-resolution optics, overlays that report numbers matching the image. Cheap: a photo through a gradient map, sharp outlines, a sci-fi HUD, random hot colors. Banned: outlines or edges drawn on objects, any view through the glass, visible warm air plumes, sci-fi HUD elements (radar, hexagons, glitch), people other than the operator's blurred reflection, blinking REC dots, hard cuts between palettes, scanlines, anything flashing more than 3 times per second. </direction> <structure> - 0.0–1.4s: the feed fades up from graphite over 0.4 s in IRONBOW: the cold window, the cat's warm loaf, the radiator's channels, the steaming mug; the brackets, status and panel draw in; the spot meter rests on the cat's eye at 37.6°C. - 1.4–3.0s: the spot meter glides to the tea in the mug (about 61.7°C by then) and on to a radiator channel (54.3°C); steam curls; the cat breathes. - 3.0–4.6s: the digital zoom eases to 1.6× on the cat; it lifts its head and turns toward the camera, its eyes the hottest points on the cat, its ears turning. - 4.6–6.0s: the zoom returns to 1×; the NUC hold (5.0–5.4 s); the spot meter glides to the window glass (5.4–6.0 s) and reads 6.2°C beside the cold marker. The 6.0 s frame is the full IRONBOW scene, complete and still mid-breath. - 6.0–7.4s: the cat shifts its paws (6.2 s) and the warm print appears on the sill; the palette wipes to RAINBOW (6.6–7.2 s); its tail flicks (7.0 s). - 7.4–8.6s: the palette wipes to WHITE HOT (7.8–8.4 s); the spot meter returns to the cat's eye. - 8.6–10.0s: hold in WHITE HOT: the cat breathes, the steam curls, the paw print keeps fading and the tea reads 61.3°C. For other lengths, stretch the spot meter's tour; keep each wipe at 0.6 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. - Each seek, compute the 320 × 240 temperature field into a Float32Array from closed-form shapes, seeded noise and t; blur it, map it through the active palette (or both palettes across a wipe) into an ImageData, and draw it scaled up with smoothing on. The overlays and panel are HTML over the canvas. The hottest and coldest markers come from scanning the field 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 the scene reads as a cat, a steaming mug and a radiator under a cold window purely by temperature, the cat's eyes are its hottest points and its fur cooler, no outlines appear, the window shows only the faint operator reflection, every overlay value matches the field at its marker, MAX falls from 61.8 to 61.3 and Δ tracks it, each palette change is a feathered wipe, the NUC hold has no flash, and the 6.0 s and final frames are complete. 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.
A jazz-tempo film title sequence in flat vermilion, mustard, bone and black: hand-cut paper shards jab in on the beat,…
A Swiss-style event poster that builds itself on a visible 12-column grid: grotesque type rises out of baseline masks,…
A primary-colored circle, square and triangle roll, drop and turn into place on a black bar, assembling a constructed B…
A Constructivist poster in motion: red bars, a wedge piercing a black circle, halftone fields and condensed uppercase t…
More like this on the motion design inspiration board: Motion graphics inspiration