AI CSS Animations

Letterpress Wood Type

A barn dance bill prints itself on a proof press: mirrored maple wood type is inked in a locked chase, then a steel cylinder rolls two passes, vermilion and black, onto cotton paper, leaving wood grain, ink squeeze, a bite into the sheet and slightly off registration.

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

Wood type spread through American and British printing shops in the 19th century, because display letters that large were heavy and costly to cast in metal. Jobbing printers set posters for fairs, auctions and shows from bold slab, gothic and condensed wood faces, printing one ink per pass through the press. Wood grain in the solids, ink squeezed to the edges, the bite of type into soft paper and slightly off registration are the marks of the process. Letterpress studios and gig-poster printers still work this way, and designers borrow the look for event posters and packaging.

The prompt

Make a 10-second wood-type letterpress poster that prints itself on a proof press.

<inputs>
Event: Hollis Creek Barn Dance. Date line: Saturday · October 24. Bill: Live String Band · Pie Contest · Hayrides. Details: 7 PM at the Old Granary · Admission $5. Edition: 12/40, in pencil. Inks: vermilion and black. Duration: 10s. If I don't give you something, use the default and don't ask.
</inputs>

<direction>
Palette: cotton paper #F2EBDD, vermilion ink #D6402B, black ink #1F1C1A (never pure black), steel press bed #2C2B29, maple type #C9A06B with ink-stained faces #4A2E25, pencil #6E6A64.
Sheet: a 1560×900 landscape bill centered on the bed, deckled edges (±3px), a soft contact shadow. Uppercase wood type, centered on a 1360px measure, each line sized or tracked to fill it:
- date line: "League Gothic" 400, about 80px, black;
- HOLLIS CREEK: "Ultra" 400, about 150px, vermilion;
- a solid vermilion wood block, 1360×240, with BARN DANCE in "Holtwood One SC" 400, about 170px, printed over it in black;
- the bill (about 76px), a 10px vermilion rule, then the details (about 56px), in "League Gothic", black.
The edition: "Reenie Beanie" 400, 40px, pencil, lower left of the sheet.
Ink is the soul. Solids print the wood's grain: horizontal streaks (seeded noise stretched 10:1, 82–100% coverage) with small voids, strongest on the big block. Edges carry a 1–2px darker squeeze rim and wander ±1px. Impression: inked shapes bite into the cotton, with a 2px soft shade inside their upper-left edges and a 1px paper highlight outside their lower-right edges, about 12% contrast. Inks are translucent: multiply each pass, so black over vermilion reads maroon-black and paper fiber shows through.
Registration: vermilion is true; black sits 3px right, 2px down and 0.12° clockwise, so the gaps around BARN DANCE are visibly uneven.
The form: a steel chase (#3A3936) locks the vermilion form with wood furniture and two steel quoins: one maple block per letter (end-grain rings, worn corners) with its face raised and mirrored, plus the block and the rule, each at the mirror of its printed position.
The press: the cylinder is a 120px polished-steel band spanning the sheet. It rolls at constant speed with a 0.25s ease in and out, and ink appears only behind its contact line. Other moves use cubic-bezier(0.45, 0, 0.2, 1); nothing bounces. Wet ink carries a faint 6% sheen that dries off.
The real thing shows ink behaving: grain, squeeze, bite and two colors that don't quite line up. The cheap version is a distressed font under a paper texture.
Banned: distressed or grunge fonts, gradients inside ink, glow, perfect registration, pure black, flat untextured solids, bounce, a third ink, anything flashing more than 3 times per second.
</direction>

<structure>
0.0–0.4s: the locked form fills the frame top-down at 1.06 scale; the letters read mirrored.
0.4–1.6s: a rubber ink roller (#57524D, 90px) runs left to right over the form; each face turns from dry stained wood to wet vermilion as it passes; the view eases to 1.0.
1.6–2.1s: the cotton sheet slides down 40px over the form and settles, its shadow tightening.
2.1–3.5s: the cylinder rolls top to bottom; vermilion prints right-reading behind its contact line.
3.5–3.9s: the cylinder returns to the top, lifted clear (wider, softer shadow).
3.9–5.3s: second pass: black prints, misregistered as specified.
5.3–6.0s: the cylinder exits below; the sheet lifts 8px and settles.
6.0–7.0s: the edition writes on in pencil, left to right.
7.0–8.2s: the wet sheen dries off.
8.2–10.0s: hold, nothing moving.
For other durations, scale every timestamp proportionally.
</structure>

<build>
One self-contained index.html, CSS and JS inline. Google Fonts via <link> are fine; no other libraries (no three.js: this style is flat). Draw in Canvas 2D, repainting every frame from scratch. Canvas won't fetch fonts itself: await document.fonts.load() for each face, then define window.seek. Build the paper, grain, each pass's inked mask and the wood blocks once at load into offscreen canvases; each frame composites them, revealed by the cylinder's position. 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: no CSS transitions or animations, no setTimeout or setInterval, no state carried between frames, and randomness only from a seeded PRNG. 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.
</build>

<check>
Before showing me, step through one frame per second: screenshot each and look at it. Fix overlaps, clipped or cramped text, accidental edge collisions, and anything off-style or Banned. Check the form reads mirrored and the print right-reading, no ink appears ahead of the cylinder, BARN DANCE stays readable on the vermilion block, and grain and bite survive at 1280×720. Confirm seek(duration) and seek(duration + 1) 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