Components
Loading preview...
The AnimatedFeatureSpotlight3D component is a visually dynamic, Framer Motion–powered spotlight section designed to highlight key features or products—like a gift showcase—with smooth entrance animations and an interactive 3D hover effect. It combines expressive typography, subtle motion, and layered depth to create a premium visual experience. On hover, the featured image tilts naturally in 3D space with a soft shadow beneath it, giving a realistic floating impression. Built with Shadcn UI, Tailwind CSS, and Framer Motion, this component is fully responsive, reusable, and ideal for landing pages, marketing sections, or feature highlights where visual engagement matters most.
npx shadcn@latest add https://21st.dev/r/ruixen.ui/animated-feature-spotlight3d'use client'
import { Gift, Sparkles } from 'lucide-react'
import { AnimatedFeatureSpotlight3D } from '@/components/ui/animated-feature-spotlight3d'
export default function FeatureSpotlightDemo() {
return (
<main className="min-h-screen flex items-center justify-center py-20 mx-8">
<AnimatedFeatureSpotlight3D
preheaderIcon={<Gift className="w-4 h-4 text-primary" />}
preheaderText="Perfect Surprises"
heading={
<>
Make Every Moment <span className="text-primary">Memorable</span>
</>
}
description="Find the ideal gift for every occasion — birthdays, anniversaries, and celebrations. Thoughtfully curated to bring smiles, warmth, and unforgettable memories to your loved ones."
buttonText="Explore Gifts"
imageUrl="https://pub-940ccf6255b54fa799a9b01050e6c227.r2.dev/gift-3.png"
/>
</main>
)
}