---
id: "2115852019546358167"
source: https://x.com/kail_designs/status/2115852019546358167
author: "Kailash (@kail_designs)"
media: "video, 1920x1080, 21.1s"
model: claude-opus-5-5
generated: 2026-10-31
---
# Voice Typing Key Launch Film

## Summary
A short product launch film for a voice-typing feature: a lime keyboard key with a spiral mark is pressed, a glowing dark waveform pill appears and travels into a chat app, then serif and hand-lettered headlines announce the feature before a lime end card. It shows how a single tactile object (the key) and a single UI element (the waveform pill) can carry a whole feature story.

## Style
- Theme: light (off-white, with lavender and lime scenes)
- Mood: playful, friendly, tactile, crisp, warm
- Tags: product-launch, voice-ui, waveform, keycap, serif-headline, hand-lettering, end-card
- Category: Product video, Motion

## Palette
| Role | Hex |
|---|---|
| Background | #F7F8F3 |
| Brand lime | #B3CD4F |
| Lavender scene | #C4B2E6 |
| Olive ink | #464939 |
| Card white | #FAF6FC |
| Soft grey | #ECECE8 |
| Pale sage | #D6E2C2 |
| Waveform green | #7FE03A |

## Typography
- Headlines ("Works in any app", "Unlimited words, for free.", "Good afternoon"): transitional serif, regular 400, sentence case, normal tracking, about 7% of frame height. Newsreader (400) or Source Serif 4.
- Hand lettering ("VOICE TYPING"): marker-style all caps with uneven baseline, slightly larger than the serif line. Permanent Marker or Caveat Brush.
- UI text in the chat card and small notes ("Now available on Mac."): sans regular 13 to 16px equivalent, dark grey. Inter (400).
- End card wordmark: a placeholder lowercase rounded heavy sans beside the spiral mark. Nunito (900) as a stand-in.

## Layout
- 16:9 canvas (1920x1080); every scene is centred on a single axis with lots of empty off-white space.
- Keycap: about 160px squircle with 28px radius, lime top with darker olive sides and leaf doodles, spiral mark and a small "fn" legend.
- Waveform pill: about 340x130px at hero scale, fully rounded, near-black #2D2F28 with a soft lime glow (0 0 40px rgba(127,224,58,0.6)); shrinks to about 200x80px as a docked control near the bottom.
- Chat card scene: lavender background with sketched pencil lines, a white input card about 900px wide with 16px radius and a 1px border, centred under the greeting.
- Text scenes stack headline, subline and pill with 24 to 48px gaps.

## Elements
- Lime keycap with a black spiral glyph and "fn" legend, small leaf illustrations on its sides.
- Dark waveform pill with 9 to 11 green bars and dots, the centre bars tallest.
- Trailing grey waveform of dots and ticks to the left of the pill (the incoming voice).
- Chat input card with greeting heading, orange asterisk glyph, transcribed sentence including an inline "fn" key chip, mode chips and a model dropdown in grey.
- "Works in any app" line with a floating white app tile carrying a blue document icon, a second faint tile below.
- Lime full-bleed end card with the spiral mark and placeholder wordmark.

## Motion
- 0 to 2s: keycap drops in and presses down 6px with a squash (about 180ms) and springs back.
- 2 to 5s: the keycap slides left and shrinks while the waveform pill grows out of it with a 400ms spring; the lime glow pulses at about 1Hz.
- 5 to 10s: hard cut to the lavender chat scene; the transcribed sentence types in word by word (about 80ms per word) as the grey waveform scrolls into the pill.
- 10 to 18s: text scenes fade and rise 12px in sequence, 300ms each, with the pill bars bouncing continuously.
- 18 to 21s: wipe to the lime end card; the mark and wordmark scale from 0.9 to 1 over 500ms ease-out.

## Rebuild it
1. One `section` per scene in a fixed 16:9 stage (`aspect-video max-w-5xl mx-auto bg-[#F7F8F3] grid place-items-center`), sequenced with a timeline of state indexes.
2. Keycap: a div `w-40 h-40 rounded-[28px] bg-[#C9E35A]` with `box-shadow: inset 0 -10px 0 #8FA33A`; animate `y` and `scaleY` on press.
3. Waveform pill: `rounded-full bg-[#2D2F28] px-8 py-6 flex gap-2` with bars whose `scaleY` animates between 0.3 and 1 using Motion `repeat: Infinity, repeatType: 'mirror'` and random durations 300 to 600ms.
4. Glow: a `box-shadow` animated between 20px and 48px blur in lime.
5. Text scenes: `AnimatePresence mode="wait"` with `initial={{opacity:0,y:12}}` and 300ms ease-out; serif via Newsreader, hand lettering via Permanent Marker.
6. End card: a full-bleed `bg-[#B3CD4F]` div that clips in with `clipPath: inset(0 0 0 100%)` to `inset(0)`.

## Generation prompt
A clean product launch animation on an off-white background: a chunky lime-green keyboard key with a black spiral symbol is pressed, a glowing dark pill with bouncing green audio bars emerges, a lavender scene shows a chat box where spoken words become text, then elegant serif headlines and a marker-style hand-lettered title appear, ending on a bright lime card with a simple spiral logo; friendly, tactile, minimal, no real brand names.