# Media card
> Media card with a generated dithered landscape whose ridges shift at different depths as the card tilts toward the pointer.
- Element: `<hf-card>`
- React: `import { HfCard } from "@/components/lumesec/hf-card"`
- Collection: Pixel HD (https://elements.lumesec.ai/components/pixel-hd)
- Registry item: https://elements.lumesec.ai/r/hf-card.json
- Page: https://elements.lumesec.ai/components/pixel-hd/card



Live preview: https://elements.lumesec.ai/view/hf-card

```html
<hf-card 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.</hf-card>
```

## Playground

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

## Installation

```bash
npx shadcn@latest add @lumesec/hf-card
```

First time with the @lumesec registry? Register it once, or install by URL:

```bash
npx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json
npx shadcn@latest add https://elements.lumesec.ai/r/hf-card.json
```

## Usage

React:

```tsx
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>
  );
}
```

HTML:

```html
<script type="module" src="https://elements.lumesec.ai/cdn/hf-card.js"></script>

<hf-card 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.</hf-card>
```

## 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

| Attribute | React prop | Type     | Default                        | Description                                                      |
| --------- | ---------- | -------- | ------------------------------ | ---------------------------------------------------------------- |
| `hue`     | `hue`      | `number` | `262`                          | Base hue in degrees for the sky and ridges. Read on every frame. |
| `seed`    | `seed`     | `string` | `valley`                       | Seed for the ridge shapes. Read on every frame.                  |
| `tags`    | `tags`     | `string` | `Generative,Dither,Parallax`   | Comma-separated tag chips. Read once on connect.                 |
| `alt`     | `alt`      | `string` | `Pixel landscape illustration` | Accessible name of the landscape canvas. Read once on connect.   |

### Slots

| Slot        | Description                                   |
| ----------- | --------------------------------------------- |
| `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](/docs/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.