Captions
Compositions
Core Primitives
Transitions
Typography
- Blur Reveal
- Staggered Fade Up
- Masked Slide Reveal
- Tracking In
- Inline Highlight
- Marker Highlight
- Shimmer Sweep
- Typewriter
- Text Fade Replace
- Slot Machine Roll
- Infinite Marquee
- Perspective Marquee
- Matrix Decode
- RGB Glitch Text
- Strikethrough Replace
- Blur Out Up
- Bottom Up Letters
- Top Down Letters
- Per Character Rise
- Soft Blur In
- Micro Scale Fade
- Scale Down Fade
- Focus Blur Resolve
- Spring Scale In
- Line by Line Slide
- Mask Reveal Up
- Short Slide Right
Customize
72
600
1
Installation
$ pnpm dlx shadcn@latest add @framecn/per-word-crossfade
Usage
import { PerWordCrossfade } from "@/components/framecn/per-word-crossfade";<PerWordCrossfade fromText="Hello world" toText="New world" />API Reference
PerWordCrossfade
| Prop | Type | Default |
|---|---|---|
fromText | string | "Hello world" |
toText | string | "New world" |
fontSize | number | 72 |
color | string | "#171717" |
fontWeight | number | 600 |
speed | number | 1 |
fps | number | 30 |
durationInFrames | number | 90 |
className | string | - |
Notes
Word-level stagger
Each word in the exit phrase fades out separately, followed by each word in the entry phrase fading in. The enter sequence overlaps slightly with the tail end of the exit for a more fluid feel.