What makes a good hero section in the age of AI

Jordan Peterson — Mon, 30 Mar 2026 13:55:32 +0000

The secret to a great hero section in 2026 isn't knowing how to code animations from scratch. It's knowing what to ask for.

The new design literacy

Two years ago, building a landing page like Video Effect Vibe's hero meant hiring a designer, a frontend dev, and probably a motion specialist. Now? You need to know the right words.

Terms like parallax scrolling, PullWords effect, Gaussian blur, immersive scroll-driven animations — these aren't just fancy vocabulary. They're instructions. Drop "parallax hero with a PullWords text reveal and depth-of-field blur" into the right AI tool, and you get what used to take a team two weeks.

That's the shift. Design literacy moved from "can you build it?" to "can you describe it?"

The tools that make it work

Two Claude Code skills changed how I approach hero sections:

impeccable — a set of granular, scoped and actionable design directives that animates, overrides, hardens, quiets your design

/frontend-design — the actual builder. It reads your impeccable config, picks a bold aesthetic direction, and generates production-grade UI. Not the generic dark-mode-with-cyan-accents that screams "AI made this." Actual distinctive design with real typographic hierarchy, intentional spacing, and motion that serves a purpose.

The Video Effect Vibe landing page — the dark theme, gold accent typography, the floating dashboard mockup — was built using these two skills together. The impeccable config locked in the brand personality (creator-focused, professional but not corporate, dark and warm). The frontend-design skill executed it.

Why Gemini 3.1 Pro is the best design model right now

For generating frontend components and visual code, Gemini 3.1 Pro consistently outperforms everything else I've tested. It understands spatial relationships between elements. It picks up on subtle cues — "breathable layout" actually produces generous whitespace, "immersive" actually triggers full-viewport sections with scroll-based reveals.

Other models give you functional code. Gemini 3.1 Pro gives you code that looks like someone with taste wrote it.

The real skill is vocabulary

You don't need to know CSS keyframes or GSAP timelines. You need to know that:

Parallax creates depth by moving layers at different speeds
PullWords splits text into individual words that animate in sequence
Blur-to-sharp transitions guide the eye and create focus hierarchy
Immersive scroll locks sections to viewport height and reveals content on scroll
Stagger animations make lists and grids feel alive instead of static

Name the effect. The AI builds it. That's the entire workflow now.

What this means for builders

The barrier to a stunning hero section dropped from "years of frontend experience" to "a good eye and the right vocabulary." The impeccable + frontend-design skill combo, paired with Gemini 3.1 Pro, turns design intent into production code faster than any traditional workflow I've used.

Know the effect names. Describe what you see in your head. Let the model handle the rest.

Design effect dictionary — short prompts that unlock animations for your next hero section

Motion & Entrance

Fade in — element appears by transitioning from transparent to opaque
Slide up / slide in — element enters from below or the side
Stagger — multiple elements animate in sequence with a delay between each
PullWords — text splits into individual words that fly in one by one
Typewriter — text appears character by character like it's being typed
Flip reveal — element rotates on an axis to reveal content behind it
Scale up on enter — element grows from small to full size as it appears
Pop in — element overshoots its target size then bounces back (spring physics)

Scroll-Driven

Parallax — background moves slower than foreground, creating depth
Scroll reveal — sections fade or slide into view as you scroll down
Scrollytelling — content unfolds like a narrative as the user scrolls
Sticky hero — hero section stays pinned while inner content scrolls over it
Progress bar on scroll — a bar fills as the user scrolls through the page
Zoom on scroll — image or section scales up as you scroll into it
Horizontal scroll section — vertical scroll triggers horizontal movement inside a container

Focus & Depth

Gaussian blur — soft blur effect, often on backgrounds behind modals or overlays
Depth of field — foreground sharp, background blurred — mimics camera lens
Blur-to-sharp transition — content starts blurred and sharpens on scroll or hover
Glassmorphism — frosted glass effect with blur and transparency
Vignette — edges of the viewport darken, drawing focus to the center

Hover & Interaction

Magnetic cursor — elements subtly pull toward the cursor as it approaches
Tilt on hover — card rotates slightly in 3D following cursor position
Color shift on hover — smooth color transition on mouseover
Underline grow — underline expands from center or left on hover
Button ripple — material-design-style ripple radiates from click point
Cursor spotlight — area around cursor is highlighted, rest is dimmed

Text & Typography

Gradient text — text filled with a color gradient instead of solid color
Text reveal mask — text appears as a mask slides across it
Letter spacing animation — tracking expands or contracts on scroll/hover
Split lines — text splits into lines that animate independently
Counter / number roll — numbers increment from 0 to target value

Layout Patterns

Bento grid — asymmetric grid of cards with varied sizes, like Apple's product pages
Masonry — Pinterest-style layout where items flow vertically with no fixed row height
Broken grid — elements intentionally overlap or break out of the grid for visual tension
Split screen — viewport divided 50/50, usually text left and visual right
Z-pattern layout — content placed along the natural Z-shaped eye-scanning path
Full-bleed sections — edge-to-edge content blocks with no margins
Asymmetric whitespace — uneven spacing that creates visual hierarchy and movement
Card stack — overlapping cards with slight offset, like a deck fanned out

Layout & Atmosphere

Breathable layout — generous whitespace, low density, airy feel
Immersive section — full-viewport height, edge-to-edge, cinematic
Floating elements — subtle up-and-down oscillation, like hovering in space
Grain overlay — subtle noise texture over the UI for a film/analog feel

Design Aesthetics (say the name, get the style)

Neobrutalism — thick borders, bold colors, chunky shadows, intentionally raw
Glassmorphism — frosted glass panels with blur and transparency over colorful backgrounds
Neumorphism — soft extruded/indented elements, like buttons pressed into clay
Claymorphism — 3D blob-like shapes, pastel colors, soft clay texture
Liquid Glass — Apple's 2025 style — glossy, transparent, refractive, depth-heavy
Dark luxury — dark bg, gold/cream accents, serifs, sparse layout
Retro terminal — monospace fonts, green-on-black, scanlines, CRT glow
Editorial — magazine-inspired, strong type hierarchy, lots of whitespace, serif headlines
Maximalist — dense, colorful, layered, everything competing for attention on purpose

Micro-Interactions

Skeleton loading — grey placeholder shapes pulse while content loads
Toast notification slide — notification slides in from corner, auto-dismisses
Toggle morph — switch animates between states with shape transformation
Checkbox confetti — small particle burst when a checkbox is checked
Drag and snap — element follows cursor then snaps to grid position on release