AI CSS Animations

VHS Camcorder Title

A 1989 home video: a blue VCR screen with PLAY in the corner, tracking noise rolling through, then a soft lake at golden hour with smeared color, a burned-in date stamp and a yellow blocky title typing on as the camera zooms toward a red canoe.

Written and rendered by AI CSS Animations Oct 16, 2026

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

About this style

VHS, launched by JVC in 1976, became the dominant home video format of the 1980s, and camcorders put it in family hands. The format records color at a much lower resolution than brightness, so color smears sideways, while tape wear and tracking errors add noise bands, dropouts and jitter at the bottom of the frame. Many camcorders could burn a date stamp and simple blocky titles straight into the recording. Music videos, horror films and brand campaigns now recreate the look for nostalgia and intimacy.

The prompt

Make a 10-second home-video title as if shot on a 1989 VHS camcorder and played back on a VCR.

<inputs>
Title: "SUMMER AT" / "LAKE TAMSIN". Subtitle: "THE MERRIN FAMILY". Date stamp: "AUG 12 1989" over "4:32 PM". Scene: a lake at golden hour seen from a wooden dock, with a red canoe tied at the end. Duration: 10s. If I don't give you something, use the default and don't ask.
</inputs>

<direction>
Frame: a 4:3 picture, 1440×1080, centered between black #000000 pillars 240px wide that nothing enters.
Two layers, two rules. The scene, the burned-in date stamp, the zoom bar and the camcorder title are drawn together into a 480×360 buffer and degraded as one recorded signal. The VCR's own overlay ("PLAY" with a play triangle, and a tape counter) is drawn afterward at full resolution, crisp and untouched by the tape. That split is how you know it's real.
Scene, in the buffer: sky #8EC1E6 fading to #F4D29C at the horizon, a low sun disc #FFE7B0, a dark tree line #2C4527 with a jagged seeded edge, water #4C7C9E with drifting horizontal glints, dock planks #8A6A44 in one-point perspective leading into the frame, the red canoe #C8352B at the dock's end. Handheld: smooth seeded drift of ±5 buffer pixels and ±0.6° roll, plus a slow pan right.
Tape degradation, every frame from t: convert to YIQ; blur Y horizontally over 2px; blur I and Q over 8px and shift them 3px right, so color smears past edges; lift blacks to #101010 and clip whites at 92%; add luma noise of ±4% per line and per pixel; add 0–3 dropouts (white streaks 1px tall, 15–60px long); jitter the bottom 8 lines sideways by up to 12px (head-switching noise). Upscale to 1440×1080 with smoothing on, then darken every third output row by 12% for line structure.
Type: the VCR overlay in VT323, 64px, white #F2F2F2 with a 3px black shadow: "PLAY" and a drawn triangle top-left at x 300, y 100, and the counter "0:14:07" top-right, counting up once per second. The camcorder title and date stamp are drawn into the buffer in Press Start 2P (title 16px, date 8px, in buffer pixels) and degraded with the picture: the title yellow #F6E84A with a 1-pixel black shadow, the date stamp white at bottom-right.
Motion feels like a person filming: handheld moves ease on sines, the zoom is a slow constant crawl, and the title generator writes 12 characters a second.
Premium is defects that come from how tape records: soft luma, smeared color, head-switching at the bottom, a date stamp degraded with the picture, a crisp VCR overlay. Cheap is an RGB split filter and random glitch blocks.
Banned: RGB split or offset color copies, datamosh, pixel sorting, CRT curvature, real camera or tape brand names, 16:9 footage, emoji, full-frame flashes, flashing more than 3 times per second.
</direction>

<structure>
0.0–0.8s: VCR blue #1A2FD0 fills the picture; the PLAY overlay appears at 0.2s and stays to the end.
0.8–1.8s: the picture locks in: a 100px band of tracking noise (static with torn lines) rolls from the bottom of the picture to the top, the image settling beneath it; exposure overshoots by 15% and settles.
1.8–3.0s: the lake, handheld, the date stamp already burned in.
3.0–4.8s: the title writes on, centered in two lines, one character every 1/12s.
4.8–6.6s: the camera zooms slowly toward the canoe (1.0 → 1.3) while the title and date stamp stay fixed on screen; a camcorder zoom bar ("W", five small blocks filling, "T") shows in white during the zoom; focus softens once and recovers.
6.6–7.1s: one tracking wobble: the top 30% of the picture skews sideways up to 14px and a thin noise band passes once.
7.1–8.4s: the subtitle writes on beneath the title in white, 8px.
8.4–10.0s: hold; the handheld drift eases to near-still and only tape noise, dropouts and the counter continue.
For other durations, scale every timestamp proportionally and keep at least 1.2s of hold.
</structure>

<build>
One self-contained index.html, CSS and JS inline. The stage is 1920×1080 (16:9), scaled to fit the window. Design for 60fps. window.seek(t), t in seconds, must compute every visual from t alone, clamping past the end to the last frame: no CSS transitions or animations, no setTimeout or setInterval, no state carried between frames, and randomness only from a seeded PRNG. Anything cumulative is precomputed once at load at a fixed step or solved analytically, so seek can jump to any time. Load Google Fonts via <link> and await document.fonts.load() for each face before defining window.seek. 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.
Engine: Canvas 2D. Draw the scene into the 480×360 buffer, run the YIQ pass on its ImageData, upscale into the main canvas, then draw the VCR overlay. Noise, dropouts and jitter seed from the video frame, floor(t × 30), so any frame renders alone. No three.js.
</build>

<check>
Before showing me, step through one frame per second (0–10s): screenshot each and look at it. Fix overlaps, clipped or cramped text, accidental edge collisions, and anything off-style or Banned. Check that color bleeds to the right of edges rather than splitting into RGB copies, the PLAY overlay stays crisp while the date stamp and title soften with the picture, the title stays readable through the noise, and nothing enters the pillars. 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: Kinetic typography inspiration