ScrollTextMarquee

A velocity‑based scrolling text strip that accelerates with user scroll, repeats infinitely, and reverses direction based on scroll direction, delivering a dynamic, eye‑catching effect.

Use Cases

• Section dividers between content blocks on landing pages
• Brand name or tagline emphasis
• Call-to-action text that draws attention through motion
• Between hero and features section

Properties

text

The text to display in the marquee. Keep it short — it repeats automatically. Type: string.

baseVelocity

Base scroll speed. Negative = left, positive = right. Range: -10 to 10. Type: number. Default: -3

fontSize

small = ~3rem, medium = ~5rem, large = ~7rem, xlarge = ~10rem (responsive). Type: string. Options: small, medium, large, xlarge. Default: large

fontWeight

Font weight for the text. Type: string. Options: normal, bold, black. Default: bold

customCss

Custom CSS property pairs. Type: string.

Best Practices

• Keep text to 3‑6 words — it repeats, so brevity is key
• Use large or xlarge fontSize for maximum impact
• Pair two ScrollTextMarquee components with opposite velocities (-3 and 3) for a split marquee effect
• Place between major sections as a visual separator

Common Mistakes

Using long sentences as the text

Why it's a problem: The text repeats 4 times. Long text creates an unreadable blur of words

Fix: Use 3‑6 words max. For example: ‘Build faster, ship sooner’ or ‘Design without limits’

Setting baseVelocity to 0

Why it's a problem: The text won’t move at all, defeating the purpose of the component

Fix: Use -3 or 3 as the velocity. Negative moves left, positive moves right