Interactive spotlight cards component with dynamic mouse-following effects, featuring proximity spotlight, hover focus, and cursor flow gradients. Creates engaging card layouts with radial gradient lighting effects that respond to user interactions.
Keeping track of your goals helps you stay organized, motivated, and focused. Regularly monitoring your progress ensures you stay on course.
npx uilayouts@latest add spotlight
Control the border by chaning padding p-[2px] from spotlight.tsx file:
<divonMouseMove={handleMouemove}onMouseEnter={() => CursorFlowGradient && setIsHovered(true)}onMouseLeave={() => setIsHovered(false)}ref={boxWrapper}className={cn(className,' relative rounded-lg justify-center items-center p-[2px] bg-[#ffffff15] overflow-hidden')}></div>
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | The content to be rendered inside the Spotlight component. | |
| className | string | Optional CSS class for styling the Spotlight component. | |
| ProximitySpotlight | boolean | true | Whether to enable proximity-based spotlight effect. |
| HoverFocusSpotlight | boolean | false | Whether to enable spotlight effect on hover or focus. |
| CursorFlowGradient | boolean | true | Whether to enable gradient flow based on cursor movement. |
Seamless chats, crystal-clear videos, and
premium audio quality
Experience a significant boost in your subscriber
count, achieving 3x growth.
Effortlessly connect with today's leading technologies including React, TypeScript, Next.js, Tailwind CSS, Motion, and Cypress.