flatrender/.claude/skills/flat-artist/references/design-motion-rnd.md

FlatRender Design & Motion R&D — Trends + Professional Craft

Single-source R&D brief for the FlatRender Remotion engine (services/remotion). Stack: Remotion 4 + @remotion/three (R3F v9, gl="angle"), Persian-first (Vazirmatn, RTL), three mandatory aspects (16:9 / 1:1 / 9:16), color-customizable templates driven by colorSchema props. Operating context: Iran — geo-blocked CDNs, sanctioned SaaS dashboards, reachable Nexus mirror (mirror.soroushasadi.com). Render is headless Chrome in Docker, so every value must be a pure function of useCurrentFrame() and every asset must be vendored into public/.

Existing grounding files: src/lib/anim.ts, aspect.ts, branding.ts, fonts.ts, three-kit.tsx, kit.tsx; templates in src/templates.tsx; public/ currently holds only fonts/.

---

The two meta-truths to keep over everything

1. Imperfect-by-design beats glossy. As feeds fill with AI-perfect imagery, deliberate imperfection — grain, texture, hand-rendered type, natural-feeling motion — now signals "a real human made this." Even fully-rendered templates win by adding back texture and human-feeling motion. Apply this lens to every trend below.
2. A masterpiece is ~8 finishing layers, not one big thing. Sound design, micro-easing, a design system, depth/lighting, color grade, pacing, a clear hero moment, and subtle texture. Amateurs stop at "the text animates in." We must finish all eight.

---

1) Design trends to adopt (each with a concrete how-to in our stack)

Every trend below survives all three aspects only if you anchor to safe-zone percentages / layout.vmin(), never absolute pixels. Read ../remotion-aspect-ratios/SKILL.md before positioning anything.

Typography (type is a first-class motion element, not a label)

