Skip to main content

cube()

note

This is a paid item which you can buy here.

A presentation where both the entering and exiting scene rotate with 3D perspective.

A
B

Example​

CubeTransition.tsx
tsx
import { linearTiming, TransitionSeries } from "@remotion/transitions";
import { cube } from "@remotion-dev/cube-presentation";
 
const BasicTransition = () => {
  return (
    <TransitionSeries>
      <TransitionSeries.Sequence durationInFrames={40}>
        <Letter color="#0b84f3">A</Letter>
      </TransitionSeries.Sequence>
      <TransitionSeries.Transition
        presentation={cube({ direction: "from-left" })}
        timing={linearTiming({ durationInFrames: 30 })}
      />
      <TransitionSeries.Sequence durationInFrames={60}>
        <Letter color="pink">B</Letter>
      </TransitionSeries.Sequence>
    </TransitionSeries>
  );
};
CubeTransition.tsx
tsx
import { linearTiming, TransitionSeries } from "@remotion/transitions";
import { cube } from "@remotion-dev/cube-presentation";
 
const BasicTransition = () => {
  return (
    <TransitionSeries>
      <TransitionSeries.Sequence durationInFrames={40}>
        <Letter color="#0b84f3">A</Letter>
      </TransitionSeries.Sequence>
      <TransitionSeries.Transition
        presentation={cube({ direction: "from-left" })}
        timing={linearTiming({ durationInFrames: 30 })}
      />
      <TransitionSeries.Sequence durationInFrames={60}>
        <Letter color="pink">B</Letter>
      </TransitionSeries.Sequence>
    </TransitionSeries>
  );
};

API​

The cube() function does take an object with the following properties:

direction​

One of from-left, from-right, from-top, from-bottom.

tsx
import { CubeDirection } from "@remotion-dev/cube-presentation";
 
const flipDirection: CubeDirection = "from-left";
tsx
import { CubeDirection } from "@remotion-dev/cube-presentation";
 
const flipDirection: CubeDirection = "from-left";

perspective?​

The CSS perspective of the flip animation. Defaults to 1000.

See also​