Marquee
Free · MITHeadless, accessible, and styled entirely through the attribute surface below — bring your own CSS system, or start from the reference theme.
Install
Without a flag you get no styling at all — plain HTML carrying the attribute surface below. --theme copies the same theme in two dialects;--bridge lumos re-points either one onto Lumos for Astro's tokens (it needs a theme to re-point, and Lumos itself, already in your project).
Unstyled — behavior only, you write the CSS
npx astrocraft-ui add media/marqueePlain-CSS theme — no build step
npx astrocraft-ui add media/marquee --theme cssTailwind theme — needs Tailwind v4
npx astrocraft-ui add media/marquee --theme tailwindPlain-CSS theme, re-pointed onto Lumos tokens
npx astrocraft-ui add media/marquee --theme css --bridge lumosTailwind theme, re-pointed onto Lumos tokens
npx astrocraft-ui add media/marquee --theme tailwind --bridge lumosLive demo
Marquee
Pure CSS; hover to pause, reduced-motion pauses it entirely.
Marquee pause
WCAG 2.2.2: content that moves on its own for more than five seconds needs a way to stop it, and pause-on-hover is a pointer affordance that a keyboard user cannot reach. The button sits outside the Marquee — its slot is rendered once per track copy — and is wired to it by id. The state is aria-pressed on the button and data-paused on the marquee, which structure.css turns into animation-play-state: paused.
Attribute surface
With no class-merging machinery, these attributes are the whole extension point. State is a data-attribute or a native attribute; visibility is the hiddenattribute. Generated from source by pnpm slots.
| Component | Slots | Variants | Runtime state | Native state |
|---|---|---|---|---|
| `Marquee.astro` | `marquee` `marquee-track` | `data-direction`: `left` · `right` · `up` · `down` `data-speed`: `slow` · `normal` · `fast` `data-pause-on-hover`: `true` when set | — | — |
| `MarqueeControls.astro` | `marquee-controls` | — | `data-paused` | `[aria-pressed]` |
Source
What the command copies — 3 files, alias-free so the copy lands standing alone. This is the whole component, shown without its comments; the files you install keep them, with the reasoning behind every rule.
---
import type { HTMLAttributes } from "astro/types";
type Props = HTMLAttributes<"div"> & {
direction?: "left" | "right" | "up" | "down";
speed?: "slow" | "normal" | "fast";
pauseOnHover?: boolean;
repeat?: number;
};
const {
direction = "left",
speed = "normal",
pauseOnHover = true,
repeat = 4,
class: className,
...rest
} = Astro.props;
const copies = Math.max(2, repeat);
---
<div
class={className}
data-slot="marquee"
data-direction={direction}
data-speed={speed}
data-pause-on-hover={pauseOnHover ? "true" : undefined}
{...rest}
>
{
Array.from({ length: copies }).map((_, i) => (
<div data-slot="marquee-track" aria-hidden={i > 0 ? "true" : undefined}>
<slot />
</div>
))
}
</div>
---
import "../../../../styles/structure.css";
import type { HTMLAttributes } from "astro/types";
type Props = HTMLAttributes<"button"> & {
for: string;
paused?: boolean;
label?: string;
};
const {
for: controls,
paused = false,
label = "Pause animation",
class: className,
...rest
} = Astro.props;
---
<button
type="button"
aria-controls={controls}
aria-pressed={paused ? "true" : "false"}
aria-label={Astro.slots.has("default") ? undefined : label}
class={className}
data-slot="marquee-controls"
{...rest}
>
<slot />
</button>
<script>
import { onReadyOnce } from "../../_once";
function wire(button: HTMLElement) {
const id = button.getAttribute("aria-controls");
const marquee = id ? document.getElementById(id) : null;
if (!marquee) {
button.setAttribute("disabled", "");
return;
}
const apply = (paused: boolean) => {
button.setAttribute("aria-pressed", String(paused));
marquee.dataset.paused = String(paused);
};
apply(button.getAttribute("aria-pressed") === "true");
button.addEventListener("click", () => {
apply(button.getAttribute("aria-pressed") !== "true");
});
}
onReadyOnce('[data-slot="marquee-controls"]', wire);
</script>
import Marquee from "./Marquee.astro";
import MarqueeControls from "./MarqueeControls.astro";
export { Marquee, MarqueeControls };
export default Marquee;
What you get
The component source, copied into your project by npx astrocraft-ui add media/marquee — no package dependency, no CSS to fight. Whatever the paid blocks compose, this is it.