# Remocomp

A registry of curated, deterministic, broadcast-grade Remotion motion graphics components.
Components are copied into your project (shadcn-style), so you own the file and there is no runtime
dependency. Every component is frame-driven: no CSS keyframes, no wall-clock time, no unseeded randomness.

## Workflow

1. **Search.** `GET /ai/search?q=<words>&category=&aspect=&maxDuration=&limit=`
   returns a bare array of `{slug, name, summary, category, fps, durationInFrames, bestFor, avoidWhen, install}`.
   Default limit 5, maximum 20. `category` is `primitives`, `scenes`,
   `transitions` or `templates`. `aspect` takes `landscape`, `portrait`,
   `square` or a ratio like `16:9`. `maxDuration` is in seconds.
2. **Pick.** Read `bestFor` and `avoidWhen` before installing anything. If a hit's
   `avoidWhen` describes your video, skip it — that rejection is free, fetching
   the source to find out is not.
3. **Install.** `npx remocomp add <slug>`, or `npx remocomp add <slug> <slug>` for several.
4. **Set props.** `GET /api/v1/components/<slug>` for the props schema and defaults.
   Pass them as `defaultProps` on the `<Composition>`.
5. **Do not rewrite the component.** Tune props. Do not edit the spring, the
   easing or the frame math — that is the reviewed part. `primitives` components
   are props of other components, not scenes.

## Endpoints

- `GET /ai/search?q=` — compact ranked results. Start here.
- `GET /ai/components.json` — the full index, with `schemaVersion`, `generatedAt` and an ETag to poll cheaply.
- `GET /api/v1/components/<slug>` — props schema, defaults, endpoints.
- `GET /r/<slug>.json` — the source payload.
- `POST /api/v1/spec/validate` — validate a whole video spec before rendering.

CLI: `npx remocomp search "<query>"`, `npx remocomp find <query>`, `npx remocomp add <slug>`.

## Determinism & Technical Laws

Motion is a pure function of the frame. All components in this registry adhere to strict frame determinism and broadcast motion standards:

- **Single Source of Time:** Derived exclusively from `useCurrentFrame()` and `useVideoConfig()`.
- **Strictly Forbidden:** Never `Date.now()`, `setInterval`, `setTimeout`, `requestAnimationFrame`, `Math.random()`, CSS `@keyframes`, or Tailwind `animate-*` / `transition-*` classes. Use `random('seed')` from `remotion`.
- **FPS-Agnostic Timing:** Compute keyframes and delays relative to `fps` (e.g., `Math.round(0.45 * fps)`).
- **Remotion Primitives:** Always use `<AbsoluteFill>`, `<Sequence>`, `<Series>`, `<Img>`, `<OffthreadVideo>`, `<Audio>`, and `staticFile()`.
- **Clamped Interpolation:** Always clamp both ends: `interpolate(frame, [start, end], [0, 1], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' })`.

## Standard Physics Profiles (SPRINGS)

- **chassis:** `{ damping: 16, stiffness: 140, mass: 0.9 }` (heavy cards, 3D containers)
- **snappy:** `{ damping: 14, stiffness: 220, mass: 0.6 }` (telemetry pills, badges, pointers)
- **bouncy:** `{ damping: 11, stiffness: 180, mass: 0.7 }` (pop counters, kinetic words, checkmarks)
- **camera:** `{ damping: 22, stiffness: 90, mass: 1.2 }` (smooth pans, zooms, perspective)

## Broadcast 1080p Visual & Motion Design System

- **Broadcast Typography Scale (1080p):** Hard floor >= 20px. Hero headlines `64px–96px` (800 weight), card titles `36px–48px` (700 weight), body `28px–34px` (500 weight), monospace telemetry `20px–24px` with tabular-nums.
- **3-Layer Surfaces:** Multi-stop fill (`linear-gradient(165deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 100%)`) over deep slate base, specular top-edge catchlight (`boxShadow: 'inset 0 1px 0 0 rgba(255,255,255,0.22), inset 0 0 24px rgba(255,255,255,0.03), 0 28px 64px -12px rgba(0,0,0,0.8)'`), and rim border.
- **Mandatory 4-Beat Choreography:**
  1. *Beat 1 — Structural Entrance (0.0s–0.45s):* Chassis spring scale + 3D tilt recovery + defocus recovery.
  2. *Beat 2 — Vector Draw-In (0.15s–0.75s):* SVG dashoffset draw-in.
  3. *Beat 3 — Staggered Cascade (0.3s–1.3s):* 3–5 frame stagger across child elements.
  4. *Beat 4 — Continuous Ambient Life (0.8s–End):* Harmonic float, traveling data packets, LED micro-jitter. Never freeze static.
- **Bespoke SVG Craftsmanship:** Multi-layered `<svg>` geometry with `<defs>`, `<linearGradient>`, and cubic bezier curves over plain `<div>` boxes.

Community submissions appear only after maintainer verification.