flatrender/services/remotion/src/Root.tsx

import { Composition } from "remotion";
import { ASPECTS } from "./lib/aspect";
import { TEMPLATES } from "./templates";
import { Three3DTest } from "./compositions/Three3DTest";
import { AssetSheet } from "./compositions/AssetSheet";
import { StoryScenes, STORY_SCENES_DURATION } from "./compositions/StoryScenes";
import { FlexStory, flexStorySchema, flexStoryDefaults, calcFlexStoryMetadata } from "./compositions/FlexStory";
import {
  IlluminatedCircles,
  illuminatedCirclesSchema,
} from "./compositions/IlluminatedCircles";
import {
  KineticQuote,
  kineticQuoteSchema,
} from "./compositions/KineticQuote";
import {
  GradientPromo,
  gradientPromoSchema,
} from "./compositions/GradientPromo";
import {
  VerticalStory,
  verticalStorySchema,
} from "./compositions/VerticalStory";

const FPS = 30;

export const RemotionRoot: React.FC = () => {
  return (
    <>
      {/* Logo intro — 16:9 */}
      <Composition
        id="IlluminatedCircles"
        component={IlluminatedCircles}
        durationInFrames={FPS * 6}
        fps={FPS}
        width={1920}
        height={1080}
        schema={illuminatedCirclesSchema}
        defaultProps={{
          logoText: "FLATRENDER",
          tagline: "MOTION MADE SIMPLE",
          accentColor: "#3ba7ff",
          secondaryColor: "#a855f7",
          backgroundColor: "#04060f",
        }}
      />

      {/* Kinetic typography quote — 1:1 social */}
      <Composition
        id="KineticQuote"
        component={KineticQuote}
        durationInFrames={FPS * 7}
        fps={FPS}
        width={1080}
        height={1080}
        schema={kineticQuoteSchema}
        defaultProps={{
          quote: "Great motion design is felt long before it is noticed.",
          author: "FlatRender Studio",
          accentColor: "#22d3ee",
          secondaryColor: "#6366f1",
          backgroundColor: "#0a0a12",
        }}
      />

      {/* Marketing / sale promo — 16:9 */}
      <Composition
        id="GradientPromo"
        component={GradientPromo}
        durationInFrames={FPS * 6}
        fps={FPS}
        width={1920}
        height={1080}
        schema={gradientPromoSchema}
        defaultProps={{
          eyebrow: "Limited time offer",
          headline: "Make videos that move people.",
          subheadline:
            "Customizable code-based templates, rendered in the cloud in minutes.",
          ctaText: "Start free →",
          badgeText: "50% OFF",
          accentColor: "#fb7185",
          secondaryColor: "#f59e0b",
          backgroundColor: "#0c0a14",
        }}
      />

      {/* Vertical social story — 9:16 */}
      <Composition
        id="VerticalStory"
        component={VerticalStory}
        durationInFrames={FPS * 6}
        fps={FPS}
        width={1080}
        height={1920}
        schema={verticalStorySchema}
        defaultProps={{
          kicker: "New drop",
          line1: "Your story.",
          line2: "Your style.",
          line3: "One tap.",
          ctaText: "Swipe up",
          accentColor: "#34d399",
          secondaryColor: "#3b82f6",
          backgroundColor: "#060b0a",
        }}
      />

      {/* 3D feasibility test */}
      <Composition
        id="Three3DTest"
        component={Three3DTest}
        durationInFrames={120}
        fps={30}
        width={1280}
        height={720}
      />

      {/* Dev preview: vendored CC0 character library (not a customer template) */}
      <Composition
        id="AssetSheet"
        component={AssetSheet}
        durationInFrames={60}
        fps={30}
        width={1920}
        height={1080}
      />

      {/* 2.5D story scenes proof (Three.js room + flat CC0 characters) — dev preview */}
      {ASPECTS.map((a) => (
        <Composition
          key={`StoryScenes-${a.id}`}
          id={`StoryScenes-${a.id}`}
          component={StoryScenes}
          durationInFrames={STORY_SCENES_DURATION * FPS}
          fps={FPS}
          width={a.width}
          height={a.height}
        />
      ))}

      {/* FlexStory — the scene engine: an ordered list of editable scene blocks,
          duration computed dynamically from the per-scene durations. */}
      {ASPECTS.map((a) => (
        <Composition
          key={`FlexStory-${a.id}`}
          id={`FlexStory-${a.id}`}
          component={FlexStory}
          durationInFrames={26 * FPS}
          fps={FPS}
          width={a.width}
          height={a.height}
          schema={flexStorySchema}
          defaultProps={flexStoryDefaults}
          calculateMetadata={calcFlexStoryMetadata}
        />
      ))}

      {/* Branded templates — each registered in all three aspects. A template may
          supply a dedicated component per aspect (componentsByAspect) when its
          design differs structurally; otherwise the shared `component` adapts
          responsively. */}
      {TEMPLATES.flatMap((tpl) =>
        ASPECTS.map((a) => (
          <Composition
            key={`${tpl.id}-${a.id}`}
            id={`${tpl.id}-${a.id}`}
            component={tpl.componentsByAspect?.[a.id] ?? tpl.component}
            durationInFrames={Math.round(FPS * tpl.durationSec)}
            fps={FPS}
            width={a.width}
            height={a.height}
            schema={tpl.schema}
            // eslint-disable-next-line @typescript-eslint/no-explicit-any
            defaultProps={tpl.defaultProps as any}
          />
        ))
      )}
    </>
  );
};