Skip to content
Fieldbook
Menu
Sign in
EN

Text effects

Scrolling content strip

Scrolling content strip: A horizontal strip of small cards drifts sideways in an unbroken loop, pausing in place the moment a pointer rests over any card in it.

Using Scrolling content strip

Scrolling content strip uses the wide preview frame with a light/dark theme setting.

Customize the preview

These controls are passed to the demo. Defaults and limits describe the preview; consult the implementation for its full prop API.

ControlTypeDefaultPreview limits
speednumber28From 8 to 60; step 2
reversebooleanfalseNo additional limit in the metadata.
pauseOnHoverbooleantrueNo additional limit in the metadata.
accentcolor#38BDF8No additional limit in the metadata.
gapnumber16From 4 to 40; step 2
Which frameworks are available for Scrolling content strip?

Scrolling content strip is available for React, Vue, Svelte, Astro, HTML. The live preview uses React; the source observations below apply to index.tsx. Check the selected port before relying on the same interactions.

What does Scrolling content strip depend on?

The React metadata lists these npm dependencies beyond React: motion.

What accessibility details are visible in Scrolling content strip?

The React source for Scrolling content strip includes: native elements (button); attributes and handlers (aria-hidden). These are source observations. Verify accessible names, focus order and keyboard behavior in the composed page.

How does Scrolling content strip handle reduced motion?

Scrolling content strip reads the motion preference in its React source through matchMedia(prefers-reduced-motion). Check the full implementation, shared styles and selected port with reduced motion enabled; these observations do not establish that every animation stops.

Connect your agent

Related open components

Still of the Looping text ribbon component, a Fieldbook UI component in Text effects.
2828Looping text ribbonText effectsA colored ribbon carries a repeating phrase along a wavy, circular, or arched path, scrolling endlessly like a seal or badge.
Still of the Flowing gradient headline component, a Fieldbook UI component in Text effects.
1962Flowing gradient headlineText effectsA headline whose letters are filled by a moving two-tone gradient, so a bright band drifts endlessly through the words, with an optional soft bloom behind.
Still of the Shimmer sweep text component, a Fieldbook UI component in Text effects.
2036Shimmer sweep textText effectsA line of text where each letter brightens and dims in turn, sending a band of light travelling along the phrase on a loop.
Still of the Typing cursor text component, a Fieldbook UI component in Text effects.
2076Typing cursor textText effectsA sentence types out one character at a time behind a blinking cursor, pauses, then erases backward and types the next line in an endless loop.
Still of the Cascading Letter Reveal component, a Fieldbook UI component in Text effects.
2824Cascading Letter RevealText effectsA headline that reveals itself letter by letter with a soft rise and fade as it enters view, then holds steady once finished.
Still of the Shimmer Wave Text component, a Fieldbook UI component in Text effects.
1930Shimmer Wave TextText effectsA brightness wave sweeps once across a line of text, lighting each character in turn before it dims back, then pauses briefly and repeats.