Introducing Nyx UI v1.2.0

Lamp Heading

An elegant section heading with a customizable gradient underline and a stunning lamp-like glow effect with particles, light rays, and smooth animations.

TypographyEffectsFuturisticParticlesAnimation
Open in

Blade Runner

Legacy

Mad Max: Fury Road

THE MATRIX

Ghost in the Shell

Stranger Things

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

PropTypeDefaultDescription
textstring""The text content of the heading
classNamestring""Additional CSS classes to apply for styling the heading
gradientColorsobject{ from: "#FF33C7", via: "#CD35FF", to: "#4533F7" }The gradient colors used for the underline and effects. Object with 'from', optional 'via', and 'to'
lineHeightnumber4The height of the underline in pixels
lampHeightnumber80The height of the lamp cone effect in pixels
glowIntensitynumber1.0The intensity of the glow effect (0-2)
glowSizenumber30The size of the glow effect in pixels
animationSpeednumber4The speed of animations in seconds
direction"above" | "below""below"The direction of the lamp effect (above or below the text)
showParticlesbooleantrueWhether to show floating particles effect
showLightRaysbooleanfalseWhether to show light rays emerging from the underline
interactivebooleantrueWhether the lamp responds to hover interactions
textSizestring"4xl"The size of the text (sm, md, lg, xl, 2xl, 3xl, 4xl)
pulseEffectbooleantrueWhether to show a subtle pulse animation on the underline