Skip to content
BaseLayer Themes

Scroller Text 01

Text marquee with speed, direction, and edge fade

Live preview

AstroReactTailwindSanityPerformanceAccessibilityDesign systems

File: src/blocks/scroller/ScrollerText01.astro

Full-bleed text marquee. Optional heading/subheading are constrained by width; the track itself is always edge-to-edge.

Config (blocks.ts → scrollerText)

scrollerText: {
    width: "standard",
    background: "surface",
    padding: "md",
    fadeEdges: true,
    motion: "auto",
    direction: "ltr",
    speed: "normal",
    pauseOnHover: true,
    gap: "md",
    textSize: "md",
    separator: "·",
    heading: "",
    subheading: "",
    items: [
      "Astro",
      "React",
      "Tailwind",
      "Sanity",
      "Performance",
      "Accessibility",
      "Design systems",
    ],
  },

Add to a page

---
import ScrollerText01 from "@/blocks/scroller/ScrollerText01.astro";
---

<ScrollerText01 />

Props override matching keys from config:

<ScrollerText01
  width="wide"
  padding="md"
  heading="Custom headline"
/>

Props

Prop Config key Type / values Default / notes
sectionId scrollerText.sectionId string Default "scroller-text"; DOM id for the section; not in config
width scrollerText.width standard | narrow | wide Wrapper max-width
background scrollerText.background bg | surface | elevated | brand-soft | transparent Surface / background token
padding scrollerText.padding none | sm | md | lg Vertical section padding
fadeEdges scrollerText.fadeEdges boolean Fade the start/end of the marquee track
motion scrollerText.motion auto (continuous) | scroll (tied to page scroll) —
direction scrollerText.direction ltr | rtl —
speed scrollerText.speed slow | normal | fast —
pauseOnHover scrollerText.pauseOnHover boolean Pause motion on hover/focus
gap scrollerText.gap sm | md | lg Gap between slides (px) or marquee items
textSize scrollerText.textSize sm | md | lg Right-column / body text scale
separator scrollerText.separator string —
heading scrollerText.heading string —
subheading scrollerText.subheading string —
items scrollerText.items string[] Content list for this block

Also include: ScrollerLayout.astro, ScrollerScript.astro, ScrollerTextTrack.astro.

← Scroller Text versions · Blocks overview