The Hero Section is the most critical pattern in your dev tool. Since you have diverse post types like Podcasts, Portfolio, and Events, these 10 patterns aren't just "headers"—they are immersive environments that set the tone for the "funky universe" within. The "Front Door": 10 Hero Section Patterns1. The "Typographic Titan" (Text-Only)
- Visual: Heading Style 17 (Video Mask) takes up 90% of the viewport. No images, just raw motion inside the letters.
- Interaction: The background color of the page flips as the user scrolls past the "fold."
- Best For: High-concept Pages and Portfolio entries.
- The "3D Spline Stage" (Interactive)
- Visual: A floating, interactive 3D object (e.g., a chrome sphere or a funky character) sits in the center.
- Interaction: The object follows the mouse cursor or rotates based on scroll depth.
- Best For: Video landing pages or Events.
- The "Split-Vertical" Reveal
- Visual: The screen is split 50/50 vertically. Left is a solid neon color with a massive Heading; right is a vertical Image Gallery (Style 02).
- Interaction: The two sides scroll at different speeds (Parallax).
- Best For: Podcast episodes (Guest on one side, Episode Title on the other).
- The "Bento-Box" Hero
- Visual: A grid of 5 tiles. Tile 1: Title; Tile 2: Video Preview; Tile 3: CTA Button; Tile 4: Social Proof; Tile 5: Animated Icon.
- Interaction: Each tile has a different "Entry Animation" (Bounce, Fade, Slide).
- Best For: Events or Portfolio case studies.
- The "Full-Bleed Glitch"
- Visual: A background video with a heavy "Scanned Distortion" (Divider Style 07) overlay.
- Interaction: On hover, the "glitch" clears up to reveal a sharp, high-def image.
- Best For: Videos and Experimental Posts.
- The "Floating HUD" (UI-Heavy)
- Visual: A minimalist background with "Technical Crosshairs" and "Metadata" (Date, Category, Read Time) floating in the corners like a cockpit display.
- Interaction: Elements drift slightly as if floating in zero gravity.
- Best For: Technical Posts or FAQs.
- The "Gradient Wash" (Atmospheric)
- Visual: No hard edges. A massive, moving mesh gradient (Style 09 from Buttons) serves as the backdrop for a clean, white Heading.
- Interaction: The gradient colors change based on the time of day or the user's system theme.
- Best For: Pages or Quotes.
- The "Sticker Bomb" (Maximalist)
- Visual: A central image (Style 03: Sticker Peel) surrounded by dozens of smaller floating icons, tags, and badges.
- Interaction: Users can "drag" the stickers around the hero area to reveal the text underneath.
- Best For: Events and Creative Portfolio pieces.
- The "Liquid Reveal" (Sleek)
- Visual: The page starts completely solid color. As the user scrolls, a "Liquid" mask (Divider Style 03) opens up to reveal the Hero content.
- Interaction: High-friction scroll—the user has to "pull" the content onto the screen.
- Best For: Portfolio reveals.
- The "Search-First" Hero
- Visual: A giant, centered Search Bar (Style 06: Full-screen overlay) with a "How can we help?" heading.
- Interaction: The background blurs as soon as the user clicks the search input.
- Best For: FAQs or large Video/Podcast archives.
Pattern Dev Tool: The "Hero Lab"
- Safe Area Overlay: A toggle to show where "Navigation" and "Scroll Indicators" sit so they don't clash with the Hero text.
- Mobile Simulator: Instantly switch between "Desktop Wide" and "Mobile Tall" to see how the Typography scales (Fluid Type test).
- Vibe Mapping: A dropdown to apply one of our 5 Form Themes to the Hero’s CTA buttons.
Next Step: Should we tackle the Pricing Table Patterns (5 styles) or the Testimonial/Social Proof Patterns to build trust in your funky universe?