Graffiti Wildstyle

About this style

Graffiti writing took shape in Philadelphia and New York City in the late 1960s and 1970s, as writers painted their names on walls and subway cars. Wildstyle is its most complicated letter style, with letters that interlock, overlap and sprout arrows, spikes and connections, and the 1983 film Wild Style carried the name around the world. A piece, short for masterpiece, is painted freehand with aerosol in stages: a sketch, the fill, the outline, then 3D, background and highlights. Writers still paint pieces at legal walls and jams, and the look runs through hip-hop and streetwear graphics.

Make a 10-second graffiti film: a wildstyle piece is painted freehand on a wall in time-lapse, in the order writers build one: buff, sketch, fill, outline, 3D, background and highlights.

<inputs>
If I don't give you something, use the default and don't ask.
- Name: VELMO (a fictional writer).
- Tag: "Velmo 26"
- Caption: "Quarrick Street Yard · legal wall · painted 3 October" (fictional)
- Length: 10 seconds.
</inputs>

<direction>
- Look: an aerosol piece on a concrete-block wall in daylight, filmed from a tripod: real spray texture everywhere (soft line edges, overspray halos, fine speckle, a few drips), on letters that interlock and sprout arrows but still read as a name.
- Palette: wall block #A9A39A with mortar joints #8E877E and soft weathering; old paint ghosts in faded #D07E6A, #6E8FB0 and #C9C08A around the edges; buff dusty mint #BFDCCB; sketch peach #F2B79A; fill fade tangerine #FF7A1A → coral #FF4F5E → orchid #C44FD8, top to bottom, with bubbles #FFD3A8 at 70%; outline midnight plum #2B1238; 3D teal #138087 with a darker underside #0B5459 and a thin cut-back line #8FE3DA; background cloud lemon #F6E35A with a plum edge and white dots; highlights #FFFFFF; tag and caption plum.
- How the colors interact: teal 3D against the coral fill and the lemon cloud against the orchid are complementary pairs, so the letters jump off the mint; overspray from each layer tints whatever is beneath it; highlights sit only on the fill side of the outline.
- The wall: 400 × 200 blocks with 10px joints, each block with a seeded tone (±4%) and pitting, under a soft raking light from the upper left so the joints read as recessed. The buff is a roller coat: vertical strokes 220px wide with a slightly darker lap at each edge and a fine stipple, thin enough that the old paint ghosts show through at 10% and the block texture carries through.
- The letters, VELMO, built so they read as wildstyle: draw each letter from a heavy base glyph (Bungee 400, about 360px) into an offscreen mask, then transform it (rotation −12° to +10°, a 14° forward skew, scale 0.9–1.15), bounce the baseline ±36px and overlap neighbors by 20–40px so they lock together (the E's bottom bar runs under the L, the L's foot hooks under the M, the M's right leg meets the O). Union in extensions drawn as polygons: seven arrows, each a tapered shaft 22–40px wide ending in a two-barbed head, springing from terminals (the V's left arm, up and back; the E's top bar, forward; the L's foot, down and forward; the M's middle point, down; the O's top right, up and over; one more each off the V and the O), four sharp spikes on outer corners, and one connector bar from the E to the M behind the L. The piece, with its 3D, spans x 420–1620 and y 230–760, its weight centered near (1010, 500).
- Layers, all derived from that mask at load:
  - sketch: the mask's contours (marching squares) as a 6px soft peach line;
  - fill: the mask with the vertical three-color fade, 22 bubble dots (12–40px) across the orange and coral, and a few horizontal streaks in the orchid, sprayed loosely 6–14px past the contour, as writers do;
  - outline: a 14px band centered on the contour (the mask dilated by 7px minus the mask eroded by 7px), which cleans up the fill's loose edge;
  - 3D: the dilated mask extruded 46px toward the lower right (stamped 46 times along (1, 0.8)) behind the letters, its faces teal and the faces turned downward in the darker teal, with a 2px cut-back line along the outline's outer edge;
  - background: a cloud around the whole piece, the 3D mask dilated by 40px with a scalloped edge, lemon with an 8px plum edge and scattered white dots, behind the 3D;
  - highlights: thin white lines along the upper-left inner edges of the fill (the mask minus itself shifted 5px down and right, thinned to 3px) and five four-point shines (two crossed tapered strokes) on corners;
  - drips: six from the fill and one from the outline, each growing as L·(1 − e^(−τ/0.5)), L 30–110px, 4px wide with a bulb at the tip.
