灯光效果

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

通过 CLI 安装

npm

pnpm

bun

yarn

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

复制并粘贴以下代码：

LampEffect.vue

Prop 名称	类型	默认值	描述
`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.

本页