Claude SVG logo reveal prompt — piece by piece — HTML prompt (an 8-spoke asterisk draws one spoke at a time)

<direction> A 9-second piece-by-piece SVG logo reveal in single-file HTML (1280x720, 270 frames at 30fps, rendered via HyperFrames). This prompt teaches the piece-by-piece SVG technique: ask for one SVG element per piece, each drawn in sequence, with a counter caption that counts the pieces as they land. The mark here is an original geometric asterisk — 8 equal spokes from one centre point, drawn clockwise from the top — created for the fictional brand Aster Studio. It is NOT any real company's logo artwork: never trace, copy or name a real brand's mark, and never ask the model to reproduce one. House style: near-black #0a0a0a background, white type, ONE orange accent #ff5c1a, Arial/Helvetica bold, no webfonts. </direction> <structure> Seconds 0.0-0.6 — Kicker "SVG LOGO REVEAL — PIECE BY PIECE" in orange, top left. Seconds 0.6-5.0 — The asterisk draws one spoke at a time, clockwise from the top: each spoke takes 0.5s, staggered 0.55s apart. A caption under the mark counts along: "PIECE 1 OF 8", "PIECE 2 OF 8", and so on. Second 5.05 — An orange dot pops onto the centre point and the caption swaps to "ALL 8 PIECES — ONE MARK". Seconds 5.5-9.0 — The wordmark "Aster Studio" fades and rises into place under the mark, then the tagline "Drawn piece by piece — an original geometric mark" fades in; a small grey footer line names the brand as fictional and the film as a prompt test. </structure> <build> Single HTML file with a local GSAP copy and a seek-driven timeline (window.__timelines["main"]). Each spoke is its own SVG line element from the centre point outward, with stroke-dasharray equal to the spoke length (130) animated from offset 130 to 0 — one element per piece is what makes the sequence controllable. The caption text is swapped by timeline callbacks placed at each spoke's start time, so the count and the drawing can never drift apart. The centre dot is a separate absolutely-positioned div centred on the shared centre point. </build> <gotchas> - All spokes must share ONE centre point and ONE length: spokes of different lengths, or centres a few pixels apart, make a broken star instead of a mark. - Draw order must be clockwise from the top: a random draw order reads as assembly noise, not a reveal. - The caption count must match the spoke count exactly — 8 spokes means "PIECE 8 OF 8" as the last count, never 7 or 9. - The mark must stay original: an asterisk made of 8 equal straight spokes from one centre is a generic geometric figure — the moment a spoke curves, bends or spells a letter, it stops being generic and the prompt must be re-checked. - Check the final frame as a still: all 8 spokes present and symmetric, dot exactly on the centre, wordmark and tagline clear of each other. </gotchas> Before you finish: step through the timeline at five points and fix anything that overlaps, clips the frame, or drifts off the beat grid.