Floating Card
A Remotion video component that animates a card floating up and down with a spring-based entry.
Installation
CLI
Manual
Create a new file, for example, at src/components/clippkit/floating-card.tsx
(or your preferred location) and paste the following code into it.
Usage
Once the FloatingCard
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 FloatingCard
and define a Composition
.
API Reference
The component exported as FloatingCard
(e.g., from apps/docs/registry/default/ui/floating-card.tsx
or your project's component path) accepts the following props to customize its animation and appearance:
Prop | Type | Default Value | Description |
---|---|---|---|
text | string | "Floating Card" | The text content to display on the card. |
textColor | string | "var(--card-foreground)" | The color of the text on the card. Accepts any valid CSS color value. |
backgroundColor | string | "var(--card)" | The background of the card. Accepts any valid CSS background value. |
fontSize | string | "1.25rem" | The font size of the text on the card. Accepts any valid CSS font-size value. |
width | string | "200px" | The width of the card. Accepts any valid CSS width value. |
height | string | "280px" | The height of the card. Accepts any valid CSS height value. |
borderRadius | string | "15px" | The border radius of the card. Accepts any valid CSS border-radius value. |
borderColor | string | "var(--ring)" | The border color of the card. Accepts any valid CSS color value. |
borderWidth | string | "1px" | The border width of the card. Accepts any valid CSS border-width value. |
borderStyle | string | "solid" | The border style of the card. Can be "solid" , "dashed" , or "dotted" . |
durationInFrames | number | 30 | The duration of the entry spring animation in frames. |
damping | number | 12 | The damping amount for the entry spring animation. Controls how quickly oscillations die down. |
mass | number | 0.5 | The mass for the entry spring animation. |
stiffness | number | 100 | The stiffness for the entry spring animation. |
boxShadow | string | "0 1px 3px var(--border), ..." | The box shadow for the card. Accepts any valid CSS box-shadow value. |
floatAmplitude | number | 10 | The amplitude (in pixels) of the vertical floating motion. |
floatSpeed | number | 30 | A divisor for the frame in the sine wave calculation; smaller values mean faster floating. |