---
title: Text Flip
description: Text with flipping effect
author: AashishKatila
---

<ComponentPreview name="text-text-flip--docs" />

## Installation

<Steps>

<Step>Update `tailwind.config.js`</Step>

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

```js
module.exports = {
  theme: {
    extend: {
      colors: {
        foreground: "hsl(var(--foreground))",
      },
      keyframes: {
        "flip-words": {
          "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-words": "flip-words 8s infinite",
      },
    },
  },
};
```

<Step>Run the following command</Step>

It will create a new file called `text-flip.tsx` inside the `components/animata/text` directory.

```bash
mkdir -p components/animata/text && touch components/animata/text/text-flip.tsx
```

<Step>Paste the code</Step>

Open the newly created file and paste the following code:

```jsx file=<rootDir>/animata/text/text-flip.tsx

```

</Steps>

## Credits

Built by [Aashish Katila](https://github.com/AashishKatila)
