@json-render/remotion

import { defineCatalog } from '@json-render/core';
import { schema, standardComponentDefinitions } from '@json-render/remotion';

const catalog = defineCatalog(schema, {
  components: standardComponentDefinitions,
  transitions: standardTransitionDefinitions,
  effects: standardEffectDefinitions,
});

import { Player } from '@remotion/player';
import { Renderer } from '@json-render/remotion';

function VideoPlayer({ spec }) {
  return (
    <Player
      component={Renderer}
      inputProps={{ spec }}
      durationInFrames={spec.composition.durationInFrames}
      fps={spec.composition.fps}
      compositionWidth={spec.composition.width}
      compositionHeight={spec.composition.height}
      controls
    />
  );
}

import { Renderer, standardComponents } from '@json-render/remotion';

const customComponents = {
  ...standardComponents,
  MyCustomClip: ({ clip }) => <div>{clip.props.text}</div>,
};

<Player
  component={Renderer}
  inputProps={{ spec, components: customComponents }}
  // ...
/>

import {
  TitleCard,      // Full-screen title with subtitle
  ImageSlide,     // Full-screen image display
  SplitScreen,    // Two-column layout
  QuoteCard,      // Quote with attribution
  StatCard,       // Large statistic display
  LowerThird,     // Name/title overlay
  TextOverlay,    // Centered text overlay
  TypingText,     // Terminal typing animation
  LogoBug,        // Corner logo watermark
  VideoClip,      // Video playback
} from '@json-render/remotion';

{
  title: string;
  subtitle?: string;
  backgroundColor?: string;  // default: "#1a1a1a"
  textColor?: string;        // default: "#ffffff"
}

{
  text: string;
  charsPerSecond?: number;   // default: 15
  showCursor?: boolean;      // default: true
  cursorChar?: string;       // default: "|"
  fontFamily?: string;       // default: "monospace"
  fontSize?: number;         // default: 48
  textColor?: string;        // default: "#00ff00"
  backgroundColor?: string;  // default: "#1e1e1e"
}

import {
  standardComponentDefinitions,   // All standard component definitions
  standardTransitionDefinitions,  // fade, slideLeft, slideRight, etc.
  standardEffectDefinitions,      // kenBurns, pulseGlow, colorShift
} from '@json-render/remotion';

// Use in your catalog
const catalog = defineCatalog(schema, {
  components: {
    ...standardComponentDefinitions,
    // Add custom components
  },
  transitions: standardTransitionDefinitions,
  effects: standardEffectDefinitions,
});

import { useTransition } from '@json-render/remotion';
import { useCurrentFrame } from 'remotion';

function MyComponent({ clip }) {
  const frame = useCurrentFrame();
  const transition = useTransition(clip, frame);
  
  return (
    <div style={{
      opacity: transition.opacity,
      transform: transition.transform,
    }}>
      Content
    </div>
  );
}

import { ClipWrapper } from '@json-render/remotion';

function MyClip({ clip }) {
  return (
    <ClipWrapper clip={clip}>
      <div>My content with automatic transitions</div>
    </ClipWrapper>
  );
}

interface TimelineSpec {
  composition: {
    id: string;
    fps: number;
    width: number;
    height: number;
    durationInFrames: number;
  };
  tracks: Track[];
  clips: Clip[];
  audio: {
    tracks: AudioTrack[];
  };
}

interface Clip {
  id: string;
  trackId: string;
  component: string;
  props: Record<string, unknown>;
  from: number;
  durationInFrames: number;
  transitionIn?: {
    type: string;
    durationInFrames: number;
  };
  transitionOut?: {
    type: string;
    durationInFrames: number;
  };
}

interface TransitionStyles {
  opacity: number;
  transform: string;
}

type ClipComponent = React.ComponentType<{ clip: Clip }>;
type ComponentRegistry = Record<string, ClipComponent>;