Toast Card
A Remotion video component that animates a toast notification with customizable entry, visible, and exit phases, and flexible positioning.
Installation
CLI
Manual
Create a new file, for example, at src/components/clippkit/toast-card.tsx
(or your preferred location) and paste the following code into it.
Usage
Once the ToastCard
component is added to your project (either via CLI or Manually), you can integrate it into your Remotion project by importing it and using it within a Composition
or directly with the @remotion/player
.
Prerequisite
Ensure you have a Remotion project set up. If not, please refer to the Remotion documentation to get started.
Project Structure Example
Here’s an example folder layout showing where to place the component and how it fits into a typical Remotion project
Define a Composition
In your Remotion project's entry file (commonly src/Root.tsx
, src/index.tsx
, app/main.tsx
), import ToastCard
and define a Composition
.
API Reference
The component exported as ToastCard
(e.g., from apps/docs/registry/default/ui/toast-card.tsx
or your project's component path) accepts the following props to customize its animation and appearance:
Prop | Type | Default Value | Description |
---|---|---|---|
title | string | "Success!" | The main title text for the toast. |
message | string | "Your action was completed." | The secondary message text for the toast. |
titleColor | string | "var(--card-foreground)" | CSS color for the title text. |
messageColor | string | "var(--card-foreground)" | CSS color for the message text. |
backgroundColor | string | "var(--card)" | CSS background for the toast card. |
titleFontSize | string | "1.1rem" | CSS font size for the title. |
messageFontSize | string | "0.9rem" | CSS font size for the message. |
width | string | "300px" | CSS width of the toast card. |
padding | string | "15px 20px" | CSS padding inside the toast card. |
borderRadius | string | "10px" | CSS border radius of the toast card. |
borderColor | string | "var(--border)" | CSS border color of the toast card. |
borderWidth | string | "1px" | CSS border width of the toast card. |
borderStyle | "solid" | "dashed" | "dotted" | "solid" | CSS border style of the toast card. |
boxShadow | string | "0 4px 12px rgba(0,0,0,0.1)" | CSS box shadow for the toast card. |
positionPreset | PositionPreset | "bottom-left" | Predefined position: "bottom-left" , "bottom-right" , "top-left" , "top-right" , "center" . |
margin | string | "20px" | Outer margin for the toast when not centered (e.g., distance from screen edges). |
entryDurationInFrames | number | 30 | Duration of the entry animation (slide-in, fade-in) in frames. |
visibleDurationInFrames | number | 120 | Duration the toast remains fully visible on screen in frames. |
exitDurationInFrames | number | 30 | Duration of the exit animation (slide-out, fade-out) in frames. |
damping | number | 15 | Damping for the spring animations. Controls how quickly oscillations die down. |
mass | number | 0.8 | Mass for the spring animations. |
stiffness | number | 120 | Stiffness for the spring animations. |
fontFamily | string | "Inter, sans-serif" | CSS font family for the text in the toast. |
slideOffset | number | 50 | The distance (in pixels) the toast slides during entry/exit animations (for non-center positions). |
Type Definition for PositionPreset