Writing Text Effect

Beautiful SVG text animations with 9 different styles using Framer Motion.

Live Preview

Customize and preview your animation

npx shadcn@latest add https://raw.githubusercontent.com/rimu-7/shadcn-components/main/public/registry/text-writing-effect.json

JSTS

Props

text

Required

string

The text to animate

animationStyle

Default: write

AnimationStyle

Animation type: write, reveal, bounce, wave, glitch, typewriter, fade, scale, slide

fontSize

Default: 72

number | string

Font size in pixels or tailwind preset

speed

Default: 2

number

Animation duration in seconds

color

Default: currentColor

string

Text color

fontClassName

string

Font class from next/font

loop

Default: false

boolean

Loop animation infinitely

delay

Default: 0

number

Delay before animation starts

gradient

Default: false

boolean

Enable gradient fill