📋 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
🔗 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.
📋 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
🃏 Card Structure
Each card contains:
✨ Interactions
translateY(-6px)smooth transitionscale(1.15)on hovertransformandopacityonly (GPU composited)♿ Accessibility
prefers-reduced-motionfully respected🌗 Theme Support
📦 Props API
✅ Definition of Done
🔗 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.