Skip to content
tileio

Menu

10 layers · 4 free

Hero section designs with one idea each

The hero gets a visitor's first three seconds, so the strongest designs commit to one idea and make the headline and the main button impossible to miss. Each of these ten hero sections is built around a different idea, from quiet to cinematic.

Product-led: a bento grid of six tiles that come alive, a SaaS window floating in 3D, a deck of cards dealt into a fan, a hero that leads with the sign-up form. Type-led: a headline that types and edits itself, lines that rise from their own slots under a sweep of light, a poster of giant marquee text. Atmosphere-led: light rays and dust behind cut-out letters, a sunrise scrubbed by scroll, a split hero that crossfades chapters.

Each is a self-contained section in vanilla JS with your headline and buttons as content. Copy it as an HTML snippet or a Next.js, React, Vue, Astro, WordPress, Shopify or Webflow component. Gradient Sweep, Marquee, Split and Typing Headline are free.

The 10 layers, in order

  1. A headline over a bento grid of six tiles that come alive on load: counters, sparklines.

  2. A SaaS hero whose product window floats in 3D and leans toward the pointer.

  3. A deck of template cards dealt from one stack into a wide fan under the headline.

  4. A hero that leads with the form: inline validation and a button that fills with progress.

  5. A developer-tool hero that types its headline, then selects and rewrites the last phrase.

  6. Three huge lines rise from their own slots, then a band of light sweeps through them.

  7. A poster of four rows of giant text sliding at different speeds and directions.

  8. Volumetric light rays and drifting dust on canvas behind letters cut out of the dark.

  9. A pinned hero that plays a valley sunrise frame by frame under your scroll.

  10. The headline and three chapters on the left while the right half stays pinned and crossfades.

Browse the full catalogue: Sections

Questions

What makes a good hero section?

A clear headline that says what you do, one primary call to action, a visual that proves the claim and a fast load. One strong idea beats several competing effects; each design here commits to one.

Can I use these hero sections in React or Next.js?

Yes. Pick Next.js and the prompt asks for a client component under components/sections/ with its CSS as a module or Tailwind v4 classes, the script in useEffect with cleanup and your copy as props.

How do I keep an animated hero fast?

Keep the headline as real text in the HTML, load effects after it paints, and give reduced-motion visitors a still state. Each section's prompt includes those rules.

Which hero sections are free?

Split-text Gradient Sweep Hero, Marquee Hero, Split Hero and Typing Headline with Cursor. Free layers are for personal projects; commercial use needs Pro or Lifetime.

Related collections

All collections