Vertical logo reveal prompt — icon + wordmark — HyperFrames prompt (diamond mark draws, name lands beneath)

<direction> A 9-second vertical logo reveal in HyperFrames (1080x1920, 270 frames at 30fps). House style: near-black #0a0a0a background, white type, ONE orange accent #ff5c1a, Arial/Helvetica bold, no webfonts. Built for the vertical frame: a geometric icon draws in the upper third, the wordmark lands beneath it, then a rule, a tagline and a domain pill stack down the frame. Fictional brand only — never a real company's logo or name. No gradients, no stock photos, no horizontal layout squeezed into a vertical frame. </direction> <structure> Seconds 0.0-0.6 — Kicker "VERTICAL LOGO REVEAL — Solmara" in orange, top left. Seconds 0.6-2.4 — A diamond outline draws itself (stroke-dash animation) in the upper third of the frame. Seconds 2.4-2.9 — An inner circle pops in (scale 0.6 to 1) inside the diamond. Second 2.9 — An orange dot pops onto the exact centre of the mark. Seconds 3.3-4.2 — The wordmark "Solmara" lands letter by letter beneath the icon, large, centred. Seconds 4.3-4.8 — A short orange rule draws left to right under the wordmark. Seconds 4.9-9.0 — Tagline "Skincare, simplified." fades in, then the domain pill "solmara.example" fades in below it; a small grey footer line at the very bottom names the brand as fictional and the film as a prompt test. </structure> <build> One HTML composition with a seek-driven GSAP timeline. The diamond is one SVG path drawn by stroke-dashoffset (measure the length in code). The inner circle scales with a centre transform origin; the dot is an absolutely-positioned div centred on the mark's centre point. Stack order is fixed top to bottom — icon, wordmark, rule, tagline, pill — with generous gaps: the vertical canvas tempts crowding, so keep the icon in the upper third, the name in the middle and the pill in the lower third. </build> <gotchas> - Respect vertical safe zones: nothing except the footer within 60px of the top or bottom edges — vertical viewers crop edges first. - The pill text must fit inside the pill: a 400px pill holds about 18 characters at 24px tracking; longer domains must shrink the type, never overflow the border. - The dot must sit on the exact centre of the mark: a dot off-centre by even a few pixels reads as a mistake against the symmetric diamond. - Do not reuse a landscape lock-up here: icon-above-wordmark is the vertical format; side-by-side icon and wordmark wastes the tall frame and shrinks both. - Check the final frame as a still: diamond, circle, dot, wordmark, rule, tagline and pill all present, none touching, footer clear of the pill. </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.