Motion

Motion controls provide optional, bounded CSS presentation over complete native content. motion={:system} respects package, ancestor, and operating-system reduction policy, while motion={:none} disables the effect; motion never communicates loading, readiness, progress, or information that is unavailable in the static document.

Marquee

Marquee renders one canonical named list and can offer a single finite scrolling preview rather than an endless ticker. Supply a stable id, accessible_label, and nonempty atom-keyed items with unique string key, escaped text, and an optional image map. mode is static or preview, logical direction is inline_start or inline_end, duration is brief or default, and motion is system or none.

<.marquee
  id="topics"
  accessible_label="Featured topics"
  mode={:preview}
  duration={:brief}
  items={[
    %{key: "mountains", text: "Mountain walks"},
    %{key: "harbors", text: "Harbor stories"},
    %{key: "gardens", text: "Garden journals"}
  ]}
/>

Stagger

Stagger wraps complete keyed content with an optional short render-time entrance. Choose as from div, ul, or ol; effect from none, fade, or rise; preset from quick or default; and motion from system or none. Every item needs a stable key and remains present and usable even when the effect is unavailable or reduced.

<.stagger id="reading-list" as={:ol} effect={:rise} preset={:quick}>
  <:item key="setup"><a href="/guides/setup">Setup guide</a></:item>
  <:item key="components"><a href="/guides/components">Component guide</a></:item>
  <:item key="release"><a href="/releases/latest">Release notes</a></:item>
</.stagger>

Scroll Indicator

Scroll Indicator creates a named native scroll region with an optional decorative position track outside its viewport. Supply id, exactly one of accessible_label or labelledby, and body content; size is small, default, or large, and motion is system or none. An optional description can explain the region. The track is not numeric progress and disappears safely when its complete CSS capability is unavailable.

<.scroll_indicator
  id="reading-notes"
  accessible_label="Reading notes"
  size={:small}
  description="Scroll to inspect all notes."
>
  <p :for={number <- 1..12}>Reading note {number}.</p>
</.scroll_indicator>