Docs
Smooth Fliping Text

Smooth Fliping Text

Displays a beautiful Smooth Fliping Text.

Make your website

more

fantasticlovefireawesomefantastic

Installation

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: {
        "flip-text": {
          "10%": { transform: "translateY(-112%)" },
          "25%": { transform: "translateY(-100%)" },
          "35%": { transform: "translateY(-212%)" },
          "50%": { transform: "translateY(-200%)" },
          "60%": { transform: "translateY(-312%)" },
          "75%": { transform: "translateY(-300%)" },
          "85%": { transform: "translateY(-412%)" },
          "100%": { transform: "translateY(-400%)" },
        },
      },
      animation: {
        "flip-text": "flip-text 8s infinite",
      },
    }
  }
}

Copy and paste the Fliping Text code into your project.

API Reference

Props

PropTypeDescription
wordsstring[]An array of words to be displayed with flip animation.
classNamestringOptional custom class for the container, defaults to box-content flex flex-col gap-4 text-3xl font-semibold.
textClassNamestringOptional class for the text, defaults to text-foreground. Can be used to style the text color or font.
containerClassNamestringOptional class for the container element, defaults to flex flex-col overflow-hidden. Controls the layout of the container.
flipAnimationClassstringOptional custom animation class for the text flip effect, defaults to animate-flip-text. Customize this to apply different animations.

Usage

export default function Demo() {
  return (
    <div className="p-6">
      <TextFlip
        words={["fantastic", "love", "fire", "awesome", "fantastic"]}
        className="box-content flex flex-col gap-4 text-4xl font-bold"
        flipAnimationClass="animate-flip-text custom-flip-animation"
      />
    </div>
  )
}
Smooth Fliping NumberFliping Text