Premium Hero Builder

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:

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

Design System: Recurring Patterns

Typography Pairings (Pick One)

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):

1. Hero - Video background, badge pill, large headline (serif italic), subtitle, CTA buttons
2. Partners/Social Proof - Logo marquee or partner name row in serif italic
3. How It Works / Start - Video background section, badge, heading, subtitle, CTA
4. Features Chess - Alternating text-left/image-right then image-left/text-right rows. Images in liquid-glass frames.
5. Feature Grid - 4-column grid of liquid-glass cards with icons
6. Stats - Video background (desaturated), liquid-glass card, 4-stat grid in serif italic
7. Testimonials - 3-column grid of liquid-glass quote cards OR scroll-driven word reveal
8. 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:

1. Clarify the vibe - Ask which Pattern (1-20) is closest, or describe the feel
2. Pick typography pairing - Select from the table above
3. Set up the design system - CSS variables, liquid glass classes, font imports
4. Build the hero first - Video background, overlays, content, animations
5. Add sections - Follow the Landing Page Section Blueprint
6. Refine copy - Apply Apple-style copywriting principles
7. 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):

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

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}
            => 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