Component

Animated Text

Word carousel and typewriter text animation components. Uses the headless @refraction-ui/animated-text core.

Examples

Word carousel rotates words; typewriter types character by character.

Word Carouselinnovative

Typewriter

Installation

$pnpm add @refraction-ui/react-animated-text

Usage

tsx

import { AnimatedText, TypewriterText } from '@refraction-ui/react-animated-text'
export function MyComponent() {
  return (
    <div>
      <AnimatedText words={['fast', 'beautiful', 'accessible']} />
      <TypewriterText text="Hello, World!" />
    </div>
  )
}

Props

Prop	Type	Default	Description
`words (AnimatedText)`	`string[]`	--	Array of words to cycle through.
`text (TypewriterText)`	`string`	--	Text to type out character by character.
`className`	`string`	--	Additional CSS classes.