Card Flip
A Remotion video component that animates a card flipping in 3D space.
Installation
CLI
Manual
Create a new file, for example, at src/components/clippkit/card-flip.tsx
(or your preferred location) and paste the following code into it.
Usage
Once the CardFlip
component is added to your project (either via CLI or Manually), you can integrate it into your Remotion project by importing it and defining a Composition
.
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 CardFlip
and define a Composition
.
API Reference
The component exported as CardFlip
(e.g., from apps/docs/registry/default/ui/card-flip.tsx
or your project's component path) accepts the following props to customize its animation and appearance:
Prop | Type | Default Value | Description |
---|---|---|---|
frontText | string | "Remotion 👋" | The text content to display on the front of the card. |
backText | string | "Back" | The text content to display on the back of the card. |
frontTextColor | string | "white" | The color of the text on the front of the card. Accepts any valid CSS color value. |
backTextColor | string | "white" | The color of the text on the back of the card. Accepts any valid CSS color value. |
frontBackgroundColor | string | "linear-gradient(45deg, #1e3a8a, #3b82f6)" | The background of the front of the card. Accepts any valid CSS background value. |
backBackgroundColor | string | "linear-gradient(45deg, #1e3a8a, #3b82f6)" | The background of the back of the card. Accepts any valid CSS background value. |
fontSize | string | "2rem" | The font size of the text on both sides of the card. Accepts any valid CSS font-size value. |
width | string | "300px" | The width of the card. Accepts any valid CSS width value. |
height | string | "400px" | The height of the card. Accepts any valid CSS height value. |
borderRadius | string | "20px" | The border radius of the card. Accepts any valid CSS border-radius value. |
durationInFrames | number | 60 | The duration of the flip animation in frames. |
damping | number | 15 | The damping amount for the spring animation. Controls how quickly oscillations die down. |
mass | number | 0.5 | The mass for the spring animation. |
stiffness | number | 100 | The stiffness for the spring animation. |