Build premium, dark-themed hero sections and landing pages with cinematic video backgrounds, liquid glass morphism, editorial typography, and pixel-perfect specifications. Based on the Viktor Oddy methodology of detailed design prompts that produce agency-quality results from AI code generation. Use when building hero sections, landing pages, or any premium dark UI.

Premium Hero Builder

Build agency-quality hero sections and landing pages with cinematic video backgrounds, liquid glass morphism, and editorial typography. This skill encodes the patterns, CSS techniques, and design system extracted from 20 pixel-perfect design prompts and the Viktor Oddy methodology.

When to Use

Building hero sections or landing pages
User asks for "premium", "dark", "cinematic", "glassmorphic", or "editorial" UI
Creating marketing pages, SaaS landing pages, or portfolio sites
Any request involving background videos, liquid glass effects, or high-end typography

Core Philosophy

"AI will not replace you, but designers who use AI will replace those who don't."

The difference between generic AI output and premium results is prompt specificity. Generic prompts produce template-looking sites. Detailed prompts with exact fonts, sizes, colors, spacing, and effects produce agency-quality work.

The formula:

Pick a visual direction from the Reference Patterns below
Specify every detail: fonts, sizes, colors, spacing, effects, animations
Build in layers: background video -> overlays -> content -> glass effects -> animations
Iterate: add videos to multiple sections, swap placeholder images, refine copy

Design System: Recurring Patterns

Typography Pairings (Pick One)

Display Font	Body Font	Vibe
Instrument Serif (italic)	Inter / Barlow / Geist	Editorial, Apple-like
General Sans	Inter	Web3, Modern
Rubik (bold, uppercase)	Rubik (regular)	Industrial, Bold
Poppins + Source Serif 4	Poppins	Botanical, Refined
Instrument Sans	Instrument Serif (italic accent)	SaaS, Clean

Rule: Display font for headlines (big, dramatic). Body font for nav, descriptions, buttons. One italic serif accent word inside a sans-serif headline creates instant editorial feel.

Color Palettes

Pure Black (most common):

--background: #000000;
--foreground: #ffffff;
--muted: #888888 or hsl(0 0% 65%);

Deep Navy:

--background: hsl(201 100% 13%);  /* or hsl(260 87% 3%) */
--foreground: #ffffff;

Dark Purple:

--background: #070612;
--primary: #7b39fc;
--secondary: #2b2344;

The Liquid Glass Effect

This is THE signature effect. Two tiers - subtle and strong.

/* Tier 1: Subtle liquid glass */
.liquid-glass {
  background: rgba(255, 255, 255, 0.01);
  background-blend-mode: luminosity;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: none;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}
.liquid-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.4px;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%,
    rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%,
    rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* Tier 2: Strong liquid glass (for CTAs, panels) */
.liquid-glass-strong {
  background: rgba(255, 255, 255, 0.01);
  background-blend-mode: luminosity;
  backdrop-filter: blur(50px);
  -webkit-backdrop-filter: blur(50px);
  border: none;
  box-shadow: 4px 4px 4px rgba(0,0,0,0.05),
    inset 0 1px 1px rgba(255,255,255,0.15);
  position: relative;
  overflow: hidden;
}
.liquid-glass-strong::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.4px;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.2) 20%,
    rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%,
    rgba(255,255,255,0.2) 80%, rgba(255,255,255,0.5) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

Background Video Patterns

Direct MP4 (simplest):

<video
  autoPlay loop muted playsInline
  className="absolute inset-0 w-full h-full object-cover z-0"
  src="VIDEO_URL"
/>

HLS Streaming (for Mux URLs):

import Hls from "hls.js";

useEffect(() => {
  const video = videoRef.current;
  if (!video) return;
  if (Hls.isSupported()) {
    const hls = new Hls();
    hls.loadSource(hlsUrl);
    hls.attachMedia(video);
    hls.on(Hls.Events.MANIFEST_PARSED, () => {
      video.play().catch(() => {});
    });
    return () => hls.destroy();
  } else if (video.canPlayType("application/vnd.apple.mpegurl")) {
    video.src = hlsUrl;
    video.addEventListener("loadedmetadata", () => video.play().catch(() => {}));
  }
}, []);

