feat(remotion): theme system + CharacterJourney pilot template

- src/scenes/themes.ts: 6 curated themes (the cohesion rail) — pick one, then
  tweak the 4 brand colors; every block derives its shades so a theme re-skins
  the whole video coherently (verified: same journey rendered in warm-editorial
  vs berry-pop by overriding only the 4 colors).
- src/scenes/presets.ts: CHARACTER_JOURNEY — the pilot template's scene list
  ("Idea → struggle → tool → win", 7 beats) as a FlexStory preset.
- briefs/character-journey.md: the filled Template Spec from the guided brief.
- Root.tsx: register CharacterJourney per aspect (FlexStory + the preset).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
soroush.asadi
2026-06-23 13:19:51 +03:30
parent d830c56ea0
commit 2104dd3c84
4 changed files with 110 additions and 0 deletions
+17
View File
@@ -5,6 +5,7 @@ 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 { CHARACTER_JOURNEY } from "./scenes/presets";
import {
IlluminatedCircles,
illuminatedCirclesSchema,
@@ -156,6 +157,22 @@ export const RemotionRoot: React.FC = () => {
/>
))}
{/* CharacterJourney — pilot template: a curated FlexStory scene list (theme + story). */}
{ASPECTS.map((a) => (
<Composition
key={`CharacterJourney-${a.id}`}
id={`CharacterJourney-${a.id}`}
component={FlexStory}
durationInFrames={26 * FPS}
fps={FPS}
width={a.width}
height={a.height}
schema={flexStorySchema}
defaultProps={CHARACTER_JOURNEY}
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