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