Text ribbon

Typography

A measured phrase follows six original SVG paths, with direct manipulation and gentle changes of pace.

React · copy into your project · light and dark themes

Try it

Variant

Words taking the scenic route

A little room for wonder

Your phrase

On hover

Curve · 100%

Show the path

Drag sideways to choose a direction. Focus the ribbon and use arrow keys to move it, or Home to reset. Vertical touch gestures keep the page scrolling.

Loading preview…

Take it with you

Copy the example, API and usage notes for your editor or AI assistant.

Add to your project

Terminal

npx shadcn@latest add https://luv-jeri.github.io/cojeev-ui/r/text-ribbon.json

The command includes the component’s shared dependencies. Your project keeps editable source files.

Include the complete example

This example also composes button, input, label, switch, slider, native-select, typography. Install its parts together:

Terminal

npx shadcn@latest add https://luv-jeri.github.io/cojeev-ui/r/text-ribbon.json https://luv-jeri.github.io/cojeev-ui/r/button.json https://luv-jeri.github.io/cojeev-ui/r/input.json https://luv-jeri.github.io/cojeev-ui/r/label.json https://luv-jeri.github.io/cojeev-ui/r/switch.json https://luv-jeri.github.io/cojeev-ui/r/slider.json https://luv-jeri.github.io/cojeev-ui/r/native-select.json https://luv-jeri.github.io/cojeev-ui/r/typography.json

Using text ribbon

Choose circle, loop, wave, arch, line or figure-eight. Circle has a compact square artwork; the other paths scale from a 640 × 280 viewBox.
Automatic motion is opt-in with auto. Supply a visible pause control via paused. Speed is bounded to 0–120 SVG units per second; fontSize is bounded to 24–56.
Use a short decorative phrase. The visual path repeats it, while assistive technology reads the text once. Use guide and tone to show a simple path or a native accent stroke.
Set curvature from 0 to 1 for the arch and wave. Choose hoverBehavior=pause, slow, quicken or none; pace changes ease continuously.
draggable adds direct horizontal manipulation, ArrowLeft/ArrowRight and Home. Vertical touch gestures preserve scrolling. Automatic movement is still opt-in.
Omit direction for local direction after a drag, or supply direction/onDirectionChange to own it. Paused and quiet settings stop automatic travel while explicit positioning remains available.

API

Compose the exported parts below. The prop types are read from the React source during the registry build.

Native element or underlying primitive props are inherited where declared, including accessible labels, event handlers and refs.

TextRibbonProps

Prop	Type	Required
`draggable` Horizontal drag, arrow keys and Home directly position the ribbon.	`Booleanish \| undefined`	No
`text`	`string`	Yes
`shape`	`TextRibbonShape`	No
`auto` Automatic movement is opt-in. Pair it with a visible pause control.	`boolean`	No
`paused`	`boolean`	No
`speed` SVG units per second, bounded to 0–120.	`number`	No
`direction` Supply direction/onDirectionChange to control direction after dragging.	`TextRibbonDirection`	No
`onDirectionChange`	`(direction: TextRibbonDirection) => void`	No
`curvature` Wave and arch curvature, from a straight path (0) to the full curve (1).	`number`	No
`hoverBehavior`	`"pause" \| "slow" \| "quicken" \| "none"`	No
`fontSize` Size in the 640 × 280 SVG, bounded to 24–56. The entire ribbon scales responsively.	`number`	No
`separator`	`string`	No
`guide`	`boolean`	No
`tone`	`"ink" \| "pink" \| "olive" \| "blue" \| "yellow"`	No

Accessibility

Keep critical prose in ordinary readable text. A curved ribbon works best as an optional expressive detail.
Focus pauses movement. Hover pauses by default; slow and quicken are optional. Reduced motion, local data-flow=off, data-no-glide, shared Motion Off, Flow Off, hidden documents and offscreen views suspend automatic travel.
The SVG is hidden from assistive technology. The complete supplied phrase remains in the accessible DOM, including when motion is disabled.

States and appearance

stillmovingpausedreversedemptyreduced-motiondraggingkeyboardhover-paced

For conditional content, keep a MotionPresence boundary around keyed MotionSurface children. The shared entrance and exit states work with native primitives and respect your motion preference.

Try pointer and keyboard interaction, and switch the appearance control in the navigation to compare light and dark mode. Motion respects reduced motion preferences.