---
id: "2115846619300286615"
source: https://x.com/frevana_ai/status/2115846619300286615
author: "frevana (@frevana_ai)"
media: "video, 1920x1080, 22.9s"
model: claude-opus-5-5
generated: 2026-10-31
---
# AI Model Credits Launch Film

## Summary
A 23-second launch film for an AI tool hub that cuts between macro imagery, big kinetic headlines on pale grey, a grid of floating model-name chips, dark product cards for jobs and credits, and a closing wordmark over a crashing ocean wave. Worth studying for its pacing: one idea per scene, selection-handle dots as a recurring motif, and a mono terminal accent mixed with a tight grotesk.

## Style
- Theme: mixed (light grey type scenes, dark UI scenes, photographic open and close)
- Mood: confident, crisp, editorial, premium
- Tags: launch-video, kinetic-type, product-ui, credits, terminal-accent, selection-handles, photographic
- Category: Product video, Typography

## Palette
| Role | Hex |
|---|---|
| Light scene background | #F2F2F0 |
| Grid scene background | #EAEBE8 |
| Dark scene background | #0C0C0D |
| Dark card | #17191B |
| Ocean blue | #0C3F61 |
| Muted grey | #B9BDBC |
| Slate | #637982 |
| Wing amber | #BD7927 |
| Handle green | #2EBD59 |

## Typography
- Headlines ("Every task.", "Top up anytime."): neo-grotesk sans, semibold, sentence case, tight tracking (about -0.03em), around 8 to 10 percent of frame height. Inter Tight (600).
- Sublines and status text ("$$$$ a month, every month.", "--model ..."): monospace, regular, small, with one bold fragment. JetBrains Mono (400 and 700).
- Model chips: small uppercase sans with wide tracking (about 0.12em) beside tiny line icons. Inter (500).
- UI cards: small sans labels and a large tabular credit number ("2,410"). Inter (400, 600).

## Layout
- 16:9 frame (1920x1080). Each scene uses one focal block with lots of empty space.
- Headline scenes centre the type; four 10px green dots sit at the corners of the text bounds like selection handles.
- Grid scene: a faint 60px square grid; chips of different widths float in loose rows around a centred headline.
- Split scenes: headline left at about 8 percent margin, UI card right occupying about 45 percent width, vertically centred.
- Cards: 16px radius, 1px border slightly lighter than the fill, soft large shadow on light backgrounds.

## Elements
- Opening macro: an insect wing in amber and teal veins on a pale sky, a placeholder model wordmark in white, four small white dots at the corners.
- Selection handles: four green dots, reused across scenes to frame the active text.
- Model chips: light grey rectangles with an icon (image, video or text glyph) and an uppercase placeholder model name; one chip is a mono terminal prompt.
- Jobs card: dark panel with a "Launch campaign" title, three task rows (thumbnail, name, status "done" in green or "running" in grey mono) and a thin green progress bar.
- Credits card: dark panel with a large balance number, a divider and a "Top up" row with a green "+1,000".
- Closing: full-bleed ocean wave photo with a tiny surfer, placeholder wordmark, tagline "Start free. Pay as you go." and a URL line.

## Motion
- 0 to 2s: macro wing with slow push-in; the wordmark and corner dots appear (about 400ms fade).
- About 4 to 7s: the headline types in word by word, then the handles snap to its corners (200ms ease-out).
- About 8 to 11s: chips drift into the grid with staggered fades (80ms apart) while the next headline resolves from a blur (about 500ms).
- About 12 to 16s: "Every task." with the jobs card; status rows tick from running to done and the progress bar fills.
- About 16 to 20s: hard cut to dark; the credit number counts up and the top-up row lands.
- About 21 to 23s: cut to the wave photo, wordmark and tagline fade up in sequence (300ms stagger).

## Rebuild it
1. Build each scene as a full-viewport React section (`h-dvh grid place-items-center`) and sequence them with `AnimatePresence` on a timer or scroll index.
2. Headline: split words into spans and animate `opacity` 0 to 1 and `filter: blur(8px)` to `blur(0)` with a 60ms stagger; set `tracking-[-0.03em] font-semibold`.
3. Handles: absolutely positioned 10px green circles at the four corners of the headline box, animated in with `scale` 0 to 1 (spring, stiffness 400).
4. Chips: `rounded-md bg-white/70 px-3 py-2 uppercase tracking-[0.12em] text-xs`, positioned on a CSS grid background (`background-size: 60px 60px` with 1px lines in #DCDDDA).
5. Cards: `rounded-2xl bg-[#17191B] border border-white/10 p-6`; count the balance up with Motion's `animate(0, 2410, { duration: 1.2 })`.

## Generation prompt
A sleek 16:9 launch film for an AI creative tool: macro shot of a translucent amber and teal insect wing, then bold black sans-serif headlines on pale grey framed by four small green corner dots, a faint grid with floating uppercase chips and a monospace terminal prompt, dark rounded UI cards showing task progress and a credit balance counting up, ending on a dramatic deep-blue ocean wave with a tiny surfer and a clean white placeholder wordmark, no real brand names.