Lamp Effect
A Linear-style section header lit by a focused light cone, with the cone and its light bar unfolding on reveal.
As it enters the viewport, two mirrored light cones unfold together with a central lamp-tube line, focusing attention on the header below.
Loading preview…
npx shadcn@latest add https://webberui.com/r/lamp-effect.jsonPlayground
Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.
0.8
0.15
<LampEffect />
Installation
npx shadcn@latest add https://webberui.com/r/lamp-effect.jsonOr, once registries are configured in components.json, install it as @webberui/lamp-effect.
Usage
import { LampEffect } from "@/components/ui/lamp-effect";
<LampEffect>
<h2 className="text-4xl font-semibold text-white">Build in the light</h2>
</LampEffect>The cone's primary color is set through color and accepts any CSS color value:
<LampEffect color="#a78bfa">
<h2 className="text-4xl font-semibold text-white">Purple lamp</h2>
</LampEffect>Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | — | Header content layered beneath the light cone |
color | string | "#22d3ee" | Primary color of the cone, mapped to --wb-lamp-color |
duration | number | 0.8 | Duration of the cone's unfolding animation (seconds) |
delay | number | 0.15 | Delay before the reveal starts (seconds) |
once | boolean | true | Plays only the first time the element enters the viewport |
className | string | — | Forwarded to the outermost container |
Accessibility
- When the user has "reduce motion" enabled at the system level, it renders straight at the unfolded end state without playing the animation
- The cone, the light bar, and the glow are all decorative layers (
aria-hidden) and do not affect announcement