31 Tailwind CSS Hero Sections

Demo 09 is built on a native <input type=range>. The range's value feeds a single CSS custom property, and that property drives a clip-path inset on the top (after) image, wiping it to reveal the bottom image. A tiny one-line handler on the range's input event writes the current value into the property — that's the only script, and it degrades to a static 50/50 split if it never runs. The common bug is stacking order: the range has to sit above both images with the layers below set to pointer-events: none, or the thumb stops dragging. Give the input a visible focus ring and an aria-label so keyboard users can nudge it with arrow keys — the clip updates on every value change, so keyboard control works for free. Use real equal-dimension images; mismatched aspect ratios make the wipe line reveal empty space.

Demos 30 and 03 animate gradients by registering a custom property with @property and giving it syntax: '<angle>'. Because the browser now knows the value is an angle, it can interpolate it, so a keyframe sweeping the property from 0deg to 360deg makes the conic-gradient's start angle spin continuously instead of snapping. Feed that property into conic-gradient(from var(--angle), ...) for the corona ring, or into the positions of blurred radial blobs for the mesh. The classic mistake is animating the background shorthand directly — gradients aren't interpolatable that way and you get a hard jump. Keep the blur and the element count low; a handful of large blurred layers composite cheaply, but a dozen will thrash paint. Wrap the whole thing in a prefers-reduced-motion query that pauses the spin, since a constantly rotating background is exactly the kind of motion that triggers discomfort.

This is the mobile viewport-unit trap. Sizing a hero to 100vh uses the largest viewport height, so when the browser's address bar is showing, the bottom of your hero — and the scroll-down cue in demo 10 — gets pushed below the fold, then the layout jumps as the bar hides. The fix the full-screen demos lean on is the dynamic viewport unit: use min-height: 100dvh so the hero tracks the current visible height and the scroll indicator stays anchored. Keep a 100vh fallback first for older engines, then override with dvh. Don't also pin the hero's children to 100vh — size the section and let content flow inside it, or the inner block won't shrink when the keyboard or bar appears. On very short landscape phones, cap the headline size and allow the section to scroll rather than clipping, so nothing important lands off-screen.

Demos 08 and 18 split the headline into per-word or per-letter spans and give each one an incrementing animation delay, so they lift out of a mask or jitter in sequence rather than all at once. The reveal uses overflow: hidden on each word's wrapper with the inner span translating up from below the mask line; the kinetic version transforms each letter on its own offset. Two things make this safe. First, the real text must live in the DOM as actual characters inside the spans — don't build the headline from background images or pseudo-element content, or screen readers and copy-paste get nothing. Second, wrap every transform in prefers-reduced-motion: reduce and collapse it to the final resting state, because staggered flying text is high-motion. The common bug is forgetting to reset animation-delay so the last letters never finish before the mask clips them — make the container tall enough and the delays bounded.

Demo 14 runs two counter-scrolling bands. The seam trick is that the track contains the content twice, back to back, and the animation translates the track by exactly -50% of its own width before looping. Because the second copy is identical to the first, the instant the keyframe restarts at 0 the viewer is looking at the same pixels, so there's no snap. Get the width wrong — one copy, or a translate of -100% across a double-width track — and you'll see a hard reset or a blank gap. Set the track to width: max-content so it sizes to its real content rather than wrapping. Duplicate the markup with aria-hidden on the second copy so assistive tech reads the band once, not twice. Pause it on :hover and under prefers-reduced-motion; an endlessly sliding band is distracting next to copy a user is trying to read, and it keeps the compositor busy even off-screen unless you also pause when scrolled away.

The split, product and app demos (02, 21, 23) build their dashboards, laptop and phones entirely from HTML and CSS — tiles, bars, a lit screen, a hinge — rather than dropping in a PNG. The upside is crispness at every density, no asset to ship, and live touches like KPI bars that grow on load. Reach for the CSS build when the mockup is decorative and generic. Switch to a real image when the screen must show your actual product UI faithfully — nobody will hand-rebuild a complex app screen in divs, and trying produces brittle, unmaintainable markup. If you do use an image, prefer <picture> with density variants and give it concrete width and height so it reserves space and doesn't shift the hero as it loads. Either way, mark the mockup decorative — empty alt on the image, or aria-hidden on the CSS version — so a screen reader hears the headline and CTA, not a stream of fake chart labels.

Demo 31 needs a small amount of script: a pointer-move handler writes the cursor's x and y into two CSS custom properties, and everything visual is driven off those from CSS. The lens is a circle positioned at those coordinates; the glass look comes from backdrop-filter for the blur plus a background that shifts to fake refraction, over a conic-mesh that reacts to the same coordinates. Throttle the handler to one update per animation frame — writing the properties on every raw pointermove event floods style recalculation and the lens stutters. Listen for pointermove, not mousemove, so pen and touch work. Because the whole effect is hover-and-pointer driven, it has no meaning on touch or keyboard: center the lens as a static default so the hero still looks finished when nobody is tracking, and never hide the headline or CTA behind the effect. backdrop-filter support varies, so the layout must read correctly with the blur absent.

Demo 17 sets the headline to writing-mode: vertical-rl for top-to-bottom Japanese-style type; demos 29 and 16 go full VHS glitch and Swiss-punk brutalism. These are striking but situational. Skip vertical text for your primary English headline and CTA — Western readers scan horizontally, line-wrapping is awkward, and a vertical CTA is easy to miss; keep it as an accent label, as the demo does with its spine, not the thing a user must read first. For glitch, the RGB-split tearing can cross contrast thresholds and the flicker is a motion risk, so always ship a calm prefers-reduced-motion fallback and keep the underlying text a plain readable layer. Brutalism's hard offset shadows and acid colors can fail color-contrast; check the real text against its background, not just the vibe. The rule across all three: the decorative treatment is a skin, and the semantic heading, subhead and button underneath must stay legible, focusable and understandable with every effect stripped away.