Video with fade-in/out loop (manual): Use requestAnimationFrame to read currentTime and duration. Fade opacity 0->1 over 0.5s at start, 1->0 over 0.5s before end. On ended, reset and replay.

Video fade overlays (top + bottom blend to background):

<div className="absolute inset-0 bg-gradient-to-b from-background via-transparent to-background" />

For taller sections, use two separate 200px-tall gradients at top and bottom.

Section Badges (Recurring Element)

Every section gets a small pill badge above the heading:

<span className="liquid-glass rounded-full px-3.5 py-1 text-xs font-medium text-white inline-block mb-4">
  Badge Text
</span>

Section Heading Pattern

<h2 className="text-4xl md:text-5xl lg:text-6xl font-heading italic text-white tracking-tight leading-[0.9]">
  Heading Text
</h2>

Entrance Animations

Staggered fade-rise using Framer Motion:

@keyframes fade-rise {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fade-rise { animation: fade-rise 0.8s ease-out both; }
.animate-fade-rise-delay { animation: fade-rise 0.8s ease-out 0.2s both; }
.animate-fade-rise-delay-2 { animation: fade-rise 0.8s ease-out 0.4s both; }

Or with motion/react:

initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: index * 0.15, duration: 0.6 }}

BlurText Animation (Word-by-Word Reveal)

Splits heading by words. Each word animates via IntersectionObserver:

filter: blur(10px) -> blur(0px)
opacity: 0 -> 1
y: 50 -> 0
Step duration: 0.35s, stagger: 0.08-0.1s per word

Logo Marquee

Infinite horizontal scroll of partner logos:

@keyframes marquee {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}
.animate-marquee { animation: marquee 20s linear infinite; }

Duplicate the logo set for seamless loop. Apply brightness-0 invert to make logos white.

Landing Page Section Blueprint

A complete premium landing page follows this structure (5-7 sections):

Hero - Video background, badge pill, large headline (serif italic), subtitle, CTA buttons
Partners/Social Proof - Logo marquee or partner name row in serif italic
How It Works / Start - Video background section, badge, heading, subtitle, CTA
Features Chess - Alternating text-left/image-right then image-left/text-right rows. Images in liquid-glass frames.
Feature Grid - 4-column grid of liquid-glass cards with icons
Stats - Video background (desaturated), liquid-glass card, 4-stat grid in serif italic
Testimonials - 3-column grid of liquid-glass quote cards OR scroll-driven word reveal
CTA Footer - Video background, large heading, two buttons, minimal footer links

Apple-Style Copywriting

After building, rewrite all text using Apple.com principles:

Short, punchy sentences (3-6 words for headlines)
Premium feel: "Obsessively crafted", "Built to convert", "Days, not months"
Emotional hooks over feature lists
Sentence fragments are OK for impact

Reference Patterns Library

Below are 20 complete design specifications. Each is a self-contained recipe. When building, pick the closest pattern and adapt it.

Pattern 1: Automation Platform Hero

Vibe: Dark, purple CTA, blurred pill overlay, dashboard preview Fonts: Manrope (nav/body), Inter (headline L1), Instrument Serif italic (headline L2), Cabin (buttons) Key specs:

Background video at 120% scale, bottom-anchored focal point
Blurred black pill (801x384px, blur 77.5px) between video and content
Navbar: 1440px max, 120px h-padding, logo + links left, buttons right
Hero: max-w-871px centered, mt-162px, 76px headline, -2px tracking
CTA: #7b39fc primary, #2b2344 secondary, 10px border-radius
Dashboard: glassmorphic outer frame (24px radius, rgba(255,255,255,0.05) bg), 22.5px inner padding

Pattern 2: Cinematic Minimal (Velorah)

Vibe: Ultra-minimal, cinematic, navy deep background Fonts: Instrument Serif (display), Inter 400/500 (body) Key specs:

Video: absolute inset-0, object-cover, z-0. No overlays.
Background: hsl(201 100% 13%) deep navy
Nav: "Velorah" in Instrument Serif 3xl, liquid-glass CTA pill
Hero: text-8xl Instrument Serif, leading-[0.95], tracking-[-2.46px]
Contrast trick: wrap select words in text-muted-foreground for color depth
CTA: liquid-glass rounded-full, px-14 py-5

