Changelog — Eleven New Transitions

1import React from "react";
2import { AbsoluteFill, Easing, Img, Sequence, interpolate, spring, useCurrentFrame, useVideoConfig } from "remotion";
3import { demoAsset } from "@/lib/demo-assets";
4import {
5  TransitionSeries,
6  linearTiming,
7  type TransitionPresentation,
8  type TransitionPresentationComponentProps,
9} from "@remotion/transitions";
10import { loadFont as loadSans } from "@remotion/google-fonts/Manrope";
11import { loadFont as loadMono } from "@remotion/google-fonts/GeistMono";
12 
13import { ScaleDownFade } from "@/components/remocn/scale-down-fade";
14import { ShortSlideRight } from "@/components/remocn/short-slide-right";
15import { LineByLineSlide } from "@/components/remocn/line-by-line-slide";
16import { BlurOutUp } from "@/components/remocn/blur-out-up";
17 
18import { whipPan } from "@/components/remocn/whip-pan";
19import { pushThrough } from "@/components/remocn/push-through";
20import { focusPull } from "@/components/remocn/focus-pull";
21import { ditherDissolve } from "@/components/remocn/dither-dissolve";
22import { waveWipe } from "@/components/remocn/wave-wipe";
23import { grainDissolve } from "@/components/remocn/grain-dissolve";
24import { rippleZoom } from "@/components/remocn/ripple-zoom";
25import { warpDissolve } from "@/components/remocn/warp-dissolve";
26import { perlinDissolve } from "@/components/remocn/perlin-dissolve";
27import { smokeDissolve } from "@/components/remocn/smoke-dissolve";
28import { swirlDissolve } from "@/components/remocn/swirl-dissolve";
29 
30const { fontFamily: SANS_FAMILY } = loadSans("normal", {
31  subsets: ["latin"],
32  weights: ["400", "500"],
33});
34const { fontFamily: MONO_FAMILY } = loadMono("normal", {
35  subsets: ["latin"],
36  weights: ["400"],
37});
38 
39const SANS = `${SANS_FAMILY}, -apple-system, BlinkMacSystemFont, sans-serif`;
40const MONO = `${MONO_FAMILY}, ui-monospace, SFMono-Regular, monospace`;
41 
42const OBSIDIAN = "#141318";
43const INK = "#f2f2f2";
44const MUTED = "rgba(242,242,242,0.62)";
45const FAINT = "rgba(242,242,242,0.4)";
46const LIME = "#C3E88D";
47 
48const clampOpts = {
49  extrapolateLeft: "clamp" as const,
50  extrapolateRight: "clamp" as const,
51};
52 
53// ---------------------------------------------------------------------------
54// Scene timings (frames @ 30fps). Transitions overlap the adjacent scenes.
55// ---------------------------------------------------------------------------
56const S_HOOK = 100;
57const S_INTRO = 110;
58const S_VALUE = 170;
59const S_INSTALL = 152;
60const S_OUTRO = 170;
61 
62// … truncated