AI SaaS Hero , HLS Video, Scale Headline Animation, Pill CTA with Arrow

Dark AI website builder hero with Mux HLS video, Instrument Serif pre-headline, massive gradient main headline, Motion entrance animations, and a white pill button with circular blue arrow.

saas

hero

react

tailwind

claude

chatgpt

lovable

cursor

hls

framer-motion

animation

dark-theme

When to use

Use for AI SaaS products, website builders, no-code tools, or any product where

Recommended LLMs

Claude Sonnet

GPT-4o

Plugins / Skills

Projects (Claude)

Artifacts (Claude)

When to use

The standout detail here is the headline hierarchy: a small elegant Instrument Serif italic pre-headline above a massive gradient text-[136px] main headline. The contrast in scale creates visual drama. The primary CTA is a white pill with a standalone circular blue arrow button — more interesting than a standard button with an icon inside.

What you'll need to customise

Video URL — replace the Mux HLS stream
Pre-headline — "Design at the speed of thought" sets the tone
Main headline — "Build Faster" — swap with your product's core promise
Blue accent color — #3054ff (the arrow button) — swap to your brand color
CTA label — "Start Building Free"

Tips for best results

The scale animation on the main headline (scale 0.9→1) gives it a "snap into place" feeling — keep the delay at 0.2s so it fires after the pre-headline
The arrow button is a 40×40px circle, not an icon inside the CTA — build it as a sibling element inside the same flex container
Decorative blur gradients (top-left blue, bottom-right indigo) sit at z-0 behind the video
HLS via hls.js — cleanup on unmount is critical to avoid memory leaks

Expected output

Complete React component including:

Fixed transparent navbar (sunburst logo, center links, CTA)
min-h-screen hero with pure black background
Mux HLS video at 60% opacity with blur overlay
Two decorative blur gradient blobs
Staggered Motion animations: pre-headline → main headline (scale) → subtitle → buttons
White pill CTA + separate "See Examples" text link

The Prompt

Copy it, paste it, use it.

Create a dark-mode hero section for an AI website builder using React, Tailwind CSS, and `motion/react`.