Pattern 3: Growth SaaS (Gradient Headline)

Vibe: Pure black, giant gradient headline word, purple accents Fonts: General Sans (headline), Geist Sans (body) Key specs:

Background: hsl(260 87% 3%)
Primary: hsl(262 83% 58%) purple
Giant "Grow" headline: text-[230px], gradient fill (223deg, #E8E8E9 -> #3A7BBF)
Video in separate social-proof section below hero with fade-in/out loop
Logo marquee: 20s infinite scroll, liquid-glass icon squares

Pattern 4: AI Design Agency (Full Landing Page)

Vibe: Pure black, Instrument Serif italic headings, multi-section Fonts: Instrument Serif italic (headings), Barlow 300-600 (body) Key specs:

Navbar: fixed, liquid-glass pill in center with nav links + white CTA
Hero: 1000px height, video at top:20%, BlurText word-by-word animation
Badge: liquid-glass pill with inner white "New" tag
8 sections total: hero, partners, how-it-works, features-chess, feature-grid, stats, testimonials, CTA
All section videos use HLS via hls.js with Safari fallback
All section badges: liquid-glass rounded-full px-3.5 py-1 text-xs
Stats video: desaturated via filter: saturate(0)

Pattern 5: AI Website Builder (Blue Gradient)

Vibe: Dark, blue/indigo gradients, serif + sans pairing Fonts: Instrument Serif (pre-headline), Instrument Sans (main headline + body) Key specs:

Video: HLS stream, opacity 60%, bg-black/60 overlay + backdrop-blur-[2px]
Decorative gradient blobs: blue-900/20 and indigo-900/20, blur-[120px], mix-blend-screen
Pre-headline: Instrument Serif 3xl-5xl
Main headline: Instrument Sans, text-[136px], gradient from-white to-[#b4c0ff], bg-clip-text
Primary CTA: white pill with blue (#3054ff) arrow circle, hover glow shadow

Pattern 6: Hotel Booking Hero

Vibe: Video background (no overlay), purple buttons, glassmorphic badge Fonts: Manrope (nav), Instrument Serif (headline), Inter (body), Cabin (buttons) Key specs:

Video: 100% opacity, no overlay, object-cover
Tagline pill: bg-[rgba(85,80,110,0.4)], backdrop-blur, border rgba(164,132,215,0.5)
Inner "New" badge: #7b39fc, rounded 6px
Headline: 96px desktop, Instrument Serif, "and" italicized with spacing
CTA: #7b39fc primary, #2b2344 secondary, rounded 10px

Pattern 7: Video Agency (White Floating Navbar)

Vibe: Background video (no overlay), white floating nav, large serif text Fonts: Barlow (body/buttons), Instrument Serif italic (headline L2) Key specs:

Floating navbar: white bg, rounded-[16px], shadow
Headline L1: Barlow bold, tracking-[-4px]; L2: Instrument Serif italic 84px
"See Our Workreel" pill button with play icon
45-degree arrow icon in circular housing on dark CTA button
No video overlay, min-h-[90vh]

Pattern 8: Liquid Glass Floral (Two-Panel Split)

Vibe: Full-screen video, two-panel layout, botanical/organic feel Fonts: Poppins 500 (display/body), Source Serif 4 (italic accents) Key specs:

Strict grayscale only, no color accents
Left panel w-[52%]: liquid-glass-strong overlay, hero content, quote at bottom
Right panel w-[48%]: social icons, community card, feature cards
CTA: "Explore Now" with Download icon in bg-white/15 circle
Three pills: "Artistic Gallery", "AI Generation", "3D Structures"
All icons from lucide-react, no border classes

Pattern 9: Portfolio Loading Screen

Vibe: Minimalist loading animation, monochrome Fonts: Instrument Serif italic 400 (display) Key specs:

Fixed inset-0, z-[9999], bg #0a0a0a
"Portfolio" label: top-left, uppercase tracking-[0.3em], text-muted
Rotating words center: "Design" -> "Create" -> "Inspire" every 900ms
Counter bottom-right: 000->100 over 2.7s via requestAnimationFrame, 3-digit zero-padded
Progress bar: 3px tall, gradient #89AACC -> #4E85BF, glow shadow
Timing: 0s start, 2.7s counter done, 3.1s onComplete, 3.7s page visible

Pattern 10: Remote Team (Light Mode, Flipped Video)

Vibe: Light/white, editorial serif accent, email input hero Fonts: Geist (body), Instrument Serif italic (accent word) Key specs:

Video: vertically flipped via scaleY(-1), object-cover
Gradient overlay: from-[rgba(255,255,255,0)] at 26.416% to white at 66.943%
Headline: 80px Geist medium, tracking -0.04em; accent word 100px Instrument Serif italic
Email input: rounded-[40px], bg-[#fcfcfc], shadow 0px 10px 40px 5px rgba(194,194,194,0.25)
CTA button: multi-layered gradient with complex inner shadow

Pattern 11: Video Editing Agency (Clean)

Vibe: Background video (no overlay), white floating nav, Barlow + Serif Fonts: Barlow medium (body), Instrument Serif italic (headline L2) Key specs:

Video: muted, autoplay, object-cover, 100% opacity
White floating nav with rounded corners and subtle shadow
Left: logo. Center: menu links 14px Barlow medium. Right: dark #222 CTA with 45-degree arrow
Headline L1: Barlow bold tracking-[-4px]. L2: Instrument Serif italic 84px
Secondary CTA: white pill "See Our Workreel" with play icon

Pattern 12: Analytics Dashboard SaaS (Neuralyn)

Vibe: Pure black, serif accent word, parallax dashboard Fonts: Inter 400-700 (body), Instrument Serif 400-italic (accent) Key specs:

Liquid glass tag pill with inner "New" badge
Title: text-7xl, tracking-[-2px], "Overview" in Instrument Serif italic
Dashboard image: parallax y:[0,-250] on scroll, mix-blend-mode luminosity
Hero content fades: y:[0,-200] opacity:[1,0] over first 50% scroll
Section 2: Testimonial with scroll-driven word reveal - each word maps to scroll range, opacity 0.2->1
Full-width video using w-screen + marginLeft: calc(-50vw + 50%)

Pattern 13: Logistics Brand (Targo)

Vibe: Black + brand red (#EE3F2C), uppercase, industrial Fonts: Rubik bold uppercase (headlines), Rubik (body) Key specs:

Video: 100% opacity, no overlay
Clip-path buttons: 10-12px diagonal cuts on top-right and bottom-left corners
Consultation card: liquid glass with blur(40px) saturate(180%), diagonal shine gradient
Headline: 64px desktop, 42px mobile
Left-aligned hero (upper-third, not centered)
Bottom-left "Book a Free Consultation" card

Pattern 14: AI Platform (Left-Aligned, Purple-Black)

Vibe: Dark purple-black #070612, left-aligned content, HLS video Fonts: Custom (not specified, likely sans-serif) Key specs:

Video: HLS stream, shifted 200px right (margin-left), scaled 1.2x origin-left
Bottom gradient fade: h-40, background-color to transparent
Badge: Sparkles icon + "New AI Automation Ally", border-white/20, backdrop-blur-sm
SplitText animation: word-by-word, 0.08s stagger, y:40->0, opacity:0->1
CTA: white pill with ArrowRight + semi-transparent bg-white/20 secondary
z-index: video z-0, gradient z-10, content z-20

Pattern 15: Web3 Landing (Gradient Text)

Vibe: Pure black, gradient-fading headline text, minimal Fonts: General Sans from Fontshare Key specs:

Video: covered by bg-black/50 overlay
Navbar: 120px h-padding, logo + 4 links with chevron-down icons, "Join Waitlist" pill
Waitlist button: layered construction - 0.6px white outer border, black inner pill, white glow streak at top
Headline: 56px, gradient at ~144.5deg from white to transparent black, bg-clip-text
Badge pill: 4px white dot + text at 60% opacity + bold date
CTA: Same layered button but white bg, black text

Pattern 16: AI Testing Platform (Synapse)

Vibe: Black, gradient buttons, glass badges, HLS video Fonts: Custom sans-serif (medium, tight tracking) Key specs:

Fixed navbar with blurred glass effect, "Features" link has gradient border active state
CTA: white/gray gradient button
3 glass-effect badges in a row: "Integrated with" + icon
Headline: ~80px, tight tracking, fade-in animation
Video: HLS via hls.js, 80vh height, positioned absolute bottom-[35vh]
Logo marquee: grayscale, 40% opacity placeholder SVGs

Pattern 17: Purple/Pink Gradient SaaS

Vibe: Dark #010101, purple-pink gradient accents, mix-blend-screen video Fonts: Modern sans-serif Key specs:

Primary gradient: from-[#FA93FA] via-[#C967E8] to-[#983AD6]
Headline: gradient fill white to purple/pink, 48-80px responsive
Video: mix-blend-screen (black blends into page), -mt-[150px] overlap, no object-contain
CTA: white pill with gradient arrow circle
Announcement pill: bg-[rgba(28,27,36,0.15)], Zap icon with gradient glow
InfiniteSlider component for logo cloud

Pattern 18: ClearInvoice SaaS (Orange Gradient CTA)

Vibe: Dark, orange gradient CTA, HLS video, social proof Fonts: Switzer medium (headings), Geist (body) Key specs:

Top bar: 5px gradient from-[#ccf] via-[#e7d04c] to-[#31fb78]
Video: HLS, z:-10, 100% opacity
Primary CTA: gradient from-[#FF3300] to-[#EE7926], glow div behind (blur-lg), 1.5px inner border-white/20
Hover: scale 1.05, glow increases, ArrowRight slides in
Secondary: bg-white/90 backdrop-blur, 1.5px border-black/5
Social proof: 3 overlapping avatar circles + "210k+ stores"

Pattern 19: Project Estimation Calculator

Vibe: Dark, interactive pricing, red accent #FF5656 Fonts: Standard sans-serif Key specs:

2-column grid: left = calculator form (bg #0D0D0D), right = cost comparison
Custom radio/checkbox styling with #FF5656 accent
4 form sections separated by divide-y divide-[#1E1E1E]
Right column: 3 stacked price cards (agency, freelancer, "your price")
"Your price" card: bg-gradient-to-r from-pink-500 to-orange-500
Dynamic pricing logic with service type, pages slider, add-ons, timeline

Pattern 20: Bold Uppercase (NEW ERA)

Vibe: Video background, industrial uppercase, custom SVG button Fonts: Rubik bold uppercase Key specs:

Video: 100% opacity, no overlay, object-cover
Headline: 3 lines uppercase, 100px desktop, line-height 0.98, tracking -2 to -4px
CTA button: 184x65px fixed size, custom SVG path background filled white
Text: Rubik bold uppercase 20px, dark #161a20
Hover: scale-105, active: scale-95
Content aligned to top (pt-32 mobile, pt-48 desktop), NOT centered

Workflow

When the user asks you to build a premium hero or landing page:

Clarify the vibe - Ask which Pattern (1-20) is closest, or describe the feel
Pick typography pairing - Select from the table above
Set up the design system - CSS variables, liquid glass classes, font imports
Build the hero first - Video background, overlays, content, animations
Add sections - Follow the Landing Page Section Blueprint
Refine copy - Apply Apple-style copywriting principles
Polish - Entrance animations, hover effects, responsive breakpoints

Asset Generation Pipeline

Creating a premium hero requires custom video backgrounds - not stock footage. This is the full pipeline from inspiration to hosted video URL.

Step 1: Find Inspiration (Manual)

Browse Pinterest for visual direction. Search terms that work well:

"hero section" / "landing page" / "dark website design"
"cosmos website" / "3D" / "futuristic webdesign"
Look for backgrounds with depth, atmosphere, and subtle motion potential (nature scenes, abstract textures, cosmic imagery, architectural shots)

What to look for: Backgrounds that would look cinematic with slow, subtle motion. Avoid busy/cluttered images. The best backgrounds have depth layers (foreground/midground/background) that create parallax potential.

When you find one you like, screenshot just the background area (crop out any UI/text).

Step 2: Upscale the Background Image

Take your screenshot to an AI image generator to recreate it in high quality without text/UI.

Tool: Higgsfield AI / Nano Banana (higgsfield.ai/image/nano_banana_flash)

Free tier available, credits-based

Prompt template:

Give me the background of this exact image - no text, no buttons, no logos, no UI elements.
Same color grading and atmosphere as the original but in higher quality.
Clean background only.

Upload your screenshot with this prompt. Pick the best result from the generated options.

Alternative tools:

Midjourney (use --sref with your screenshot URL for style reference)
DALL-E 3 (describe the background you want)
Stable Diffusion (img2img with the screenshot)

Step 3: Generate Video from Image

Take your upscaled image and turn it into a seamless looping video.

Tool: Kling 3.0 (klingai.com)

Best quality for cinematic motion, 10-second clips at 1080p
Credits-based ($0.35-$0.70 per generation)

Prompt template (THE key prompt):

Fixed camera, locked lens, no camera movement.
Ultra slow cinematic motion. A very gentle breeze moves through the scene.
Foreground flowers/elements sway very slightly and naturally, minimal movement.
The motion should be extremely slow, smooth, and elegant. No fast movements.
Calm, peaceful, aesthetic atmosphere. Natural physics, soft wind effect.

Settings:

Model: Kling 3.0 (not 2.0)
Duration: 10 seconds
Resolution: 1080p
Motion mode: Standard (not high motion)

Alternative video generators:

Runway Gen-3 Alpha (runway.ml) - good but more expensive
Pika (pika.art) - cheaper, slightly lower quality
Luma Dream Machine (lumalabs.ai) - free tier available
Higgsfield Video (same platform as image upscaling)

Tips for best results:

"Fixed camera, locked lens" is critical - you don't want camera movement, just subtle element motion
"Ultra slow" prevents the AI from adding dramatic motion
Mention specific elements that should move ("leaves sway", "water ripples", "particles drift")
Generate 2-3 variations and pick the smoothest one

Step 4: Host the Video

Your video needs a publicly accessible URL. Options:

Mux (recommended for HLS streaming):

Upload at mux.com, get an HLS URL like https://stream.mux.com/PLAYBACK_ID.m3u8
Best for: long videos, adaptive bitrate, professional delivery
Requires hls.js in your code (see HLS implementation in Design System section)
Free tier: 10GB storage, 100GB bandwidth/month

CloudFront/S3 (recommended for direct MP4):

Upload MP4 to S3, serve via CloudFront CDN
URL format: https://your-distribution.cloudfront.net/video.mp4
Best for: short loops (under 30s), simple <video> tags
Cost: ~$0.085/GB transfer

Other hosts:

Cloudflare Stream (good free tier, HLS)
Vercel Blob (if already on Vercel)
Any CDN that serves MP4 files

Step 5: Use in Your Hero

Reference the hosted URL in your component:

// Direct MP4 (CloudFront, S3, etc.)
<video autoPlay loop muted playsInline
  className="absolute inset-0 w-full h-full object-cover z-0"
  src="https://your-cdn.com/hero-bg.mp4"
/>

// HLS stream (Mux)
// See HLS implementation in Design System section above

Pre-Made Video Sources (Skip Steps 1-3)

If you want to skip the generation pipeline:

DesignRocket (designrocket.io/video-backgrounds) - curated looping motion backgrounds, "Copy URL" button, membership required
MotionSites - free hero section templates with embedded videos, copy the video source URL from the HTML
Pexels/Pixabay - free stock video, lower quality but fast
Coverr.co - free stock video optimized for backgrounds

Automation Potential

What CAN be automated (with API access):

Step	Tool	API Available?	How
Image generation	Midjourney	Via Discord bot API	Send prompt, poll for result
Image generation	DALL-E 3	Yes (OpenAI API)	`client.images.generate()`
Image generation	Stable Diffusion	Yes (Stability AI API, or local)	img2img endpoint
Video generation	Runway Gen-3	Yes (API waitlist)	Upload image + prompt
Video generation	Luma	Yes (API)	`POST /generations`
Video hosting	Mux	Yes (full API)	Upload asset, get playback ID
Video hosting	Cloudflare Stream	Yes (full API)	Upload via API, get HLS URL
Video hosting	S3/CloudFront	Yes (AWS SDK)	`s3.putObject()` + CloudFront distribution

What CANNOT be automated easily:

Pinterest browsing (creative decision, needs human eye)
Kling 3.0 (no public API as of March 2026 - web UI only)
Higgsfield/Nano Banana (no public API - web UI only)
Quality selection (picking the best result from multiple generations)

Realistic automation flow (with Playwright):

1. User provides: inspiration image or description
2. Script generates background via DALL-E 3 API (automated)
3. Script generates video via Luma API (automated)
4. Script uploads to Mux via API (automated)
5. Script returns HLS URL ready for the hero component

This could be built as a companion MCP server or CLI script. The main bottleneck is video generation quality - Kling 3.0 produces the best results but has no API, while Luma/Runway have APIs but slightly different aesthetics.

Playwright automation for Kling (possible but fragile): You could automate Kling's web UI with Playwright (upload image, paste prompt, click generate, wait, download), but web UIs change frequently and this approach is brittle. Better to use API-first tools (Luma, Runway) for automation and reserve Kling for manual, high-stakes hero sections.

Key Dependencies

Package	Purpose
`motion` (framer-motion)	Entrance animations, parallax, transitions
`hls.js`	HLS video streaming (Mux URLs)
`lucide-react`	Icons
`tailwindcss`	Styling
`shadcn/ui`	Component primitives

Cinematic Theme Transitions (Superwhisper Technique)

Inspired by superwhisper.com's day/dusk/night switcher. Instead of toggling a CSS class and instantly swapping colors, stack multiple gradient layers and crossfade between them with a slow opacity transition. The result is a gorgeous, cinematic color shift.

How It Works

Architecture: 3+ absolute-positioned gradient layers stacked on top of each other. Only the active theme's layer has opacity: 1. All others are opacity: 0. A 1.2s ease-in-out transition creates the crossfade.

// ThemeProvider state manages the active theme
const [theme, setTheme] = useState<"day" | "dusk" | "night">("day");

CSS: Define Gradient Layers

/* Container holds all gradient layers */
.theme-gradient-container {
  position: relative;
  overflow: hidden;
}

/* Each gradient layer is fullscreen, stacked, and crossfades */
.gradient-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
  z-index: 0;
}

/* Active layer becomes visible */
.theme-day .gradient-layer.day,
.theme-dusk .gradient-layer.dusk,
.theme-night .gradient-layer.night {
  opacity: 1;
}

CSS: The Three Gradient Palettes

/* Day - warm sky blue, golden undertones */
.gradient-layer.day {
  background:
    linear-gradient(90deg, rgba(25, 74, 232, 0.2) 2.75%, rgba(255, 190, 10, 0.2) 99.26%),
    radial-gradient(170% 104% at 50% 0%, rgba(38, 84, 144, 0.5) 17%, rgba(255, 255, 255, 0.5) 100%),
    radial-gradient(570% 155% at 50% -38%, rgba(0,0,0,0.5) 0%, rgba(2, 32, 68, 0.5) 21%,
      rgba(31, 93, 135, 0.5) 46%, rgba(93, 109, 142, 0.5) 62%, rgba(159, 138, 145, 0.5) 74%,
      rgba(205, 155, 142, 0.5) 80%, rgba(255, 226, 97, 0.5) 88%, rgba(255, 126, 30, 0.5) 100%),
    rgb(115, 175, 235);
}

/* Dusk - purple/pink twilight */
.gradient-layer.dusk {
  background:
    linear-gradient(90deg, rgba(25, 153, 232, 0.15) 2.75%, rgba(164, 91, 242, 0.15) 99.26%),
    linear-gradient(rgba(0,0,0,0.5) 0.85%, rgba(0, 5, 46, 0.5) 26%, rgba(41, 40, 94, 0.5) 58%,
      rgba(84, 60, 123, 0.5) 80%, rgba(133, 90, 146, 0.5) 96%, rgba(195, 134, 171, 0.5) 107%),
    linear-gradient(rgb(0,0,0) 0.85%, rgb(17, 45, 114) 33%, rgb(75, 82, 170) 50%,
      rgb(168, 135, 220) 71%, rgb(230, 196, 231) 96%, rgb(252, 219, 239) 107%),
    rgb(0, 0, 0);
}

/* Night - deep dark blue, subtle warm edge */
.gradient-layer.night {
  background:
    linear-gradient(90deg, rgba(25, 153, 232, 0.1) 2.75%, rgba(164, 91, 242, 0.1) 99.26%),
    radial-gradient(83% 104% at 50% 0%, rgba(38, 84, 144, 0) 72%, rgba(255, 117, 117, 0) 100%),
    radial-gradient(610% 214% at 50% -38%, rgba(0,0,0,0.5) 0%, rgba(2, 32, 68, 0.5) 21%,
      rgba(31, 93, 135, 0.5) 46%, rgba(93, 109, 142, 0.5) 62%, rgba(159, 138, 145, 0.5) 74%,
      rgba(205, 155, 142, 0.5) 80%, rgba(255, 162, 97, 0.5) 88%, rgba(255, 126, 30, 0.5) 100%),
    rgb(0, 0, 0);
}

React Implementation

"use client";
import { useState } from "react";
import { Sun, Sunset, Moon } from "lucide-react";

const themes = [
  { id: "day", icon: Sun, label: "Day" },
  { id: "dusk", icon: Sunset, label: "Dusk" },
  { id: "night", icon: Moon, label: "Night" },
] as const;

type Theme = typeof themes[number]["id"];

export function ThemeHero() {
  const [theme, setTheme] = useState<Theme>("day");

  return (
    <section className={`theme-gradient-container relative min-h-screen theme-${theme}`}>
      {/* Stacked gradient layers - all render, only active one is visible */}
      <div className="gradient-layer day" />
      <div className="gradient-layer dusk" />
      <div className="gradient-layer night" />

      {/* Theme toggle - small pill in top-right */}
      <div className="absolute top-4 right-4 z-20 flex gap-1 rounded-full bg-black/20 p-1 backdrop-blur-sm">
        {themes.map(({ id, icon: Icon, label }) => (
          <button
            key={id}
            onClick={() => setTheme(id)}
            className={`rounded-full p-2 transition-colors ${
              theme === id ? "bg-white/20 text-white" : "text-white/50 hover:text-white/80"
            }`}
            aria-label={label}
          >
            <Icon className="size-4" />
          </button>
        ))}
      </div>

      {/* Content sits above gradients */}
      <div className="relative z-10">
        {/* Your hero content here */}
      </div>
    </section>
  );
}

Extending the Technique

Images that swap per theme: Stack multiple versions of the same image and crossfade:

<div className="relative">
  <img src="/hero-day.jpg" className={`absolute inset-0 transition-opacity duration-[1200ms] ${theme === "day" ? "opacity-100" : "opacity-0"}`} />
  <img src="/hero-dusk.jpg" className={`absolute inset-0 transition-opacity duration-[1200ms] ${theme === "dusk" ? "opacity-100" : "opacity-0"}`} />
  <img src="/hero-night.jpg" className={`absolute inset-0 transition-opacity duration-[1200ms] ${theme === "night" ? "opacity-100" : "opacity-0"}`} />
</div>

Text color that shifts: Use CSS variables that transition:

.theme-day { --text-hero: rgba(0, 0, 0, 0.9); --text-muted: rgba(0, 0, 0, 0.6); }
.theme-dusk { --text-hero: rgba(255, 255, 255, 0.95); --text-muted: rgba(255, 255, 255, 0.7); }
.theme-night { --text-hero: rgba(255, 255, 255, 1); --text-muted: rgba(255, 255, 255, 0.8); }

Key details:

Transition duration: 1.2s ease-in-out (slower = more cinematic)
All layers are always in the DOM (no mount/unmount)
The parent container's class drives which layer is visible via CSS
Works with gradients, images, videos, and even text colors
Zero JavaScript animation - pure CSS transitions

Anti-Patterns to Avoid

Generic AI look: Never use default gradients, centered-everything layouts, or standard shadcn cards without customization
Video overlays too dark: 100% opacity video with no overlay > video buried under bg-black/80
Missing liquid glass: If you have dark bg + cards/badges, they NEED the liquid glass effect
Single font: Always pair a serif display font with a sans-serif body font
No entrance animations: Staggered fade-rise on ALL hero content (heading, subtitle, buttons)
Centered hero when left-aligned is better: Not everything needs to be centered. Left-aligned heroes with right-side video/image feel more editorial

premium-hero-builder