Docs
Smooth Generate Text

Smooth Generate Text

Displays a beautiful Smooth Generate Text.

Hey Bros! I’m excited to introduce BuouUI, a new UI library that I’ve been working on. If you’re familiar with shadcn, you’ll know it’s a fantastic tool for building visually appealing websites with a strong focus on component design. However, one area where I found it lacking was in the animation department. To address this, I decided to integrate and extend Framer Motion, a popular animation library, to add a whole new layer of interactivity and polish.

Installation

Install the following dependencies:

npm install framer-motion

Copy and paste the cn util code into your project.

import { ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"
 
 
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

Copy and paste the Generate Text code into your project.

API Reference

Props

PropTypeDescription
wordsstringGenerate text words.
classNamestringAdditional classes for the Text.
filterbooleanIf true, apply blur effect on words
durationnumberanimated duration

Usage

const words = `Hey Bros!
I’m excited to introduce BuouUI, a new UI library that I’ve been working on. If you’re familiar with shadcn, you’ll know it’s a fantastic tool for building visually appealing websites with a strong focus on component design. However, one area where I found it lacking was in the animation department. To address this, I decided to integrate and extend Framer Motion, a popular animation library, to add a whole new layer of interactivity and polish.
`
 
export default function TextGenerateEffectDemo() {
  return <TextGenerateEffect words={words} />
}
SkeletonSmooth Fliping Number