Flipping Text

Text that flips between different words

$ npx @hritik-sharmaa/repeat-ui add text-effect-flipping-text
Category
Text Effect
Added
Aug 14, 2025
Version
2.0.0
Packages
motion
Flavors
TS · JS · Tailwind · CSS
Live preview
Follow along
Customize
48px
0.8s
import TextEffectFlippingText from "@/components/repeat-ui/text-effect-flipping-text/preview";

<TextEffectFlippingText text="Follow along" />

Installation

  1. Run the command

    Adds the files and installs any packages they need. Works with npm, pnpm, yarn and bun.

    $ npx @hritik-sharmaa/repeat-ui add text-effect-flipping-text --variant ts-tailwind

  2. Use it

    The files are in components/repeat-ui/text-effect-flipping-text/.

    import TextEffectFlippingText from "@/components/repeat-ui/text-effect-flipping-text/preview";

export default function Page() {
  return <TextEffectFlippingText />;
}

Props

PropTypeDefaultDescriptionOptions
textstring"Follow along"The word that flips on hover.-
socialPlatformsSocialPlatform[]["linkedin", "instagram", "facebook"]Icons beside the text: "linkedin", "instagram" or "facebook".-
layout"text-left" | "text-right""text-left"Which side the text sits on.text-left | text-right
colorstring"currentColor"Text colour.-
fontSizenumber48Text size in pixels.-
durationnumber0.8Seconds for one flip.-
classNamestring""Extra classes for the root element.-

More text effect

See all
Flow TextSmooth flowing text animation
Pop TextText that pops with scale animations
Split Reveal TextSplit and reveal text letter by letter