ai-composer-showcase

1import { loadFont } from "@remotion/google-fonts/Inter";
2import {
3  AbsoluteFill,
4  Easing,
5  Img,
6  interpolate,
7  spring,
8  staticFile,
9  useCurrentFrame,
10  useVideoConfig,
11} from "remotion";
12import { TransitionSeries } from "@remotion/transitions";
13import { transitionFade } from "@/remotion/primitives/transition-fade";
14import { getSafeAreaPadding, scaleFont } from "@/remotion/lib/layout";
15import { ChatGpt } from "@/remotion/scenes/chat-gpt";
16import { ClaudeChat } from "@/remotion/scenes/claude-chat";
17import { V0Composer } from "@/remotion/scenes/v0";
18import { ClaudeCode } from "@/remotion/scenes/claude-code";
19import { Opencode } from "@/remotion/scenes/opencode";
20 
21const { fontFamily } = loadFont("normal", {
22  weights: ["400", "500", "600", "700"],
23  subsets: ["latin"],
24});
25 
26const BG = "#080810";
27const PHOSPHOR = "#e8b86d";
28const ENTER_EASE = Easing.bezier(0.16, 1, 0.3, 1);
29const EXIT_EASE = Easing.in(Easing.cubic);
30 
31const FADE = transitionFade({ durationInFrames: 12 });
32 
33const TITLE_DUR = 50;
34const SCENE_DUR = 100;
35const END_DUR = 55;
36const END_EXIT_DUR = 18;
37 
38/* ─── shared pieces ─── */
39 
40const Logo: React.FC<{ size: number }> = ({ size }) => (
41  <Img src={staticFile("logo.svg")} style={{ width: size, height: size }} />
42);
43 
44const GlowDot: React.FC<{ delay: number; size: number }> = ({ delay, size }) => {
45  const frame = useCurrentFrame();
46  const { fps } = useVideoConfig();
47  const progress = spring({ frame, fps, delay, config: { damping: 20 } });
48  return (
49    <div
50      style={{
51        width: size,
52        height: size,
53        borderRadius: "50%",
54        background: PHOSPHOR,
55        opacity: progress,
56        boxShadow: `0 0 ${size * 2}px ${size * 0.5}px ${PHOSPHOR}55`,
57      }}
58    />
59  );
60};
61 
62/* ─── title card ─── */
63 
64const TitleCard: React.FC = () => {
65  const frame = useCurrentFrame();
66  const { fps, width } = useVideoConfig();
67 
68  const logoProgress = spring({ frame, fps, delay: 4, config: { damping: 14 } });
69  const titleProgress = spring({ frame, fps, delay: 10, config: { damping: 16 } });
70  const subProgress = spring({ frame, fps, delay: 18, config: { damping: 18 } });
71  const exitProgress = interpolate(frame, [TITLE_DUR - 14, TITLE_DUR], [1, 0], {
72    extrapolateLeft: "clamp",
73    extrapolateRight: "clamp",
74    easing: EXIT_EASE,
75  });
76 
77  return (
78    <AbsoluteFill
79      style={{
80        backgroundColor: BG,
81        justifyContent: "center",
82        alignItems: "center",
83        backgroundImage:
84// … truncated