---
id: "2115818903733706867"
source: https://x.com/MotionByLeo/status/2115818903733706867
author: "Leo Quinter (@MotionByLeo)"
media: "video, 1080x1350, 9.7s"
model: claude-opus-5-5
generated: 2026-10-31
---
# Old Versus New Brand Motion

## Summary
A portrait before-and-after reel that stacks two 16:9 brand animations playing in sync: the old version above with a violet glow, rounded sans words and icon chips, and the new version below in deep plum with an elegant serif, crimson light and a glossy red "0%" button. It is a clear lesson in how typeface, colour temperature and pacing change the feel of the same script.

## Style
- Theme: dark (on a light grey presentation frame)
- Mood: cinematic, premium, editorial, glowing, confident
- Tags: brand-refresh, before-after, kinetic-type, glow, serif, comparison, ai-brand
- Category: Motion, Branding

## Palette
| Role | Hex |
|---|---|
| New plum background | #26021A |
| Frame grey | #DDD9DD |
| Old black | #010001 |
| White text | #FDFCFE |
| Deep plum | #10030E |
| Old violet | #411885 |
| Old lavender glow | #9563D6 |
| New wine | #6E2C45 |

## Typography
- Old brand words ("You want a model", "Cheaper", "Better", "SOTA infrastructure"): geometric sans, medium 500, sentence case, tight tracking (-0.02em), about 12% of panel height, white. Inter (500) or Manrope (600).
- New brand words ("You want a model", "Cheaper", "Zero management", "0%"): high-contrast book serif, regular 400, sentence case, normal tracking, about 14% of panel height, warm white with a pink gradient on the left letters. Newsreader (400) or Cormorant Garamond (500).
- Captions under each panel ("Old Brand", "New Brand", "v1", "v2"): small sans medium, 12px, black on grey. Inter (500).
- Tiny HUD labels (counters, "10,000+ ...", tick numbers): monospace 8px. JetBrains Mono (400).

## Layout
- 4:5 canvas (1080x1350) on a #DDD9DD frame with two stacked 16:9 panels, each about 1000x560px with no radius, 20px side margins.
- A caption row (about 28px) sits under each panel: label left, version right.
- Old panels: text centred, icon chip (about 44px squircle, 10px radius, white glass) to the right of the word.
- New panels: text centred or split with a thin vertical rule between an icon chip and the word, and a counter "1" right aligned, like a list slide.
- The "0%" scene centres a 220px glossy sphere-button over a radial burst of thin pink lines.

## Elements
- Violet radial glow rising from the bottom edge, turning into a bright lavender arc on the "Better" beat.
- Old infrastructure scenes: white grid of tiny plus marks, then black with bar-code columns of white blocks flanking the word.
- New brand logo card: light grey slide with a sunburst mark above a serif placeholder wordmark in plum.
- Crimson floor glow under the serif headline.
- HUD rulers: faint tick lines on the left and right edges with small numbers.
- Glossy red pill or sphere with a white serif "0%" and a specular top highlight.

## Motion
- Both panels run in lockstep from 0 to 9.7s.
- Old: each word types or slides in from the right in about 300ms, icon chips pop with a scale spring; the glow swells from 0.4 to 1 opacity over 800ms; bar-code columns scroll vertically at constant speed.
- New: words fade up with a slight blur (8px to 0) over 500ms ease-out; the logo card cross-dissolves; HUD ticks slide in from the edges; the "0%" sphere scales from 0.6 to 1 with an overshoot while the radial lines expand outward over 600ms.
- Cuts land on the same beats (about every 1.7s) so the comparison reads side by side.

## Rebuild it
1. Stage: `bg-[#DDD9DD] p-5 grid gap-6` with two `aspect-video` panels, each followed by a `flex justify-between text-xs font-medium` caption.
2. Share one timeline: a `useState` step index advanced by `setInterval(1700)`; both panels render the step for their brand inside `AnimatePresence mode="wait"`.
3. Old panel: `bg-black` with a radial gradient `radial-gradient(60% 50% at 50% 110%, #9563D6, #411885 40%, transparent 70%)` animated via Motion `opacity` and `scale`.
4. New panel: `bg-[#26021A]` with a crimson ellipse glow at the bottom; serif headings animated `initial={{opacity:0,y:16,filter:'blur(8px)'}}`.
5. 0% sphere: a rounded-full div with layered gradients (`#FF4D6D` to `#A0002A`) and an inset white highlight; radial lines as 60 rotated 1px divs whose `scaleX` animates from 0 to 1.
6. Bar-code columns: repeating-linear-gradient strips translated on Y with `repeat: Infinity, ease: 'linear'`.

## Generation prompt
A vertical comparison video with two stacked widescreen panels on a light grey frame: the top panel shows an old tech brand animation with violet glows, white sans-serif words and small glass icon chips; the bottom panel shows the refreshed brand in deep plum and crimson with elegant serif words, faint ruler ticks and a glossy red sphere reading 0% over radiating pink lines; small captions under each panel, synchronized cinematic cuts, no logos.