Curved Marquee
Customize
Props
| Property | Type | Default | Description |
|---|---|---|---|
text | string | "React Bytes" | Text content that repeats along the curved path. Re-measured whenever it changes. |
font | object | { fontFamily: "Inter", fontWeight: 400, fontSize: 64, lineHeight: "1.5em", letterSpacing: "1px", textAlign: "left" } | Font settings applied to the SVG text (family, weight, size, spacing). No dedicated Customize control — wire manually if you expose it. |
color | string | "#d35af8" | Fill color of the marquee text. |
direction | "left" | "right" | "right" | Scroll direction of the loop. |
baseVelocity | number | 35 | Base auto-scroll speed, expressed as a percentage of the internal max speed (800px/s). |
curveAmount | number | -400 | Vertical bend of the path — negative arcs the text upward, positive arcs it downward. |
gap | number | 12 | Extra spacing between each repeated copy of the text. |
draggable | boolean | true | Whether the marquee can be grabbed and flung with pointer input. |
dragIntensity | number | 10 | How strongly a drag gesture accelerates the scroll velocity. |
fade | boolean | true | Whether the left/right edges fade out via a mask gradient. |
fadePercent | number | 12 | Width of each edge fade, as a percentage of the SVG width. |
style | object | {} | Inline styles merged onto the root wrapper div. No dedicated control. |
className | string | "" | Extra classes applied to the root wrapper element. |
textstringText content that repeats along the curved path. Re-measured whenever it changes.
"React Bytes"fontobjectFont settings applied to the SVG text (family, weight, size, spacing). No dedicated Customize control — wire manually if you expose it.
{ fontFamily: "Inter", fontWeight: 400, fontSize: 64, lineHeight: "1.5em", letterSpacing: "1px", textAlign: "left" }colorstringFill color of the marquee text.
"#d35af8"direction"left" | "right"Scroll direction of the loop.
"right"baseVelocitynumberBase auto-scroll speed, expressed as a percentage of the internal max speed (800px/s).
35curveAmountnumberVertical bend of the path — negative arcs the text upward, positive arcs it downward.
-400gapnumberExtra spacing between each repeated copy of the text.
12draggablebooleanWhether the marquee can be grabbed and flung with pointer input.
truedragIntensitynumberHow strongly a drag gesture accelerates the scroll velocity.
10fadebooleanWhether the left/right edges fade out via a mask gradient.
truefadePercentnumberWidth of each edge fade, as a percentage of the SVG width.
12styleobjectInline styles merged onto the root wrapper div. No dedicated control.
{}classNamestringExtra classes applied to the root wrapper element.
""Crafted withbyMohammad Tasin