Text Flower

Animated wheel of text lines that orbit around a central anchor.

Animation inspired by Suno’s about page: https://suno.com/about

0px

Make a song for my friend Earl.

Make a song about the moon.

Make a song about mom's cooking.

Make a song for lunch.

Make a song for your goldfish.

Make a song about the dentist.

Make a song about the Sunday Scaries.

Make a song for your workout.

Make a song for the hopdays.

Make a song about mitochondria.

Make a happy song.

Make a song that feels how you feel.

Make a song with Suno.

Installation

pnpm dlx shadcn@latest add https://ui.perxel.com/r/text-flower.json

0px

🐧 Watch the penguins waddle by.

🐘 See the elephants remember everything.

🐺 Hear the wolves howl at night.

🐙 Find the octopus hiding below.

🐆 Chase the cheetah running fast.

🦥 Meet the sloth moving slow.

🦚 Dance with the peacock's colors.

🐬 Swim with the dolphins playing.

🦋 Follow the butterflies floating.

🦉 Listen to the owl's wisdom.

🐝 Marvel at the hummingbird's speed.

🐻 Observe the bear catching fish.

🦎 Discover the chameleon's disguise.

Name	Type	Default
`texts`	`string[]` Array of text strings to display as petals around the circular wheel. Each string represents one petal.
`markers`	`boolean` Whether to show position markers for debugging and layout visualization.	`false`
`wheelContainerClass`	`string` Additional class name(s) for the outer wheel container element. Useful for control the sticky length.	`undefined`
`wheelPositionClass`	`string` Additional class name(s) for the wheel element. Useful for customizing position and size of the flower.	`undefined`
`petalClass`	`string` Additional class name(s) for each individual petal element. Useful for customizing text style or hover effects.	`undefined`