feat(section): add feature grid hover reveal component#455
feat(section): add feature grid hover reveal component#455KeenIsHere wants to merge 5 commits intocodse:mainfrom
Conversation
KeenIsHere
temporarily deployed
to
preview-deployment
GitHub Actions
Inactive
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
✅ Files skipped from review due to trivial changes (1)
📝 WalkthroughWalkthroughAdds a new client component FeatureGridHoverReveal with exported types, Storybook stories, and documentation. The component renders a responsive grid of feature cards with hover/focus interactions and honors prefers-reduced-motion; stories and docs demonstrate usage, props, and accessibility notes. ChangesFeature Grid Hover Reveal
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related issues
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Tip 💬 Introducing Slack Agent: The best way for teams to turn conversations into code.Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.
Built for teams:
One agent for your entire SDLC. Right inside Slack. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Review rate limit: 7/8 reviews remaining, refill in 7 minutes and 30 seconds.Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@animata/section/feature-grid-hover-reveal.tsx`:
- Around line 121-125: The <article> element that uses
onMouseEnter/onMouseLeave/onFocus/onBlur to toggle setHovered is not
keyboard-focusable; update the element in feature-grid-hover-reveal.tsx (where
setHovered is used) to be focusable by adding tabIndex={0} or replace it with an
appropriate interactive element (e.g., a button or anchor) and preserve the
existing onFocus/onBlur handlers; if you replace it, ensure you keep the
setHovered calls and any necessary ARIA/role attributes to retain accessibility
and behavior.
- Around line 136-141: The Tailwind class "scale-115" in the className
expression inside the FeatureGrid hover component is invalid; replace that token
with the arbitrary value class "scale-[1.15]" wherever it's conditionally
appended (the className block that uses cn(...) with the prefersReducedMotion
and hovered variables in feature-grid-hover-reveal.tsx) so the 1.15 transform is
applied correctly when hovered and reduced-motion is not requested.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 1dadec94-99de-47a9-aab6-54badf52c15d
📒 Files selected for processing (3)
animata/section/feature-grid-hover-reveal.stories.tsxanimata/section/feature-grid-hover-reveal.tsxcontent/docs/section/feature-grid-hover-reveal.mdx
| <article | ||
| onMouseEnter={() => setHovered(true)} | ||
| onMouseLeave={() => setHovered(false)} | ||
| onFocus={() => setHovered(true)} | ||
| onBlur={() => setHovered(false)} |
There was a problem hiding this comment.
Make the cards actually keyboard-focusable.
onFocus/onBlur never fire on a plain <article>, so keyboard users can't trigger the reveal. Add tabIndex={0} or switch to a genuinely interactive element if keyboard reveal is required.
♻️ Suggested fix
<article
+ tabIndex={0}
onMouseEnter={() => setHovered(true)}
onMouseLeave={() => setHovered(false)}
onFocus={() => setHovered(true)}
onBlur={() => setHovered(false)}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <article | |
| onMouseEnter={() => setHovered(true)} | |
| onMouseLeave={() => setHovered(false)} | |
| onFocus={() => setHovered(true)} | |
| onBlur={() => setHovered(false)} | |
| <article | |
| tabIndex={0} | |
| onMouseEnter={() => setHovered(true)} | |
| onMouseLeave={() => setHovered(false)} | |
| onFocus={() => setHovered(true)} | |
| onBlur={() => setHovered(false)} |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@animata/section/feature-grid-hover-reveal.tsx` around lines 121 - 125, The
<article> element that uses onMouseEnter/onMouseLeave/onFocus/onBlur to toggle
setHovered is not keyboard-focusable; update the element in
feature-grid-hover-reveal.tsx (where setHovered is used) to be focusable by
adding tabIndex={0} or replace it with an appropriate interactive element (e.g.,
a button or anchor) and preserve the existing onFocus/onBlur handlers; if you
replace it, ensure you keep the setHovered calls and any necessary ARIA/role
attributes to retain accessibility and behavior.
| className={cn( | ||
| "flex h-11 w-11 items-center justify-center rounded-xl", | ||
| "bg-primary/10 text-primary", | ||
| "transition-transform duration-200", | ||
| !prefersReducedMotion && hovered && "scale-115", | ||
| )} |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Check whether Tailwind extends scale with 1.15 or already uses this utility elsewhere.
fd -a 'tailwind.config.*' .
rg -n --hidden --glob 'tailwind.config.*' 'scale.*115|extend.*scale|safelist' .
rg -n --hidden 'scale-115|scale-\[1\.15\]' animata content .Repository: codse/animata
Length of output: 39
🏁 Script executed:
# Search for Tailwind config files with different naming patterns
find . -maxdepth 2 -type f \( -name "tailwind.config.*" -o -name "tailwind.*" \) 2>/dev/null | head -20Repository: codse/animata
Length of output: 39
🏁 Script executed:
# Check if there's a package.json and what Tailwind version is used
cat package.json | grep -A 5 -B 5 tailwindRepository: codse/animata
Length of output: 1486
🏁 Script executed:
# Search for scale-115 usage throughout the entire codebase
rg -i 'scale-115|scale-\[1\.15\]' --type tsx --type ts --type js --type jsonRepository: codse/animata
Length of output: 85
🏁 Script executed:
# Look for any Tailwind theme extensions or safelist configurations
rg -i 'extend.*scale|scale.*extend|theme.*scale' --type tsx --type ts --type js --type jsonRepository: codse/animata
Length of output: 85
🏁 Script executed:
# Check the specific file mentioned in the review
cat -n animata/section/feature-grid-hover-reveal.tsx | sed -n '130,150p'Repository: codse/animata
Length of output: 932
🏁 Script executed:
# Search for tailwind config with various extensions
find . -maxdepth 3 -name "tailwind.config*" -o -name "tailwind.*"Repository: codse/animata
Length of output: 39
🏁 Script executed:
# Also check for postcss config which might reference tailwind
find . -maxdepth 2 \( -name "postcss.config*" -o -name ".tailwindrc*" \)Repository: codse/animata
Length of output: 78
🏁 Script executed:
# Search for scale extensions in the codebase using rg with correct syntax
rg 'scale.*1\.15|extend.*scale' --max-count 20Repository: codse/animata
Length of output: 186
🏁 Script executed:
# Check if scale-115 appears anywhere in the codebase (configuration or usage)
rg 'scale-115' --max-count 20Repository: codse/animata
Length of output: 261
🏁 Script executed:
# Look at the root directory structure to understand config location
ls -la | head -20Repository: codse/animata
Length of output: 1249
🏁 Script executed:
cat postcss.config.mjsRepository: codse/animata
Length of output: 203
🏁 Script executed:
# Search for any Tailwind configuration inline or in other files
rg 'theme|extend|scale' postcss.config.mjs tailwind.config.* app.css globals.css 2>/dev/null | head -40Repository: codse/animata
Length of output: 39
🏁 Script executed:
# Check if there's a theme configuration in CSS or config files
find . -maxdepth 3 -type f \( -name "*.css" -o -name "globals*" \) | head -10Repository: codse/animata
Length of output: 151
🏁 Script executed:
# Look for any theme or extend configurations
rg 'theme.*{' --max-count 10Repository: codse/animata
Length of output: 137
🏁 Script executed:
cat styles/globals.cssRepository: codse/animata
Length of output: 13019
🏁 Script executed:
# Search for `@theme`, `@layer`, or theme extensions in CSS files
rg '@theme|@layer|theme\s*\{' --type cssRepository: codse/animata
Length of output: 222
🏁 Script executed:
# Look for any Tailwind configuration in app or lib directories
find . -maxdepth 3 \( -name "app.tsx" -o -name "app.ts" -o -name "layout.tsx" -o -name "config.ts" \) | head -10Repository: codse/animata
Length of output: 98
🏁 Script executed:
# Search for 115 or 1.15 scale definitions anywhere
rg '115|1\.15' --type css --type ts --type tsx --max-count 20Repository: codse/animata
Length of output: 85
Use scale-[1.15] instead of the non-existent scale-115 utility.
scale-115 is not a default Tailwind class and is not defined in this project's theme configuration. Use the arbitrary value syntax scale-[1.15] to apply the 1.15 scale transform on hover.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@animata/section/feature-grid-hover-reveal.tsx` around lines 136 - 141, The
Tailwind class "scale-115" in the className expression inside the FeatureGrid
hover component is invalid; replace that token with the arbitrary value class
"scale-[1.15]" wherever it's conditionally appended (the className block that
uses cn(...) with the prefersReducedMotion and hovered variables in
feature-grid-hover-reveal.tsx) so the 1.15 transform is applied correctly when
hovered and reduced-motion is not requested.
There was a problem hiding this comment.
Pull request overview
Adds a new “Feature Grid Hover Reveal” section component to the Animata library, along with Storybook coverage and a docs page so it can be previewed and consumed from the docs site.
Changes:
- Introduces
FeatureGridHoverRevealsection component with configurable columns, default feature data, and reduced-motion detection. - Adds Storybook stories for default, two-column, and custom-content variants.
- Adds documentation page for the new section.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 6 comments.
| File | Description |
|---|---|
| content/docs/section/feature-grid-hover-reveal.mdx | New docs page describing the component, props/types, and accessibility notes. |
| animata/section/feature-grid-hover-reveal.tsx | New section component implementation (grid + hover/focus reveal behavior + reduced-motion handling). |
| animata/section/feature-grid-hover-reveal.stories.tsx | New Storybook stories to demonstrate default and customized configurations. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <article | ||
| onMouseEnter={() => 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", | ||
| )} | ||
| > | ||
| <div | ||
| className={cn( | ||
| "flex h-11 w-11 items-center justify-center rounded-xl", | ||
| "bg-primary/10 text-primary", | ||
| "transition-transform duration-200", | ||
| !prefersReducedMotion && hovered && "scale-115", | ||
| )} |
| <ComponentPreview name="section-feature-grid-hover-reveal--primary" /> | ||
|
|
||
| ## 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, the border highlights, and the icon scales up using only transform and opacity. Animations are skipped when prefers-reduced-motion is enabled. | ||
|
|
||
| ## Features | ||
|
|
| - 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 |
| ## Accessibility | ||
|
|
||
| - Semantic section and article elements | ||
| - Hover state triggered on focus and blur for keyboard access |
|
🚀 Preview deployed to: https://0a490af3.animata.pages.dev |
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
KeenIsHere
temporarily deployed
to
preview-deployment
GitHub Actions
Inactive
|
🚀 Preview deployed to: https://9a7385a7.animata.pages.dev |
Summary
Adds a polished Feature Grid Hover Reveal section component with icon cards, hover animations, and full accessibility support.
What's included
animata/section/feature-grid-hover-reveal.tsx— componentanimata/section/feature-grid-hover-reveal.stories.tsx— Storybook storiescontent/docs/section/feature-grid-hover-reveal.mdx— documentationFeatures
Props
Stories
Testing done
Credits
Built by Keen Sha
Summary by CodeRabbit
New Features
Documentation