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 } 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-pink-500" />}
preheaderText="Delight in Every Gift"
heading={
<>
Celebrate <span className="text-pink-500">Every Moment</span> with Thoughtful Surprises
</>
}
description="Discover the joy of giving with beautifully curated gifts that speak from the heart. Whether it's a birthday, milestone, or a simple gesture of love — make every moment memorable."
buttonText="Send a Gift"
imageUrl="https://pub-940ccf6255b54fa799a9b01050e6c227.r2.dev/gift-1.png"
/>
</main>
)
}