Trend	When to use	How in our stack
Bold / oversized hero type (fills 60–90% of frame, clipped by edges)	Logo reveals, promo hooks; strongest on 9:16	fitText from @remotion/layout-utils to auto-scale a word to frame width; animate scale/translateY with spring(); parent overflow:hidden to clip.
Variable-font animation (wght/wdth/slnt over time)	Premium beat-synced intros	style={{ fontVariationSettings: \'wght' ${interpolate(frame,[0,30],[100,900])}` }}. **Vazirmatn ships a variable build** — animate its weight axis for Persian hero type. Load via @font-face(vendored inpublic/fonts/`, never Google CDN at render).
Kinetic typography (word-by-word / line-by-line)	Quotes, captions, fast hooks	Split into spans; per-word delay = i * staggerFrames; drive each with spring({frame: frame - delay, fps}); combine translateY + opacity + slight rotate. <Sequence> per line for timeline clarity.
Anti-AI / hand-rendered / scribbled	Grunge/street/youth/music/events	Pre-make rough-edged SVG/PNG lettering; "draw" it on with a clipPath/mask wipe; add filter:url(#displace) (SVG feTurbulence + feDisplacementMap) with a per-frame jitter for photocopy wobble.
Chrome / Y2K metallic type	Hype, music, fashion, "premium" reveals	CSS: layered linear-gradient text fill via background-clip:text cycling silver→steel→highlight by shifting background-position per frame. For real reflections, use Three.js (see liquid-chrome below).

3D / Blender-look (@remotion/three)

• Real-time 3D logo reveals — the default "premium intro." Render <ThreeCanvas>, drive camera/object rotation from useCurrentFrame() (never useFrame). Extrude logo via TextGeometry/extruded SVG shape, meshStandardMaterial, an HDRI Environment, spring()-driven entrance. Use our StudioEnv/StudioLights/StudioFloor/StudioEffects from three-kit.tsx.
• "Plushcore" / soft-3D / claymation — friendly counter to hard chrome. Pre-render GLTF in Blender (subsurface/soft shaders), import via useGLTF; bobbing idle = Math.sin(frame/fps) on position. 2D fake-3D = big soft inner-shadows + highlight gradients in CSS.
• Mixed 2D/3D — one of the strongest 2026 looks. Layer a <ThreeCanvas> behind/within absolutely-positioned 2D Remotion layers (SVG strokes, flat shapes); composite with blend modes.

Surface & color treatments

• Grain / texture / noise — near-universal in 2026; add to almost everything, especially flat/gradient backgrounds. Cheap: tiling noise PNG overlay at low opacity with mix-blend-mode: overlay/soft-light. Animated grain must move or it looks frozen — offset background-position per frame, or SVG feTurbulence with a per-frame seed/baseFrequency jitter.
• Mesh gradients — soft multi-point blends (not linear), the sophisticated 2026 background. Pre-bake a mesh PNG and slowly drift/scale it, or animate live with a fragment shader in Three.js driven by frame. Always add grain on top.
• Glassmorphism (evolved) — used selectively (cards, lower-thirds), multi-layer depth, dynamic blur. backdrop-filter: blur(16px) saturate(140%), semi-transparent rgba fill, 1px light top-border, soft shadow; animate blur radius + a moving specular highlight per frame; stack 2–3 panels at different parallax depths.
• Retro / Y2K — chrome + iridescent mesh gradient + occasional pixelate (image-rendering:pixelated on a downscaled layer) + sparkle SVG bursts. Music/fashion/Gen-Z/party greetings.
• Anti-design / tactile brutalism — hard 1px solid #000 borders, no radius, pure-saturated bg, system/monospace fonts, deliberate overlap. Motion is blunt — hard cuts and step/linear snaps, not smooth springs.
• Mixed-media / collage — PNG cutouts with rough edges as layers; "paper-drop" overshoot springs on slight rotation/scale; tape/staple SVGs, paper-grain overlay, occasional 1-frame jump-cut jitter.
• Isometric — transform: rotateX(60deg) rotateZ(-45deg) on stacked layers with transform-style:preserve-3d; stagger layer entrances; move elements along iso axes (matched X/Y deltas). Great for SaaS/feature explainers.
• Kinetic / liquid / morph — morphing blobs (animate SVG path d with flubber; gooey via feGaussianBlur + feColorMatrix). Liquid chrome (top-5 2026 animation trend): Three.js meshStandardMaterial metalness:1, roughness:~0.05 + HDRI Environment on a morphing/MeshDistort-style geometry — color shifts as the camera moves.
• AI-aesthetic vs anti-AI — AI stills/clips as <Img>/<OffthreadVideo> backgrounds with Ken-Burns for surreal promos; lean into hand-type + grain + collage for trust/authenticity brands.

Color direction 2026

• Dopamine / electric accents (electric blue, neon coral, acid yellow, vivid teal, cobalt) — as high-energy accents to guide the eye, never whole palettes.
• Tech pastels (lavender haze, powder blue, digital pink) — calm/mature, great for SaaS/UI promos.
• Warm earth neutrals (mocha/espresso/caramel/tan) — "quiet luxury," premium and human.
• Strategy: bold dopamine accent + neutral/pastel base + grain on top. Avoid all-flat saturated fields — they read as AI/template. All color comes from colorSchema props so the studio can recolor; pass a user's hex through a grade so a garish value doesn't break the look.

---

2) Animating anything (craft + the pro workflow)

The one rule everything hangs on

A frame in Remotion is pure: frame → pixels. Motion is evaluated at an arbitrary frame, exactly the After Effects mental model (a keyframe graph sampled at time t). Never use useFrame, Math.random(), Date.now(), setState, or useEffect-driven motion — the renderer samples frames out of order and in parallel. Use rand(seed) from anim.ts for deterministic "randomness." If a value can't be derived from frame, it doesn't belong in the render.

The 12 principles → Remotion (the four you reach for every shot in bold)

Principle	Remotion expression
Squash & stretch	scaleX/scaleY inversely around an impact frame (conserve volume: sx = 1/sy)
Anticipation	Dip the value below its start before the main move
Staging	Stagger reveals; dim/blur everything but the hero
Straight-ahead vs pose-to-pose	interpolate between frames (keyed) vs per-frame formula (sim, e.g. Confetti3D)
Follow-through & overlapping	Same motion, delayed per child + a looser spring so parts settle later
Slow in & slow out	Easing.bezier / spring() — the single biggest quality lever
Arcs	Drive y with a sin/parabola while x moves linearly
Secondary action	A small sin bob/shimmer alongside the primary reveal
Timing	Frame count + spring mass/damping = weight & mood
Exaggeration / overshoot	Overshoot > 1.0, then settle to 1.0
Solid drawing	StudioLights + reflective material + shadows (3D)
Appeal	Choreography + StudioEffects (bloom/DOF/vignette) + good type

spring() vs interpolate()

• interpolate — you author the curve. Use when a value must hit an exact mark on an exact frame (storyboard reveals, crossfades, value remaps). Always set extrapolateLeft/Right: "clamp" — forgetting this is the #1 cause of elements drifting off-screen or opacity going negative.
• spring — physics authors the curve. Use for organic entrances, pops, bounces.
• Combine: spring drives the feel, interpolate remaps its 0→1 output to real px/units: const y = interpolate(spring(...), [0,1], [vmin(80), 0]).

Spring config cheat-sheet:

Feel	mass	damping	stiffness	Use for
Snappy, no overshoot	0.5	200	200	Clean UI/logo reveals
Natural pop (slight overshoot)	0.6	12	180	Default cards/badges/icons
Bouncy / playful	1	8	120	Kids, birthday, mascots
Heavy / weighty	2.5	26	90	Big titles, 3D objects landing
Loose wobble (follow-through)	1	6	80	Secondary / trailing parts

Lower damping = more overshoot; higher mass = heavier/slower; higher stiffness = faster snap.

Easing cheat-sheet (linear is the sound of an amateur)

• Entrances → ease-out (Easing.out(Easing.cubic)), your default. Hero titles → Easing.out(Easing.quint) or Easing.bezier(0.16,1,0.3,1).
• Exits → ease-in (Easing.in(Easing.cubic)), and always sharper than the entrance — things leave faster than they arrive.
• A→B on-screen moves / camera → ease-in-out.
• Snappy "ta-da" → back/overshoot Easing.bezier(0.34,1.56,0.64,1).
• Wind-up → anticipate Easing.bezier(0.36,0,0.66,-0.56).
• Linear ONLY for mechanical continuous motion — rotation, scroll, conveyor, marquee.

Timing & frame budgets (30fps default — but use sec(s)=Math.round(s*fps), never hardcode 30)

Micro pop 8–14f · standard reveal 18–28f · hero entrance 28–40f · scene transition 12–20f · hold = a comfortable read of the text. Cut frames before you add them — amateurs over-animate. Robotic = linear spacing; floaty/late = timing too long.

The four quality multipliers (concrete patterns)

• Anticipation: interpolate(frame,[0,6,30],[0,-0.12,1]) — small negative dip before launch.
• Overshoot+settle: the back bezier, or a low-damping spring. Ensure the curve reaches and holds the target (clamp) or it micro-drifts forever.
• Follow-through: drive children from the same trigger frame, delay each (frame - start - i*stagger) with a looser spring so they settle after the parent. Biggest "feels professional" upgrade for grouped elements.
• Staggering / choreography: default to a cascade; tune per aspect via a pick(wide,square,tall) helper (wider reads faster → tighter stagger; tall reads slower → looser). Patterns: cascade (lists), center-out (logos/hero rows), random-but-deterministic via rand(i) (particles), beat-synced (snap start to music beats). One thing enters the eye at a time — staging.

3D motion

Drive every transform off useCurrentFrame() (deterministic under ANGLE). Rotation/orbit = linear (mechanical); entrances/landings = spring with high mass for weight. Let StudioEffects (bloom + DOF + vignette) do the cinematic polish in one component.

The pro workflow (5 passes, IN ORDER — polishing before timing is locked wastes the most time)

1. Reference — decide the feel before code; pull an AE template/Dribbble loop; pick style (../remotion-design-styles/SKILL.md), type (../persian-fonts/SKILL.md), composition (../remotion-template-composition/SKILL.md), per-aspect rules (../remotion-aspect-ratios/SKILL.md); write the beat list ("logo in → tagline → 3 features cascade → CTA → out").
2. Blocking — every element on screen at final position with crude interpolate fades, no easing. Fix off-screen/cropping in all three aspects now.
3. Timing — lock frame counts, stagger, beats, holds, transitions. Watch at full speed repeatedly. Mood lives here.
4. Polish — swap linear for easing/springs; add anticipation+overshoot+settle, follow-through, secondary motion, arcs, squash/stretch; StudioEffects for 3D; wire SFX (../remotion-sound-effects/SKILL.md) and music sync (../remotion-music-picker/SKILL.md) to the locked frames.
5. Review — scrub frame-by-frame + full speed. Nothing pops without an ease; nothing leaves slower than it arrived; the eye always knows where to look; reads in all three aspects; Persian RTL not clipped; colors from colorSchema; re-render twice → identical (deterministic). Then run ../flatrender-template-seo/SKILL.md.

Top amateur mistakes → fixes (review gate)

Linear motion → ease/spring · no anticipation/overshoot → dip-then-launch / back bezier · everything on one frame → stagger · forgot clamp → clamp both ends · hardcoded 30fps → useVideoConfig().fps · useFrame/random/Date.now → useCurrentFrame + rand · pixel-hardcoded sizes → vmin/unit + branch on isWide/isSquare/isTall · over-animating → one idea per beat · no hold → real hold sized to reading · exit = entrance speed → exits sharper · dead holds → sin bob/breathe/shimmer · flat 3D lighting → StudioLights + floor shadows + StudioEffects · color hardcoded → read from props.

---

3) Asset pipeline (collecting + designing footage, Iran-aware)

