1rem
3.5rem

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
Live Playground ยท Edit and see changes instantly
Or edit with AI support by
import {TextFlower} from "@/components/phucbm/text-flower";

export default function Example() {
    const texts = [
        "๐Ÿง 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.",
    ];
    return (
        <TextFlower texts={texts}/>
    );
}

Installation

pnpm dlx shadcn@latest add @phucbm/text-flower

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
3.5rem
1rem