Clippkit

Card Flip?

0:00 / 0:04

Installation

CLI

COMING SOON

Installation via npx shadcnui install clipkittt@card-flip isn't quite ready yet. For now, please follow the manual installation instructions.

Eventually users will be able to run the following command:

npx shadcn@latest add "https://clippkit/r/card-flip"

The GitHub task can be found here.

Manual

Create a new file, for example, at src/components/card-flip.tsx (or your preferred location) and paste the following code into it.

src/components/card-flip.tsx

"use client";

import { spring, useCurrentFrame, useVideoConfig } from "remotion";

interface CardFlipProps {
  frontText?: string;
  backText?: string;
  frontTextColor?: string;
  backTextColor?: string;
  frontBackgroundColor?: string;
  backBackgroundColor?: string;
  fontSize?: string;
  width?: string;
  height?: string;
  borderRadius?: string;
  durationInFrames?: number;
  damping?: number;
  mass?: number;
  stiffness?: number;
}

export default function CardFlip({
  frontText = "Remotion 👋",
  backText = "Back",
  frontTextColor = "white",
  backTextColor = "white",
  frontBackgroundColor = "linear-gradient(45deg, #1e3a8a, #3b82f6)",
  backBackgroundColor = "linear-gradient(45deg, #1e3a8a, #3b82f6)",
  fontSize = "2rem",
  width = "300px",
  height = "400px",
  borderRadius = "20px",
  durationInFrames = 60,
  damping = 15,
  mass = 0.5,
  stiffness = 100,
}: CardFlipProps) {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  const rotation = spring({
    frame,
    fps,
    from: 0,
    to: 360,
    durationInFrames,
    config: {
      damping,
      mass,
      stiffness,
    },
  });

  return (
    <div
      style={{
        position: "absolute",
        top: "50%",
        left: "50%",
        perspective: "1000px",
        transform: "translate(-50%, -50%)",
      }}
    >
      <div
        style={{
          width,
          height,
          transform: `rotateY(${rotation}deg)`,
          transformStyle: "preserve-3d",
          position: "relative",
        }}
      >
        <div
          style={{
            position: "absolute",
            width: "100%",
            height: "100%",
            backfaceVisibility: "hidden",
            background: frontBackgroundColor,
            borderRadius,
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
            fontSize,
            fontWeight: "bold",
            color: frontTextColor,
          }}
        >
          {frontText}
        </div>
        <div
          style={{
            position: "absolute",
            width: "100%",
            height: "100%",
            backfaceVisibility: "hidden",
            background: backBackgroundColor,
            borderRadius,
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
            fontSize,
            fontWeight: "bold",
            color: backTextColor,
            transform: "rotateY(180deg)",
          }}
        >
          {backText}
        </div>
      </div>
    </div>
  );
}

Update the import paths in your Remotion compositions if you placed the file in a different location than shown in the usage examples.

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.

Define a Composition:

In your Remotion project's entry file (commonly src/Root.tsx or src/index.ts), import CardFlip and define a Composition.

src/main.tsx (or equivalent)

import { Player } from "@remotion/player";

import CardFlip from "../ui/card-flip"; // Adjust path as necessary

export default function CardFlipScene() {
  const cardFlipProps = {
    frontText: "Hello From Remotion!",
    backText: "Card Back!",
    frontTextColor: "#FFF",
    backTextColor: "#FFF",
    frontBackgroundColor: "linear-gradient(45deg, #7e22ce, #a21caf)",
    backBackgroundColor: "linear-gradient(45deg, #166534, #15803d)",
    fontSize: "1.8rem",
    width: "320px",
    height: "420px",
    borderRadius: "25px",
    durationInFrames: 90,
    damping: 18,
    mass: 0.6,
    stiffness: 90,
  };

  return (
    <Player
      component={CardFlip}
      inputProps={cardFlipProps}
      durationInFrames={120} // Total duration of the player timeline
      compositionWidth={500}
      compositionHeight={500} // Square aspect ratio to see the card flip nicely
      fps={30}
      style={{
        width: "100%",
        height: "100%",
      }}
      autoPlay
      controls
      loop
    />
  );
}

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.

Card Flip

Installation

CLI

Manual

Usage

API Reference

On this page