The Iron Rule

The Iran environment punishes runtime dependencies. All assets are vendored — download once (over VPN if needed), commit into services/remotion/public/, reference with staticFile(). Never <Video src="https://somecdn..." /> in a template — a geo-block or flaky tunnel kills the render mid-frame. Mirror npm/NuGet/Docker via Nexus; asset binaries are sourced manually and committed. Track licenses at acquisition time, not later.

License taxonomy (know cold)

• Ship freely, no attribution: CC0 / Public Domain, Pixabay License, Pexels License, Unsplash License. Default target.
• Allowed with a credit: CC-BY (track per-asset; needs attribution UI/end-card).
• Off-limits: CC-BY-SA (share-alike can "infect" our proprietary template), CC-BY-NC (we are a paid product = commercial), editorial/rights-managed.
• Paid stock (Envato/Adobe/Shutterstock): allowed per license; keep the receipt/license PDF. Note their dashboards/checkout often geo-block Iran at the account/payment layer even with a VPN — use a foreign-established account or a partner.

Sourcing (CC0 / no-attribution first)

• Footage: Pexels Videos (first stop), Pixabay Video, Mixkit, Coverr (check AI badge), Free Nature Stock, Videvo (filter to CC0). Pick exact resolution (don't ship 4K into a 1080p comp), prefer H.264 MP4 for <OffthreadVideo>, commit under public/footage/.
• Images: Pexels, Pixabay, Unsplash, StockSnap, Burst. For Persian/Iran imagery search English terms ("Tehran", "Iranian food") + self-shot/local stock.
• Textures & overlays: Poly Haven Textures (CC0), ambientCG (CC0); grain/light-leak/dust = CC0 video clips you screen-blend.
• HDRIs: Poly Haven (1k–2k for render speed), ambientCG.
• 3D (GLB): Poly Haven Models (CC0, cleanest), Kenney.nl (CC0 low-poly), Khronos glTF samples, Sketchfab (mixed — check each, filter Downloadable + CC0/CC-BY). Prefer GLB over glTF+separate-textures (one file, no broken paths); Draco-compress with gltf-pipeline -b; keep low-poly for headless render speed.
• Icons (bundle via Nexus npm, never CDN): Lucide, Tabler, Heroicons, Phosphor, Iconoir. Illustrations (recolorable SVG): unDraw, Open Peeps, Humaaans — ship as SVG so the studio color picker recolors them (../remotion-svg-colors/SKILL.md).

Iran access: generally reachable — Pixabay, Mixkit, Coverr, Poly Haven, ambientCG, npm via Nexus. VPN-recommended/intermittent — Pexels, Unsplash, Sketchfab, GitHub raw. Sanction-blocked at account/payment — Adobe Stock, Envato. Mitigation: batch all sourcing in one "asset run" over a stable tunnel, commit binaries, render never touches the open internet again.

AI-generated assets — when it's right

• Use when: the asset doesn't exist as stock (specific Persian cultural scene, branded mascot), you need consistency across a template set (reference-image controls), or it's faster than a 5-site license hunt.
• Don't use when: clean CC0 stock already exists, you need photographic authenticity, or the free-tier commercial license is unclear (many free tiers forbid commercial use / watermark — a legal landmine for a paid product).
• Iran-pragmatic recommendation: locally-hosted open models — HunyuanVideo 1.5 (self-hosted, ~RTX 4090, no geo-block/payment/watermark, full commercial control) for video; FLUX/SDXL locally for image/texture/illustration. Use hosted SaaS (Runway Gen-4, Kling 3.0) only when local quality is insufficient and a VPN+foreign-account path exists. Always record prompt + tool + plan-tier + date in the asset's sidecar.

Designing & preparing footage in Remotion

• Media primitives: <OffthreadVideo> = default for all video in a render (FFmpeg frame extraction, deterministic, no seek drift). <Video> = preview only. <Img> over raw <img> (waits for load → no half-loaded frames). staticFile() for every vendored asset; never an external URL in a shipped template.
• Color grading: per-layer CSS filter + blend modes (contrast/saturate/brightness/hue-rotate). Build a shared lib/grades.ts preset set (warm, teal-orange, mono, filmic) so all templates grade consistently and the palette can drive hue-rotate/saturate. Heavy grading → pre-grade in DaVinci Resolve (free) before committing.
• Masking / keying: no native keyer — pre-key in Resolve/AE and export alpha (ProRes 4444 or WebM/VP9 alpha), then <OffthreadVideo> it. Shape/gradient masks via CSS maskImage/clipPath or SVG <mask>.
• Seamless loops: source loop-designed clips (Coverr/Mixkit) or crossfade-to-self with overlapping <Sequence>s; mirror-pingpong for imperfect footage. <OffthreadVideo loop> once first/last frames match.
• Overlays (the cheap "authentic" layer): stack grayscale-on-black/white clips — screen for light-leaks/bokeh/dust, overlay/soft-light for grain, multiply for vignettes/paper. Keep palette-independent.
• Ken-Burns: interpolate scale (start ≥ 1 overscan so no edge reveals) + translate; ease with spring/bezier; objectFit:cover + center-safe framing so all three aspects crop cleanly.
• Performance (headless Docker): right-sized media, H.264 + <OffthreadVideo>, 1k–2k HDRIs, Draco GLB; raise concurrency carefully and watch RAM.

Library structure + attribution firewall

Create under services/remotion/public/ (today only fonts/): footage/{nature,business,abstract}/, overlays/, images/, textures/, hdri/, models/, icons/, illustrations/, plus assets.json + ASSETS.md. Lowercase-kebab names, no spaces.

assets.json — one row per asset, added at download time (file, source, url, author, license, attribution_required, commercial_ok, acquired, notes). Conventions: every asset gets a row (no row = "unknown license = do not ship"); attribution_required:true must surface its credit on a shippable surface; sidecar .license.txt for AI prompts / paid receipts. CI validation script asserts every file in the media folders has a matching row with commercial_ok:true, else fails the build — this is the license firewall. ASSETS.md is a generated readable table for humans/legal. If the repo bloats, move large media to Git LFS or MinIO (already in stack) with a predeploy sync into public/ — but present at render time.

---

4) Masterpiece production + platform playbook

