Skip to content
tileio

Menu

10 layers · 4 free

Features section designs that show, not list

A features section is where most landing pages turn into a grid of icons and three-word claims. These ten show the product instead. A pinned phone or device frame swaps screens as each feature scrolls past, tabs advance on their own with a progress bar, a with and without toggle flips a cluttered inbox into a clean one, a comparison draws its checks in one by one.

For pages that do want a grid, there is a grid whose line icons draw themselves stroke by stroke, a six-card grid lit by a spotlight that follows the pointer, cards that open into a full-width detail row, a how-it-works column pulled down by a rope and zigzag rows joined by a path that draws as you scroll.

Each block is vanilla JS. Copy it as an HTML snippet or a Next.js, React, Vue, Astro, WordPress, Shopify or Webflow component. Scroll-pinned Phone, Sticky Steps, Us vs Them and With / Without Toggle are free.

The 10 layers, in order

  1. A vertical tab list whose progress bars fill over six seconds before moving to the next.

  2. A pinned phone mockup whose screen changes as four feature steps scroll past.

  3. Four steps scroll on the left while a pinned device frame swaps screens.

  4. A product UI you can flip from a cluttered inbox to a calm one.

  5. A two-column comparison where our checks draw themselves in as the block appears.

  6. An eight-feature grid whose line icons draw themselves stroke by stroke.

  7. Six feature cards lit by a soft spotlight that follows the pointer across the grid.

  8. Click a card and a full-width detail row slides open beneath it, like an image search.

  9. A four-step how-it-works column with a hand-drawn rope that pulls taut as you scroll.

  10. Alternating image-and-text rows joined by a dashed path that draws as you scroll.

Browse the full catalogue: Sections

Questions

How many features should a features section show?

Three to six is typical. Lead with the one that matters most and show it working; a tabbed or pinned layout lets you cover more without a wall of cards.

Are these features sections accessible?

Each block's prompt carries its responsive and accessibility rules: tabs and toggles take the keyboard, scroll-driven pieces check reduced motion, and every label stays real text.

Can I use them with Tailwind?

Pick Next.js and the prompt allows Tailwind v4 classes or a CSS module for the section's styles. For other stacks the quoted CSS stays as a sibling stylesheet.

Which ones are free?

Scroll-pinned Phone Features, Sticky Steps, Us vs Them and With / Without Toggle. Free layers are for personal projects; commercial use needs Pro or Lifetime.

Related collections

All collections