v0.1.0

<hf-hero>Custom elementSurfacesFree

Hero

Hero section whose headline sits in a dot grid and is revealed behind a bright front; the pointer pushes dots aside and a click sends a shockwave.

View as Markdown

<hf-hero>· loading

Trymove through the headline and click.

Playground

Change a prop and the component updates. Props marked live animate to the new value; the others rebuild the element.

Loading <hf-hero>

Props

headlineremounts

primaryremounts

secondaryremounts

<HfHero
  headline="Think in pixels."
  primary="Get started"
  secondary="View components"
/>

Installation

pnpm dlx shadcn@latest add @lumesec/hf-hero

First timeRegister the @lumesec registry once, or install by URL+

Adds @lumesec to your components.json:

pnpm dlx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json

Or skip the setup and install by URL:

npx shadcn@latest add https://elements.lumesec.ai/r/hf-hero.json

Usage

import { HfHero } from "@/components/lumesec/hf-hero";

export function Example() {
  return (
    <HfHero headline="Think in pixels." primary="Get started" secondary="View components" />
  );
}

Behaviour

The headline is revealed from left to right behind a bright front, then a shimmer runs through the dots around it. Your pointer pushes the dots aside and a click sends a shockwave through them.

API reference

Attributes

headlineReact propheadlineTypestringDefaultThink in pixels.

Headline text, shown in an <h2> over the dot grid. Read once on connect.

primaryReact propprimaryTypestringDefaultGet started

Label of the primary button.

secondaryReact propsecondaryTypestringDefaultView components

Label of the secondary button.

Events

Events bubble and cross the shadow boundary unless the description says otherwise.

primaryReact proponPrimaryDetail{}

Fires when the primary button is clicked.

secondaryReact proponSecondaryDetail{}

Fires when the secondary button is clicked.

Properties

headline (read-only)Typestring

The headline text.

Slots

eyebrow

Pill text above the headline. Falls back to New · Pixel HD.

(default)

Subheading under the headline. Falls back to a sample sentence.

Accessibility

The headline is a visible <h2> set in the sans font; the dot canvas behind it is aria-hidden. The heading level is fixed.
The secondary action is a native button; the primary action is a native button inside a nested <hf-button>.
Reduced motion: the headline and grid appear at once without the reveal or shimmer, clicks send no shockwave and the canvas redraws only on pointer movement.

Theming

The element reads your shadcn theme tokens through its shadow root, so light and dark follow your theme. The accent comes from --lumesec. See Theming.

This component reads --border, --foreground, --lumesec, --muted and --muted-foreground.

To restyle only LumeSec elements, set the matching --ui-* overrides: --ui-accent, --ui-border, --ui-fg, --ui-font, --ui-muted and --ui-raised.

Notes

The primary button is a nested <hf-button>, which hf-hero imports itself.
The headline scales with the element's width (28px to 60px) and wraps onto more lines when it does not fit; the dot grid clears around it.

<hf-card>

Media cardhf-card

<hf-reveal>

Secret fieldhf-reveal

<hf-marquee>

Logo marqueehf-marquee

<hf-dialog>

Dialoghf-dialog

Was this page helpful?

Related