Lamp Effect

A captivating lamp lighting effect with conic gradients, spotlights, and glowing lines for an immersive visual experience.

Install using CLI

npm

pnpm

bun

yarn

npx shadcn-vue@latest add "https://registry.inspira-ui.com/lamp-effect.json"

Copy and paste the following code

LampEffect.vue

Prop Name	Type	Default	Description
`delay`	`number`	`0.5`	Delay before the animation starts, in seconds.
`duration`	`number`	`0.8`	Duration of the animation, in seconds.
`class`	`string`	`""`	Additional CSS classes for custom styling.

Conic Gradient Animation: Creates a smooth expanding conic gradient effect, giving a dynamic light-source appearance.
Spotlight Animation: The spotlight smoothly expands, providing a focused lighting effect.
Glowing Line Effect: A glowing line animates across the center, simulating a light beam or laser.
Customizable Timing: The delay and duration props allow for precise control of animation timings.
Slot-Based Content: Supports default slot content, making it easy to overlay text or other components.

On This Page