Components
Loading preview...
BouncyCardsFeatures: Engaging Feature Showcase with Interactive Cards Showcase your product or service features in a fun and interactive way with BouncyCardsFeatures. This React component presents key selling points within visually appealing cards that "bounce" and rotate on hover, drawing attention and making your offerings stand out. Features Interactive Hover Effects: Each feature card reacts to user interaction with a subtle "bounce" and rotation on hover, creating a dynamic and engaging experience. Visually Distinctive Cards: The component uses a grid layout to arrange various sized cards, each with a vibrant, gradient-filled "feature demo" area that animates upwards and rotates on hover, emphasizing your product's capabilities. Clear Call to Action: A prominent headline immediately communicates your value proposition, complemented by a Learn more button that also includes subtle hover and tap animations. Responsive Grid Layout: The feature cards are arranged in a responsive grid that adapts gracefully to different screen sizes, ensuring optimal presentation on both mobile and desktop. Customizable Content: Easily populate each card with a title and integrate your own feature demos or descriptive content within the gradient-filled area. How it Works BouncyCardsFeatures leverages Framer Motion to deliver its smooth and playful animations: motion.div for Cards: The BounceCard component uses motion.div with whileHover props to apply the scaling and rotation effects when a user hovers over a card. CSS Transitions for Internal Elements: The FEATURE DEMO HERE element within each card uses standard CSS transitions to animate its translateY and rotate properties on the parent's group hover state, creating the distinct "pop-up" effect. This component is perfect for product pages, service descriptions, or any section where you want to highlight key features in an engaging, modern, and memorable way.
npx shadcn@latest add https://21st.dev/r/uniquesonu/bounce-card-featuresimport { BouncyCardsFeatures } from "@/components/ui/bounce-card-features";
const DemoOne = () => {
return <BouncyCardsFeatures />;
};
export { DemoOne };