Lunasites is now in early access. Claim your exclusive launch offer.

#Blocks#Content

Scrolling Text Block

Scrolling text is important — you see it, you read it, now watch it move — this is your marquee, make it count — add your message here and let it flow

Scrolling text is important — you see it, you read it, now watch it move — this is your marquee, make it count — add your message here and let it flow

Scrolling text is important — you see it, you read it, now watch it move — this is your marquee, make it count — add your message here and let it flow

Scrolling text is important — you see it, you read it, now watch it move — this is your marquee, make it count — add your message here and let it flow

Scrolling text is important — you see it, you read it, now watch it move — this is your marquee, make it count — add your message here and let it flow

Scrolling text is important — you see it, you read it, now watch it move — this is your marquee, make it count — add your message here and let it flow

Scrolling text is important — you see it, you read it, now watch it move — this is your marquee, make it count — add your message here and let it flow

Scrolling text is important — you see it, you read it, now watch it move — this is your marquee, make it count — add your message here and let it flow

Scrolling text is important — you see it, you read it, now watch it move — this is your marquee, make it count — add your message here and let it flow

Scrolling text is important — you see it, you read it, now watch it move — this is your marquee, make it count — add your message here and let it flow

Scrolling text is important — you see it, you read it, now watch it move — this is your marquee, make it count — add your message here and let it flow

Scrolling text is important — you see it, you read it, now watch it move — this is your marquee, make it count — add your message here and let it flow


Use Scrolling Text with a clear purpose


Fixed-height scrollable rich text block. This guide covers the settings exposed by the current LunaSites block, the Style Panel areas that can be customized, and the checks that keep the result dependable across breakpoints.


Add a Scrolling Text


1. Open Add block and choose Scrolling Text from the Content category.

2. Start with the content or data source and confirm that the block communicates one clear role.

3. Configure layout and behavior before applying local visual overrides.

4. Use the Style Panel only for intentional block-specific differences; reuse a preset when the same treatment appears repeatedly.

5. Preview the real result at desktop, tablet, and mobile widths, including hover, focus, active, empty, and error states when relevant.


Configure the Scrolling Text


Content


Variant Options include Default, Outline. Content The default is . Direction Options include Left, Right. Duration (seconds) The default is 20. Stroke Width (px) The default is 2.


Additional settings


Vertical Align Options include Top, Center, Bottom.


Style Panel


The available styling areas are Text, Container. Complete the default state first, then add hover or active differences only where the target supports them. Keep text, borders, controls, and bounded surfaces readable against the effective page background.

Scrolling Text Style Panel showing the Text and Container styling targets in a clear 768px retina capture


Responsive behavior


Scrolling Text is a grid-section block using the content-driven sizing model with a documented starting frame of 12 columns by 2 rows. Author the desktop composition first, then tune tablet and mobile only where automatic reflow does not preserve hierarchy.


Tips & tricks


1. Build a clear reading hierarchy before refining decorative details.

2. Keep each content unit focused on one idea and make scanning easy.

3. Let the rendered copy determine height instead of adding empty rows.

4. Test the shortest, longest, empty, and most complex realistic content before considering the design finished.


Accessibility checklist


• Give every meaningful control, image, region, or data value an understandable name or text alternative.

• Preserve keyboard access, visible focus, logical reading order, and sufficient contrast.

• Do not rely on color, motion, shape, or position alone to communicate meaning.

• Check reduced-motion preferences and mobile touch targets whenever the block is interactive.


Common mistakes


• Styling before the content, source, and behavior are correct.

• Oversized frames, accidental empty space, weak contrast, or missing responsive checks.

• Adding decorative or interactive complexity without a clear visitor benefit.


Quick recipe


Add one Scrolling Text, use the documented defaults as a starting point, replace them with real content, refine only the necessary settings, then verify the rendered block at all three responsive breakpoints.

Questions, ideas, or bugs?

Explore what we’re building next, ask the Luna team for help, or send a focused bug report.