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
Unknown component:
focus-blur-resolveInstallation
$ pnpm dlx shadcn@latest add @framecn/focus-blur-resolve
Usage
import { FocusBlurResolve } from "@/components/framecn/focus-blur-resolve";<FocusBlurResolve text="Focus blur resolve" />API Reference
FocusBlurResolve
| Prop | Type | Default |
|---|---|---|
text | string | "Focus blur resolve" |
blur | number | 14 |
fontSize | number | 72 |
color | string | "#171717" |
fontWeight | number | 600 |
speed | number | 1 |
fps | number | 30 |
durationInFrames | number | 90 |
className | string | - |
Notes
Blur affects keyframe names
The blur prop is embedded directly in the CSS keyframe name to ensure unique
keyframe definitions when multiple instances with different blur values render
on the same page.