Dev & Code
Free
v1.0
SaaS Hero , Minimalist, Flipped Video Background, Email CTA & Staggered Entrance
Editorial, whitespace-heavy SaaS hero with a vertically flipped video that blends into white, Geist + Instrument Serif mixed headline, email capture navbar, and staggered Motion animations.
saas
hero
react
tailwind
claude
chatgpt
lovable
cursor
framer-motion
animation
email-capture
light-theme
When to use
Use for remote team tools, HR SaaS, productivity apps, or any product targeting teams and businesses that wants a clean, professional first impression.
Recommended LLMs
Claude Sonnet
GPT-4o
Plugins / Skills
Projects (Claude)
Artifacts (Claude)
When to use
This is the anti-hero hero — instead of going dark and dramatic, it goes white, editorial, and spacious. The 290px top padding is intentional — it creates an almost magazine-like feel. The vertically flipped video (scaleY(-1)) means the sky/top of the video merges into white seamlessly.
What you'll need to customise
- Video URL — the
scaleY(-1)flip is what makes the gradient blend work — test your own video upside-down first - Headline word — the italic serif word inside brackets
[management]— swap with your product's key feature - Email placeholder — currently blank, add your form submission handler
- Social proof number — "1,020+ Reviews" — update with your real count
- CTA button — "Create Free Account"
Tips for best results
- The gradient blend (
from-[rgba(255,255,255,0)] to-white) from 26% to 67% is the trick that makes the video look embedded, not overlaid - The mixed headline uses two fonts at different sizes:
80px(Geist) for most text,100px(Instrument Serif italic) for the bracketed word - The email input container is a single rounded div with an embedded button — not two separate elements
- Load Geist via
@fontsource/geist-sans
Expected output
React component with:
- Standard light-theme navbar (no special effects)
- Full-screen min-height section
- Flipped video (
scaleY(-1)) blending into white background - Mixed-font headline
- Email capture container with CTA button
- Social proof row below input
- Staggered Motion entrance animations
The Prompt
Copy it, paste it, use it.
Create a minimalist, high-end React hero section using Tailwind CSS and the Motion library (`motion/react`).
### Tech Stack
- React + TypeScript
- Tailwind CSS
- `motion/react`
- `@fontsource/geist-sans`
### Fonts
- Main: "Geist" (`@fontsource/geist-sans`, medium weight)
- Accent: "Instrument Serif" (Google Fonts, italic)
### Layout
- `min-h-screen`, centered content
- Main content container: `max-w-[1200px] mx-auto`
- Top padding: exactly `pt-[290px]` — creates editorial breathing room
- Vertical gap: `gap-8` between elements
### Background Video
- URL: `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260302_085640_276ea93b-d7da-4418-a09b-2aa5b490e838.mp4`
- `absolute inset-0 w-full h-full object-cover`
- **Critical:** must be vertically flipped — `className="... [transform:scaleY(-1)]"`
- Gradient overlay on top of video (seamlessly blends into white bg):
- `className="absolute inset-0 bg-gradient-to-b from-[26.416%] from-[rgba(255,255,255,0)] to-[66.943%] to-white"`
### Navbar
- Standard light navbar — logo left, links center, sign in/up right
- No special effects needed
### Hero Content (staggered Motion entrance)
**Headline:**
- Text: "Simple [management] for your remote team"
- Layout: the word in brackets is set in Instrument Serif italic at 100px; all other text is Geist medium at 80px
- Responsive: desktop `80px/100px`, tablet `56px/70px`
- Letter-spacing: `-0.04em`, color: dark (`#111`)
- Each word: `motion.span initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }}` with stagger
**Description:**
- Geist, `18px`, `80%` opacity, `color: #373a46`, `max-w-[554px]`
- Motion: `initial={{ opacity: 0, y: 20 }} animate={{ opacity: 0.8, y: 0 }} transition={{ delay: 0.2 }}`
**Email Input Container:**
- `bg-[#fcfcfc] rounded-[40px] border border-gray-200`
- Shadow: `0px 10px 40px 5px rgba(194,194,194,0.25)`
- Inside: email `<input>` (left) + CTA button (right)
- Motion: `initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.4 }}`
**CTA Button — "Create Free Account":**
- `bg-[#111] text-white rounded-[36px] px-6 py-3 font-medium`
- Multi-layer inner shadow (high-gloss tactile):
- `shadow-[inset_-4px_-6px_25px_0px_rgba(201,201,201,0.08),inset_4px_4px_10px_0px_rgba(29,29,29,0.24)]`
**Social Proof (below input):**
- Row of star/icon avatars (use colored circles)
- Text: "1,020+ Reviews" — `text-sm text-gray-500`