Render the React-Three-Fiber-v9 (React 19) templates client-side without touching the
React-18 Next host: a standalone Vite app (services/remotion/player) mounts
@remotion/player with the real FlexStory composition. The studio will embed it via an
iframe and feed scene data (URL hash for first paint, postMessage for live edits).
- player/main.tsx: reads {props, aspect, watermark}, computes duration via
calcFlexStoryMetadata, renders <Player>. Free tier shows a watermark overlay
(preview only — clean export stays server-authorized).
- vite.config.player.ts: builds to player-dist/ with relative base (servable at /player/).
- @remotion/player + vite added.
Verified: vite build bundles FlexStory + three.js (672 modules → 1.3MB) and serves
at /player/index.html (200). Browser render to be confirmed.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- igkit: a Media component that detects video by extension and renders a frame via
OffthreadVideo (muted), else an Img — so any post slot takes images or reels.
- IGProfile: the profile-page grid is now editable — 6 post media fields (was static
colour placeholders); videos get a ▶ reel badge.
- IGFeed: post slots now accept video too; labels say «عکس/ویدیو».
Verified: a profile still with an image cell + a video cell + avatar image renders
both correctly.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
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>
The real visible quality leap — a handmade craft aesthetic code can't fake by being
smooth:
- craft.ts: useStopMotion (quantize the frame to "on twos/threes" + per-step jitter
→ choppy handmade motion), paperShadow (layered cast shadows for paper depth),
PAPER_TEXTURE (procedural fibrous paper grain).
- PaperCut block: a layered paper-cut landscape — sun + 4 brand-coloured paper hills
with real cast shadows + paper grain, rising into place on stop-motion timing with
an idle wobble, + paper-cut title/subtitle. Re-flows 16:9/1:1/9:16.
Registry now has 13 blocks. Verified: warm Yalda render (fits the Persian/seasonal
moat) + a stop-motion demo clip showing the on-threes choppy rise.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
The single highest-ROI quality lift — one finish applied at the FlexStory level
lifts all 12 blocks at once, no per-block change:
- GRADE_FILTER: a headless-safe colour grade (contrast/saturation/lift) applied as
a CSS `filter` on the content root — backdrop-filter does NOT render in headless
Chrome, so the grade lives on the content, not an overlay.
- FinishPass: split-tone (cool-shadows multiply + warm-highlights screen) + a soft
brand duotone + top light-bloom, layered over each scene.
- Installed @remotion/lottie@4.0.290 (artist-made animations — next lever).
Verified: visible richer/graded look on CharacterScene + Slideshow, subtle enough
to suit the muted palette, consistent across blocks.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Unlocks the biggest catalog gaps by composition:
- BarChart: animated infographic bars (value + label, normalized, staggered grow).
- Stomp: punchy beat-synced typography — words slam in with overshoot + shake +
accent impact bar (titles / fashion / openers).
- DeviceMockup: phone/browser frame holding the user's screenshot + title/caption
(app / website promo); placeholder when no image.
Registry now has 12 blocks. All verified via FlexStory props-override stills.
docs: CATALOG_PLAN.md (the full template taxonomy + production map + build waves;
the Persian/Islamic occasions = the moat) and PREMIUM_TOOLCHAIN.md (the stop-motion/
paper-cut/premium tool plan; editable-backdrop architecture; Iran/OFAC reality).
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
First template built through the new flow (brief → quality-gate approval → build →
seed → deploy). Tech/3D logo motion: a 3D metallic card + radial light rays + lens
flare + bloom (genuine @remotion/three), with the user's uploaded logo composited
on the card as a reliable HTML <Img> (renders any SVG/PNG/data-URI; static camera
keeps it aligned), brand text + tagline, grain. Falls back to a branded play-mark
when no logo is set. Re-flows across 16:9/1:1/9:16.
- LogoMotion3D.tsx registered per aspect in Root.tsx.
- Seeded as fr-logo-motion-3d: text fields (brandText, tagline) + a logoUrl image
upload field + the dark-tech palette (light text) + per-aspect previews.
- 3 thumbnails + 3 preview MP4s rendered, deployed; detail page + assets serve 200.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Adds the product/app-showcase template type the engine was missing: a 2.5D device
frame (rounded phone with notch, or a browser window with traffic-lights + URL bar)
holding an uploaded screenshot, with title/subtitle and the shared Three backdrop.
Fields: screenshot, title, subtitle, device (phone|browser). Registry now 9 blocks.
Verified via FlexStory props-override stills (both device modes).
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
From the audio-sourcing-sweep (45 sources verified). The load-bearing test —
can a paid SaaS render the audio into customers' MP4s AND vendor the file —
rules out almost all "royalty-free" libraries; only CC0/PD passes cleanly.
- USE (CC0, vendorable): FreePD (music; site dead → archive.org/details/freepd),
Kenney.nl (SFX; the one clean-from-Iran source), Freesound-CC0, OpenGameArt-CC0.
- CAUTION: incompetech CC-BY (needs attribution pipeline), aggregators (verify
per-track), Sonniss/Pixabay (render-input-only, never vendor raw).
- AVOID/reference-only: Mixkit/Uppbeat/Bensound/Envato/Zapsplat/… (clauses + OFAC).
- Persian = no clean CC0 bulk source → commission + self-CC0 long-term.
Real files need a VPN/non-Iran fetch (acquire-once-then-vendor makes the licence
perpetual); only the 4 self-authored ffmpeg stubs are vendored today. Firewall
rules mirror the illustration assets.json + check-assets guard (already scans audio).
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Adds audio to the scene engine without any third-party/geo-blocked sourcing: the
beds + SFX are synthesized with ffmpeg, so they're license-free (CC0, self-authored)
and need no acquisition — the same play as self-authoring Lottie.
- public/audio/: music-ambient.mp3 (soft 3-tone pad, looped) + sfx-whoosh/pop/chime.
- FlexStory: optional music/musicVolume/sfx props (optional so the existing render
binding needs no change). Renders <Audio loop> for the bed + a whoosh at each
scene start and a chime on the final scene, driven by precomputed scene starts.
- check-assets: now also scans public/audio (+ lottie) with folder-prefixed keys;
assets.json ledgers the 4 audio files (CC0 self-authored).
Verified: tsc clean; a 6s FlexStory render produces an MP4 with a real audio stream
(ffprobe: codec_type=audio). NOTE: these are placeholder/SFX-grade; a premium
curated music library (by vibe) is a separate sourcing sweep, and the studio music
picker → FlexStory `music` prop is a follow-up wiring.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Grows the scene-block library toward full template-type coverage:
- LogoReveal: premium logo-motion — spring scale-in + glint sweep over the logo
(image upload or a branded play-mark placeholder) + brand text + tagline, on the
shared 2.5D Three backdrop. Fields: logoUrl, brandText, tagline.
- StatCounter: animated count-up to a target (English-digit value → Persian
display) + suffix + label. Fields: value, suffix, label.
Registry now has 8 blocks. Both verified via FlexStory props-override stills.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- 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>
Turns a template into an ordered list of editable scene blocks instead of one
monolithic composition — the foundation for the scene-based template engine
(all Renderforest-style types, per-scene editable duration, add/duplicate/
delete/reorder). Render-side only; backend wiring is Phase 2.
- src/scenes/types.ts: SceneInstance/BlockProps/SceneBlock + withDefaults/clamp.
- src/scenes/chrome.tsx: shared 2.5D Three.js backdrop (parallax camera, blobs,
particles, optional 3D confetti) + grain/vignette/progress/kicker/transition.
- src/scenes/blocks/*: Core 6 blocks — TitleCard, CharacterScene (full room +
vendored CC0 character behind a desk), ImageCaption, KineticQuote, Slideshow,
OutroCTA — each with editable fields + its own duration range.
- src/scenes/registry.ts: the block registry (blockId -> block).
- src/compositions/FlexStory.tsx: the sequencer — stacks blocks in <Sequence>,
clamps per-scene duration, and computes composition length dynamically via
calculateMetadata (so add/delete/reorder/duration all flow to the render).
- StoryScenes.tsx: the 2.5D story proof this productizes; docs/TEMPLATE_BRIEF.md:
the guided creator flow + Template Spec.
Verified: all 6 blocks render via FlexStory in 16:9/1:1/9:16; a custom props
override (reordered scenes, custom characters/durations/colors) renders correctly
and the total length tracks Σ per-scene durations.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Polished-metal look: low-roughness (0.15) titanium + contrasty studio Environment
(light bases + bright softbox strips) so the rounded edges catch hot reflection
streaks that sweep as the phone rotates; shinier side buttons. Re-rendered all
aspects + preview, redeployed.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- New @remotion/three template: titanium flagship phone (thin rim, glossy black
glass, rounded-corner screen via ShapeGeometry, dynamic island, side buttons),
light keynote studio (contact shadow + env reflections + DOF + soft bloom),
film grain + entrance light-sweep. All 3 aspects re-flowed.
- Editable screenUrl (user app screenshot textured onto the screen via TextureLoader
+ delayRender), appName/tagline/cta, 4 colours (dark text on light bg).
- Add pick(wide,square,tall) helper to lib/aspect.ts (Tier-0 from the R&D).
- Seed: AppShowcase3D + per-template text colour; built with the flat-artist skill.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- .claude/skills/flat-artist: the bundled FlatRender template-creation suite
(orchestrator + 16 sub-skills + design/motion R&D), mirrors the Gitea AISkills repo.
- services/remotion Root.tsx/templates.tsx: register the 3D templates + Three3DTest.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Render engine
- Add Remotion (code-based) as a 2nd render engine alongside After Effects.
node-agent dispatches on Job.Engine; RunRemotion maps bindings -> --props,
renders native then ffmpeg-scales to the quality tier (aspect-preserving).
- content.projects.render_engine + render_remotion_comp (migration 32);
render-svc claim resolves engine and routes (skips .aep for Remotion).
- Admin TemplatesAdmin gains an engine picker + Remotion composition id field.
Template pack (services/remotion)
- 16 branded, Persian (Vazirmatn), color- and text-editable templates, each in
3 aspects (16:9 / 1:1 / 9:16): LogoMotion, Opener, InstaPromo, YouTubeIntro,
Slideshow, HappyBirthday, SalePromo, QuoteCard, EventInvite, Countdown,
GlitterReveal (editable logo image), NowruzGreeting (animated characters),
and 4 cinematic 3D templates via @remotion/three (Hero3D, Nowruz3D,
Birthday3D, Promo3D) with reflections + bloom/DOF/vignette.
- scripts/seed_remotion_templates.py seeds containers/projects/scenes/colors.
Pricing
- Rewrite /pricing to the seconds-based model (charge = length x resolution),
data-driven from /v1/plans, Toman, broker checkout.
Coming-soon
- Persian experimental-build overlay on all pages (launch date + countdown).
Fixes
- middleware matcher bypasses all static asset paths; catalog mapping passes
cover image + preview video so real thumbnails render.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
soroush.asadi