AI CSS Animations

Tattoo Flash

A traditional flash sheet on a slate wall paints itself: bold black lines ink a swallow, a rose, a dagger and a panther, solid black and whip shading go in, red, yellow, green and blue washes pack each shape, then white highlights and banner lettering finish it.

Written and rendered by AI CSS Animations Oct 19, 2026

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

About this style

Flash is the sheet of ready-drawn designs that a tattoo shop hangs on its walls for customers to choose from, usually painted on paper in ink and watercolor and numbered. American traditional tattooing, which took shape in the early 20th century, uses bold black outlines, solid black shading and a small palette of red, green, yellow and black so designs stay legible as they age in skin. Swallows, roses, daggers, panthers, anchors and eagles are among its standard designs, often wrapped in a banner carrying a name or a word. Shops still sell and trade flash, and its look runs through illustration, packaging and fashion.

The prompt

Make a 10-second traditional tattoo flash sheet that paints itself: bold black outlines are inked stroke by stroke, black shading goes in, then flat red, yellow, green and blue are packed into a swallow, a rose, a dagger and a panther.

<inputs>
If I don't give you something, use the default and don't ask.
- Shop: Ironwake Tattoo (fictional).
- Sheet header: "SHEET No. 7 · IRONWAKE TATTOO"
- Designs and banners: 1 Swallow, banner "Homeward" · 2 Rose · 3 Dagger, banner "Steadfast" · 4 Panther.
- Signature: "Ottie Brask" (fictional).
- Length: 10 seconds.
</inputs>

<direction>
- Look: a flash sheet painted the way tattooers paint flash: confident black brush line, solid black shading, watercolor flats in a tight traditional palette and white gouache highlights, on warm paper taped to a slate wall.
- Palette: wall slate #2F3A48 with a faint plaster texture; paper #EEDFBF, aging to #E0C99E at the edges, with a few foxing spots #CDAA78; pencil #8E8577 at 35%; ink #15110E; red #C3241F; yellow #ECB022; green #2D7A44; blue #2E5D9E; mouth pink #E07A6E; white gouache #FBF6EA; masking tape #E7D7A8 at 85%.
- How the colors interact: the washes are slightly transparent, so the paper's warmth shows through and each flat dries with a darker rim; black always sits on top of color and holds every shape; red against green on the rose and yellow against blue on the swallow are the complementary pairs that make flash read across a room.
- The sheet: 1640 × 900 at x 140–1780, y 90–990, taped at its corners with torn strips of masking tape and lying almost flat (a soft 6px shadow on the wall). The header is lettered at top center in Rye 400, 40px, ink, on baseline 160. Four designs, each numbered in pencil ("1" to "4", Kalam 700, 28px) at its upper left:
  - 1 Swallow, x 220–900, y 200–540: in flight, wings swept in the classic flash pose, 600px from wingtip to wingtip: a short cone beak, a round head with an eye (a black dot with a white catchlight), a red throat, a dark blue back and wing tops with black-shaded feather bases, five long primaries on each wing separated by lines, a paper-cream belly and a deeply forked tail of two long streamers; a banner trails beneath it reading Homeward.
  - 2 Rose, x 1040–1700, y 190–580: a full bloom 380px across seen three-quarter: a tight center spiral, three rings of cupped petals whose top edges curl back (each curl its own lobe), black shading pooled at the petal bases, red flats and white highlight dashes on the petal lips; two green leaves with a center vein, serrated edges and black shading on one half; a short stem with one thorn.
  - 3 Dagger, x 300–840, y 560–970: point down, 400px long: a round pommel, a grip wrapped in diagonal cord lines, a crossguard with curled ends, a double-edged blade with a center ridge, black shading on one side of the ridge and a white highlight line on the other, the pommel and guard in yellow brass; a banner reading Steadfast wraps across the blade, one fold showing its back.
  - 4 Panther, x 1040–1700, y 600–970: a snarling head in three-quarter view, 360px tall, solid black with paper highlights left open along the brow, cheek and muzzle (the traditional way of showing form in black): ears laid back, a wrinkled snout, narrowed yellow eyes, an open mouth with four white fangs and a row of small teeth, pink gums and tongue, and a paw with four curved white claws hooking over its lower edge.
  - Fillers: four small stars (half black, half red) and clusters of three dots in the gaps; the signature in Kalam 700, 26px, centered at x 940 on baseline 968, between the dagger and the panther.
