Tip card prompt — one tip per film (vertical) — HTML prompt (tip card + before/after example)

<direction> An 8-second vertical tip card (1080x1920, 240 frames at 30fps), single-file HTML rendered via HyperFrames. House style: near-black #0a0a0a background, cards #141414 with #2a2a2a borders, white type, ONE accent #ff5c1a, Arial/Helvetica bold, no webfonts. A series badge "TIP CARD — ONE TIP PER FILM" sits at the top; a card holds TIP 07, the tip NAME THE ENEMY IN THE FIRST LINE. in two lines with the punch in accent, and the why line A hook names the problem before it sells the fix. No problem, no reason to stay.; a second card shows the before/after: struck-through "Our app helps you focus." versus "Your tabs are eating your day." in accent; a CTA pill TRY IT TODAY lands; a footer reads "TIP CARD SERIES — SWAP THE TIP, KEEP THE CARD". Banned: more than one tip per film, tip text longer than two lines at this size, stock icons, gradients, glows. </direction> <structure> Frames 0-9 — Series badge already on screen. Frames 9-21 — Tip card fades in. Frames 21-45 — NAME THE ENEMY IN THE FIRST LINE. fades in over two lines. Frames 51-69 — A hook names the problem before it sells the fix. No problem, no reason to stay. fades in. Frames 78-102 — Before/after card fades in: BEFORE "Our app helps you focus." struck through, AFTER "Your tabs are eating your day." in accent. Frames 120-138 — CTA pill TRY IT TODAY fades in. Frames 138-156 — Series footer fades in. Final frame — both cards, CTA and footer all visible; nothing clipped at 1920px height. </structure> <build> One single-file HTML composition, 1080x1920, seek-driven GSAP timeline (paused, window.__timelines["main"]). Cards are plain divs with fixed padding — no flex column that can reflow when the tip text changes length. Render via HyperFrames at 30fps. </build> <gotchas> - The tip must fit two lines at 72px: if it wraps to three, shorten the tip — do not shrink the type. - The before line stays struck through in full, including its label: the strike is the joke, not an error. - Keep the example card's top clear of the tip card's bottom: the two cards are separate beats, and a collision reads as one messy card. </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.