Weave Text

Text filled with a slow-drifting gradient, woven from a palette you control.

Interfaces that move

Installation

npx shadcn@latest add @loomui/weave-text

Usage

import { WeaveText } from "@/components/ui/weave-text"

<h1 className="text-5xl font-semibold">
  Interfaces that <WeaveText>move</WeaveText>.
</h1>

It renders a <span> and inherits font size, weight and tracking from its parent. Drops into an existing heading without changing the layout.

Props

Prop	Type	Default	Description
`children`	`ReactNode`	none	The text to fill with the gradient.
`colors`	`string[]`	teal, blue	Gradient stops, left to right. The first is repeated at the end.
`duration`	`number`	`8`	Seconds for one full pass. Lower is faster.
`paused`	`boolean`	`false`	Render a static gradient with no animation.
`className`	`string`	none	Merged onto the span.

Any other <span> prop is forwarded.

Accessibility

The gradient is applied with background-clip: text, so the text stays real text, so it stays selectable, searchable, and readable by screen readers. The animation is disabled automatically under prefers-reduced-motion.