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 HTML

⬡Progressive

◇Custom

⬢Shadow DOM

Custom Element (no Shadow DOM)

API reference

Importing

JS

import 'luxen-ui/story';

CSS

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

Attributes & Properties

srcAttribute

Video URL (full story playback)

posterAttribute

Thumbnail image. Falls back to the first video frame

previewAttribute

Short looping preview video (typically 2-3s, 480p, no audio). When set, replaces the poster with a muted autoplay loop on the thumbnail. Off-screen previews are paused via IntersectionObserver

labelAttribute

Caption shown under the thumbnail and used as the trigger aria-label

durationAttribute

Override progress duration in seconds. Defaults to video metadata duration

seenAttribute

Mark this story as already viewed. Reflects to attribute

pulseAttribute

Animated halo + subtle breathing scale to draw attention

chaptersAttribute

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

tracksAttribute

Comma-separated VTT track URLs for captions

Methods

getChapterStarts()Method

Returns the parsed chapter start times as number[]. Always begins with 0, sorted, deduplicated

Slots

ctaSlot

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

headerSlot

Header overlay (e.g. avatar + author)

CSS classes

.l-story-triggerClass

The <button> rendered inside each <l-story>

.l-story-thumbClass

The poster wrapper (image + play overlay)

.l-story-playClass

The centered play-icon disc on the thumbnail (default: white icon on 35 % black). Target .l-story-play l-icon to restyle the disc

.l-story-labelClass

The caption shown under 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-colorName

Halo color when pulse is set. Default var(--l-color-bg-fill-brand)

--pulse-spreadName

Maximum halo spread distance. Default 12px

--pulse-durationName

Animation cycle. Default 1.6s