Container Text Flip

A container that flips through words, animating the width.

Install using CLI

npm
pnpm
bun
yarn
npx shadcn-vue@latest add "https://inspira-ui.com/r/container-text-flip.json"

Install Manually

Copy and paste the following code

ContainerTextFlip.vue

Example

Standard

Hero section with animation

API

Prop NameTypeDefaultDescription
wordsstring[]["better", "modern", "beautiful", "awesome"]Array of words to cycle through in the animation
intervalnumber3000Time in milliseconds between word transitions
animationDurationnumber700Duration of the transition animation in milliseconds
classstring``Additional CSS classes to apply to the container
textClassstring``Additional CSS classes to apply to the text

Credits

Colourful Text
A text component with various colours, filter and scale effects.
Flip Words
A component that flips through a list of words.