Spinning Text

Easily animate text circularly. Customize the animation with variants and transitions.

Easily animate text circularly. Customize the animation with variants and transitions.

Examples

npx shadcn@latest add "https://components.dylanwlim.com/c/spinning-text.json"

Prop	Type	Default	Description
children	`ReactElement`		The text content to be animated in a circular motion.
style	`CSSProperties`	`{}`	Custom styles for the text container.
duration	`number`	`10`	The duration of the full circular rotation animation.
className	`string`		A custom class name for the text container.
reverse	`boolean`	`false`	Determines if the animation should rotate in reverse.
fontSize	`number`	`1`	The font size of the text being animated in rem.
radius	`number`	`5`	The radius of the circular path for the text animation.
transition	`Transition`		Custom transition effects for the animation.
variants	`{ container?: Variants; item?: Variants; }`		Variants for container and item animations.

Initiated by @ibtihelbs

On This Page

Build with DWL Components

Use the copied registry, charts, blocks, and create tools in one place.

Start from the DWL Components create flow and customize from there.