---
id: "2115830313805140188"
source: https://x.com/Osmbproduction/status/2115830313805140188
author: "OB | Editing × Motion (@Osmbproduction)"
media: "video, 1920x1080, 48.0s"
model: claude-opus-5-5
generated: 2026-10-31
---
# Split-Screen SaaS Launch Video Reel

## Summary
A 16:9 showreel playing four SaaS launch videos at once in a 2x2 grid: kinetic one-word captions on gradient glows, tilted 3D dashboard mockups with neon rims, a phone spinning in, a glowing app icon on orbit rings, and placeholder wordmark end cards. Each cell runs its own cut, so the reel doubles as a catalogue of launch-video moves. Useful for studying pacing, blur-in type and how product UI is staged in short promos.

## Style
- Theme: mixed (mostly black, with white, hot pink and violet beats)
- Mood: energetic, polished, punchy, modern, premium
- Tags: launch-video, kinetic-type, split-screen, 3d-mockup, gradient-glow, motion-blur, saas-promo, showreel
- Category: Product video, Motion

## Palette
| Role | Hex |
|---|---|
| Black base | #040304 |
| Near black | #141316 |
| Paper white | #FBF5F8 |
| Magenta | #AE20B2 |
| Hot pink | #E8197A |
| Electric violet | #7A10E6 |
| Deep navy | #10274B |
| Glow blue | #275FBB |
| Ember orange | #F07A2A |

## Typography
- Kinetic captions ("Do you have the edge?", "is getting", "shared", "add"): geometric sans, semibold, sentence case, white or magenta, 6 to 14% of cell height, often motion-blurred on entry. Poppins SemiBold or Plus Jakarta Sans.
- Taglines ("Your money. Your intelligence."): light geometric sans, about 6% of cell height, with a small uppercase label in an outlined pill below. Outfit Light plus Outfit SemiBold caps.
- Stat type ("90%"): bold condensed-ish sans, grey to white gradient. Manrope ExtraBold.
- End-card wordmarks: bold sans next to a circular emblem, and one brush-script wordmark on white (placeholders). For the script use Kaushan Script.
- Highlight line ("Impact gets measured"): bold yellow sans on violet. Poppins Bold.

## Layout
- 16:9 frame (1920x1080) split into four equal 960x540 cells with no gutters.
- Each cell centres one subject: a caption, a mockup or a logo; type sits on the optical centre with ample negative space.
- Dashboard mockups are tilted about 15 degrees in 3D perspective with 16px corners and a glowing 2px cyan or gold rim.
- Background glows are large blurred ellipses (40 to 60% of cell width) rising from the bottom edge in blue, orange or pink.

## Elements
- Gradient glow fields: navy-to-blue haze, orange half-orb rising from below, pink vertical pinch shape on white.
- 3D UI panels: dark dashboard with nav tabs, search field and category chips; finance list with circular progress rings; candlestick chart card.
- Phone mockup: magenta device rotating in from the left beside a single word.
- App icon: glowing blue square glyph centred on concentric orbit rings with two small glass spheres.
- Support card: "24/7 Support" headline with a chat panel and two channel icons.
- End cards: circular emblem plus wordmark, and a script wordmark on white, all placeholders.
- Cursor hand icon that clicks on a word.

## Motion
- Cells cut independently every 1500 to 3000ms, so the grid never changes all at once.
- Captions enter word by word with a blur-to-sharp and 20px rise (about 350ms, ease-out), sometimes letter by letter with a mask wipe.
- 3D mockups slide in with a rotateY of 25 to 15 degrees and a slow 4s push-in; rim lights pulse once.
- The phone spins 180 degrees on Y over 600ms with motion blur.
- Glow orbs breathe in scale (1 to 1.08) over 2s; orbit spheres travel along rings at about 6s per loop.
- End cards fade in over 300ms and hold 1000ms before the next cut; the reel loops.

## Rebuild it
1. React page with a `grid grid-cols-2 grid-rows-2 aspect-video` stage; each cell is its own timeline component.
2. Captions: split text into words and animate each with Motion `initial={{ opacity: 0, y: 20, filter: 'blur(12px)' }}` to sharp, `staggerChildren: 0.08`.
3. Mockups: a `div` with `[perspective:1200px]` wrapping a panel animated from `rotateY: 25` to `15` and `scale: 0.95` to `1.05` over 4s; rim with `ring-2 ring-cyan-400/60 shadow-[0_0_40px_rgba(39,95,187,0.6)]`.
4. Glows: absolutely positioned `rounded-full blur-3xl` ellipses with gradient fills, animated in scale with `repeat: Infinity, repeatType: 'mirror'`.
5. Sequence each cell with an array of scenes and `AnimatePresence mode="wait"`, using different durations per cell for the staggered cut rhythm.

## Generation prompt
A fast 16:9 SaaS launch showreel split into a 2x2 grid: bold white and magenta words blurring into focus on black and pink gradient glows, tilted dark dashboard mockups with glowing neon rims, a magenta phone spinning in, a glowing blue app icon on orbit rings, an orange half-sun rising behind a calm tagline, and clean wordmark end cards on black, violet and white; punchy, premium motion design, no real brands.