A line of text streams along a wave that slowly breathes and shifts, with a dotted guide underneath and soft fades at both ends. Drawn in SVG, so it scales cleanly to any width.
npx shadcn@latest add https://hyperblur.dev/r/text-path-flow.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/text-path-flow.tsx.
import { TextPathFlow } from "@/components/hyperblur/text-path-flow"
<TextPathFlow text="Free shipping on orders over $80" />| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | required | Text that travels along the path. It repeats as needed to fill the length. |
| separator | string | " • " | String placed between repeats. |
| speed | number | 60 | Travel speed in viewBox units per second. |
| amplitude | number | 28 | Height of the wave in viewBox units. |
| waves | number | 1.5 | Number of wave periods across the width. |
| fontSize | number | 34 | Font size in viewBox units. |
| width | number | 600 | Width of the viewBox. The SVG always fills its container. |
| height | number | 160 | Height of the viewBox. |
| accent | string | "#7fb3ff" | Color at both ends of the text gradient and of the guide. |
| guide | boolean | true | Show the dotted guide that follows the wave. |
| reverse | boolean | false | Stream from left to right instead. |