Skip to Content
ComponentsText Flower

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

Examples

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.

Props

NameTypeDefault
textsstring[]

Array of text strings to display as petals around the circular wheel. Each string represents one petal.

markersboolean

Whether to show position markers for debugging and layout visualization.

false
wheelContainerClassstring

Additional class name(s) for the outer wheel container element. Useful for control the sticky length.

undefined
wheelPositionClassstring

Additional class name(s) for the wheel element. Useful for customizing position and size of the flower.

undefined
petalClassstring

Additional class name(s) for each individual petal element. Useful for customizing text style or hover effects.

undefined
Last updated on