Lamp Effect
Dramatic lamp/spotlight effect with conic gradient beams that expand on scroll.
Preview
Lamp Effect
Interactive preview — import this component to see it in action
IO Context
Where IO uses this
Section openers and dramatic content reveals.
Why this component matters
The expansion animation creates a theatrical moment that demands attention. Use for your single most important message.
Usage guidance
One per page. Place at the start of a key section with a single, powerful headline underneath. The lamp illuminates — keep what it illuminates simple.
Installation
bash
npx shadcn@latest add @aceternity/lamp-effectUsage
example.tsxtsx
import { LampEffect } from "@/components/ui/lamp-effect";
export default function Example() {
return (
<LampEffect>
{/* Your content here */}
</LampEffect>
);
}Source
lamp-effect.tsx
components/ui/lamp-effect.tsx