Components
Loading preview...
A React TypeScript component that creates an engaging spotlight effect on images.. The image appears blurred by default, but reveals sharp details in a circular area that follows the user's mouse cursor. Includes subtle 3D perspective transforms for enhanced visual appeal.
@tonyzebastian
npx shadcn@latest add https://21st.dev/r/tonyzebastian/image-spotlightimport React from 'react';
import ImageSpotlight from "@/components/ui/image-spotlight";
export default function DemoOne() {
return (
<main className="w-full p-6">
<div className="flex justify-center gap-2">
<ImageSpotlight
src="https://res.cloudinary.com/dctgknnt7/image/upload/v1758731403/1_d8uozd.jpg"
alt="Portrait image with spotlight effect"
orientation="portrait"
width={300}
height={400}
/>
<ImageSpotlight
src="https://res.cloudinary.com/dctgknnt7/image/upload/v1758731402/2_hme6yu.jpg"
alt="Portrait image with spotlight effect"
orientation="portrait"
width={300}
height={400}
/>
<ImageSpotlight
src="https://res.cloudinary.com/dctgknnt7/image/upload/v1758731402/3_nfdtim.jpg"
alt="Portrait image with spotlight effect"
orientation="portrait"
width={300}
height={400}
/>
</div>
</main>
)
}