File: src/blocks/scroller/ScrollerText01.astro
Horizontal text marquee. Supports auto looping or scroll-linked motion, optional header, edge fade, and prefers-reduced-motion (static).
Shared shell: ScrollerLayout.astro + ScrollerScript.astro.
Config (blocks.ts → scrollerText)
scrollerText: {
width: "standard",
background: "surface",
padding: "md", // "none" | "sm" | "md" | "lg"
fadeEdges: true,
motion: "auto", // "auto" | "scroll"
direction: "ltr", // "ltr" | "rtl"
speed: "normal", // "slow" | "normal" | "fast"
pauseOnHover: true,
gap: "md",
textSize: "md",
separator: "·",
heading: "",
subheading: "",
items: ["Astro", "React", "Tailwind"],
},Add to a page
---
import ScrollerText01 from "@/blocks/scroller/ScrollerText01.astro";
---
<ScrollerText01 />Scroll-linked:
<ScrollerText01 motion="scroll" speed="fast" fadeEdges />Props
| Prop | Config key | Notes |
|---|---|---|
items |
scrollerText.items |
string[] |
heading / subheading |
same | Optional header above the track |
width |
scrollerText.width |
Header container width |
background |
scrollerText.background |
bg | surface | elevated | brand-soft | transparent |
padding |
scrollerText.padding |
none | sm | md | lg |
fadeEdges |
scrollerText.fadeEdges |
Gradient fade using the section background token |
motion |
scrollerText.motion |
auto or scroll |
direction |
scrollerText.direction |
ltr | rtl |
speed |
scrollerText.speed |
slow | normal | fast |
pauseOnHover |
scrollerText.pauseOnHover |
Auto mode only |
gap |
scrollerText.gap |
sm | md | lg |
textSize |
scrollerText.textSize |
sm | md | lg |
separator |
scrollerText.separator |
Between items |
Also include: ScrollerLayout.astro, ScrollerScript.astro (imported by the block).