Lamp Heading turns a plain section heading into a hanging desk lamp: the text sits above a glowing gradient underline, and thin light rays plus drifting particles fall from the beam. The glow color and heading text are props, and the whole effect is animated with Framer Motion. Built with React and Tailwind CSS. A strong fit for hero sections, feature page titles, and dark themed landing pages that need a single warm focal point.
Installation
Usage
import { LampHeading } from "@/components/ui/lamp-heading";// Basic usage with default settings
<LampHeading text="Featured Products" />
// Custom styling with className
<LampHeading
text="About Us"
className="text-3xl font-bold tracking-tight"
textSize="3xl"
/>
// Custom gradient colors with via color
<LampHeading
text="Our Services"
gradientColors={{
from: "#8a2be2",
via: "#ff69b4",
to: "#ff8c00"
}}
/>
// Modified glow effect with particles
<LampHeading
text="Portfolio"
glowIntensity={1.2}
glowSize={35}
direction="above"
showParticles={true}
showLightRays={true}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | Required | The text content of the heading |
className | string | undefined | Additional CSS classes to apply for styling the heading |
gradientColors | object | { from: "#FF33C7", via: "#CD35FF", to: "#4533F7" } | The gradient colors used for the underline and effects. Object with 'from', optional 'via', and 'to' |
lineHeight | number | 4 | The height of the underline in pixels |
lampHeight | number | 80 | The height of the lamp cone effect in pixels |
glowIntensity | number | 1.0 | The intensity of the glow effect (0-2) |
glowSize | number | 30 | The size of the glow effect in pixels |
animationSpeed | number | 4 | The speed of animations in seconds |
direction | "above" | "below" | "below" | The direction of the lamp effect (above or below the text) |
showParticles | boolean | true | Whether to show floating particles effect |
showLightRays | boolean | false | Whether to show light rays emerging from the underline |
interactive | boolean | true | Whether the lamp responds to hover interactions |
textSize | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "4xl" | The size of the text |
pulseEffect | boolean | true | Whether to show a subtle pulse animation on the underline |
particleCount | number | 8 | The number of floating particles to render (used when showParticles is true) |