Skip to content

[Feature Request] Add Feature Grid with Hover Reveal Section Component #452

@KeenIsHere

Description

@KeenIsHere

📋 Component Proposal: Feature Grid with Hover Reveal

What is this component?

A responsive SaaS-style feature grid section with premium hover
interactions. Commonly used in modern landing pages to showcase
product capabilities in a visually engaging way.

🎯 Motivation

Many SaaS landing pages need a clean, reusable feature section
that demonstrates Animata's motion quality. Currently Animata
does not have a dedicated feature grid section component with
hover reveal interactions. This component would fill that gap
and serve as a strong Pro section demo.

📐 Proposed Layout

  • 3 columns on desktop
  • 2 columns on tablet
  • 1 column on mobile
  • Optional section title + subtitle header above the grid

🃏 Card Structure

Each card contains:

  • Icon (accepts ReactNode)
  • Title
  • Short description

✨ Interactions

  • Hover lift: translateY(-6px) smooth transition
  • Border highlight: subtle gradient ring on hover
  • Icon micro-interaction: scale(1.15) on hover
  • All animations use transform and opacity only (GPU composited)

♿ Accessibility

  • prefers-reduced-motion fully respected
  • Semantic HTML markup
  • Keyboard focusable cards
  • Minimum 44x44px touch targets

🌗 Theme Support

  • Full dark mode + light mode
  • Tailwind design tokens only (no hardcoded colors)

📦 Props API

interface FeatureItem {
  icon: React.ReactNode;
  title: string;
  description: string;
}

interface FeatureGridProps {
  features?: FeatureItem[];
  columns?: 2 | 3;
  title?: string;
  subtitle?: string;
}

✅ Definition of Done

  • Responsive across all breakpoints
  • Smooth hover interactions (transform + opacity only)
  • Dark and light mode tested
  • prefers-reduced-motion handled
  • TypeScript typed
  • Stories file included
  • Docs MDX written
  • Preview screenshot ready
  • Zero props renders useful default

🔗 Related PR

Will be submitted as a PR once this issue is approved.

Additional Context

This component is part of the Week 2 Pro sections roadmap
focusing on reusable SaaS landing page building blocks.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions