# Logo marquee
> Two rows of placeholder wordmarks drifting in opposite directions between dotted rules; the row under the pointer slows down.
- Element: `<hf-marquee>`
- React: `import { HfMarquee } from "@/components/lumesec/hf-marquee"`
- Collection: Pixel HD (https://elements.lumesec.ai/components/pixel-hd)
- Registry item: https://elements.lumesec.ai/r/hf-marquee.json
- Page: https://elements.lumesec.ai/components/pixel-hd/marquee



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

```html
<hf-marquee></hf-marquee>
```

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

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-marquee.json
```

## Usage

React:

```tsx
import { HfMarquee } from "@/components/lumesec/hf-marquee";

export function Example() {
  return (
    <HfMarquee />
  );
}
```

HTML:

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

<hf-marquee></hf-marquee>
```

## Behaviour

Two rows of placeholder wordmarks drifting in opposite directions between dotted rules, faded at the edges. The row under your pointer slows and the wordmark under it lights up on a dotted plate.

## API reference

### Attributes

| Attribute | React prop | Type     | Default                                      | Description                                   |
| --------- | ---------- | -------- | -------------------------------------------- | --------------------------------------------- |
| `label`   | `label`    | `string` | `Placeholder logos · teams building with it` | Caption above the rows. Read once on connect. |

## Accessibility

* The moving rows repeat each wordmark and are `aria-hidden`, as is the canvas; a visually hidden text lists the logo names once.
* The caption above the rows is plain text.
* Reduced motion: the rows do not move; the wordmark under the pointer is still highlighted.

## 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 `--foreground`, `--lumesec` and `--muted-foreground`.

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

## Notes

* The ten wordmarks are fictional placeholders built into the source; there is no attribute to supply logos.
* Wordmarks are text in the page's sans, mono or a serif fallback stack, faded at both edges by a mask; the dotted rules and separators are on the canvas.
* The row under the pointer slows to 15% speed, and the wordmark under it turns the accent colour on a dotted plate. The marquee is 104px tall and fills the width.