Story <l-story>

A single story declaration inside <l-stories>. Renders the clickable thumbnail; the viewer reads its src, poster, label, chapters, and tracks to play it. See Stories for examples and the row layout.

HTML tag<l-story>

⏣Native

⬡Progressive

◇Plain

⬢Shadow-DOM

Plain Custom Element

API reference

Importing

JS

import 'luxen-ui/story';

CSS

@import 'luxen-ui/css/story';

Attributes & Properties

srcstringProperty

Video URL.

posterstringProperty

Thumbnail poster image. Falls back to the first video frame.

previewstringProperty

Optional short looping preview video (URL of a small dedicated MP4, typically 2-3s, 480p, no audio). When set, the thumbnail renders this video muted+looped+autoplayed in place of poster. Gated by an IntersectionObserver so off-screen previews don't play.

labelstringProperty

Caption shown below the thumbnail (or overlaid, depending on appearance) and used as the trigger aria-label.

durationnumberdefault:0Property

Override the progress duration in seconds. Defaults to the video's metadata duration.

seenbooleandefault:falseProperty

Mark this story as already viewed (faded ring). Reflected.

pulsebooleandefault:falseProperty

Pulse the thumbnail with an animated halo + a subtle scale tap to draw attention. Reflected.

chaptersstringProperty

Chapter start times within the video, comma-separated seconds (e.g. 0,5,12,20). 0 is implicit if omitted. Empty = single chapter spanning the full video.

tracksstringProperty

Comma-separated VTT track URLs for captions.

Methods

getChapterStarts()→number[]Method

Parsed chapter start times. Always begins with 0, sorted, deduplicated. Empty chapters returns [0].

Slots

ctaSlot

Overlay surfaced by the viewer when this story is active (e.g. product card, link).

headerSlot

Header overlay (e.g. avatar + author).

CSS classes

.l-story-triggerClass

The clickable thumbnail button wrapper.

.l-story-thumbClass

The poster/video thumbnail frame (ring + offset).

.l-story-playClass

The centered play-icon overlay.

.l-story-labelClass

The caption text below the thumbnail.

CSS custom properties

The thumbnail layout tokens (--size, --radius, --ring-color, --ring-color-seen, --ring-width, --ring-offset, --ring-offset-color, --label-color) are declared on <l-stories> and cascade to every story. See Stories › CSS custom properties. The play-icon disc is styled inline; consumers can override it by targeting .l-story-play l-icon.

The pulse animation has its own knobs:

--pulse-colorCustom property

Color of the attention pulse ring (only with the pulse attribute).

--pulse-scaledefault:1.2Custom property

Peak scale of the pulse animation.

--pulse-durationdefault:1.6sCustom property

Duration of one pulse cycle.