---
id: "2112837002345468297"
source: https://x.com/penguindsgn/status/2112837002345468297
author: "Alex (@penguindsgn)"
media: "video, 1920x1080, 10.0s"
model: claude-opus-5-5
generated: 2026-10-22
---
# Gradient Fluid Hero to Decision Simulator

## Summary
A landing-page sequence that opens on a frosted glass card floating over a vivid orange, pink and violet fluid gradient, cuts to a typing headline on white, then settles into a calm question-and-answer simulator under a softly fading gradient. It pairs an expressive halftone gradient with an elegant serif to make an AI product feel premium and human.

## Style
- Theme: light
- Mood: warm, premium, optimistic, thoughtful
- Tags: gradient-mesh, halftone, glassmorphism, serif-headline, landing-page, ai-product, typing-effect
- Category: Hero, Landing page

## Palette
| Role | Hex |
|---|---|
| Page white | #FAF9F9 |
| Blush | #F5D2CF |
| Hot pink | #E95B85 |
| Orchid | #E499BE |
| Orange | #F0782D |
| Peach | #F7B77B |
| Violet | #7A599F |
| Ink | #1E1E1E |

## Typography
- Headlines: high-contrast transitional serif, regular weight, sentence case, about 4% of frame height. Closest free font: Instrument Serif or Fraunces (400).
- Supporting text: neutral sans, small, muted grey. Inter (400).
- Buttons: Inter (500) on small pill buttons.

## Layout
- 16:9 frame (1920x1080), single centred column throughout.
- Scene 1: a 3:4 glass card, about 20% of frame width, centred over a full-bleed fluid gradient.
- Scene 2: blank white page with a short centred typing headline.
- Scene 3: gradient compressed into the top 45% and fading to white; centred serif question, small caption, then an answer card (dark, 8px radius, about 30% wide) and a small gradient pill button.

## Elements
- Fluid gradient: large organic blobs of orange, pink and violet with a visible halftone dot texture in the mid-tones.
- Glass card: 16px radius, white border at 40% opacity, backdrop blur of about 24px, a small placeholder logo at the top and a two-line serif headline at the bottom.
- Typing headline: characters appear one at a time with a caret.
- Loading pill: dark capsule with animated dots while the answer is computed.
- Answer card: dark #2A2A2A panel with white centred body text.
- CTA: small pink-to-violet gradient pill with an arrow icon.

## Motion
- 0 to 2.5s: the gradient flows slowly (blobs drift and morph over about 4s) behind the static glass card.
- 2.5 to 3.5s: hard cut to white; the headline types at about 40ms per character.
- 3.5 to 6s: the gradient wipes back down from the top and fades into white; the question settles, a loading pill pulses (600ms loop).
- 6 to 9s: the pill expands into the answer card (300ms, ease-out), the CTA fades in 150ms later.
- 9 to 10s: hold, gradient keeps drifting.

## Rebuild it
1. Build the gradient as a WebGL shader (simplex noise warped color stops) or with a library like `@paper-design/shaders-react` mesh gradient; add a halftone pass by sampling luminance into a dot grid.
2. Fade it into the page with a mask: `mask-image: linear-gradient(to bottom, black 40%, transparent)`.
3. Create the glass card with `backdrop-blur-xl bg-white/10 border border-white/40 rounded-2xl shadow-2xl`.
4. Set headlines in Instrument Serif at `text-5xl` and animate typing by revealing characters with Motion (`staggerChildren: 0.04`).
5. Build the loading pill as a dark `rounded-full` with three dots animated in sequence, then morph it into the answer card using a shared `layoutId`.
6. Style the CTA as `bg-gradient-to-r from-[#E95B85] to-[#7A599F] text-white rounded-full px-3 py-1 text-xs`.
7. Use generic product copy; keep the composition centred and spacious.

## Generation prompt
A smooth landing-page motion sequence: a frosted glass card with a small placeholder logo and an elegant serif headline floats over a vivid flowing orange, hot pink and violet fluid gradient with halftone dot texture, then a clean white page where a serif headline types out, then the gradient fades into white above a centred serif question, a dark answer card and a small pink-to-violet gradient button; premium minimal aesthetic, soft easing, no real brand names.