← All components
Text / effect
Curved Loop
Text travels along a broad curve, with drag and keyboard direction control.
PLAYGROUND
Take it with you.
SOURCE ACCESS
Preview freely. Unlock the files.
Enter the shared password to copy the complete source, download every file, and install components in your app.
Access lasts 24 hours. Your preview settings stay with you.
Component notes
- The SVG curve and typography retain the source geometry. Text is capped at 2,000 characters and repeated glyphs are hidden from assistive technology.
- Drag left or right to change flow; arrow keys offer the same direction control. className styles the SVG text.
- The wrapper reserves component-sized space instead of requiring a full viewport.
- Demo.tsx includes the full composition. Reduced motion, pause, hidden and offscreen behavior use an owned animation clock.
React 19.2Pointer Events
React Bits · MIT with Commons Clause. Used with explicit project permission; see bundled notice.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
marqueeText | string | "CREATE \u2022 EXPLORE \u2022 REPEAT \u2022" | Text |
speed | number | 2 | Speed |
curveAmount | number | 400 | Curve |
direction | "left" | "right" | "left" | Direction |
interactive | boolean | true | Interactive |
paused | boolean | false | Freeze decorative motion. |
replayToken | number | 0 | Change to replay or reset the effect. |
className | string | '' | Text classes for Curved Loop; outer classes for the other components. |