Files
flatrender/services/remotion/src/scenes/registry.ts
T
soroush.asadi 7ed2ccc414 feat(remotion): Instagram channel-promo template + taste system + design-quality kit
The reference-round workflow, run end to end for a real template:

Taste system (how we learn the user's taste, persisted):
- references/TASTE_PROFILE.md (living design contract) + references/README.md (the
  daily loop) + a "reference round" stage in docs/TEMPLATE_BRIEF.md (provide refs or
  I suggest+mock directions).

Design-quality before/after:
- HeroDemo — the fix recipe vs the faint default: layered-depth background, a proper
  big video type scale, and a bold composed focal object. (Backgrounds were naked,
  text too small, scenes had no objects.)
- YaldaSofreh3D + IGPromoDirections + IGProfileMock — reference-match proofs
  (low-poly 3D, 3 IG-promo style directions, the realistic IG-light page).

Instagram channel-promo template (the deliverable — a flexible 5-scene FlexStory):
- igkit + 5 blocks: IGIntro, IGProfile (realistic IG-light profile, scales to all
  aspects), IGFeed (post grid), IGStats (animated count-up), IGFollowCTA (Follow taps
  to "Following").
- FlexStory gains a `finish` toggle so the IG-light scenes render clean (no brand
  grade). INSTAGRAM_PROMO preset + 3 aspect comps in Root.

Verified: a still of every scene at 9:16 renders clean; full preview MP4 rendering.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-06-25 09:16:31 +03:30

49 lines
2.1 KiB
TypeScript

import type { SceneBlock } from "./types";
import { TitleCardBlock } from "./blocks/TitleCard";
import { CharacterSceneBlock } from "./blocks/CharacterScene";
import { ImageCaptionBlock } from "./blocks/ImageCaption";
import { KineticQuoteBlock } from "./blocks/KineticQuote";
import { SlideshowBlock } from "./blocks/Slideshow";
import { OutroCTABlock } from "./blocks/OutroCTA";
import { LogoRevealBlock } from "./blocks/LogoReveal";
import { StatCounterBlock } from "./blocks/StatCounter";
import { BarChartBlock } from "./blocks/BarChart";
import { StompBlock } from "./blocks/Stomp";
import { DeviceMockupBlock } from "./blocks/DeviceMockup";
import { ProductShowcaseBlock } from "./blocks/ProductShowcase";
import { PaperCutBlock } from "./blocks/PaperCut";
import { IGIntroBlock } from "./blocks/IGIntro";
import { IGProfileBlock } from "./blocks/IGProfile";
import { IGFeedBlock } from "./blocks/IGFeed";
import { IGStatsBlock } from "./blocks/IGStats";
import { IGFollowCTABlock } from "./blocks/IGFollowCTA";
/**
* The scene-block registry. A FlexStory template is an ordered list of these
* blocks; new template types = new blocks. Each block declares its editable
* fields + duration range (so the studio can clamp per-block, not globally).
*/
export const SCENE_BLOCKS: Record<string, SceneBlock> = {
[TitleCardBlock.id]: TitleCardBlock,
[CharacterSceneBlock.id]: CharacterSceneBlock,
[ImageCaptionBlock.id]: ImageCaptionBlock,
[KineticQuoteBlock.id]: KineticQuoteBlock,
[SlideshowBlock.id]: SlideshowBlock,
[OutroCTABlock.id]: OutroCTABlock,
[LogoRevealBlock.id]: LogoRevealBlock,
[StatCounterBlock.id]: StatCounterBlock,
[ProductShowcaseBlock.id]: ProductShowcaseBlock,
[BarChartBlock.id]: BarChartBlock,
[StompBlock.id]: StompBlock,
[DeviceMockupBlock.id]: DeviceMockupBlock,
[PaperCutBlock.id]: PaperCutBlock,
[IGIntroBlock.id]: IGIntroBlock,
[IGProfileBlock.id]: IGProfileBlock,
[IGFeedBlock.id]: IGFeedBlock,
[IGStatsBlock.id]: IGStatsBlock,
[IGFollowCTABlock.id]: IGFollowCTABlock,
};
export const BLOCK_LIST = Object.values(SCENE_BLOCKS);
export const getBlock = (id: string): SceneBlock | undefined => SCENE_BLOCKS[id];