CurvedLoop
curved-loopRepeats text along a draggable curved path in a continuous loop.
Usage
Basic usage
The copy scrolls seamlessly along the quadratic Bezier curve. By default, it bends downward and rolls to the left, and can be dragged and moved.
<div className="flex h-44 items-center overflow-hidden rounded-xl">
<CurvedLoop text="HULIAN · " className="text-white" />
</div>Curved upward
curveAmount Pass a negative value to make the curve convex upward (positive value is concave downward, 0 is approximately a straight line).
<CurvedLoop text="ENTERPRISE UI · " curveAmount={-220} />Scroll right · High speed
direction="right" scrolls in reverse, speed increases speed.
<CurvedLoop text="Hulian component library · " direction="right" speed={4} />Pure display (no dragging)
interactive={false} Turn off drag interaction, only automatic scrolling.
<CurvedLoop text="HULIAN UI · " interactive={false} />When to use
Use CurvedLoop for an arced marquee in a hero or section divider. Choose ScrollVelocity for multiple horizontal rows that accelerate or reverse with page scrolling. Choose CurvedLoop when one curved text strip should loop seamlessly and allow manual dragging.
Import
import { CurvedLoop } from "@hulianui/ui"Props
Inherits SVGProps<SVGSVGElement> (removes ref), commonly used as follows:
| Name | Type | Default | Description |
|---|---|---|---|
| text | string | "\u745a\u740f \u00b7 HULIAN \u00b7 " | Marquee text. The built-in Chinese copy begins with “Hulian”; trailing whitespace is trimmed, non-breaking spaces separate phrases, and the ends are joined to fill the curve seamlessly. |
| speed | number | 2 | Scroll speed in pixels per frame at roughly 60fps; larger values move faster. |
| curveAmount | number | 320 | Vertical offset of the quadratic Bézier control point in viewBox pixels. Positive values curve down, negative values curve up, and 0 is nearly straight. |
| direction | "left" | "right" | "left" | Automatic scrolling direction. |
| interactive | boolean | true | Enables mouse and touch dragging; after release, scrolling continues in the drag direction. |
| className | string | — | Text-color class such as text-primary; the default fill uses currentColor from this class or the parent. |
Usage guidelines
- End
textwith a separator such as" · ". The component inserts non-breaking spacing before joining the end to the start; without a separator, the loop seam reads as one merged phrase. - Color inherits
currentColor. Set it with atext-*class onclassNameinstead of passingfilldirectly. - Reduced-motion mode stops automatic scrolling but keeps manual dragging available. Do not make the animation the only carrier of important information.
Related
Text · Heading · Prose · Markdown · AuroraText · AnimatedShinyText
Playground
<div className="flex h-44 items-center overflow-hidden rounded-xl"
style={{ background: "oklch(0.14 0.02 255)" }}>
<CurvedLoop
text="HULIAN · "
speed={2}
curveAmount={320}
direction="left"
interactive={true}
className="text-white"
/>
</div>