v0.1.0

<hf-carousel>Custom elementSurfacesFree

Carousel

Carousel of four procedural pixel scenes with an ordered-dither dissolve between slides; autoplay pauses on hover or focus.

View as Markdown

<hf-carousel>· loading

Tryuse the arrows or swipe.

Playground

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

Loading <hf-carousel>

Props

autoplayremounts

<HfCarousel autoplay />

Installation

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

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

Usage

import { HfCarousel } from "@/components/lumesec/hf-carousel";

export function Example() {
  return (
    <HfCarousel autoplay />
  );
}

Behaviour

Four procedural scenes. Slides change with an ordered-dither dissolve and a bright front, autoplay pauses on hover or focus, and it swipes.

API reference

Attributes

autoplayReact propautoplayTypebooleanDefaultfalse

Presence attribute. Advances every 5 s and draws a progress line along the bottom. Pauses while hovered, focused or off-screen. Checked every frame, so it can be added or removed at any time.

Events

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

changeReact proponChangeDetail{ index: number }

Fires when the slide changes, by user action or autoplay. index is zero-based.

Methods

Call them on the element, for example through a React ref.

go(index: number)

Shows the slide at index; values outside 0–3 wrap around.

Keyboard

Keys	Action
ArrowLeft / ArrowRight	Previous or next slide, wrapping.

Accessibility

The slide area is a focusable role="region" with aria-roledescription="carousel" and aria-label="Pixel scenes".
The canvas has role="img" and an aria-label such as Slide 1 of 4: Aurora over the ridge.
The caption is an aria-live="polite" region, including during autoplay.
Previous and Next buttons have aria-labels; dot buttons are labelled Slide <n>: <title>, and the current one has aria-current="true".
There is no pause button; autoplay pauses only on hover or focus.
Reduced motion: autoplay does not advance, slides switch without the dissolve and the scenes are static.

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 --lumesec and --muted.

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

Notes

The four scenes are generated in code and cannot be replaced.
A horizontal swipe of more than 40px changes the slide. The image is 210px tall and fills the width.

<hf-card>

Media cardhf-card

<hf-hero>

Herohf-hero

<hf-reveal>

Secret fieldhf-reveal

<hf-marquee>

Logo marqueehf-marquee

Was this page helpful?

Related