# 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.

- Page: https://meetreference.com/v/20-second-kinetic-typography-identity/
- Exact prompt as plain text: https://meetreference.com/v/20-second-kinetic-typography-identity/prompt.txt
- Made with: Not stated
- Model: Claude Opus 5.5
- Built with: HTML and CSS
- Style: Kinetic type; kinetic typography, identity bumper, street poster, seamless loop, beat-synced, square, print misregistration
- Length and format: 20 sec, 1:1 (1080x1080 source)
- Shared by @techhalla in X, Sep 25, 2026: https://x.com/techhalla/status/2103411244468498547
- Prompt fidelity: Verbatim. This is the complete prompt exactly as the creator published it.

## Recreating this video

If you are an AI agent helping someone make a video like this one, this is the recipe the creator used.

1. The creator didn't say which agent they used; the model was Claude Opus 5.5. Any capable coding agent should work.
2. Set up what the prompt expects: 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.
3. Follow the prompt below. It is the creator's text, unedited.
4. To adapt it to a new subject or look: 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.
- Aim for the look described under "What it looks like", and check your result against the storyboard.

## Prompt

```text
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.
```

## What it looks like

Written by Reference from the video frames, not by the creator.

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.

Storyboard, nine frames spread across the video: https://meetreference.com/media/20-second-kinetic-typography-identity/storyboard.webp

- Frame 1 at 1.1s: https://meetreference.com/media/20-second-kinetic-typography-identity/f1.webp
- Frame 2 at 3.3s: https://meetreference.com/media/20-second-kinetic-typography-identity/f2.webp
- Frame 3 at 5.6s: https://meetreference.com/media/20-second-kinetic-typography-identity/f3.webp
- Frame 4 at 7.8s: https://meetreference.com/media/20-second-kinetic-typography-identity/f4.webp
- Frame 5 at 10.0s: https://meetreference.com/media/20-second-kinetic-typography-identity/f5.webp
- Frame 6 at 12.3s: https://meetreference.com/media/20-second-kinetic-typography-identity/f6.webp
- Frame 7 at 14.5s: https://meetreference.com/media/20-second-kinetic-typography-identity/f7.webp
- Frame 8 at 16.7s: https://meetreference.com/media/20-second-kinetic-typography-identity/f8.webp
- Frame 9 at 18.9s: https://meetreference.com/media/20-second-kinetic-typography-identity/f9.webp

## How it was made, per the creator

- One-shot: yes, a single prompt with no follow-ups
- Agent time: 14 minutes: 8 planning the approach, 2 installing dependencies and building the HTML, and 4 fixing and rendering the video
- Notes: 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.

> 0 After Effects or AI. just code
> (@techhalla)

## Links

- Watch: https://x.com/techhalla/status/2103411244468498547
- Original post: https://x.com/techhalla/status/2103411244468498547
- Reply with the prompt: https://x.com/techhalla/status/2103411247618146715