Cinematic Lamp Effect

A top-down light beam with a sweeping cinematic highlight and suspended particles for high-end landing pages.

Features

3 modes: spotlight (mouse tracking), lamp (beam), and ambient (glow).
Interactive: Spring-based cursor tracking for smooth movement.
Children support: Wraps any content and renders light effects behind/around it.
Particles: Floating dust particles that react to the light.

The beam follows the mouse cursor. Best used as a container for hero sections.

npx shadcn@latest add https://motion-x.vercel.app/r/v0/spot-light-demo2.json

Interactive spotlight effect that follows your cursor. Create a dynamic and immersive experience for your users.

Soft, pulsing background glow.

<SpotLight mode="ambient" color="#8b5cf6" animate={true} fill={true} />

Prop	Type	Default	Description
`children`	`ReactNode`	—	Content to render over the light effect
`color`	`string`	`#06b6d4`	Primary color of the beam and particles
`mode`	`"lamp" \| "spotlight" \| "ambient"`	`"spotlight"`	The visual mode of the spotlight
`followMouse`	`boolean`	`true`	Whether the beam follows cursor (spotlight mode)
`intensity`	`number`	`0.6`	0-1 brightness and opacity of the effect
`size`	`number`	`300`	Beam spread or spotlight radius (px)
`particles`	`boolean`	`true`	Enable floating dust particles
`animate`	`boolean`	`true`	Enable ambient pulse
`fill`	`boolean`	`false`	Absolute fill mode for backgrounds