SpotlightReveal
animationnewAn advanced Framer Motion animation component that reveals content with a spotlight effect on hover. Creates a dramatic, interactive entrance for cards and sections.
base layer
Hover over me
The spotlight follows your cursor and reveals the layer below.
reveal layer
Hover over me
The spotlight follows your cursor and reveals the layer below.
Move your cursor over the card
1Installation
Install the package:
$npm install piece-ui
Import the component:
tsx
1import { SpotlightReveal } from "piece-ui";⚠
Peer dependencies required
This component requires: framer-motion
$npm install framer-motion
2Usage
Basic usage
tsx
1import { SpotlightReveal } from "piece-ui";
2
3export default function Example() {
4 return (
5 <SpotlightReveal
6 color="rgba(0, 240, 255, 0.12)"
7 size={350}
8 className="rounded-xl border border-zinc-800 p-8"
9 >
10 <h3>Hover over me</h3>
11 <p>The spotlight follows your cursor.</p>
12 </SpotlightReveal>
13 );
14}3Props
| Prop | Type |
|---|---|
childrenreq | React.ReactNode |
size | number |
color | string |
className | string |