8 animated hero section patterns for shadcn/ui

A hero section gets one job: in the first second, tell the visitor what this is and make them want to stay. Animation can sharpen that or sabotage it. The patterns below all pair well with shadcn/ui's restrained type and spacing. For each one: what it is, the feeling it creates, and when it earns its place versus when it just adds noise.

1. Gradient / aurora background

What it is. Soft, slowly-drifting color washes behind the headline - blurred radial gradients that move on a long loop.

The feel. Calm, premium, alive without being busy. It signals craft without asking for attention.

When. Almost always safe - it is the lowest-risk motion you can add. Avoid it only when your hero already carries a product screenshot or photo that the gradient would fight.

2. Text mask (background-clip: text)

What it is. The headline is a window. You set background-clip: text with a transparent fill, so an animated gradient or video shows only through the letterforms.

The feel. Editorial and confident. The headline stops being text and becomes a graphic.

When. Use it on a short, punchy headline of two to five words. Avoid it on long headlines or anything that needs to be maximally readable - the effect always costs a little legibility.

3. Word marquee backdrop

What it is. Oversized words drifting horizontally behind the hero content, usually low-contrast, as a texture rather than something to read.

The feel. Energetic, editorial, a touch of motion design. It fills empty space with rhythm.

When. Good for brand and product pages with a strong verbal identity. Avoid it on dense or data-heavy heroes - it competes with everything. Keep contrast low so it stays a backdrop.

4. Magnetic CTA

What it is. The primary button subtly pulls toward the cursor as it approaches, then snaps back when the pointer leaves.

The feel. Tactile and responsive. It quietly draws the eye and the cursor to the one action that matters.

When. Use it on exactly one element - the main CTA. Apply it to several and the effect cheapens. It is pointer-only, so it must degrade to a normal button on touch and keyboard.

5. Cursor spotlight

What it is. A soft radial glow that follows the pointer across the hero or a card, lighting whatever is underneath.

The feel. Interactive and modern - it makes a flat surface feel like it has depth and responds to you.

When. Great on dark heroes and bordered cards. Avoid it on light backgrounds where the glow barely reads, and remember it does nothing on touch devices, so it can only ever be a bonus.

6. 3D tilt card

What it is. A card or product shot that rotates slightly in 3D toward the cursor using perspective and rotateX / rotateY.

The feel. Playful and physical, like an object you could pick up. It makes a static image feel handled.

When. Best for a hero built around a single visual - an app screenshot, a device mockup. Keep the rotation small, under about ten degrees; overdo it and it reads as a gimmick. Pointer-only, so it must rest flat without a cursor.

7. Scramble / decrypt text

What it is. The headline resolves from random characters into the real words, cycling glyphs for a beat before settling.

The feel. Technical and kinetic - it suits developer tools, security products, anything with a hacker-adjacent identity.

When. Run it once on load and let it finish fast, well under a second. Avoid looping it - a headline that never stops shuffling is unreadable and exhausting. Always render the final text to the DOM so it is there before and after the effect.

8. Scroll parallax split

What it is. Hero layers move at different speeds as the page scrolls - background drifts slowly, foreground tracks the scroll, copy sits between.

The feel. Depth and cinematic polish. It rewards the scroll with a sense of space.

When. Effective on marketing and storytelling pages. Avoid heavy parallax on content-dense or conversion-focused pages where it slows the read. This is also the most motion-intensive pattern here, so it is the first thing to cut for reduced motion.

Reduced motion is not optional

Every pattern above must answer to prefers-reduced-motion. The rule of thumb: keep gentle opacity fades, drop the rest. A spotlight or magnetic pull can simply not bind its listeners. Parallax and looping marquees should fall back to a static layout. Scramble text should render its final string immediately with no cycling. Reduced motion does not mean a worse hero - it means the same message without the parts that can make a visitor physically unwell.

Several of these ship ready to drop in: hero text mask, hero marquee, hero spotlight, and hero tilt card - each one file, each with the reduced-motion fallback already wired in.