- Line: every outline is a filled shape with living weight, 7px along runs, swelling to 9px on outer contours and tapering to 2px where a stroke ends, with interior detail lines at 3–4px; build each from a sampled centerline and a width profile. Strokes reveal along their length, tip leading, in 0.12–0.4 s by length, like a confident brush stroke, with no wobble.
- Black shading: solid black on the panther and the banner undersides; whip shading where black fades into color (petal bases, the blade, banner folds), short tapered flicks (8–20px, seeded) packed solid at the dark end and thinning to scattered dots, revealed in passes along the flick direction.
- Color packing: each flat floods its region from a seeded start point outward (a radial front with a slightly wavy edge) over 0.25–0.5 s, at 88% opacity with the paper grain showing through, and dries with a 2px darker rim at its boundary; color stays inside the lines, leaving a hairline of paper at a few line edges, as hand-painted flash does.
- White highlights: short tapered gouache strokes and dots (petal lips, blade, eyes, fangs, claws, banner folds) go on last, each with a 1px darker edge beneath it so it sits on the surface.
- Banner lettering: Oleo Script 700, 40px, ink, each letter placed individually along its banner's centerline so the word follows the curves and folds.
- Camera: static on the sheet, with a slow 3% push-in and 0.6° of rotation across the piece.
- Premium: lines with weight that taper, black that holds each design together, a few colors packed solid, paper you can see through the washes, and designs built from their real parts (primaries and streamers, curled petal lips, a wrapped grip and guard, fangs and claws). Cheap: clip-art icons with uniform strokes and gradient fills.
Banned: tattoo machines, needles, skin, blood, hands or people, skulls, copied flash designs or real artists' names, gradients other than whip shading, glow, drop shadows on the designs, wobbly or uniform-weight lines, anything flashing more than 3 times per second.
</direction>

<structure>
- 0.0–0.6s: the blank sheet taped to the slate wall; light pencil roughs of all four designs fade in.
- 0.6–3.0s: the outlines ink in: the swallow (0.6–1.2s), the rose (1.2–1.9s), the dagger (1.9–2.4s) and the panther (2.4–3.0s), strokes overlapping in time.
- 3.0–4.2s: black shading: the panther's solid black around its open highlights, then whip shading on the petals, the blade and the banners.
- 4.2–5.6s: the color is packed in: red (the rose, the throat, the banners), yellow (pommel, guard, eyes), green (leaves), blue (the swallow's back), pink (the panther's mouth).
- 5.6–6.0s: white highlights dab in (the 6.0 s frame: all four designs in full color with their highlights).
- 6.0–6.8s: the banner lettering inks along its curves.
- 6.8–7.6s: the header, numbers, stars, dots and signature go on.
- 7.6–10.0s: hold, completely still.
For other lengths, change the gaps between designs; keep each stroke's own timing 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: inline SVG, setting attributes, paths and masks from seek; no other libraries (no three.js: this style is flat). Each tapered line is a filled path built once at load from its sampled centerline and revealed by a mask whose thick stroked centerline animates stroke-dashoffset, with the taper applied at the reveal point; washes are clipped to their regions and revealed by a growing front path; the paper, foxing and plaster come from canvases generated once at load beneath the SVG.
- Every reveal is a closed-form function of t and its start time.
</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 each design reads as its subject at a glance (a swallow with a forked tail, a rose with curled petals, a dagger with a crossguard and banner, a panther head with fangs and claws), black outlines sit above the color, lines taper and never wobble, washes stay inside their regions with dried rims, the banner words follow their curves and read, the header and signature are clear, and nothing important comes within 60px of the frame edge. 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: Line art animation inspiration