From f49d4f9482fff824539ffc82424217e904b718dc Mon Sep 17 00:00:00 2001 From: Keen Sha Date: Wed, 29 Apr 2026 09:27:17 +0545 Subject: [PATCH 1/5] feat: add feature grid hover reveal section component --- .../feature-grid-hover-reveal.stories.tsx | 112 ++++++++++++ animata/section/feature-grid-hover-reveal.tsx | 162 ++++++++++++++++++ .../section/feature-grid-hover-reveal.mdx | 59 +++++++ 3 files changed, 333 insertions(+) create mode 100644 animata/section/feature-grid-hover-reveal.stories.tsx create mode 100644 animata/section/feature-grid-hover-reveal.tsx create mode 100644 content/docs/section/feature-grid-hover-reveal.mdx diff --git a/animata/section/feature-grid-hover-reveal.stories.tsx b/animata/section/feature-grid-hover-reveal.stories.tsx new file mode 100644 index 00000000..24a1b22a --- /dev/null +++ b/animata/section/feature-grid-hover-reveal.stories.tsx @@ -0,0 +1,112 @@ +import type { Meta, StoryObj } from "@storybook/react"; +import { Brain, Database, Lock, Rocket } from "lucide-react"; +import FeatureGridHoverReveal, { + type FeatureGridProps, +} from "@/animata/section/feature-grid-hover-reveal"; + +const meta = { + title: "Section/Feature Grid Hover Reveal", + component: FeatureGridHoverReveal, + parameters: { + layout: "fullscreen", + }, + tags: ["autodocs"], + argTypes: { + columns: { + control: "select", + options: [2, 3], + description: "Number of columns in the grid", + }, + title: { + control: "text", + description: "Section heading", + }, + subtitle: { + control: "text", + description: "Section subheading", + }, + }, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const Primary: Story = { + args: {}, + render: (args: FeatureGridProps) => ( +
+ +
+ ), +}; + +export const TwoColumn: Story = { + args: { + columns: 2, + title: "Built for scale", + subtitle: "Four core capabilities that grow with your team.", + features: [ + { + icon: , + title: "Instant Deploy", + description: + "Push to production in seconds with zero-downtime deployments and automatic rollbacks.", + }, + { + icon: , + title: "Zero-Trust Security", + description: "Every request is authenticated and authorised. No implicit trust, ever.", + }, + { + icon: , + title: "Managed Database", + description: + "Fully managed Postgres with automatic backups, point-in-time recovery, and read replicas.", + }, + { + icon: , + title: "AI-Powered Insights", + description: + "Surface anomalies and opportunities automatically using built-in machine learning.", + }, + ], + }, + render: (args: FeatureGridProps) => ( +
+ +
+ ), +}; + +export const CustomContent: Story = { + args: { + columns: 3, + title: "Why teams choose us", + subtitle: "Purpose-built features that eliminate complexity and ship value faster.", + features: [ + { + icon: , + title: "One-Click Setup", + description: + "Go from sign-up to production in under five minutes with our guided onboarding.", + }, + { + icon: , + title: "Smart Automation", + description: + "Let AI handle the repetitive work so your team can focus on what actually matters.", + }, + { + icon: , + title: "Reliable Storage", + description: + "99.999% uptime SLA with geo-redundant storage across three availability zones.", + }, + ], + }, + render: (args: FeatureGridProps) => ( +
+ +
+ ), +}; diff --git a/animata/section/feature-grid-hover-reveal.tsx b/animata/section/feature-grid-hover-reveal.tsx new file mode 100644 index 00000000..486d7a48 --- /dev/null +++ b/animata/section/feature-grid-hover-reveal.tsx @@ -0,0 +1,162 @@ +"use client"; + +import { BarChart, Code, Globe, Layers, Shield, Zap } from "lucide-react"; +import { useEffect, useState } from "react"; +import { cn } from "@/lib/utils"; + +export interface FeatureItem { + icon: React.ReactNode; + title: string; + description: string; +} + +export interface FeatureGridProps { + features?: FeatureItem[]; + columns?: 2 | 3; + title?: string; + subtitle?: string; +} + +const defaultFeatures: FeatureItem[] = [ + { + icon: , + title: "Lightning Fast", + description: + "Optimised for speed at every layer. Sub-second load times keep your users engaged and your conversion rate high.", + }, + { + icon: , + title: "Enterprise Security", + description: + "SOC 2 Type II certified with end-to-end encryption, SSO, and role-based access controls built in from day one.", + }, + { + icon: , + title: "Advanced Analytics", + description: + "Real-time dashboards and custom reports give your team the clarity to make confident, data-driven decisions.", + }, + { + icon: , + title: "Global CDN", + description: + "Content delivered from 200+ edge locations worldwide so every user gets a fast, reliable experience.", + }, + { + icon: , + title: "Developer First", + description: + "Powerful REST and GraphQL APIs, webhooks, and an SDK for every major language. Automate anything.", + }, + { + icon: , + title: "Seamless Integrations", + description: + "Connect to 200+ tools including Slack, Salesforce, and Stripe in minutes — no custom code required.", + }, +]; + +const columnClass: Record<2 | 3, string> = { + 2: "md:grid-cols-2", + 3: "md:grid-cols-2 lg:grid-cols-3", +}; + +export default function FeatureGridHoverReveal({ + features = defaultFeatures, + columns = 3, + title = "Everything you need to ship faster", + subtitle = "A complete platform built for modern teams — from zero to production without the growing pains.", +}: FeatureGridProps) { + const [prefersReducedMotion, setPrefersReducedMotion] = useState(false); + + useEffect(() => { + const mq = window.matchMedia("(prefers-reduced-motion: reduce)"); + setPrefersReducedMotion(mq.matches); + const handler = (e: MediaQueryListEvent) => setPrefersReducedMotion(e.matches); + mq.addEventListener("change", handler); + return () => mq.removeEventListener("change", handler); + }, []); + + const safeFeatures = Array.isArray(features) ? features : defaultFeatures; + + return ( +
+
+ {(title || subtitle) && ( +
+ {title && ( +

+ {title} +

+ )} + {subtitle && ( +

{subtitle}

+ )} +
+ )} + +
+ {safeFeatures.map((feature, index) => ( + + ))} +
+
+
+ ); +} + +interface FeatureCardProps { + feature: FeatureItem; + prefersReducedMotion: boolean; +} + +function FeatureCard({ feature, prefersReducedMotion }: FeatureCardProps) { + const [hovered, setHovered] = useState(false); + + return ( +
setHovered(true)} + onMouseLeave={() => setHovered(false)} + onFocus={() => setHovered(true)} + onBlur={() => setHovered(false)} + className={cn( + "group relative flex flex-col gap-4 rounded-2xl border p-6", + "bg-card text-card-foreground", + "shadow-sm transition-shadow duration-300", + !prefersReducedMotion && "transition-transform duration-300", + !prefersReducedMotion && hovered && "-translate-y-1.5 shadow-md", + hovered ? "border-primary/40" : "border-border", + )} + > +
+ {feature.icon} +
+ +
+

{feature.title}

+

{feature.description}

+
+ + {!prefersReducedMotion && ( +
+ ); +} diff --git a/content/docs/section/feature-grid-hover-reveal.mdx b/content/docs/section/feature-grid-hover-reveal.mdx new file mode 100644 index 00000000..03f3b0ec --- /dev/null +++ b/content/docs/section/feature-grid-hover-reveal.mdx @@ -0,0 +1,59 @@ +--- +title: Feature Grid Hover Reveal +description: A responsive SaaS feature grid with hover lift, gradient border highlight, and icon micro-interactions +author: YourTwitterUsername +--- + + + +## Installation + +### CLI + + + +### Manual + + +Install dependencies + +```bash +npm install framer-motion lucide-react +``` + +Update `tailwind.config.js` + +Add the following to your tailwind.config.js file. + +```json +module.exports = { + theme: { + extend: { + } + } +} +``` + +Run the following command + +It will create a new file `feature-grid-hover-reveal.tsx` inside the `components/animata/section` directory. + +```bash +mkdir -p components/animata/section && touch components/animata/section/feature-grid-hover-reveal.tsx +``` + +Paste the code + +Open the newly created file and paste the following code: + +```jsx file=/animata/section/feature-grid-hover-reveal.tsx + +``` + + + +## Credits + + Built by [Your name](https://github.com/YourGithubUsername) + + ...Add appropriate credits here. \ No newline at end of file From 6e1f115f0b61475901c56b2d2cb5fe68f82e986a Mon Sep 17 00:00:00 2001 From: Keen Sha Date: Wed, 29 Apr 2026 09:40:54 +0545 Subject: [PATCH 2/5] fix: replace skeleton mdx with proper docs, set published: true --- .../section/feature-grid-hover-reveal.mdx | 78 +++++++++---------- 1 file changed, 35 insertions(+), 43 deletions(-) diff --git a/content/docs/section/feature-grid-hover-reveal.mdx b/content/docs/section/feature-grid-hover-reveal.mdx index 03f3b0ec..415b4730 100644 --- a/content/docs/section/feature-grid-hover-reveal.mdx +++ b/content/docs/section/feature-grid-hover-reveal.mdx @@ -1,59 +1,51 @@ --- title: Feature Grid Hover Reveal -description: A responsive SaaS feature grid with hover lift, gradient border highlight, and icon micro-interactions -author: YourTwitterUsername +description: A responsive SaaS feature section with icon cards, hover lift, border highlight, and icon scale micro-interactions. +author: AnimataContributor +published: true --- - + -## Installation +## Overview -### CLI +Feature Grid Hover Reveal is a polished section component for SaaS landing pages. It displays a grid of feature cards with icon, title, and description. On hover, cards lift, border highlights, and the icon scales — all using only `transform` and `opacity`. Animations are disabled when `prefers-reduced-motion` is enabled. - +## Features -### Manual +- **Responsive grid** — 1 column mobile, 2 tablet, 3 desktop +- **Hover lift** — `-translate-y-1.5` with 300ms transition +- **Icon scale** — `scale-115` with 200ms transition +- **Border highlight** — `border-primary/40` on hover +- **Ring overlay** — inset ring fades in via opacity +- **prefers-reduced-motion** — all animations off when set +- **Dark mode** — full Tailwind token support +- **Configurable** — 2 or 3 column layout, custom title/subtitle/features +- **Zero-props render** — 6 default SaaS feature items built in - -Install dependencies +## Usage -```bash -npm install framer-motion lucide-react -``` +\`\`\`tsx +import FeatureGridHoverReveal from "@/animata/section/feature-grid-hover-reveal"; -Update `tailwind.config.js` - -Add the following to your tailwind.config.js file. - -```json -module.exports = { - theme: { - extend: { - } - } +export default function Page() { + return ; } -``` - -Run the following command - -It will create a new file `feature-grid-hover-reveal.tsx` inside the `components/animata/section` directory. - -```bash -mkdir -p components/animata/section && touch components/animata/section/feature-grid-hover-reveal.tsx -``` - -Paste the code - -Open the newly created file and paste the following code: - -```jsx file=/animata/section/feature-grid-hover-reveal.tsx - -``` - +\`\`\` +## Props -## Credits +| Prop | Type | Default | Description | +|------|------|---------|-------------| +| features | FeatureItem[] | 6 built-in items | Array of feature cards | +| columns | 2 or 3 | 3 | Grid column count | +| title | string | Built-in heading | Section title | +| subtitle | string | Built-in subtitle | Section subtitle | - Built by [Your name](https://github.com/YourGithubUsername) +## Accessibility - ...Add appropriate credits here. \ No newline at end of file +- Semantic section and article elements +- Hover state triggered on focus/blur — keyboard accessible +- Decorative ring has aria-hidden="true" +- Icon container is 44x44px minimum touch target +- All motion respects prefers-reduced-motion From 277576af7badf13c02287a6da6d3d34edcbb3f37 Mon Sep 17 00:00:00 2001 From: Keen Sha Date: Wed, 29 Apr 2026 09:53:53 +0545 Subject: [PATCH 3/5] fix: rewrite mdx with proper backticks, remove escaped backticks causing acorn error --- .../section/feature-grid-hover-reveal.mdx | 49 +++++++++++++------ 1 file changed, 33 insertions(+), 16 deletions(-) diff --git a/content/docs/section/feature-grid-hover-reveal.mdx b/content/docs/section/feature-grid-hover-reveal.mdx index 415b4730..a7843ba5 100644 --- a/content/docs/section/feature-grid-hover-reveal.mdx +++ b/content/docs/section/feature-grid-hover-reveal.mdx @@ -9,29 +9,29 @@ published: true ## Overview -Feature Grid Hover Reveal is a polished section component for SaaS landing pages. It displays a grid of feature cards with icon, title, and description. On hover, cards lift, border highlights, and the icon scales — all using only `transform` and `opacity`. Animations are disabled when `prefers-reduced-motion` is enabled. +Feature Grid Hover Reveal is a polished section component for SaaS landing pages. It displays a grid of feature cards with icon, title, and description. On hover, cards lift, the border highlights, and the icon scales up using only transform and opacity. Animations are skipped when prefers-reduced-motion is enabled. ## Features -- **Responsive grid** — 1 column mobile, 2 tablet, 3 desktop -- **Hover lift** — `-translate-y-1.5` with 300ms transition -- **Icon scale** — `scale-115` with 200ms transition -- **Border highlight** — `border-primary/40` on hover -- **Ring overlay** — inset ring fades in via opacity -- **prefers-reduced-motion** — all animations off when set -- **Dark mode** — full Tailwind token support -- **Configurable** — 2 or 3 column layout, custom title/subtitle/features -- **Zero-props render** — 6 default SaaS feature items built in +- Responsive grid: 1 column mobile, 2 tablet, 3 desktop +- Hover lift: -translate-y-1.5 with 300ms transition +- Icon scale: scale-115 with 200ms transition +- Border highlight: border-primary/40 on hover +- Ring overlay: inset ring fades in via opacity +- prefers-reduced-motion: all animations off when set +- Dark mode: full Tailwind token support +- Configurable: 2 or 3 column layout via prop +- Zero-props render: 6 default SaaS feature items built in ## Usage -\`\`\`tsx +```tsx import FeatureGridHoverReveal from "@/animata/section/feature-grid-hover-reveal"; export default function Page() { return ; } -\`\`\` +``` ## Props @@ -42,10 +42,27 @@ export default function Page() { | title | string | Built-in heading | Section title | | subtitle | string | Built-in subtitle | Section subtitle | +## Types + +```typescript +interface FeatureItem { + icon: React.ReactNode; + title: string; + description: string; +} + +interface FeatureGridProps { + features?: FeatureItem[]; + columns?: 2 | 3; + title?: string; + subtitle?: string; +} +``` + ## Accessibility - Semantic section and article elements -- Hover state triggered on focus/blur — keyboard accessible -- Decorative ring has aria-hidden="true" -- Icon container is 44x44px minimum touch target -- All motion respects prefers-reduced-motion +- Hover state triggered on focus and blur for keyboard access +- Decorative ring span has aria-hidden set to true +- Icon container meets 44x44px minimum touch target +- All motion respects prefers-reduced-motion \ No newline at end of file From ef6d39e028e9e013b87f2a2ad7f44cfb358128bc Mon Sep 17 00:00:00 2001 From: Keen Sha Date: Wed, 29 Apr 2026 10:03:19 +0545 Subject: [PATCH 4/5] docs: add credits section with GitHub profile link --- content/docs/section/feature-grid-hover-reveal.mdx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/content/docs/section/feature-grid-hover-reveal.mdx b/content/docs/section/feature-grid-hover-reveal.mdx index a7843ba5..7a5a7de9 100644 --- a/content/docs/section/feature-grid-hover-reveal.mdx +++ b/content/docs/section/feature-grid-hover-reveal.mdx @@ -65,4 +65,7 @@ interface FeatureGridProps { - Hover state triggered on focus and blur for keyboard access - Decorative ring span has aria-hidden set to true - Icon container meets 44x44px minimum touch target -- All motion respects prefers-reduced-motion \ No newline at end of file +- All motion respects prefers-reduced-motion +## Credits + +Built by [Keen Sha](https://github.com/KeenIsHere). From 30a3b5ee720b5d3861fa3b48069eb3d82183bfc8 Mon Sep 17 00:00:00 2001 From: Keen Sha Date: Sun, 3 May 2026 22:09:18 +0545 Subject: [PATCH 5/5] Potential fix for pull request finding Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> --- content/docs/section/feature-grid-hover-reveal.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/section/feature-grid-hover-reveal.mdx b/content/docs/section/feature-grid-hover-reveal.mdx index 7a5a7de9..2856a4de 100644 --- a/content/docs/section/feature-grid-hover-reveal.mdx +++ b/content/docs/section/feature-grid-hover-reveal.mdx @@ -1,7 +1,7 @@ --- title: Feature Grid Hover Reveal description: A responsive SaaS feature section with icon cards, hover lift, border highlight, and icon scale micro-interactions. -author: AnimataContributor +author: KeenIsHere published: true ---