v0.1.0

<hf-card>Custom elementSurfacesFree

Media card

Media card with a generated dithered landscape whose ridges shift at different depths as the card tilts toward the pointer.

View as Markdown

<hf-card>· loading

Pixel ValleyA generated landscape that drifts with your pointer. Every layer is a dithered noise ridge.

Playground

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

Loading <hf-card>

Props

hueremounts

seedremounts

tagsremounts

altremounts

<HfCard
  hue={262}
  seed="valley"
  tags="Generative,Dither,Parallax"
  alt="Pixel landscape illustration"
/>

Installation

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

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-card.json

Usage

import { HfCard } from "@/components/lumesec/hf-card";

export function Example() {
  return (
    <HfCard tags="Generative,Dither,Parallax">
      <span slot="title">Pixel Valley</span>
      A generated landscape that drifts with your pointer. Every layer is a dithered noise ridge.
    </HfCard>
  );
}

Behaviour

A procedurally drawn landscape whose ridges move at different depths as the card tilts toward your pointer, with a glare of dots following it.

API reference

Attributes

hueReact prophueTypenumberDefault262

Base hue in degrees for the sky and ridges. Read on every frame.

seedReact propseedTypestringDefaultvalley

Seed for the ridge shapes. Read on every frame.

tagsReact proptagsTypestringDefaultGenerative,Dither,Parallax

Comma-separated tag chips. Read once on connect.

altReact propaltTypestringDefaultPixel landscape illustration

Accessible name of the landscape canvas. Read once on connect.

Slots

title

Card title. Falls back to Pixel Valley.

(default)

Description. Falls back to a sample sentence.

Accessibility

The landscape canvas has role="img" with aria-label from alt.
Title and description are slotted text.
The card has no link, button or focus target of its own.
Reduced motion: the card does not tilt and the landscape does not drift; 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, --muted and --muted-foreground.

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

Notes

Without reduced motion the canvas redraws every frame while the card is visible.
Stars twinkle in the sky only in the dark theme.

<hf-hero>

Herohf-hero

<hf-reveal>

Secret fieldhf-reveal

<hf-marquee>

Logo marqueehf-marquee

<hf-dialog>

Dialoghf-dialog

Was this page helpful?

Related