- Spray: each layer appears through an arrival-time map. The can travels the layer's painting path (contours for lines, zig-zag passes for the fill and the cloud) at its own speed (sketch 2200px/s, fill 3000px/s, outline 1800px/s, 3D 2400px/s, cloud 3200px/s, highlights 1400px/s); behind it, paint density ramps up over 0.12 s and is thresholded against fixed speckle noise, so it builds grainily. Lines have soft 3–6px edges and taper slightly where they start and stop; every layer sheds an overspray halo, a 10–24px fading speckle that tints what lies under it. A translucent mist (a 120px soft cloud in the layer's color at 10%) marks where the can is.
- Camera: a static tripod, the wall flat-on, with a slow 3% push-in across the piece.
- Type: the piece is the type. The tag in Sedgwick Ave Display 400, 64px, plum, sprays on left to right at bottom right (x 1380–1780, baseline 960) with a little overspray; the caption in Barlow Condensed 600, 26px, tracked 0.06em, plum, at bottom left (from x 120 on baseline 1000), fading up 10px over 0.5 s on cubic-bezier(0.22, 1, 0.36, 1).
- Premium: letters that interlock and still read, a real build order with a loose fill cleaned up by a crisp outline, 3D that follows the outline, overspray and speckle wherever paint landed. Cheap: a graffiti font on a brick photo, vector shapes with a drop shadow, a fill that wipes on.
Banned: real writers' names or crews, spray-can icons or clip art, hands or people, trains, rats, crowns, political symbols, gang signs, profanity, vector-clean fills, gradients that aren't sprayed, glow or neon, anything flashing more than 3 times per second.
</direction>

<structure>
- 0.0–0.7s: the old wall with its faded paint ghosts; a roller buffs a mint field across it in vertical strokes.
- 0.7–1.6s: the sketch: peach lines trace VELMO and its arrows, letter by letter.
- 1.6–3.0s: the fill: zig-zag passes lay the fade from tangerine through coral to orchid; the bubbles and streaks go on; two drips start.
- 3.0–4.6s: the outline: plum lines trace every contour and clean the loose fill edge; the arrows get their barbs; one drip runs from the outline.
- 4.6–5.4s: the 3D: teal blocks sweep down and to the right behind the letters, undersides darker, the cut-back line last.
- 5.4–5.95s: the background: the lemon cloud fills in behind everything with its plum edge and dots (the 6.0 s frame: the whole piece with its 3D and cloud, no mist in frame).
- 6.2–7.0s: highlights: the white edge lines, then the five shines, one at a time.
- 7.0–7.8s: the tag sprays on and the caption fades up.
- 7.8–8.4s: the drips reach their full length.
- 8.4–10.0s: hold.
For other lengths, stretch the fill and the outline; keep the order 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: one WebGL canvas (preserveDrawingBuffer: true, drawn once per seek), its backing store sized from CSS size × devicePixelRatio, compositing the prebuilt layer textures (each with its color, its arrival-time map and its overspray) per pixel in painting order; the mist and the drips on a 2D canvas above it. Text is HTML over the canvas.
- Masks, contours, painting paths and arrival-time maps are built once at load (keep load under 8 s); drips are closed-form; nothing accumulates between frames.
</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 VELMO still reads at a glance, the layers go down in order (buff, sketch, fill, outline, 3D, cloud, highlights), the outline covers the loose fill edge everywhere, the 3D always runs down and to the right behind the letters, spray texture (speckle, soft edges, overspray) survives at 1280×720, drips run straight down and stop, the shines appear without flashing, and the tag and caption stay clear of the piece. 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

Gradient Mesh Brand Film

Made by us

A slow, ribbon-like gradient mesh flows in a skewed band behind sharp headline type, while white payment, API and chart…

Cut-Paper Title Sequence

Made by us

A jazz-tempo film title sequence in flat vermilion, mustard, bone and black: hand-cut paper shards jab in on the beat,…

Split-Flap Departure Board

Made by us

A mechanical station departure board where every flap steps through its drum to land on times, destinations and statuse…

Swiss Grid Typography

Made by us

A Swiss-style event poster that builds itself on a visible 12-column grid: grotesque type rises out of baseline masks,…