Bloom Text

Text with blooming flower animation effect

Installation


pnpm dlx shadcn@latest add @ruixenui-pro/bloom-text

Props

Prop	Type	Default	Description
`children`	`React.ReactNode`	required	Content to display
`className`	`string`	`undefined`

Apple Mega Nav Bottom Menu

On This Page

Features

Blooming flower animation - Flowers appear with staggered timing around the text
Edge-biased distribution - Flowers cluster naturally around edges
Reduced motion support - Respects prefers-reduced-motion preference
Customizable flowers - Control count, size, and image source
Custom font option - Use Dancing Script or your own font
Polymorphic element - Render as any heading or text element

Required Assets

Add a flower image to your /public folder. The default path is /flower.png.

Usage

Basic

import { BloomText } from "@/components/ui/bloom-text"
 
export default function Example() {
  return <BloomText>Love Design</BloomText>
}

Custom Flower Image

<BloomText flowerSrc="/images/rose.png" flowerCount={60}>
  Beautiful
</BloomText>

Custom Styling

<BloomText
  as="h2"
  textColor="#1a1a1a"
  backgroundClassName="bg-gradient-to-br from-pink-100 to-rose-200"
  useDefaultFont={false}
  className="font-serif"
>
  Elegant Text
</BloomText>

Reduced Flower Count

<BloomText flowerCount={40} flowerSize={120}>
  Subtle Effect
</BloomText>