A symmetrical Art Deco reveal in black and metallic gold: a sunburst fans open, stepped pinstripe frames draw from the center out, and a widely tracked display name catches a single specular sweep.
Written and rendered by AI CSS Animations Oct 12, 2026
Art Deco takes its name from the 1925 Paris Exposition internationale des arts décoratifs et industriels modernes and shaped architecture, posters, typography and objects through the 1920s and 30s. It pairs machine-age geometry (sunbursts, chevrons, stepped skyscraper setbacks, strict symmetry) with luxurious materials like gold, lacquer and black stone. Brands still reach for it when they want glamour, ceremony and polish.
Make a 10-second Art Deco title reveal in black and gold. <inputs> Name: THE HALCYON. Descriptor: Hotel & Ballroom. Tagline: "An evening in gold." Three words: Dine, Dance, Stay. Duration: 10s. If I don't give you something, use the default and don't ask. </inputs> <direction> Palette: black #0C0B0A, ivory #EFE6D2 for small text, and gold as an SVG linear gradient (#7A5A24 → #C9A04F → #F4E3A6 → #B38A3E → #6E5020), never a flat yellow. The specular sweep is that gradient's offsets shifting with t. Type: Poiret One for the name (150px, uppercase, tracking 0.22em); Josefin Sans 300, uppercase, tracked 0.4em, at 28–34px for everything else. Composition: strict bilateral symmetry about the vertical center, every element mirrored. Motifs: a 180° sunburst of alternating long and short rays rising from the lower center at 40% opacity, a stepped ziggurat frame with three setbacks per side, double pinstripes (3px gold, 6px gap), chevrons, and a 240px medallion with a fan inside. Keep a calm black field around the name. Motion is ceremonial and exact. Linework draws on via stroke-dashoffset, always from the center outward on both sides at once; fans and sunbursts open around a pivot; nothing bounces. Easing cubic-bezier(0.45, 0, 0.15, 1) over 0.8–1.6s, with 100ms staggers. Real Deco is geometry, symmetry and material richness; the cheap version is gold text and a lens flare over a random pattern. Banned: asymmetry, lens flares, glitter particles, bevel or emboss, flat #FFD700 gold, script fonts, bounce or overshoot, fast cuts, colors beyond black, gold and ivory. </direction> <structure> 0.0–0.9s: black; a gold hairline draws up and down from the stage center to form the axis. 0.9–2.2s: the sunburst opens: 36 rays, collapsed to vertical, rotate apart around the pivot to span 180°. 2.2–3.4s: the ziggurat frame's double pinstripes draw from top center outward along both sides, stepping down through the setbacks to the bottom corners, while the axis line withdraws from the middle, leaving short spurs at top and bottom. 3.4–4.6s: the medallion draws above center; the name reveals from its middle letter outward, each letter rising 20px out of a mask while tracking eases from 0.32em to 0.22em. 4.6–5.4s: the descriptor appears below between two short pinstripe rules growing outward. 5.4–6.6s: a specular highlight sweeps once across all the gold, left to right, over 1.2s; the tagline fades up in ivory beneath over 0.8s. 6.6–7.8s: the three words appear in a row separated by small gold diamonds, the center word first, then the outer two together. 7.8–10.0s: hold, perfectly still. 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 inline SVG. 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. Mirror a frame horizontally: anything that changes breaks the symmetry. 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 cyanotype-blue engineering sheet that drafts itself: centerlines, compass-swept gears, hatching and dimension lines a…
A black-and-white Op Art piece: crisp stripes swell into a bulging lens and slow waves, and the title exists only as a…
A quiet Japanese minimalist piece on generated washi paper: a single sumi ensō is brushed on with dry-brush texture, sm…
A tidy isometric line-art explainer: constant 2px strokes, white faces and one vermilion accent as a parcel travels fro…