Turntable

$ pnpm dlx shadcn@latest add @remocn/turntable

Usage

Turntable builds a card in CSS 3D: a front face, a back face and four edge slabs, sized like a credit card at 46% of the frame height. It spins around its vertical axis on a slow-in, slow-out curve. Each face is shaded from a key light at the front left, a sheen slides across as it turns, and a soft floor shadow narrows and fades when the card is edge-on. With no children it shows a red front with a mark and a light back.

import { Turntable } from "@/components/remocn/turntable";
 
export const CardSpin = () => <Turntable />;

turns sets full rotations, so turns={0.5} ends on the back face and turns={2} spins twice in the same time. tilt looks down on the card in degrees; negative values look up at it. thickness is the card depth in px at 720p.

Your own faces

children is the front face and back is the back face. Each face clips its content to the rounded card, so fill it edge to edge. The face font size is 1/30 of the card height, so content sized in em scales with the composition.

import { AbsoluteFill } from "remotion";
import { Turntable } from "@/components/remocn/turntable";
 
export const PassSpin = () => (
  <Turntable
    turns={1}
    edgeColor="#2E2A8C"
    back={<AbsoluteFill style={{ background: "#F5F5F5" }} />}
  >
    <AbsoluteFill
      style={{
        background: "linear-gradient(135deg, #4F46E5, #7C3AED)",
        padding: "2.5em",
        color: "white",
        fontSize: "1.6em",
        fontWeight: 700,
      }}
    >
      Pro Pass
    </AbsoluteFill>
  </Turntable>
);

Set edgeColor to a darker shade of your front so the card edge reads as the same material.

Timing

At 30 fps and speed={1}:

speed scales the spin, so speed={2} ends at frame 32.