Lamp Effect
A captivating lamp lighting effect with conic gradients, spotlights, and glowing lines for an immersive visual experience.
API
| 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. |
Component Code
You can copy and paste the following code to create this component:
LampEffect.vue
Features
- 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
delayanddurationprops allow for precise control of animation timings. - Slot-Based Content: Supports default slot content, making it easy to overlay text or other components.
Credits
- Ported from Aceternity UI