Lamp Hero

Hero section lit by a glowing light tube whose cone swings open and the heading rises into the light when it scrolls into view.

Light the way to launch

Everything your team needs to ship polished interfaces, beautifully lit and ready to go.

Get started Read the docs

Open

color

spread32

title

subtitle

once

Installation

npx shadcn@latest add @glint-ui/lamp-hero

First time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/lamp-hero.json

Usage

import { LampHero } from "@/components/ui/lamp-hero";

<LampHero color="#5eead4" title="Light the way to launch">
  <a href="/signup">Get started</a>
</LampHero>

Props

Prop	Type	Default	Description
color	string	"#5eead4"	Light color.
spread	number	32	Half-angle of the open light cone, in degrees.
title	string	"Light the way to launch"	Heading text.
subtitle	string	"Everything your team needs to ship polished interfaces, beautifully lit and ready to go."	Supporting line under the heading.
once	boolean	true	Animate only the first time it enters the viewport.
children	ReactNode	—	Call-to-action buttons rendered under the subtitle.
className	string	—	Extra classes for the root element.