Seen from the street, a shop window is lettered in reverse gold leaf: chalk pounce dots, a wet size, leaf squares that jump flat onto the glass, burnishing into a mirror, a crisp cleanup, a red outline and teal-black shade, then a slow light sweep makes the engine-turned swirls glint.
Written and rendered by AI CSS Animations Oct 19, 2026
Reverse gilding lays gold leaf on the inside of a shop window so that it reads from the street through the glass, and gilded lettering was a standard of shopfronts from the 19th century well into the 20th. The gilder lays out the letters, brushes on a water size of gelatin, floats on loose leaf with a wide, thin brush called a gilder's tip, then burnishes it, backs the letters with paint and cleans away the rest, so the gold shines like a mirror. Outlines, drop shades and engine-turned centers, rows of swirls rubbed into the leaf, are added afterward. Sign painters still gild windows by hand for barbers, cafés and pubs, and decorative reverse gilding on glass is also called verre églomisé, after the 18th-century French framer Jean-Baptiste Glomy.
Make a 10-second film of a shop window being lettered in gold leaf, seen from the street: the layout is pounced on, size is brushed on the inside of the glass, leaf is laid and burnished, the excess is cleaned away, then the letters are outlined and shaded and the gold catches the light. <inputs> If I don't give you something, use the default and don't ask. - Shop: Merridew & Daughters (fictional), tea and coffee merchants. - Lettering on the glass: MERRIDEW (on an arc) · & DAUGHTERS · Tea & Coffee (script) · EST. 1924 - Caption: "23-karat gold, laid on the inside of the glass." - Length: 10 seconds. </inputs> <direction> - Look: a quiet craft film from the pavement: a tall shop window in a painted wooden shopfront, the dim shop behind the glass, faint street reflections across it, and gold that turns from loose, wrinkled leaf into a mirror. - Palette: shopfront paint deep green #1F3B32 with moulding highlights #2E5245; behind the glass, the dim shop: bottle-green walls #13271F, shelves of tea tins as soft shapes in #6E2C24, #C79A4A and #2E4A6E, and a warm pendant lamp glow #FFC57A at the upper right, all painted soft (out of focus by design, not blurred by a filter); street reflection on the glass: a pale sky band #B9C6C9 and dark rooftops at 10–14%; chalk dots #E8E2D2; size sheen #FFFFFF at 18%; gold deep #8A6420, mid #D4A646, bright #F6DD8E, mirror highlight #FFF6D8; outline Venetian red #A3281D; drop shade teal-black #0C2A2A with a lighter edge #1F4B48; caption #E9DFC9. - How the colors interact: burnished gold reflects the street, so it shows bands of dark and bright, never flat yellow; the red outline warms it; the teal-black shade sits darker than the shop so the letters stand off the glass; the matte centers take the lamp's glow softly while the burnished borders catch the sky. - Layout: the glass spans x 140–1780, y 90–930 inside a 30px green moulding, with a sill below it. MERRIDEW in Gravitas One, 150px, each letter placed on an arc of radius 1900 whose peak sits at baseline y 380, spanning x 380–1540, the letters turned to the arc; "& DAUGHTERS" in Cinzel 700, 64px, tracked 0.14em, centered on baseline 500; "Tea & Coffee" in Yesteryear 400, 110px, centered on baseline 660 above a tapered swash 600px long; "EST. 1924" in Cinzel 700, 40px, tracked 0.3em, centered on baseline 770 between two small gold diamonds. Everything reads correctly from the street, because it is laid on the inside of the glass in reverse. - The gold: render each lettering element's mask once at load and composite the gold through it every frame. Reflection: horizontal bands (sky #FFF6D8 near each letter's top, a dark rooftop band #8A6420 at 40% of its height, mid gold below) that slide 1px for every 10px of camera drift; a specular sweep, a soft diagonal band 80px wide of #FFF6D8 at 70%, when the light moves; leaf seams as faint lines on a 96px grid of overlapping squares, 4% brighter; a few holidays (tiny dark gaps) until they are patched. States: laid leaf is crinkled (a seeded wrinkle map, ±20% brightness in fine creases) and dull, with darker patches where the size is still wet; dry leaf tightens; burnished leaf is smooth, its reflection bands at full mirror contrast. - Engine-turned centers: inside each letter of MERRIDEW, inset 16px, a band of matte gold carrying rows of overlapping swirls 30px across, each swirl's brightness following |cos 2(φ − φlight)| around its own center, so the swirls glint in turn as the light angle moves. - The work, with tools seen through the glass and no person: a pounce bag (a small cloth pouch) pats along the layout, leaving chalk dots on the outside of the glass along every letter's outline; a wide flat brush lays water size on the inside, and the glass behind the lettering turns glossy, with three thin runs at its lower edge; the gilder's tip, a thin flat brush of long hairs in a card frame 90px wide, picks up each leaf square and lays it, and as the leaf comes within a few pixels of the wet glass it jumps flat onto it (the last 4px in 0.05 s) with a ripple of wrinkles; squares overlap 8px in rows, left to right and top to bottom; a cotton pad burnishes in small circles, the mirror finish following its path and patching holidays as it goes, then rubs the swirls into the centers; the backed letters are cleaned up as a damp-cotton front sweeps across and the gold outside every letter disappears, leaving crisp edges; a lining brush paints the red outline, 6px, round every letter in turn; a second brush paints the drop shade, 14px down and to the right. - Camera: it opens on the whole window at 1.0×, pushes in to 1.7× on the left half of MERRIDEW for the leafing and burnishing, then returns to 1.0× as the cleanup reveals the letters, with a slow 2% drift right across the piece so the reflections slide over the gold. - Type: the lettering is the type. The caption sits on the sill below the glass in Public Sans 500, 24px, #E9DFC9, centered on baseline 1000, fading up 10px over 0.6 s on cubic-bezier(0.22, 1, 0.36, 1). - Premium: gold that behaves like a mirror (reflection bands, a moving highlight, engine-turned swirls glinting in turn), the real order of work, crisp cleaned edges, and a red outline and dark shade that lift the letters off the glass. Cheap: a yellow-gradient font with a sparkle sweep and a drop shadow. Banned: 3D text geometry, flat yellow or plain gradient gold, glitter or sparkles, lens flares, bloom, mirrored or misspelled lettering, people or hands, real shop names, neon, anything flashing more than 3 times per second. </direction> <structure> - 0.0–0.6s: the empty window: the dim shop, reflections drifting across the glass. - 0.6–1.2s: the pounce bag pats along the layout and the chalk dots draw every letter's outline. - 1.2–1.8s: the size brush sweeps the glass wet behind the lettering; the camera pushes in on MERRIDEW. - 1.8–3.0s: leaf squares are laid in rows, each jumping flat onto the glass; the lower lines follow in quick time-lapse; the wet patches dry. - 3.0–3.6s: the cotton pad burnishes: the mirror finish spreads, holidays are patched and the swirls go into the centers. - 3.6–4.4s: cleanup: the gold outside the letters is wiped away, leaving crisp letters; the camera returns to the whole window. - 4.4–5.2s: the red outline is painted round each letter in turn. - 5.2–5.9s: the drop shade is painted (the 6.0 s frame: the finished, outlined and shaded lettering, chalk dots still on the glass). - 6.2–7.0s: a cloth wipes the chalk dots off the outside in three sweeps. - 7.0–8.0s: the light moves: the specular sweep crosses the lettering left to right, the reflection bands slide and the swirls glint one after another; the caption rises in at 7.6 s. - 8.0–10.0s: hold: the reflections drift slowly and nothing else moves. For other lengths, stretch the leafing and the light sweep; 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 2D, repainting every frame from scratch, the backing store sized from CSS size × devicePixelRatio. Canvas won't fetch fonts itself, so the awaited loads matter. Text is HTML over the canvas. - At load, render the shopfront, the interior, each lettering mask, the leaf-square grid, the wrinkle map and the swirl field into offscreen canvases; each frame composites the gold through the masks with the reflection bands, the sweep and the swirl brightness computed from t, and reveals each step along its tool's closed-form path. </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 the lettering reads correctly from the street in every frame (never mirrored), each leaf lands flat with wrinkles, seams fade once burnished, the gold always shows reflection bands rather than flat yellow, cleaned edges are crisp, every letter has its outline and a shade that always falls down and to the right, the chalk dots are gone by 7.0 s, the swirls glint in turn without flashing, and the caption sits on the sill. 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.
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