On a poured-concrete wall, three cardboard stencil plates are taped up, sprayed in orange and black and peeled away, revealing stencil type and a paper-plane mark with crisp bridges, soft overspray, painted ghosts left on the plates and drips that slow as they run.
Written and rendered by AI CSS Animations Oct 16, 2026
Stencils have long been used for signage, shipping crates and military markings, because a cut plate repeats an image quickly. Street artists took up aerosol stencils in Paris in the early 1980s, and the technique spread to cities around the world. Bridges that hold the islands of each letter in place, soft overspray where the plate lifted and drips from heavy coats are its fingerprints. Bands, brands and event posters borrow the look for its directness.
Make a 10-second street stencil piece: cardboard plates are sprayed and peeled off a concrete wall to reveal stencil type and a mark. <inputs> Name: PARKWAY ARTS. Tagline: Walls talk back. Details: Open walls · Saturdays · Under Fenwick Bridge. Mark: a paper plane inside a ring. Paint: signal orange and black. Duration: 10s. If I don't give you something, use the default and don't ask. </inputs> <direction> Wall: poured concrete #8F8C86 with formwork seams every 480px (a 2px dark line with a light lip), tie holes (16px dark circles with a soft rim) at panel corners and mid-edges, aggregate speckle, ±6% tonal blotches and one faint rust stain under a tie hole. Paint: matte black #161616 and signal orange #FF5B1F, flat with slight density variation. Where a plate sat flush, edges are crisp; along a few seeded stretches where it lifted, a soft overspray halo 6–20px wide fades out as fine speckle. Type: "Saira Stencil One" 400 for PARKWAY (orange) and ARTS (black), each about 200px; "Stardos Stencil" 700 for the tagline, 64px, and 400 for the details, 32px, both black. The bridges in the letters must show. Mark: an orange ring 300px across with a 34px band, broken by two 14px bridges (at 10 and 4 o'clock); inside it, a black paper plane of three triangles with a 10px bridge along its fold. Layout: the mark centered at (520, 470); PARKWAY from x 760 on baseline 470; ARTS under it on baseline 690; the tagline on baseline 820 and the details on 885, both from x 760. Plates: three cardboard stencils (#B8946A, a corrugated edge, slightly warped corners, scuffs), each held by two strips of masking tape (#E3D7B0) and casting a 6px shadow (10px blur, 30%): plate 1 cuts the ring and PARKWAY (orange), plate 2 the plane and ARTS (black), plate 3 the tagline and details (black). Spray: a translucent mist (a 160px soft cloud in the paint color, 10%) crosses each plate in a zig-zag of horizontal passes at constant speed. Paint builds behind it grainily inside the cutouts, and overspray lands on the cardboard too, so a peeled plate carries a painted ghost of its shapes. Drips: five, from heavy spots on the lower edges of letters, each starting once its area fills and growing straight down as L·(1 − e^(−(t − t0)/0.6)), L 20–90px, 5px wide with a bulb 1.4× wider at the tip. Motion is physical and quick: plates slap on in 0.2s on cubic-bezier(0.2, 0.9, 0.3, 1) with a 2px settle; they peel from a top corner, tape first, then fly off frame over 0.4s on cubic-bezier(0.5, 0, 0.75, 0), scaling to 1.04 and turning −8° as their shadows widen. The real thing shows how it was made: crisp edges, bridges, overspray, a painted plate and drips that obey gravity; the cheap version is a stencil font over a spray-brush smear. Banned: graffiti tags or wildstyle lettering, rats, balloons and other well-known street-art motifs, political symbols, clip-art spray cans, clean vector fills with no overspray, glow, anything flashing more than 3 times per second. </direction> <structure> 0.0–0.4s: bare concrete. 0.4–0.6s: plate 1 slaps onto the wall; its tape presses on. 0.6–2.0s: orange spray, three passes top to bottom. 2.0–2.4s: plate 1 peels away: the ring and PARKWAY in crisp orange with overspray; one drip starts. 2.4–2.6s: plate 2 slaps on. 2.6–4.0s: black spray, three passes. 4.0–4.4s: plate 2 peels: the plane and ARTS; two drips start. 4.4–4.6s: plate 3 slaps on. 4.6–5.5s: black spray, two passes. 5.5–5.9s: plate 3 peels: the tagline and details; the last drips start. 5.9–7.6s: the drips slow to their final lengths; the last mist fades. 7.6–10.0s: hold on the finished wall. 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. At load, render the wall, each plate with its cutouts, each layer's paint and overspray masks, and a quarter-resolution arrival-time map per layer (when the spray path first reaches each point). In seek, paint density ramps up from each point's arrival time, thresholded against fixed speckle noise so it fills grainily; drips are analytic. Nothing accumulates from frame to frame. 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 bridges show in every closed letter and in the mark, overspray appears only where a plate lifted, peeled plates carry painted ghosts, drips run straight down and stop, and the type reads cleanly in the final frame. 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.
A slow, ribbon-like gradient mesh flows in a skewed band behind sharp headline type, while white payment, API and chart…
A jazz-tempo film title sequence in flat vermilion, mustard, bone and black: hand-cut paper shards jab in on the beat,…
A mechanical station departure board where every flap steps through its drum to land on times, destinations and statuse…
A Swiss-style event poster that builds itself on a visible 12-column grid: grotesque type rises out of baseline masks,…
More like this on the motion design inspiration board: Kinetic typography inspirationLogo animation inspiration