
Street-poster kinetic type identity bumper
A square 20-second looping identity bumper: six locked lines from "STOP SCROLLING" to "@ TECHHALLA" land on a 120 BPM grid in white, magenta, and acid green on black. Opus 5.5 built it in code in 14 minutes from a spec-sheet prompt that Grok drafted.
“0 After Effects or AI. just code”
- Claude Opus 5.5
- HTML and CSS
- One-shot
- 14m
You are a world-class motion designer doing a 20.00s kinetic identity bumper for TechHalla — an AI creator known for stealable workflows, not vibes. This piece must feel like the best designer in the room made a street-poster that moves. Showreel stakes: if this is weak, you don’t get hired. DURATION: exactly 20.00 seconds. LOOPABLE: frame 0 == frame last (position, opacity, cursor if any). FORMAT: one HTML file, 1080×1080 (square, X-native). 60fps. PALETTE (strict): - bg # 0A0A0A - magenta # FF2BD6 - acid green # B8FF00 - white # F5F5F5 only for primary readable type when needed No other hues. No gradients on UI chrome. Magenta/green may misregister (print offset) by 2–4px on impact frames only. TYPE SYSTEM (use all three; never one font for everything): 1) Display / scream: Archivo Black (or equivalent ultra-condensed black) — 1–4 words max 2) Urban grotesque: Syne ExtraBold — secondary hits, stacked lines 3) Mono / “prompt code”: IBM Plex Mono Medium — small labels, timestamps, fake prompt crumbs Tracking: display −40 to −80; mono +20. Optical kerning. No cute script fonts. MESSAGE (locked — do not soften, do not add filler slogans): Beat hits in this exact order: 1. STOP SCROLLING 2. AI VIDEO ISN’T EXPENSIVE 3. BAD PROMPTING IS 4. WORKFLOWS > WISHES 5. STEAL THE PROMPT 6. @ TECHHALLA Supporting crumbs (mono, ≤18 chars, never full sentences): JSON · H3 · SEEDANCE · 0 KEYFRAMES · MAGNIFIC · COPY/PASTE NARRATIVE ARC (20s): 0.0–2.5s COLD OPEN — “STOP SCROLLING” slams in from below with spring overshoot; magenta smear trail; acid green baseline ticks across like a waveform. 2.5–6.5s THESIS A — “AI VIDEO ISN’T EXPENSIVE” locks to a poster grid (baseline grid 8px). Letters scramble (seeded Fisher–Yates per glyph) then snap on the beat. 6.5–10.5s THESIS B — “BAD PROMPTING IS” replaces it via mask wipe through the letterforms (the outgoing line is the mask). Magenta/green channel split on the cut. 10.5–14.5s PROOF FLASH — rapid kinetic stack: WORKFLOWS > WISHES, then mono crumbs orbit a central block like a terminal. One fake “prompt block” types 3 lines max, then gets crossed by an acid green strikethrough that becomes a underline for STEAL THE PROMPT. 14.5–17.5s BRAND LOCK — @ TECHHALLA centers; display weight. A thick magenta bar and a thin acid green rule form an L-bracket mark (custom, not a logo download). 17.5–20.0s SETTLE / LOOP — hold lockup; micro-breath (scale 1.000→1.012→1.000); last frame == first ready for loop. CONCRETE TECHNIQUES (required — implement, don’t approximate): 1. seek(t) pure function of time. No CSS transitions. No setInterval. No React state across frames. 2. Springs = closed-form step responses. Stack one spring per target change so motion stays deterministic. 3. Kinetic type: per-glyph spring (y, opacity, blur). Stagger = 1/16 note at 120 BPM (125ms). 4. Print misregistration: on accent frames only, duplicate text layer offset (±2–4px) in magenta and acid green at 40% opacity. 5. Mask reveal: destination text revealed by animating a path mask derived from the outgoing word’s outlines. 6. Camera: one orthographic camera; only punch-in (1.0→1.08) and horizontal smash-pans timed to beats — never random drift. 7. Motion blur: render 4 subframes per frame, blend (tmix-style). 8. Beat grid: 120 BPM, downbeat at t=0. Something must land on every beat for the first 16 beats; after that, every other beat is ok. 9. Pre-pass: before full render, export one still per major beat (8 frames). Fix cramped type, orphan words, low contrast — then render. BANNED: Generic AI clichés (brains, robots, neural nets, sparkles), soft gradients, bouncy cartoon easing, particle explosions, stock “futuristic HUD”, long paragraphs, narrator essay energy, Canva-deck energy, extra slogans beyond the locked message, purple/blue neon, glassmorphism.
Make it yours. Rewrite the six lines under "MESSAGE (locked" and the brand in the first sentence ("for TechHalla"), and swap the hex codes under "PALETTE (strict)". The NARRATIVE ARC timings and CONCRETE TECHNIQUES can stay as they are.
You'll need
- An agent that can install Node packages and render an HTML page to video
- The three fonts the prompt names (Archivo Black, Syne ExtraBold, IBM Plex Mono), or equivalents
How it was made
The creator asked Grok to write this prompt from their needs, then gave it to Opus 5.5. The output is code only, built with Node libraries, with no After Effects or generative video.
Posted Sep 25, 2026 · X · 272 likes · 33k views · 41 comments
Prompt from: Reply on X
Look notesby Reference
Heavy white display type on near-black with magenta and acid-green accents: "STOP SCROLLING", "AI VIDEO ISN'T EXPENSIVE", "BAD PROMPTING IS", a small code block, and an @TECHHALLA lockup.
- Color
- Near-black ground, off-white type, hot magenta, and acid green, with no other hues.
- Type
- An ultra-heavy grotesque for the big lines, a wide extended face for secondary lines, and small monospace labels (JSON, H3, SEEDANCE, COPY/PASTE, a prompt.json block), plus a mono footer reading 120 BPM, 1080×1080, 60 FPS.
- Framing
- Square frame with corner crop marks. Lines stack flush left and fill the width, with a green baseline rule or ruler ticks beneath. The lockup pairs a thick magenta bar with a thin green rule as an L-bracket.
- Structure
- STOP SCROLL over a ruler line, AI VIDEO with scrambled green glyphs, AI VIDEO ISN'T EXPENSIVE, BAD PROMPTING and then a giant green IS, WORKFLOWS > WISHES with a prompt.json code block, an empty black beat, the @TECHHALLA lockup, and the lockup with a COPY/PASTE label.



























