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
    Levitate

    Levitate

    Displays a levitate component.

    Notifications

    You have 3 unread messages.

    CN

    Installation

    Copy and paste the following code into your project.

    If you have already used our Card Component, Please skip this step

    Otherwise you need copy the following code

    If you have already used our Avatar Component, Please skip this step

    Otherwise you need copy the following code

    Copy and paste the Levitate code into your project.

    Update tailwind.config.js

    Add the following animations to your tailwind.config.js file:

    tailwind.config.js
    /** @type {import('tailwindcss').Config} */
    module.exports = {
      theme: {
        extend: {
           keyframes: {
                levitate: {
                    "0%": {
                        transform: "translateY(0)",
                    },
                    "30%": {
                        transform: "translateY(-10px)",
                    },
                    "50%": {
                        transform: "translateY(4px)",
                    },
                    "70%": {
                        transform: "translateY(-15px)",
                    },
                    "100%": {
                        transform: "translateY(0)",
                    },
                },
            },
           animation: {
            levitate: "levitate 5s ease infinite",
          },
        },
      },
    }
    Animotion In View CardReorder Card