BuouNext
  • Features
  • DocumentsNew
  • BrutalUINew
  • ShowcaseHot
  • Pricing
  • Blog

    Getting Started

    Introduction

    BuouNext Instruction

    InstallationRun BuouNextProject StructureComponentsAuthenticationEmailAPI CallsDatabasePaymentSEO OptimizationHeadless CMSContact

    AI Instruction

    AI ImageNewAI ChatbotNewAI SearchNewAI NotionNew

    Components

    Super ClockNewFloating DockNewAI Image CompareNewAvatar ListNewClockNewDarkModeNewStepperNewRotation AvatarNewButton with TrailNewDotNewGridNewCounter CardNewMarquee CardNewProfile CardNewBento gridNewBorder Trail CardNewBuouNext FeaturesNewColor CardNewMouse FollowingNewColor GridNewAnimotion In View CardNewLevitate CardNewReorder CardNewGenerate TextNewSmooth Fliping NumberNewSmooth Fliping TextNewSmooth Typing TextNewTyping TextNewWindow Typing TextNewFade In OutNewText DropNewScalingNew
    Docs
    Smooth Generate Text

    Smooth Generate Text

    Displays a beautiful Smooth Generate Text.

    Loading...

    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} />
}
    Reorder CardSmooth Fliping Number
    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.