### Tech Stack
- React + TypeScript
- Tailwind CSS
- `motion/react` (
- hls.js
- lucide-react

### Fonts (Google Fonts)
```css
@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&family=Instrument+Serif:ital@0;1&display=swap');
```

### Navbar (fixed, transparent)
- Position: `fixed top-0 w-full z-50 bg-transparent`
- Padding: `px-6 py-4`
- Layout: `flex items-center justify-between`
- Left: Sunburst SVG icon (24×24, white)
- Center (hidden mobile, `md:flex gap-8`): "Products" (with ChevronDown), "Customer Stories", "Resources", "Pricing" — Instrument Sans `text-sm font-medium text-white/80 hover:text-white`
- Right: "Book A Demo" (hidden sm) + "Get Started" (`bg-white text-black rounded-full px-5 py-2.5 font-semibold`)

### Hero Section
- `relative min-h-screen bg-black text-white overflow-hidden`

**Background Video:**
- URL: `https://stream.mux.com/T6oQJQ02cQ6N01TR6iHwZkKFkbepS34dkkIc9iukgy400g.m3u8`
- HLS.js implementation with Safari fallback
- `absolute inset-0 w-full h-full object-cover opacity-60`
- Black overlay: `absolute inset-0 bg-black/60 backdrop-blur-[2px]`
- Poster: `https://images.unsplash.com/photo-1647356191320-d7a1f80ca777?w=1080`

**Decorative Gradients (absolute, behind everything):**
- Top-left: `absolute top-[-20%] left-[20%] w-[600px] h-[600px] bg-blue-900/20 blur-[120px] mix-blend-screen rounded-full`
- Bottom-right: `absolute bottom-[-10%] right-[20%] w-[500px] h-[500px] bg-indigo-900/20 blur-[120px] mix-blend-screen rounded-full`

**Content Container:**
- `relative z-10 max-w-5xl mx-auto flex flex-col items-center text-center mt-20 space-y-12`

**Pre-headline:**
- "Design at the speed of thought"
- Instrument Serif, `text-3xl sm:text-5xl lg:text-[48px] leading-[1.1] text-white`
- `motion.h2`: `initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.6 }}`

**Main Headline:**
- "Build Faster"
- Instrument Sans, `font-semibold text-6xl sm:text-8xl lg:text-[136px] leading-[0.9] tracking-tighter`
- Gradient text: `bg-gradient-to-b from-white via-white to-[#b4c0ff] bg-clip-text text-transparent`
- `motion.h1`: `initial={{ opacity: 0, scale: 0.9 }} animate={{ opacity: 1, scale: 1 }} transition={{ delay: 0.2, duration: 0.6 }}`

**Subheadline:**
- "Create fully functional, SEO-optimized websites in seconds with our advanced AI engine."
- Instrument Sans, `text-lg sm:text-[20px] leading-[1.65] max-w-xl`
- `motion.p`: `initial={{ opacity: 0 }} animate={{ opacity: 0.7 }} transition={{ delay: 0.4, duration: 0.6 }}`

**CTA Buttons (`motion.div`, `delay: 0.6, duration: 0.5`):**

Primary — "Start Building Free":
- `flex items-center bg-white pl-6 pr-2 py-2 rounded-full hover:shadow-[0_0_20px_rgba(255,255,255,0.3)] hover:scale-105 transition-all`
- Text: `font-medium text-lg text-[#0a0400]` (Instrument Sans)
- Arrow circle: `w-10 h-10 rounded-full bg-[#3054ff] hover:bg-[#2040e0] flex items-center justify-center`
- ArrowRight icon: white, 20×20

Secondary — "See Examples":
- `flex items-center gap-2 text-white/70 hover:text-white backdrop-blur-sm hover:bg-white/5 px-4 py-2 rounded-lg transition-all`
- ArrowRight icon with `group-hover:translate-x-1 transition`

When to use

Tips for best results

The scale animation on the main headline (scale 0.9→1) gives it a "snap into place" feeling — keep the delay at 0.2s so it fires after the pre-headline

The arrow button is a 40×40px circle, not an icon inside the CTA — build it as a sibling element inside the same flex container

Decorative blur gradients (top-left blue, bottom-right indigo) sit at z-0 behind the video

HLS via hls.js — cleanup on unmount is critical to avoid memory leaks

Expected output

Complete React component including:

Fixed transparent navbar (sunburst logo, center links, CTA)

min-h-screen hero with pure black background

Mux HLS video at 60% opacity with blur overlay

Two decorative blur gradient blobs

Staggered Motion animations: pre-headline → main headline (scale) → subtitle → buttons

White pill CTA + separate "See Examples" text link

Create a dark-mode hero section for an AI website builder using React, Tailwind CSS, and `motion/react`. ### Tech Stack - React + TypeScript - Tailwind CSS - `motion/react` ( - hls.js - lucide-react ### Fonts (Google Fonts) ```css @import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&family=Instrument+Serif:ital@0;1&display=swap'); ``` ### Navbar (fixed, transparent) - Position: `fixed top-0 w-full z-50 bg-transparent` - Padding: `px-6 py-4` - Layout: `flex items-center justify-between` - Left: Sunburst SVG icon (24×24, white) - Center (hidden mobile, `md:flex gap-8`): "Products" (with ChevronDown), "Customer Stories", "Resources", "Pricing" — Instrument Sans `text-sm font-medium text-white/80 hover:text-white` - Right: "Book A Demo" (hidden sm) + "Get Started" (`bg-white text-black rounded-full px-5 py-2.5 font-semibold`) ### Hero Section - `relative min-h-screen bg-black text-white overflow-hidden` **Background Video:** - URL: `https://stream.mux.com/T6oQJQ02cQ6N01TR6iHwZkKFkbepS34dkkIc9iukgy400g.m3u8` - HLS.js implementation with Safari fallback - `absolute inset-0 w-full h-full object-cover opacity-60` - Black overlay: `absolute inset-0 bg-black/60 backdrop-blur-[2px]` - Poster: `https://images.unsplash.com/photo-1647356191320-d7a1f80ca777?w=1080` **Decorative Gradients (absolute, behind everything):** - Top-left: `absolute top-[-20%] left-[20%] w-[600px] h-[600px] bg-blue-900/20 blur-[120px] mix-blend-screen rounded-full` - Bottom-right: `absolute bottom-[-10%] right-[20%] w-[500px] h-[500px] bg-indigo-900/20 blur-[120px] mix-blend-screen rounded-full` **Content Container:** - `relative z-10 max-w-5xl mx-auto flex flex-col items-center text-center mt-20 space-y-12` **Pre-headline:** - "Design at the speed of thought" - Instrument Serif, `text-3xl sm:text-5xl lg:text-[48px] leading-[1.1] text-white` - `motion.h2`: `initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.6 }}` **Main Headline:** - "Build Faster" - Instrument Sans, `font-semibold text-6xl sm:text-8xl lg:text-[136px] leading-[0.9] tracking-tighter` - Gradient text: `bg-gradient-to-b from-white via-white to-[#b4c0ff] bg-clip-text text-transparent` - `motion.h1`: `initial={{ opacity: 0, scale: 0.9 }} animate={{ opacity: 1, scale: 1 }} transition={{ delay: 0.2, duration: 0.6 }}` **Subheadline:** - "Create fully functional, SEO-optimized websites in seconds with our advanced AI engine." - Instrument Sans, `text-lg sm:text-[20px] leading-[1.65] max-w-xl` - `motion.p`: `initial={{ opacity: 0 }} animate={{ opacity: 0.7 }} transition={{ delay: 0.4, duration: 0.6 }}` **CTA Buttons (`motion.div`, `delay: 0.6, duration: 0.5`):** Primary — "Start Building Free": - `flex items-center bg-white pl-6 pr-2 py-2 rounded-full hover:shadow-[0_0_20px_rgba(255,255,255,0.3)] hover:scale-105 transition-all` - Text: `font-medium text-lg text-[#0a0400]` (Instrument Sans) - Arrow circle: `w-10 h-10 rounded-full bg-[#3054ff] hover:bg-[#2040e0] flex items-center justify-center` - ArrowRight icon: white, 20×20 Secondary — "See Examples": - `flex items-center gap-2 text-white/70 hover:text-white backdrop-blur-sm hover:bg-white/5 px-4 py-2 rounded-lg transition-all` - ArrowRight icon with `group-hover:translate-x-1 transition`