The 8 production-value layers (what separates "made in a tool" from "made by a studio")

1. Sound design + beat-sync — the fastest "professional" tell. Beat-sync every key reveal (map BPM, keyframe on beat boundaries — hero on a downbeat); layered SFX (whoosh on transitions, thump on hard cuts, sparkle on shine sweeps, riser into the hero, pop on icon entrances); ducking (music dips under VO/key sound); silence before the hero reveal makes the payoff hit harder.
2. Micro-detail — easing never linear; overshoot & settle; staggered 2–5f entrances; secondary motion (shadow/contents react); anticipation.
3. Design system — one type scale (4–5 sizes), one spacing rhythm, constrained palette (1 primary + 1–2 accents + neutrals), consistent radii/strokes/elevation; Persian-first type handled deliberately (Vazirmatn + matched Latin pairing, not one font stretched across scripts).
4. Depth & lighting — layered parallax (bg/mid/fg different speeds), soft directional shadows with one consistent light direction, atmospheric depth (bg blur/desaturate, fg sharp/saturated), rim light on hero.
5. Color grade — one unified grade over the whole comp (not per-element colors fighting); lifted/tinted shadows, controlled highlights, deliberate temperature; user hex still passes through the grade.
6. Pacing / rhythm — vary cut length, build to a climax, match cut rhythm to music, trim ruthlessly.
7. A clear hero moment — one designated peak (logo/price-drop/product/CTA) with the biggest motion, strongest hit, often silence before, most screen real-estate. Flat = nothing lands.
8. Finishing texture (subtle!) — low-opacity film grain, gentle vignette, 1–2px chromatic aberration strongest at impacts, tiny continuous camera drift (frame alive, not locked), sparing light-leaks/bokeh, motion blur on fast elements (its absence is a classic amateur tell).

