AI CSS Animations

Dada Collage

On yellowed newsprint, cut-out letters from seven different sources slap down on a 120 BPM beat, followed by a one-piece wood-type word, engraved found pictures of a fish, a watch, a bulb and a pointing hand, a typed slip and violet and red rubber stamps.

Written and rendered by AI CSS Animations Oct 18, 2026

Type
prompt
Made with
Claude Opus 5.5 in Claude Code
Built in
HTML/CSS
Topics
Kinetic type · 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

Dada began in Zurich in 1916 at the Cabaret Voltaire, founded by Hugo Ball and Emmy Hennings, and spread to Berlin, Hanover, Paris and New York as a revolt against the logic that had produced the First World War. Artists such as Hannah Höch, Raoul Hausmann and Kurt Schwitters made collages from newspapers, tickets and catalogue engravings, and set posters in clashing type running in every direction. Chance, absurdity and found material were the method. Its cut-and-paste look returns in punk flyers, zines, album art and editorial illustration.

The prompt

Make a 10-second Dada typographic collage: mismatched cut-out letters, rubber stamps, torn paper and absurd found pictures slapped down on a beat into a poster for an evening of nonsense.

<inputs>
Presenter: The Mirror Club presents. Headline: NO SENSE, then TONIGHT. Event: An Evening of Noise. Tagline: "Bring a hat. Bring a fish." Details: Friday · 9 PM · Upstairs. Stamps: ADMIT ONE, NO REFUNDS and a round date stamp, 13 · IV. Found pictures: an engraved fish, a pocket watch, a light bulb and a pointing hand. Tempo: 120 BPM. Duration: 10s. If I don't give you something, use the default and don't ask.
</inputs>

<direction>
Ground: a full-frame sheet of yellowed newsprint #E6DDC6 printed with faint columns of small grey text and rules (#8E877A at 35%, drawn in code as rows of short word-shapes), a few age blotches and one fold crease.
Palette: ink black #171513, poster red #D2321F, stamp violet #5A4A9E, and found-paper colors for the slips: white #F3EFE4, newsprint #DCD2B8, mustard #E3B53D, pink #E79CA6, teal #3F8784, kraft #B48A5A.
Cut-out letters: each of the seven letters of NO SENSE is its own slip cut from a different source, so no two neighbors match. Fonts in order: "Abril Fatface", "UnifrakturMaguntia", "Alfa Slab One", "Rye", "Bungee", "Old Standard TT" 700 italic, "Ultra"; slips in order: black on white, white on black, black on mustard, red on newsprint, black on pink, white on teal, black on kraft. Letter heights vary 120–190px. Each slip is cut with scissors (5–8 straight edges with jittered corners, 6–14px of margin around the letter) or, for three of them, torn (an irregular edge with a 2–4px white fibrous rim). Each sits at a seeded tilt of ±9° with a 1px darker cut edge and a soft contact shadow (3px down-right, 4px blur, 22%).
TONIGHT is the contrast: one long strip torn from a wood-type poster, red "Ultra" letters on white, fitted to a strip 1000px wide and 230px tall.
Torn fields: two large torn sheets with ragged fibrous edges, red (1100×300) behind NO SENSE and black (760×360) at lower right.
Found pictures, drawn in code as old engravings: black hatching and cross-hatching (1–1.5px lines at a 4px pitch) on white slips: a fish 420px long with scales drawn as overlapping arcs, a fin and an eye; a pocket watch 220px across with numerals, hands, a crown and a chain; a light bulb 180px tall with filament and screw base; a pointing hand 260px long with a shirt cuff.
Stamps, as rubber-stamp impressions: ink denser at the edges, patchy voids inside, letters slightly swollen. ADMIT ONE in a double-ruled box, violet, at −7°; NO REFUNDS in red at 11°, struck twice 4px apart; the round date stamp in violet with a ring of small type, set in "Archivo Narrow" 700.
Other type: the presenter line in "Old Standard TT" 400 italic, 34px, black, on a white slip; the event in "Alfa Slab One", 64px, black, running up the left side at 90°; the tagline typed on a white slip in "Cutive Mono" 400, 30px, held by a strip of translucent tape (#E8DDB8 at 60%); details in "Archivo Narrow" 700, 30px, tracked 0.12em, on a kraft slip.
Layout: NO SENSE on the red field, centered at y 330; TONIGHT below it, centered at y 560; the presenter slip top left; the fish across the lower right (x 1150–1570, y 700–880), swimming toward the watch at left (x 240–460, y 640–860); the hand pointing at TONIGHT from the upper right; the bulb hanging at upper left; stamps over the corners of slips; the event up the left edge with its baseline at x 180; the details slip bottom right. Nothing important within 90px of the frame edges.
Motion is a beat, not a tween. Everything lands on the 120 BPM grid (beat n at (n − 1) × 0.5s, half-beats allowed). A slip arrives lifted (scale 1.14, 6° of extra tilt, a 14px soft shadow) and slaps flat in 0.08s on cubic-bezier(0.2, 0.9, 0.3, 1), its shadow snapping tight; on each slap, pieces already down within 300px jump 2px and settle in 0.1s. Stamps hit: ink from 0 to full in 0.06s with a 1.03 → 1 press. Quantize the lift-and-slap motion to 12 steps per second (floor(t × 12) / 12) so it feels hand-animated, while landings stay exactly on the beat.
The real thing is chance and collision with a working rhythm: mismatched sources, real paper edges, ink that misbehaves; the cheap version is one ransom-note font on white with a grunge overlay.
Banned: a single ransom-note font, grunge or distressed overlays, gradients, glow, emoji, photographs, smooth tweens, political symbols, full-frame flashes, anything flashing more than 3 times per second.
</direction>

<structure>
0.0–0.5s: the newsprint sheet alone, its faint columns visible.
0.5–1.25s: the red field slaps down on beat 2 (0.5s), the black field on beat 3 (1.0s), the presenter slip on beat 3.5 (1.25s).
1.5–3.0s: NO SENSE lands one letter per half-beat, seven landings.
3.25s: TONIGHT slaps down in one hit.
3.5–5.0s: the found pictures land one per beat: the fish (3.5s), the watch (4.0s), the bulb (4.5s), the hand (5.0s).
5.5–6.0s: the event runs up the left edge in one slap (5.5s); the typed tagline slip lands (5.75s) and its tape presses on (6.0s).
6.25–7.0s: the stamps hit: ADMIT ONE (6.25s), NO REFUNDS (6.5s, struck again at 6.75s), the date (7.0s).
7.25s: the details slip lands bottom right.
7.5–10.0s: hold, everything flat and still.
For other durations, add or remove landings on the beat grid and keep the final hold at least 2s.
</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). Use absolutely positioned elements, setting transforms, clip-paths and opacity from seek: each slip is its own element with its letter or picture inside, clipped by its cut or torn polygon. Render the newsprint, torn-edge fiber rims, engravings and stamp ink masks into canvases once at load. Await document.fonts.load() for each face, then define window.seek. 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. Anything cumulative is precomputed once at load at a fixed step or solved analytically from t, so any frame can be drawn directly. 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 every landing falls exactly on the beat grid, no two neighboring letters share a font or slip, NO SENSE and TONIGHT read clearly at a glance, the found pictures read as engravings (hatching, not flat fills), and nothing important crosses within 90px of the edges. 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 inspirationMotion graphics inspiration