showcase

1import { AbsoluteFill } from "remotion";
2import { TransitionSeries } from "@remotion/transitions";
3import { transitionFade } from "@/remotion/primitives/transition-fade";
4import { DURATION } from "@/remotion/lib/motion-tokens";
5import { EndCard } from "@/remotion/scenes/end-card";
6import { FeatureList } from "@/remotion/scenes/feature-list";
7import { StatCard } from "@/remotion/scenes/stat-card";
8import { TitleCard } from "@/remotion/scenes/title-card";
9 
10const COLORS = {
11  bg: "#080810",
12  accent: "#e8b86d",
13  featureBg: "#0c0c14",
14  statBg: "#0a1014",
15  statAccent: "#2dd4bf",
16  endBg: "#080810",
17  endAccent: "#f59e0b",
18} as const;
19 
20const SCENE_DURATIONS = {
21  title: 60,
22  features: 90,
23  stat: 75,
24  end: 60,
25} as const;
26 
27const FADE = transitionFade({ durationInFrames: DURATION.fast });
28 
29export type ShowcaseProps = {
30  title?: string;
31  subtitle?: string;
32  featureTitle?: string;
33  featureItems?: string[];
34  statValue?: number;
35  statLabel?: string;
36  statSuffix?: string;
37  ctaLabel?: string;
38  ctaUrl?: string;
39};
40 
41export const Showcase: React.FC<ShowcaseProps> = ({
42  title = "Product story",
43  subtitle = "Install source, compose scenes, render on your timeline",
44  featureTitle = "Three layers you own",
45  featureItems = [
46    "Motion primitives you can edit",
47    "Scenes for hooks, charts, and captions",
48    "Compositions that wire the full story",
49  ],
50  statValue = 3,
51  statLabel = "Runtime dependencies",
52  statSuffix = "",
53  ctaLabel,
54  ctaUrl,
55}) => {
56  return (
57    <AbsoluteFill
58      style={{
59        backgroundColor: COLORS.bg,
60        backgroundImage:
61          "radial-gradient(ellipse 80% 60% at 20% 20%, rgba(232,184,109,0.1), transparent 50%), radial-gradient(ellipse 60% 50% at 80% 80%, rgba(45,212,191,0.08), transparent)",
62      }}
63    >
64      <TransitionSeries>
65        <TransitionSeries.Sequence durationInFrames={SCENE_DURATIONS.title}>
66          <TitleCard
67            title={title}
68            subtitle={subtitle}
69            backgroundColor={COLORS.bg}
70            accentColor={COLORS.accent}
71          />
72        </TransitionSeries.Sequence>
73        <TransitionSeries.Transition {...FADE} />
74        <TransitionSeries.Sequence durationInFrames={SCENE_DURATIONS.features}>
75          <FeatureList
76            title={featureTitle}
77            items={featureItems}
78            backgroundColor={COLORS.featureBg}
79            accentColor={COLORS.accent}
80          />
81        </TransitionSeries.Sequence>
82        <TransitionSeries.Transition {...FADE} />
83// … truncated