Pre-ship polish checklist (if you can't tick it, it's not done)

• Motion: no linear easing anywhere; staggered entrances; motion blur on fast elements; ≥1 overshoot-and-settle; nothing pops on/off without a transition.
• Audio: BPM mapped, reveals on beat; whoosh on every scene change; accent SFX on hero; music ducks under VO, no clipping, clean end.
• Composition/design system: verified in 16:9 / 1:1 / 9:16 (not a letterboxed 16:9); text in platform safe zones; consistent scale/spacing/radii/shadows; constrained palette; FA + EN both correct (RTL, font, numerals).
• Depth & grade: consistent light direction; bg depth treatment; unifying grade over the comp.
• Pacing & hero: one unmistakable hero; varied cuts matched to music; engaging first frame (it's the thumbnail).
• Finishing: subtle grain OR vignette present; frame alive; aberration/light-leak at transitions if style allows.
• Technical/QA: clean render at target res (no flicker/z-fighting/font fallback); all editable fields (text/logo/image/colors) swap without breaking layout; longest text doesn't overflow, shortest doesn't look empty; loops cleanly if meant to.

Platform playbook (2026)

All vertical = 1080×1920, 9:16. First frame = the hook = the cover. High-contrast captions (white/yellow, black outline) in the lower-middle third are the cross-platform default.

Platform	Length sweet spot	Hook / retention	Safe zone (1080×1920)	Template implication
IG Reels	7–15s punchy; 30–90s for depth (up to 90s)	First 2–3s decide stay/swipe; cleaner/less-cluttered text than TikTok; rewards 3-sec view rate + completion	~108 top, ~320 bottom, ~60 L, ~120 R; hook text Y≈200–600	Cleaner kinetic type, mesh-gradient + glass lower-thirds, refined transitions
IG Story	full-bleed	heavy UI chrome	avoid top ~250 (profile) + bottom ~250 (reply/link)	design poll/quiz/link sticker zones into layout
IG Feed post	—	first caption line is the hook	—	Portrait 4:5 (1080×1350) standard; 1:1 for grid consistency
TikTok	15–30s engagement; 11–18s virality; ≤60s educational	3-second rule; curiosity-gap / bold-claim hooks; word-by-word captions beat full sentences	keep right ~120, bottom ~320 clear of key content	calm neutral grain+warm-earth variant; word-by-word captions as a first-class editable layer
YT Shorts	15–35s	no runway — open on the most compelling moment; intro retention >70%, completion >60% (<30s)	center within middle ~1080×1350; clear bottom UI + right buttons	cinematic 3D logo reveals, graded looks
YT long-form intro	—	cold-open hook in first 5–15s; branded sting <3s	—	state payoff first, brand second
YT end screen	last 5–20s	—	leave clean plate (lower + right) for subscribe/next/playlist	reserve an end-card-safe zone
All three	drifting to 60–90s	authenticity > perfection, phone-feel > studio, natural light, cinematic grading	—	hook in first 1–2s; grain/texture everywhere; support longer durations; safe-zone all text

Cross-platform synthesis rules: (1) design to the tightest safe zone (Story/TikTok), then it's safe everywhere; (2) first frame = the hook = the cover; (3) front-load the payoff, no preamble; (4) captions are a first-class editable layer (word-by-word), not an afterthought; (5) one template, three real aspects — re-flow, never letterbox.

---

5) Prioritized "level up our skills + templates" action list

