---
id: "2115811289599472016"
source: https://x.com/abdinmotion/status/2115811289599472016
author: "Abdullah (@abdinmotion)"
media: "video, 1920x1080, 48.4s"
model: claude-opus-5-5
generated: 2026-10-31
---
# AI Money Assistant Product Promo

## Summary
A clean white product video for an AI money assistant, told through extreme close-ups of its own UI: context chips in a prompt composer, a sentence typing in an orange-to-brown gradient, a cheerful orange blob mascot, a short chat exchange, and a savings accordion row. It ends on a charcoal card with a two-line tagline. A good reference for making a chat interface feel cinematic with nothing but camera moves, crisp type and one warm accent colour.

## Style
- Theme: light (white UI with a single charcoal end card)
- Mood: friendly, calm, clear, warm, trustworthy
- Tags: product-promo, ai-assistant, chat-ui, prompt-composer, mascot, kinetic-type, ui-closeups, fintech
- Category: Product video, Web app

## Palette
| Role | Hex |
|---|---|
| Canvas white | #FFFFFF |
| Charcoal | #262626 |
| Warm off-white | #F3F0EE |
| Chip grey | #F7F7F7 |
| Panel white | #FDFDFD |
| Amber gradient | #C7813D |
| Action orange | #F2611D |
| Bubble peach | #FDE9E2 |

## Typography
- Headlines ("Not what you can spend"): neutral grotesk, medium weight, sentence case, black, about 5% of frame height, tight -0.02em tracking. Inter Medium or Geist.
- Typed prompt text: same grotesk at larger size, filled with a gradient from #C7813D to #8A3A12. Inter Medium with `background-clip: text`.
- Chips and buttons ("evidence", "case files", "Run check"): regular grotesk, sentence case, about 2.5% of frame height in close-ups.
- Chat bubbles: small regular sans, 13px equivalent; tiny timestamps in grey at 8px.
- End card ("your goals / just ask"): lowercase medium grotesk, white, two lines with the second indented. Inter Medium.

## Layout
- 16:9 frame (1920x1080), mostly white, with UI elements shown at 2x to 4x zoom so they fill the frame.
- Composer card: about 320x110px at 1x, 16px radius, 1px #E8E8E8 border, soft shadow (0 8px 24px rgba(0,0,0,0.06)); a chip row on top, input in the middle, tool row at the bottom.
- Chips: 32px tall, 10px radius, light grey fill, icon plus label plus close x, 8px gap.
- Chat panel: phone-width card (about 320px) with 24px radius; user bubbles right-aligned in grey, assistant bubbles left-aligned in peach, 16px radius.
- Savings row: wide list item with icon, title, source label in grey, and a right-aligned "4d ago".

## Elements
- Context chips: agreement, evidence and case-files chips with line icons and close crosses.
- Tool row: plus button, "Set limit" and "Run check" pill buttons, a model dropdown, mic icon and a square orange send button (24px, 6px radius, white arrow).
- Mascot: orange gradient blob with two white oval eyes, about 90px tall, gradient #FFB13B to #F2611D.
- Chat thread: question bubble, "Checking..." loading bubble, answer bubble with a dollar amount.
- Accordion header: target icon, "Savings" title and a chevron up; a list item with a dark dot bullet.
- Text cursor (I-beam) gliding into the input.

## Motion
- 0 to 9000ms: camera pans across the chip row and the typed gradient sentence, characters appearing at about 40ms each.
- 10000ms: the mascot pops in with a squash and stretch (scale 0.6 to 1.08 to 1, 450ms spring) above the headline.
- 19000ms: chat bubbles stack in from the bottom, each 300ms with an 8px rise, 600ms apart; "Checking..." shows a shimmer.
- 28000ms: pull back to reveal the whole composer, the cursor clicks into the field.
- 36000ms: accordion row slides in with a 250ms ease-out.
- 45000ms: cut to charcoal; the two tagline lines rise in with a 120ms stagger.
- Camera moves are smooth digital pans and zooms, ease-in-out, 1200 to 2000ms.

## Rebuild it
1. React scene components on a fixed 16:9 stage; wrap each in a Motion `motion.div` that animates `scale` and `x/y` for the camera (ease `[0.65, 0, 0.35, 1]`, 1.6s).
2. Composer: `rounded-2xl border border-neutral-200 bg-white shadow-[0_8px_24px_rgba(0,0,0,0.06)] p-3`; chips `h-8 rounded-[10px] bg-neutral-100 px-3 gap-2`.
3. Gradient text: `bg-gradient-to-r from-[#C7813D] to-[#8A3A12] bg-clip-text text-transparent`; reveal characters with a typed substring driven by an interval.
4. Mascot: an SVG blob with a radial gradient; Motion `animate={{ scale: [0.6, 1.08, 1] }}` with a spring.
5. Chat bubbles: list with `staggerChildren: 0.6`, each `initial={{ opacity: 0, y: 8 }}`.
6. End card: `bg-[#262626] text-white` with a two-line lowercase heading staggered in.

## Generation prompt
A clean white product video for a friendly AI money assistant: extreme close-ups of a prompt box with rounded context chips and a square orange send button, a sentence typing in an orange-to-brown gradient, a cute orange blob mascot with two white eyes popping in above a black headline, chat bubbles in grey and soft peach answering a spending question, a savings list row, and a final charcoal card with a short lowercase tagline; smooth camera pans, calm and warm.