Make an Apple-event-style feature roundup (bento grid) for [YOUR URL]: a 4K still and an 8s seamless loop MP4. 1. Inventory: crawl the homepage, features, pricing, changelog and docs (Playwright for JS-rendered pages). List every feature with its proof URL. Keep only what customers can use today; drop coming soon and waitlist items. Use numbers only if the site states them, with URL and date. 2. Assets: logo as SVG, brand colors and fonts from computed CSS, demo videos (<video> sources, og:video), Playwright screenshots of product sections. Make a contact sheet and pick frames where the product is doing its job. No stock photos, no AI images, no fake UI. 3. Copy: 12-15 tiles, one customer outcome per tile, 7 words max, in the site's own words. Center hero tile: logo, one-line promise, the site's real CTA. 4. Build: one HTML page, 1920x1080, 12-col x 4-row CSS grid (minmax(0,1fr)), 24px padding, 16px gap, 28px radius, hero at cols 5-8 / rows 2-3. Mix video tiles, screenshot tiles, big-number type tiles and app-style icon squircles. Dark and light themes. 5. Motion: deterministic window(.)seek(t) for t in [0,8). No intro or outro: the full board is visible at frame 0. Every micro-animation returns to its frame-0 state by t=8 (type then delete, forward then back, a cursor that enters, clicks the CTA and leaves). Re-cut each video to 8, 4 or 8/3 s, crossfade its last 0.4s into its first frame with ffmpeg xfade, encode VP9 webm. seek(t) sets each video to t mod its length and awaits 'seeked'. 6. Render: Playwright at deviceScaleFactor 2, one still plus 240 frames at 30fps, then ffmpeg to H.264 1080p (lanczos, crf 16, yuv420p, faststart). 7. QA: look at the still and fix overflow, clipped text and dead space, then re-render. Loop check: RMSE between the last and first frame must be at most 1.3x the median frame-to-frame RMSE. Report every tile with its source.