Ordered by ROI. Each item ties to our stack and the relevant skill file.

Tier 0 — foundation infra (do first; unblocks everything else)

1. Establish the asset library + license firewall. Create the public/{footage,overlays,images,textures,hdri,models,illustrations} tree, assets.json + ASSETS.md, and the CI validation script (commercial_ok + matching-row check). Do one batched VPN "asset run" of a CC0 starter pack (grain/light-leak/dust overlays, 3–4 mesh-gradient PNGs, a few Poly Haven HDRIs + GLBs, business/nature/abstract footage). (Asset pipeline §3.)
2. Promote shared helpers into lib/. Add pick(wide,square,tall) onto Layout in aspect.ts (currently only isWide/isSquare/isTall/vmin/unit); create lib/grades.ts (warm/teal-orange/mono/filmic + palette-driven hue-rotate/saturate); confirm rand/hexToRgba/mixHex in anim.ts cover deterministic needs. (Animation §2, Asset §3.)
3. Stand up a local AI-asset box (HunyuanVideo 1.5 + FLUX/SDXL) so bespoke Persian/branded assets don't depend on geo-blocked SaaS. (Asset §3.)

Tier 1 — highest-ROI template work 4. Build a "captions" engine as a reusable first-class layer — word-by-word kinetic captions, high-contrast white/yellow + black outline, lower-middle-third, safe-zoned for all platforms, beat-syncable. This is currently an afterthought and is the biggest cross-platform win. (Masterpiece §4, Animation §2.) 5. Ship the "kinetic oversized type + grain" template — every aspect, cheap (CSS), uses variable Vazirmatn weight-animation for Persian hero type. Highest ROI per the trends brief. (Trends §1, Animation §2.) 6. Codify the pre-ship polish checklist + 8 layers into a review gate (extend ../flatrender-template-seo/SKILL.md's publish step, or a new lint pass) so no template ships without easing, beat-synced audio, three-aspect verification, and a hero moment. (Masterpiece §4.) 7. Sound-design pass on the existing pack — wire ../remotion-music-picker/SKILL.md BPM mapping + ../remotion-sound-effects/SKILL.md placement + ducking into our current templates. Fastest "professional" upgrade to what already exists. (Masterpiece §4.)

Tier 2 — premium differentiation 8. 3D logo-reveal template + a liquid-chrome variant on @remotion/three + HDRI (three-kit.tsx StudioEnv/Lights/Floor/Effects), all motion off useCurrentFrame(). Premium tier. (Trends §1, Animation §2.) 9. Mesh-gradient + glass lower-third promo — clean modern, IG-friendly, palette-driven, grain on top. (Trends §1.) 10. Grunge / collage / anti-AI pack — rides the authenticity wave for youth/music; uses hand-type, paper overlays, deterministic jitter. (Trends §1.)

Tier 3 — craft & process maturity 11. Adopt the 5-pass workflow (reference → blocking → timing → polish → review) as the team norm, and seed a reference library (AE templates / Dribbble loops) per template type. (Animation §2.) 12. Per-aspect tuning audit of existing templates — stagger + scale via pick, re-flow not letterbox, confirm Persian RTL never clips. (Animation §2, ../remotion-aspect-ratios/SKILL.md.) 13. Color system discipline — enforce dopamine-accent-+-neutral/pastel-base + grain-overlay defaults; run user hex through the grade so no garish value breaks a look. (Trends §1, Masterpiece §4.)

---

Sources

Trends: Envato — Motion Trends 2026 · MonkyVision · GraphicDesignJunction · Krumzi · It's Nice That · Fontfabric · Kittl · StudioMeyer · Envato — 3D Trends · Patata School · Lummi — Animation Trends · Fireart — Tactile Brutalism · AND Academy — Color · Gelato — Colors · Adobe Express — Color of Year · ALM Corp — Short-form · ShortSync · Sprout Social · FrameFlow

Assets: Colorlib — Stock Video · FreeConvert · Moonb · awesome-cc0 · Poly Haven · Poly Haven License · Khronos glTF Samples · 11 Free 3D Asset Sites · Iran censorship (Wikipedia) · Iran tiered internet (Rest of World) · Tech sanctions sheet · Blocked in Iran · AI Video 2026 · Best AI Video (PixVerse) · Best AI Video (Pixflow)

Masterpiece + platform: IG Safe Zone (Outfy) · Reels Safe Zones (TryMyPost) · IG Reel Size (InVideo) · IG Story Dimensions (AdMake) · TikTok Length (Go-Viral) · TikTok 3-Second Rule (2Point) · TikTok Hooks (Selfstorming) · TikTok Captions (Blitzcut) · Shorts Length (OpusClip) · Shorts Best Practices (Miraflow) · Shorts Safe Zone (Kreatli) · Post Production (Balance Studio) · Sound Design in Motion (GUVI)

Stack files referenced: D:\Projects\Flatrender2\services\remotion\src\lib\{anim,aspect,branding,fonts}.ts, three-kit.tsx, kit.tsx · src\templates.tsx · asset root to create: services\remotion\public\ (currently only fonts\) · manifest to create: services\remotion\public\{assets.json,ASSETS.md} · suggested: src\lib\grades.ts.