BlocksFeature Sections

Feature Sections

Layouts for presenting product features, capabilities, and value propositions.

Bento Feature Grid

Block preview — compose from component imports

Bento Feature Grid

Asymmetric bento grid with feature cards of varying sizes highlighting key capabilities.

IO Context

Assign larger cells to primary features. The size hierarchy communicates importance without needing numbered lists.

Components used
Bento GridCard Spotlight
bash
// Install the components used in this block
npx shadcn@latest add @aceternity/bento-grid
npx shadcn@latest add @aceternity/card-spotlight

Sticky Scroll Features

Block preview — compose from component imports

Sticky Scroll Features

Left side text panels scroll while right side visual stays fixed, changing per section.

IO Context

Ideal for 3-5 step processes or feature explanations. The sticky visual provides persistent context as the user reads.

Components used
Sticky Scroll Reveal
bash
// Install the components used in this block
npx shadcn@latest add @aceternity/sticky-scroll-reveal

Hover Cards Grid

Block preview — compose from component imports

Hover Cards Grid

Grid of feature cards with animated hover states that highlight the focused card.

IO Context

Use for equal-weight features where no single item dominates. The hover effect creates on-demand hierarchy.

Components used
Card Hover Effect
bash
// Install the components used in this block
npx shadcn@latest add @aceternity/card-hover-effect
IO-UI | The Visual Operating System for Intelligent Products — The Prompt Engineering Project