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
1
Installation
$ pnpm dlx shadcn@latest add @framecn/toast-notification
Usage
import { ToastNotification } from "@/components/framecn/toast-notification";<ToastNotification />API Reference
ToastNotification
| Prop | Type | Default |
|---|---|---|
title | string | "Deployment successful" |
message | string | "Your changes are live at framecn.dev" |
variant | ToastVariant | "success" |
background | string | "#fafafa" |
cardColor | string | "white" |
textColor | string | "#171717" |
mutedColor | string | "#71717a" |
speed | number | 1 |
fps | number | FPS |
durationInFrames | number | DURATION_IN_FRAMES |
className | string | - |
Notes
Three-phase animation
The toast animates through three phases: spring-based enter, a hold period,
and interpolate-based exit. Use durationInFrames to control the overall
timing.
Anchored absolutely
The toast is positioned absolutely at the bottom-right of the frame. Ensure the parent has a defined size for correct placement.