primocode 10.17.1 → 11.0.0

package/vendor/motioncraft/assets/template/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "motioncraft-video",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "studio": "remotion studio src/index.ts",
+    "still": "remotion still src/index.ts Main out/still.png",
+    "render": "remotion render src/index.ts Main out/raw.mp4 --crf=16 --gl=angle",
+    "render:server": "remotion render src/index.ts Main out/raw.mp4 --crf=16 --gl=swangle"
+  },
+  "dependencies": {
+    "@react-three/fiber": "^8.18.0",
+    "@remotion/cli": "^4.0.0",
+    "@remotion/google-fonts": "^4.0.0",
+    "@remotion/layout-utils": "^4.0.0",
+    "@remotion/three": "^4.0.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "remotion": "^4.0.0",
+    "three": "^0.160.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.0",
+    "@types/three": "^0.160.0",
+    "typescript": "^5.6.0"
+  }
+}

package/vendor/motioncraft/assets/template/remotion.config.ts

@@ -0,0 +1,4 @@
+import {Config} from '@remotion/cli/config';
+Config.setVideoImageFormat('jpeg');
+Config.setJpegQuality(92);
+Config.setConcurrency(null);

package/vendor/motioncraft/assets/template/src/Root.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import {Composition} from 'remotion';
+import {Main, MainProps} from './scenes/Example';
+import {FPS} from './lib/tokens';
+import {Launch, LaunchProps} from './scenes/Launch';
+import {Tutorial, TutorialProps} from './scenes/Tutorial';
+import {geometry} from './lib/format.mjs';
+import {TimelineLegacy} from './scenes/TimelineLegacy';
+import {TimelineVideo,timelineDefaults,TimelineProps} from './scenes/TimelineVideo';
+
+// Each composition accepts format/platform props; metadata sets real dimensions, not a crop.
+const meta = ({props}: {props: {format?: string; platform?: string; duration?: number;timeline?:{duration:number}}}) => {
+  const g = geometry(props.format, props.platform);
+  return {width:g.width,height:g.height,...(props.timeline?.duration || props.duration ? {durationInFrames:Math.round((props.timeline?.duration||props.duration||0)*FPS)} : {})};
+};
+const main = {handle:'@yourhandle',format:'16:9',platform:'wide',audio:undefined,mcDebug:false} satisfies MainProps;
+const launch = {handle:'@yourhandle',product:'Your product',problem:'A real problem',feature1:'Verified feature one',feature2:'Verified feature two',cta:'Your CTA',format:'16:9',platform:'wide',mcDebug:false} satisfies LaunchProps;
+const timelineMeta = ({props}:{props:TimelineProps}) => {const g=geometry(props.format,props.platform);return {width:g.width,height:g.height,durationInFrames:Math.round((props.timeline?.duration||30)*FPS)}};
+const tutorial = {handle:'@yourhandle',title:'A clear tutorial',steps:[{title:'Open',caption:'Show the first step',from:0,to:20,x:.5,y:.3},{title:'Choose',caption:'Point at the right control',from:20,to:40,x:.7,y:.5},{title:'Finish',caption:'Show the result',from:40,to:60,x:.5,y:.7}],format:'9:16',platform:'tiktok',mcDebug:false} satisfies TutorialProps;
+export const Root: React.FC = () => <>
+  <Composition id="TimelineLaunch" component={(p:TimelineProps)=><TimelineVideo {...p} kind="launch"/>} durationInFrames={FPS*45} fps={FPS} width={1920} height={1080} defaultProps={{...launch,timeline:timelineDefaults.launch}} calculateMetadata={timelineMeta}/>
+  <Composition id="TimelineTutorial" component={(p:TimelineProps)=><TimelineVideo {...p} kind="tutorial"/>} durationInFrames={FPS*30} fps={FPS} width={1080} height={1920} defaultProps={{...tutorial,timeline:timelineDefaults.tutorial}} calculateMetadata={timelineMeta}/>
+  <Composition id="Main" component={(p:MainProps)=><TimelineLegacy {...p} kind="main"/>} durationInFrames={FPS*20} fps={FPS} width={1920} height={1080} defaultProps={main} calculateMetadata={meta}/>
+  <Composition id="MainVertical" component={(p:MainProps)=><TimelineLegacy {...p} kind="main"/>} durationInFrames={FPS*20} fps={FPS} width={1080} height={1920} defaultProps={{...main,format:'9:16',platform:'tiktok'}} calculateMetadata={meta}/>
+  <Composition id="ProductLaunch" component={(p:LaunchProps)=><TimelineLegacy {...p} kind="launch"/>} durationInFrames={FPS*45} fps={FPS} width={1920} height={1080} defaultProps={launch} calculateMetadata={meta}/>
+  <Composition id="ScreenTutorial" component={(p:TutorialProps)=><TimelineLegacy {...p} kind="tutorial"/>} durationInFrames={FPS*60} fps={FPS} width={1080} height={1920} defaultProps={tutorial} calculateMetadata={meta}/>
+</>;

package/vendor/motioncraft/assets/template/src/components/CachedFrames.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import {Img, staticFile, useCurrentFrame} from 'remotion';
+
+// Place in the SAME bounds as the isolated 3D composition. No WebGL runs after caching.
+// Cache must cover the original absolute frame range; the image sequence is 0-based within it.
+export const CachedFrames: React.FC<{dir: string; start: number; count: number; width?: number; height?: number}> = ({dir,start,count,width,height}) => {
+  const f=useCurrentFrame();
+  if(f<start || f>=start+count) return null;
+  const n=String(f-start).padStart(6,'0');
+  return <Img src={staticFile(`${dir}/${n}.png`)} style={{width:width||'100%',height:height||'100%',objectFit:'contain'}} />;
+};

package/vendor/motioncraft/assets/template/src/components/EndCard.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import {useCurrentFrame} from 'remotion';
+import {C, FONT} from '../lib/tokens';
+import {ramp, spr} from '../lib/anim';
+import {Mascot} from './Three';
+import {Center} from './Stage';
+import {McBox} from '../lib/debug';
+import {useFormat} from '../lib/format-context';
+
+export const EndCard: React.FC<{at: number; handle: string; line?: string}> = ({at, handle, line}) => {
+  const {format}=useFormat();const f = useCurrentFrame(); const s = spr(f, at + 8, {damping: 12, stiffness: 150, mass: 0.6}); const p = ramp(f, at + 18, 12);
+  return <Center gap={18}>
+    <Mascot at={at} size={format==='9:16'?300:220} happy />
+    <McBox kind="text" style={{padding: '12px 30px', borderRadius: 999, background: C.card, boxShadow: '0 10px 30px rgba(20,40,80,0.10)', fontFamily: FONT, fontWeight: 700, fontSize: format==='9:16'?40:31, color: C.accent, transform: `scale(${0.8 + 0.2 * s})`, opacity: Math.min(1, s * 2)}}>{handle}</McBox>
+    {line && <McBox kind="text" style={{fontFamily: FONT, fontWeight: 500, fontSize: 28, color: C.muted, opacity: p}}>{line}</McBox>}
+  </Center>;
+};

package/vendor/motioncraft/assets/template/src/components/Headline.tsx

@@ -0,0 +1,45 @@
+import React, {useMemo} from 'react';
+import {measureText} from '@remotion/layout-utils';
+import {S, FONT} from '../lib/tokens';
+import {useFormat} from '../lib/format-context';
+import {geometry} from '../lib/format.mjs';
+import {Word, InlineIcon, CharReveal} from './Word';
+import {McBox} from '../lib/debug';
+
+export type Item = {t?: string; icon?: string; at: number; accent?: boolean};
+type Level = 'h0' | 'h1' | 'h2' | 'caption';
+// Split "Kuncinya bukan *prompt*" into items. *word* marks the accent. Words get `step` frames of stagger.
+export const words = (text: string, at: number, step = S.motion.word.stagger[0]): Item[] =>
+  text.split(/\s+/).filter(Boolean).map((raw, i) => ({t: raw.replace(/\*/g, ''), accent: /^\*.*\*$/.test(raw), at: Math.round(at + i * step)}));
+
+// Line breaking by real measured width, max 2 lines, no orphan on line 2.
+const layout = (items: Item[], size: number, weight: number, maxW: number) => {
+  const wOf = (it: Item) => it.icon ? size * S.motion.icon.slotWidth : measureText({text: (it.t ?? '') + ' ', fontFamily: FONT, fontSize: size, fontWeight: String(weight), letterSpacing: `${size * S.font.tracking}px`}).width;
+  const widths = items.map(wOf); const total = widths.reduce((a, b) => a + b, 0);
+  if (total <= maxW) return {lines: [items], overflow: false};
+  // best split = most balanced two lines that both fit
+  let best = -1, bestDiff = Infinity;
+  for (let k = 1; k < items.length; k++) {
+    const a = widths.slice(0, k).reduce((x, y) => x + y, 0), b = total - a;
+    if (a <= maxW && b <= maxW && items.length - k >= 2 && k >= 2 && Math.abs(a - b) < bestDiff) { best = k; bestDiff = Math.abs(a - b); }
+  }
+  if (best < 0) return {lines: [items.slice(0, Math.ceil(items.length / 2)), items.slice(Math.ceil(items.length / 2))], overflow: true};
+  return {lines: [items.slice(0, best), items.slice(best)], overflow: false};
+};
+
+export const Headline: React.FC<{items: Item[]; level?: Level; size?: number; out?: number; maxWidth?: number; align?: 'center' | 'left'; style?: React.CSSProperties; allowOverlap?: boolean; reveal?: 'word'|'character'}> =
+({items, level = 'h1', size, out, maxWidth, align = 'center', style, allowOverlap, reveal = 'word'}) => {
+  const {format,platform}=useFormat(); const g=geometry(format,platform); const maxW=Math.min(maxWidth ?? g.safe.width,g.safe.width);
+  const range=S.font.size[level]; const fs=(size ?? range[1]) * (g.width<1400 ? .78 : 1); const weight = S.font.weights[level];
+  const lh = S.font.lineHeight[level];
+  const {lines, overflow} = useMemo(() => layout(items, fs, weight, maxW), [items, fs, weight, maxW]);
+  if (overflow) console.warn(`[motioncraft] headline too long for 2 lines at ${fs}px: shorten the text`);
+  let idx = 0;
+  return <McBox kind="text" allowOverlap={allowOverlap} style={{display: 'flex', flexDirection: 'column', alignItems: align === 'center' ? 'center' : 'flex-start', maxWidth:maxW, ...style}}>
+    {lines.map((line, li) => <div key={li} style={{display: 'flex', alignItems: 'center', height: fs * lh, justifyContent: align === 'center' ? 'center' : 'flex-start'}}>
+      {line.map((it, k) => { const i = idx++; const o = out !== undefined ? out + i * S.motion.wordOut.stagger : undefined;
+        const space = k > 0 && !line[k - 1].icon && !it.icon ? ' ' : '';
+        return it.icon ? <InlineIcon key={k} src={it.icon} at={it.at} size={fs * 1.05} out={o} /> : reveal === 'character' ? <CharReveal key={k} text={space + it.t} at={it.at} size={fs} accent={it.accent} out={o} weight={weight} /> : <Word key={k} t={space + it.t} at={it.at} size={fs} accent={it.accent} out={o} weight={weight} />; })}
+    </div>)}
+  </McBox>;
+};

package/vendor/motioncraft/assets/template/src/components/MorphTransition.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import {interpolate, useCurrentFrame, useVideoConfig} from 'remotion';
+import {C, S} from '../lib/tokens';
+import {cl, easeInOut} from '../lib/anim';
+import {useDebug} from '../lib/debug';
+
+// Corresponding vertices describe one continuous shape, not a dissolve between
+// two pictures. The source/target are normalized center, size, points and color.
+export type MorphShape = {x:number;y:number;size:number;points:[number,number][];color?:string};
+export const morphShapeAt=(a:MorphShape,b:MorphShape,t:number):MorphShape=>{
+  if(a.points.length!==b.points.length||a.points.length<3)throw new Error('Morph endpoints require the same number of vertices (>=3)');
+  const lerp=(u:number,v:number)=>u+(v-u)*t;
+  return {x:lerp(a.x,b.x),y:lerp(a.y,b.y),size:lerp(a.size,b.size),points:a.points.map(([x,y],i)=>[lerp(x,b.points[i][0]),lerp(y,b.points[i][1])]),color:t<.5?a.color:b.color};
+};
+export const MorphTransition:React.FC<{at:number;from:MorphShape;to:MorphShape;duration?:number;holdBefore?:number;holdAfter?:number}>=({at,from,to,duration=S.motion.morph.frames,holdBefore=0,holdAfter=0})=>{
+  const f=useCurrentFrame(),dbg=useDebug(),{width,height}=useVideoConfig();
+  if(dbg||f<at-holdBefore||f>at+duration+holdAfter)return null;
+  const p=interpolate(f,[at,at+duration],[0,1],{...cl,easing:easeInOut});
+  const shape=morphShapeAt(from,to,p);const radius=shape.size*0.5;
+  const fadeIn = holdBefore > 0 ? Math.min(1, (f-(at-holdBefore))/Math.min(10,holdBefore)) : 1;
+  const fadeOut = holdAfter > 0 ? Math.min(1, (at+duration+holdAfter-f)/Math.min(10,holdAfter)) : 1;
+  const pts=shape.points.map(([x,y])=>`${(shape.x*width+x*radius).toFixed(1)},${(shape.y*height+y*radius).toFixed(1)}`).join(' ');
+  // Overlay is decorative and pointer-free. Its vertices are real interpolated
+  // geometry; avoid covering text by choosing positions outside safe zones.
+  return <svg aria-hidden="true" style={{position:'absolute',inset:0,width:'100%',height:'100%',pointerEvents:'none',overflow:'visible'}} viewBox={`0 0 ${width} ${height}`}>
+    <polygon points={pts} fill={shape.color??C.accent} opacity={(holdBefore||holdAfter ? S.motion.morph.opacity * fadeIn * fadeOut : Math.sin(Math.PI*p)*S.motion.morph.opacity)}/>
+  </svg>;
+};

package/vendor/motioncraft/assets/template/src/components/Stage.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import {AbsoluteFill, interpolate, useCurrentFrame} from 'remotion';
+import {S, C} from '../lib/tokens';
+import {useVideoConfig} from 'remotion';
+import {geometry} from '../lib/format.mjs';
+import {useFormat} from '../lib/format-context';
+import {cl, easeInOut} from '../lib/anim';
+import {useDebug} from '../lib/debug';
+
+// Background: soft vertical gradient + two slow blue glows. Nothing else.
+export const Background: React.FC = () => {
+  const f = useCurrentFrame();
+  const g1 = {x: 72 + Math.sin(f / 150) * 4, y: 92 + Math.cos(f / 170) * 3}, g2 = {x: 22 + Math.cos(f / 140) * 4, y: 96 + Math.sin(f / 160) * 3};
+  return <AbsoluteFill style={{background: `linear-gradient(180deg, ${C.bg[0]} 0%, ${C.bg[1]} 55%, ${C.bg[2]} 100%)`}}>
+    <AbsoluteFill style={{filter: 'blur(40px)', background: `radial-gradient(40% 34% at ${g1.x}% ${g1.y}%, ${C.glow[0]}, transparent 70%), radial-gradient(38% 30% at ${g2.x}% ${g2.y}%, ${C.glow[1]}, transparent 70%)`}} />
+  </AbsoluteFill>;
+};
+
+// Scene window with blur-crossfade in/out. Scenes overlap by `overlap` frames; never hard-cut.
+export const Scene: React.FC<{from: number; to: number; children: React.ReactNode; noIn?: boolean; noOut?: boolean}> = ({from, to, children, noIn, noOut}) => {
+  const f = useCurrentFrame(); const dbg = useDebug(); const M = S.motion.scene; const D = M.overlap;
+  if (f < from - D / 2 || f > to + D) return null;
+  const pin = noIn ? 1 : interpolate(f, [from - D / 2, from + D / 2], [0, 1], {...cl, easing: easeInOut});
+  const pout = noOut ? 0 : interpolate(f, [to, to + D], [0, 1], {...cl, easing: easeInOut});
+  const sc = (M.scaleIn - (M.scaleIn - 1) * pin) * (1 - (1 - M.scaleOut) * pout);
+  const x = (1 - pin) * M.shiftIn - pout * M.shiftIn * 0.6;
+  const bl = (1 - pin) * M.blur + pout * M.blur;
+  // Debug mode: hard switch at the crossfade midpoint, so the overlap check only sees real layout collisions
+  // (the blurred half-transparent crossfade is intended and never reads as overlapping text).
+  if (dbg) return pin >= 0.5 && (noOut || f < to) ? <AbsoluteFill style={{transform: `scale(${sc})`}}>{children}</AbsoluteFill> : null;
+  return <AbsoluteFill style={{opacity: pin * (1 - pout), filter: bl > 0.05 ? `blur(${bl}px)` : undefined, transform: `translateX(${x}px) scale(${sc})`}}>{children}</AbsoluteFill>;
+};
+
+// Camera: keyframes [frame, scale, x, y] with in-out easing, plus a constant tiny drift so the frame never dies.
+export type CamKey = [number, number, number, number];
+export const Camera: React.FC<{keys?: CamKey[]; children: React.ReactNode}> = ({keys = [[0, 1, 0, 0]], children}) => {
+  const f = useCurrentFrame(); const K = [...keys].sort((a, b) => a[0] - b[0]);
+  const at = (i: 1 | 2 | 3) => K.length < 2 ? K[0][i] : interpolate(f, K.map((k) => k[0]), K.map((k) => k[i]), {...cl, easing: easeInOut});
+  const maxZ = S.motion.camera.maxZoom; const s = Math.min(maxZ, at(1));
+  const d = S.motion.camera.drift; const dx = Math.sin(f / 90) * d, dy = Math.cos(f / 110) * d * 0.6;
+  return <AbsoluteFill style={{transform: `translate(${at(2) + dx}px, ${at(3) + dy}px) scale(${s})`, transformOrigin: '50% 50%'}}>{children}</AbsoluteFill>;
+};
+
+export const Center: React.FC<{children: React.ReactNode; style?: React.CSSProperties; gap?: number}> = ({children, style, gap = 40}) => {
+  const {format, platform} = useFormat(); const {width,height}=useVideoConfig(); const g=geometry(format,platform);
+  return <div style={{position:'absolute',left:g.safe.x,top:g.safe.y,width:Math.min(g.safe.width,width),height:Math.min(g.safe.height,height),display:'flex',flexDirection:'column',alignItems:'center',justifyContent:'center',gap,...style}}>{children}</div>;
+};
+// Zones keep headline and hero from ever competing for space.
+export const Zone: React.FC<{name: 'top' | 'center' | 'bottom'; children: React.ReactNode; style?: React.CSSProperties}> = ({name, children, style}) => {
+  const {format,platform}=useFormat(); const g=geometry(format,platform); const [a,b]=g.zones[name];
+  return <div style={{position:'absolute',left:g.safe.x,width:g.safe.width,top:g.safe.y+a*g.safe.height,height:(b-a)*g.safe.height,display:'flex',alignItems:'center',justifyContent:'center',...style}}>{children}</div>;
+};

package/vendor/motioncraft/assets/template/src/components/Three.tsx

@@ -0,0 +1,134 @@
+// Real WebGL 3D (never CSS fake 3D). Lighting + materials come from tokens.
+import React, {useEffect, useMemo} from 'react';
+import {interpolate, useCurrentFrame} from 'remotion';
+import {ThreeCanvas} from '@remotion/three';
+import {useFrame, useThree} from '@react-three/fiber';
+import {EffectComposer} from 'three/examples/jsm/postprocessing/EffectComposer.js';
+import {RenderPass} from 'three/examples/jsm/postprocessing/RenderPass.js';
+import {BokehPass} from 'three/examples/jsm/postprocessing/BokehPass.js';
+import * as THREE from 'three';
+import {RoomEnvironment} from 'three/examples/jsm/environments/RoomEnvironment.js';
+import {SVGLoader} from 'three/examples/jsm/loaders/SVGLoader.js';
+import {RoundedBoxGeometry} from 'three/examples/jsm/geometries/RoundedBoxGeometry.js';
+import {S} from '../lib/tokens';
+import {cl, spr} from '../lib/anim';
+import {beatAccent} from '../lib/beat';
+const L = S.three;
+
+const Env: React.FC = () => { const {gl, scene} = useThree(); useEffect(() => { gl.outputColorSpace = THREE.SRGBColorSpace; gl.toneMapping = THREE.NoToneMapping; const pm = new THREE.PMREMGenerator(gl); scene.environment = pm.fromScene(new RoomEnvironment(), 0.04).texture; }, [gl, scene]); return null; };
+export const Lights: React.FC = () => <><Env /><ambientLight intensity={L.ambient} /><directionalLight position={L.key.pos as [number, number, number]} intensity={L.key.intensity} castShadow shadow-mapSize={[512, 512]} shadow-radius={L.shadow.radius} shadow-bias={-0.0001} /><directionalLight position={L.fill.pos as [number, number, number]} intensity={L.fill.intensity} color="#cfe0ff" /></>;
+export type Finish = 'ceramic' | 'glass' | 'metal';
+export const Mat: React.FC<{color: string; finish?: Finish}> = ({color, finish = 'ceramic'}) => {
+  const m = L.finishes[finish];
+  return <meshPhysicalMaterial color={color} metalness={m.metalness} roughness={m.roughness} transmission={m.transmission}
+    thickness={m.thickness} ior={m.ior} envMapIntensity={m.envMapIntensity} clearcoat={m.clearcoat}
+    emissive={color} emissiveIntensity={finish === 'ceramic' ? L.material.emissive : 0} />;
+};
+
+// Optional depth-aware optical blur. BokehPass renders a depth buffer then
+// composites a focus plane; only the 3D canvas is affected, never UI text.
+export const DepthOfField:React.FC<{enabled?:boolean}> = ({enabled = L.depthOfField.enabled}) => {
+  const {gl, scene, camera, size} = useThree();
+  const config = L.depthOfField;
+  const composer = useMemo(() => {
+    if (!enabled) return null;
+    const c = new EffectComposer(gl);
+    c.addPass(new RenderPass(scene, camera));
+    const b = new BokehPass(scene, camera, {focus:config.focus, aperture:config.aperture, maxblur:config.maxBlur});
+    // Three's stock shader forces output alpha to 1, which turns every
+    // transparent 3D canvas into a black rectangle over the DOM. Keep sampled
+    // alpha so the transparent canvas can be composited normally.
+    b.materialBokeh.fragmentShader=b.materialBokeh.fragmentShader.replace('gl_FragColor.a = 1.0;', 'gl_FragColor.a = col.a / 41.0;');
+    b.materialBokeh.needsUpdate=true;
+    b.renderToScreen = true;c.addPass(b);
+    return c;
+  }, [gl, scene, camera, enabled]);
+  useEffect(() => {composer?.setSize(size.width,size.height);return () => composer?.dispose();}, [composer,size.width,size.height]);
+  useFrame(() => {composer?.render();}, enabled ? 1 : 0);
+  return null;
+};
+
+// Real perspective-camera motion, separate from Stage.Camera's 2D framing.
+// Keys are [frame, dolly distance, orbit radians, target x, target y].
+export type Camera3DKey = [number, number, number, number, number];
+export const camera3DAt = (frame: number, keys: Camera3DKey[]) => {
+  const sorted = [...keys].sort((a, b) => a[0] - b[0]);
+  if (!sorted.length) throw new Error('Camera3D needs at least one key');
+  const a = sorted.findIndex((k) => k[0] >= frame);
+  if (a === -1) return sorted[sorted.length - 1].slice(1);
+  if (a === 0) return sorted[0].slice(1);
+  const lo = sorted[a - 1], hi = sorted[a];
+  const t = interpolate(frame, [lo[0], hi[0]], [0, 1], {...cl, easing: (x) => x * x * (3 - 2 * x)});
+  return lo.slice(1).map((v, i) => v + (hi[i + 1] - v) * t);
+};
+export const Camera3D: React.FC<{keys: Camera3DKey[]}> = ({keys}) => {
+  const frame = useCurrentFrame(); const {camera} = useThree();
+  const [distance, orbit, tx, ty] = camera3DAt(frame, keys);
+  camera.position.set(tx + Math.sin(orbit) * distance, ty, Math.cos(orbit) * distance);
+  camera.lookAt(tx, ty, 0);
+  camera.updateProjectionMatrix();
+  return null;
+};
+const cameraKeys = (base: number, at: number, move?: Camera3DKey[]): Camera3DKey[] =>
+  move ?? (S.three.camera.moves as Camera3DKey[]).map(([f, dolly, orbit, x, y]) => [at + f, base * dolly, orbit, x, y]);
+
+// Extruded logo from an SVG path string (use the brand's REAL logo path).
+export const Logo3D: React.FC<{svg: string; at: number; size?: number; depth?: number; color?: string; spin?: number; cameraMove?: Camera3DKey[]; finish?: Finish}> = ({svg, at, size = 520, depth = 100, color = S.color.object3d[0], spin = 1, cameraMove, finish = 'ceramic'}) => {
+  const f = useCurrentFrame(); const s = spr(f, at, S.motion.logo3d.spring);
+  const geo = useMemo(() => {
+    const data = new SVGLoader().parse(svg); const shapes = data.paths.flatMap((p) => SVGLoader.createShapes(p));
+    const g = new THREE.ExtrudeGeometry(shapes, {depth, bevelEnabled: true, bevelThickness: 16, bevelSize: 14, bevelSegments: 9, curveSegments: 24});
+    g.center(); g.computeBoundingBox(); const bb = g.boundingBox!; const k = 900 / Math.max(bb.max.x - bb.min.x, bb.max.y - bb.min.y); g.scale(k, -k, k); return g;
+  }, [svg, depth]);
+  const ry = (1 - s) * Math.PI * 1.2 * spin + Math.sin((f - at) / 40) * 0.12; const fl = Math.sin((f - at) / 26) * 14;
+  return <div style={{width: size, height: size, opacity: Math.min(1, s * 2)}}>
+    <ThreeCanvas width={size} height={size} gl={{alpha: true, antialias: true}} shadows camera={{position: [0, 0, 2200], fov: 26, near: 10, far: 6000}}>
+      <Lights /><DepthOfField /><Camera3D keys={cameraKeys(2200, at, cameraMove)} /><group scale={0.6 + 0.4 * s} position={[0, fl, 0]} rotation={[0.18 * (1 - s) + 0.08, ry, 0]}><mesh geometry={geo}><Mat color={color} finish={finish} /></mesh></group>
+    </ThreeCanvas>
+  </div>;
+};
+
+// Mochi mascot: soft white body, glossy eyes, blush. Bounces + blinks. happy = smiling eyes (end card).
+const MochiMesh: React.FC<{blink: number; squash: number; happy?: boolean}> = ({blink, squash, happy}) => {
+  const body = useMemo(() => { const g = new THREE.SphereGeometry(200, 96, 64); const p = g.attributes.position;
+    for (let i = 0; i < p.count; i++) { const x = p.getX(i); let y = p.getY(i); const z = p.getZ(i); if (y < -110) y = -110 - (y + 110) * 0.35; p.setXYZ(i, x * 1.1, y * 0.92 + 20, z * 0.95); }
+    g.computeVertexNormals(); return g; }, []);
+  return <group scale={[1 + squash * 0.06, 1 - squash * 0.08, 1]}>
+    <mesh geometry={body}><meshPhysicalMaterial color="#fffaf3" emissive="#fff4ea" emissiveIntensity={0.28} roughness={0.7} sheen={1} sheenRoughness={0.5} sheenColor="#ffffff" clearcoat={0.15} /></mesh>
+    {[-1, 1].map((sd) => <group key={sd}>
+      {happy ? <mesh position={[sd * 70, 40, 184]}><torusGeometry args={[19, 6.5, 16, 32, Math.PI]} /><meshPhysicalMaterial color="#1a1a1f" roughness={0.3} clearcoat={1} /></mesh>
+        : <mesh position={[sd * 70, 40, 180]} scale={[1, 1.25 * (1 - blink * 0.9), 0.6]}><sphereGeometry args={[22, 32, 32]} /><meshPhysicalMaterial color="#141418" roughness={0.15} clearcoat={1} /></mesh>}
+      <mesh position={[sd * 118, 0, 165]} scale={[1.5, 0.8, 0.3]} rotation={[0, sd * 0.5, 0]}><sphereGeometry args={[20, 32, 32]} /><meshStandardMaterial color="#ff9f9f" roughness={0.9} transparent opacity={0.55} /></mesh>
+    </group>)}
+    <mesh position={[0, 12, 194]} rotation={[0, 0, Math.PI]}><torusGeometry args={[12, 3.6, 12, 24, Math.PI]} /><meshStandardMaterial color="#1a1a1f" roughness={0.5} /></mesh>
+  </group>;
+};
+export const Mascot: React.FC<{at: number; size?: number; happy?: boolean; cameraMove?: Camera3DKey[]}> = ({at, size = 260, happy, cameraMove}) => {
+  const f = useCurrentFrame(); const s = spr(f, at, {damping: 9, stiffness: 150, mass: 0.8});
+  const bounce = Math.abs(Math.sin((f - at) / 11)) * 0.5; const blink = interpolate((f - at) % 75, [60, 63, 66], [0, 1, 0], cl);
+  return <div style={{width: size, height: size * 0.8, transform: `scale(${s})`, opacity: Math.min(1, s * 2)}}>
+    <ThreeCanvas width={size} height={size * 0.8} gl={{alpha: true, antialias: true}} shadows camera={{position: [0, 40, 1500], fov: 17, near: 10, far: 6000}}>
+      <Lights /><DepthOfField /><Camera3D keys={cameraKeys(1500, at, cameraMove)} /><group rotation={[0.12, -0.22 + Math.sin((f - at) / 30) * 0.12, 0]} position={[0, -20 + bounce * 20, 0]}><MochiMesh happy={happy} blink={blink} squash={bounce * 0.6} /></group>
+    </ThreeCanvas>
+  </div>;
+};
+
+// Field of soft pastel objects floating in (hook/opening). Deterministic positions.
+export const FloatingShapes: React.FC<{at: number; count?: number; w?: number; h?: number; clearX?: number; clearY?: number; cameraMove?: Camera3DKey[]; finishes?: Finish[]; beats?: number[]}> = ({at, count = 14, w = 1920, h = 1080, clearX = 950, clearY = 430, cameraMove, finishes = ['ceramic', 'metal', 'glass'], beats = []}) => {
+  const f = useCurrentFrame(); const cols = S.color.object3d;
+  // Objects stay OUT of the central text area (ellipse clearX x clearY) so they never sit on the headline.
+  const items = useMemo(() => Array.from({length: count}, (_, i) => { const a = (i * 137.5) * Math.PI / 180, r = 1 + (i % 4) * 0.28;
+    const x = Math.cos(a) * clearX * r, y = Math.sin(a) * clearY * r; return {x, y, z: -200 - (i % 5) * 120, kind: i % 4, c: cols[i % 4], d: i * 2}; }), [count, cols, clearX, clearY]);
+  const rb = useMemo(() => new RoundedBoxGeometry(150, 150, 150, 6, 26), []);
+  return <ThreeCanvas width={w} height={h} gl={{alpha: true, antialias: true}} shadows camera={{position: [0, 0, 1800], fov: 40, near: 10, far: 8000}}>
+    <Lights /><DepthOfField /><Camera3D keys={cameraKeys(1800, at, cameraMove)} />
+    {items.map((it, i) => { const s = spr(f, at + it.d, {damping: 12, stiffness: 90, mass: 1}); const t = (f - at) / 30;
+      const finish = finishes[i % finishes.length] ?? 'ceramic';
+      return <group key={i} position={[it.x, it.y + Math.sin(t + i) * 18, it.z]} rotation={[t * 0.3 + i, t * 0.4 + i * 0.5, 0]} scale={s * beatAccent(f, beats)}>
+        {it.kind === 0 && <mesh geometry={rb} castShadow receiveShadow><Mat color={it.c} finish={finish} /></mesh>}
+        {it.kind === 1 && <mesh castShadow receiveShadow><torusGeometry args={[70, 30, 32, 64]} /><Mat color={it.c} finish={finish} /></mesh>}
+        {it.kind === 2 && <mesh castShadow receiveShadow><capsuleGeometry args={[40, 90, 12, 24]} /><Mat color={it.c} finish={finish} /></mesh>}
+        {it.kind === 3 && <mesh castShadow receiveShadow><sphereGeometry args={[70, 48, 48]} /><Mat color={it.c} finish={finish} /></mesh>}
+      </group>; })}
+  </ThreeCanvas>;
+};

package/vendor/motioncraft/assets/template/src/components/UI.tsx

@@ -0,0 +1,103 @@
+import React from 'react';
+import {Img, interpolate, staticFile, useCurrentFrame} from 'remotion';
+import {S, C, FONT, MONO} from '../lib/tokens';
+import {cl, easeOut, ramp, spr, mix} from '../lib/anim';
+import {McBox, useDebug} from '../lib/debug';
+import {useFormat} from '../lib/format-context';
+import {geometry} from '../lib/format.mjs';
+const src = (s: string) => (s.startsWith('http') ? s : staticFile(s));
+
+// Card that rises in with a slight 3D tilt. Optional mac title bar.
+export const Card: React.FC<{at: number; w: number; h: number; title?: string; out?: number; children?: React.ReactNode; style?: React.CSSProperties; allowOverlap?: boolean}> = ({at, w, h, title, out, children, style, allowOverlap}) => {
+  const f = useCurrentFrame(); const M = S.motion.card; const p = ramp(f, at, M.frames, easeOut);
+  const q = out !== undefined ? ramp(f, out, 12) : 0;
+  return <div style={{perspective: 1600, ...style}}>
+    <McBox kind="block" allowOverlap={allowOverlap} style={{width: w, height: h, borderRadius: S.shape.cardRadius, background: C.card, border: `1px solid ${C.cardBorder}`, boxShadow: S.shape.shadow, overflow: 'hidden',
+      opacity: p * (1 - q), filter: `blur(${(1 - p) * M.blur + q * 16}px)`, transform: `translateY(${(1 - p) * M.rise}px) rotateX(${(1 - p) * M.rotateX}deg) scale(${(M.scaleFrom + (1 - M.scaleFrom) * p) * (1 - 0.04 * q)})`}}>
+      {title !== undefined && <div style={{height: 48, background: C.cardBar, display: 'flex', alignItems: 'center', gap: 8, padding: '0 18px', borderBottom: `1px solid ${C.cardBorder}`}}>
+        {['#ff5f57', '#febc2e', '#28c840'].map((c) => <div key={c} style={{width: 12, height: 12, borderRadius: 6, background: c}} />)}
+        <div style={{flex: 1, textAlign: 'center', fontFamily: FONT, fontWeight: 500, fontSize: 18, color: C.muted, marginRight: 52}}>{title}</div>
+      </div>}
+      <div style={{position: 'relative', width: '100%', height: title !== undefined ? h - 48 : h}}>{children}</div>
+    </McBox>
+  </div>;
+};
+
+export const Pill: React.FC<{at: number; children: React.ReactNode; out?: number; style?: React.CSSProperties; size?: number}> = ({at, children, out, style, size = 24}) => {
+  const f = useCurrentFrame(); const s = spr(f, at, S.motion.pill.spring); const p = ramp(f, at, 10);
+  const q = out !== undefined ? ramp(f, out, 10) : 0;
+  return <McBox kind="text" style={{display: 'inline-flex', alignItems: 'center', gap: 10, padding: `${size * 0.42}px ${size * 0.85}px`, borderRadius: 999, background: C.card, boxShadow: '0 8px 24px rgba(20,40,80,0.08), 0 0 0 1px rgba(20,40,80,0.05)',
+    fontFamily: FONT, fontWeight: 600, fontSize: size, color: C.ink, transform: `scale(${0.85 + 0.15 * s})`, opacity: p * (1 - q), filter: `blur(${(1 - p) * S.motion.pill.blur + q * 8}px)`, ...style}}>{children}</McBox>;
+};
+
+export const Keycap: React.FC<{at: number; children: React.ReactNode; size?: number}> = ({at, children, size = 30}) => {
+  const f = useCurrentFrame(); const s = spr(f, at, {damping: 12, stiffness: 180, mass: 0.5});
+  const press = interpolate(f - at, [8, 11, 16], [0, 1, 0], cl); const p = ramp(f, at, 8);
+  return <div style={{display: 'inline-flex', alignItems: 'center', justifyContent: 'center', height: size * 2, minWidth: size * 2, padding: `0 ${size * 0.6}px`, borderRadius: size * 0.45, background: C.card,
+    boxShadow: `0 ${4 - press * 3}px 0 #dfe4ec, 0 10px 26px rgba(20,40,80,0.1), 0 0 0 1px rgba(20,40,80,0.06)`, fontFamily: MONO, fontWeight: 500, fontSize: size, color: C.ink,
+    transform: `translateY(${press * 3}px) scale(${0.8 + 0.2 * s})`, opacity: p}}>{children}</div>;
+};
+
+// Number counting up to a REAL value. Always pair with <Credit> for the source.
+export const Counter: React.FC<{at: number; to: number; from?: number; dur?: number; size?: number; suffix?: string; decimals?: number; color?: string}> = ({at, to, from = 0, dur = S.motion.number.duration, size = 140, suffix = '', decimals = 0, color = C.ink}) => {
+  const f = useCurrentFrame(); const p = ramp(f, at, dur); const v = (from + (to - from) * p).toFixed(decimals); const dbg = useDebug();
+  return <McBox kind="text" style={{fontFamily: FONT, fontWeight: 700, fontSize: size, letterSpacing: size * S.font.tracking, color: dbg ? 'transparent' : color, opacity: ramp(f, at, 8), fontVariantNumeric: 'tabular-nums', lineHeight: 1}}>{Number(v).toLocaleString('en-US', {minimumFractionDigits: decimals})}{suffix}</McBox>;
+};
+
+// Strike a word, then show its replacement (pattern: "not X. Y.")
+export const Strike: React.FC<{at: number; appear?: number; word: string; size?: number; color?: string}> = ({at, appear, word, size = 76, color = C.danger}) => {
+  const f = useCurrentFrame(); const p = ramp(f, at, 10); const dbg = useDebug(); const a = ramp(f, appear ?? at - 12, 12);
+  return <span style={{position: 'relative', display: 'inline-block', fontFamily: FONT, fontWeight: 600, fontSize: size, color: dbg ? 'transparent' : mix(C.ink, C.muted, p), letterSpacing: size * S.font.tracking, opacity: a, filter: `blur(${(1 - a) * 8}px)`}}>
+    {word}<span style={{position: 'absolute', left: -6, right: -6, top: '54%', height: size * 0.07, borderRadius: 4, background: color, transformOrigin: 'left', transform: `scaleX(${p})`}} />
+  </span>;
+};
+
+export const CheckItem: React.FC<{at: number; text: string; done?: number; size?: number; allowOverlap?: boolean}> = ({at, text, done, size = 22, allowOverlap}) => {
+  const f = useCurrentFrame(); const s = spr(f, at, {damping: 12, stiffness: 160, mass: 0.6}); const p = ramp(f, at, 8);
+  const d = done !== undefined ? ramp(f, done, 10) : 0; const dbg = useDebug();
+  return <McBox kind="text" allowOverlap={allowOverlap} style={{display: 'inline-flex', alignItems: 'center', gap: 12, padding: '12px 18px', borderRadius: 16, background: C.card, boxShadow: '0 10px 30px rgba(20,40,80,0.10)',
+    fontFamily: FONT, fontWeight: 500, fontSize: size, color: dbg ? 'transparent' : mix(C.ink, C.muted, d), opacity: p, transform: `scale(${0.8 + 0.2 * s})`, whiteSpace: 'nowrap'}}>
+    <div style={{width: size * 1.1, height: size * 1.1, borderRadius: 999, background: d > 0 ? C.success : C.cardBar, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontSize: size * 0.7, transform: `scale(${0.7 + 0.3 * d})`}}>{d > 0.5 ? '✓' : ''}</div>
+    <span style={{textDecoration: d > 0.6 ? 'line-through' : 'none'}}>{text}</span>
+  </McBox>;
+};
+
+export const StepCards: React.FC<{at: number; steps: string[]; gap?: number; step?: number;vertical?:boolean}> = ({at, steps, gap = 48, step = 10,vertical=false}) => (
+  <div style={{display:'flex',flexDirection:vertical?'column':'row',alignItems:'center',gap:vertical?14:gap}}>
+    {steps.map((s, i) => <React.Fragment key={i}>
+      <Card at={at + i * step} w={vertical?540:210} h={vertical?110:170}>
+        <div style={{position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 18}}>
+          <div style={{width: 44, height: 44, borderRadius: 12, background: i === steps.length - 1 ? C.accent : C.cardBar, color: i === steps.length - 1 ? '#fff' : C.accent, fontFamily: FONT, fontWeight: 700, fontSize: 24, display: 'flex', alignItems: 'center', justifyContent: 'center'}}>{i + 1}</div>
+          <div style={{fontFamily: FONT, fontWeight: 600, fontSize: 34, color: C.ink, letterSpacing: -0.7}}>{s}</div>
+        </div>
+      </Card>
+    </React.Fragment>)}
+  </div>
+);
+
+// Call to action badge, e.g. "Comment MAU"
+export const Callout: React.FC<{at: number; label: string; big: string; note?: string}> = ({at, label, big, note}) => {
+  const f = useCurrentFrame(); const s = spr(f, at, {damping: 10, stiffness: 150, mass: 0.7}); const p = ramp(f, at, 10);
+  const pulse = 1 + Math.max(0, Math.sin((f - at - 20) / 9)) * 0.02 * (f > at + 20 ? 1 : 0);
+  return <div style={{display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12, opacity: p, transform: `scale(${(0.7 + 0.3 * s) * pulse})`}}>
+    <McBox kind="text" style={{padding: '14px 34px', borderRadius: 26, background: C.card, border: `2px solid ${C.accentStart}`, boxShadow: '0 20px 50px rgba(43,127,212,0.18)', display: 'flex', alignItems: 'center', gap: 18}}>
+      <div style={{width: 40, height: 40, borderRadius: 999, background: `radial-gradient(circle at 35% 30%, #cfe3fb, ${C.accent})`}} />
+      <div><div style={{fontFamily: FONT, fontWeight: 500, fontSize: 22, color: C.muted}}>{label}</div><div style={{fontFamily: FONT, fontWeight: 700, fontSize: 64, color: C.accent, lineHeight: 1, letterSpacing: -1.3}}>{big}</div></div>
+    </McBox>
+    {note && <div style={{fontFamily: FONT, fontWeight: 500, fontSize: 22, color: C.muted}}>{note}</div>}
+  </div>;
+};
+
+// Source credit, bottom-left, small. Required for every real number or third-party example.
+export const Credit: React.FC<{at: number; children: React.ReactNode}> = ({at, children}) => {
+  const f = useCurrentFrame(); const p = ramp(f, at, 12);const {format,platform}=useFormat();const g=geometry(format,platform);
+  return <McBox kind="text" style={{position: 'absolute', left:g.safe.x+40,bottom:g.insets.bottom+12, display: 'flex', alignItems: 'center', gap: 10, fontFamily: FONT, fontWeight: 500, fontSize: 20, color: C.muted, opacity: p}}>
+    <div style={{width: 7, height: 7, borderRadius: 4, background: C.highlight}} />{children}
+  </McBox>;
+};
+
+// Real footage inside a player card. Use a JPG sequence (frames/001.jpg...) for bulletproof renders.
+export const Frames: React.FC<{dir: string; count: number; at: number; fps?: number; w: number; h: number}> = ({dir, count, at, fps = 30, w, h}) => {
+  const f = useCurrentFrame(); const i = Math.max(0, Math.min(count - 1, Math.floor((f - at) * fps / 30)));
+  return <Img src={src(`${dir}/${String(i + 1).padStart(3, '0')}.jpg`)} style={{width: w, height: h, objectFit: 'cover', display: 'block'}} />;
+};

package/vendor/motioncraft/assets/template/src/components/Word.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import {Img, interpolate, staticFile, useCurrentFrame} from 'remotion';
+import {S, C, FONT} from '../lib/tokens';
+import {cl, easeIn, easeInOut, mix, ramp, spr} from '../lib/anim';
+import {McBox} from '../lib/debug';
+import {useDebug} from '../lib/debug';
+const M = S.motion;
+
+// One word: grey + blur -> ink, rising on a soft spring. Optional exit.
+export const Word: React.FC<{t: string; at: number; size: number; accent?: boolean; out?: number; weight?: number; color?: string}> = ({t, at, size, accent, out, weight = S.font.weights.h1, color}) => {
+  const f = useCurrentFrame(); const dbg = useDebug();
+  const p = ramp(f, at, M.word.inFrames);
+  const s = spr(f, at, M.word.spring);
+  const cp = ramp(f, at, accent ? M.word.accentColorFrames : M.word.colorFrames);
+  let o = p, bl = (1 - p) * M.word.blur, y = (1 - s) * size * M.word.rise;
+  if (out !== undefined) { const q = interpolate(f, [out, out + M.wordOut.frames], [0, 1], {...cl, easing: easeIn}); o *= 1 - q; bl += q * M.wordOut.blur; y -= q * size * M.wordOut.rise; }
+  const col = color ?? (accent ? mix(C.accentStart, C.accent, cp) : mix(C.inkStart, C.ink, cp));
+  return <span style={{display: 'inline-block', whiteSpace: 'pre', fontFamily: FONT, fontWeight: weight, fontSize: size, lineHeight: 1, letterSpacing: size * S.font.tracking,
+    color: dbg ? 'transparent' : col, opacity: o, filter: bl > 0.05 ? `blur(${bl}px)` : undefined, transform: `translateY(${y}px)`}}>{t}</span>;
+};
+
+// Icon that slides in between words: the slot opens first (neighbours glide apart), then the icon pops.
+export const InlineIcon: React.FC<{src: string; at: number; size: number; out?: number}> = ({src, at, size, out}) => {
+  const f = useCurrentFrame(); const I = M.icon;
+  const wv = interpolate(f, [at - I.slotFrames / 2, at + I.slotFrames / 2], [0, 1], {...cl, easing: easeInOut});
+  const s = spr(f, at, I.spring);
+  let o = Math.min(1, s * 2), sc = s;
+  if (out !== undefined) { const q = interpolate(f, [out, out + 9], [0, 1], {...cl, easing: easeIn}); o *= 1 - q; sc *= 1 - q * 0.2; }
+  const fl = Math.sin((f - at) / 16) * I.float;
+  return <span style={{display: 'inline-flex', justifyContent: 'center', alignItems: 'center', width: wv * size * I.slotWidth, height: size, verticalAlign: 'middle'}}>
+    <Img src={src.startsWith('http') ? src : staticFile(src)} style={{height: size * 1.05, width: 'auto', transform: `translateY(${fl}px) scale(${sc}) rotate(${(1 - s) * I.rotate}deg)`, opacity: o, filter: 'drop-shadow(0 10px 14px rgba(30,60,110,0.16))'}} />
+  </span>;
+};
+
+// Character-level reveal keeps the full word's layout width from the start,
+// so staggering never causes line reflow. Unicode code points stay intact.
+export const CharReveal: React.FC<{text: string; at: number; size: number; accent?: boolean; weight?: number; out?: number}> = ({text, at, size, accent, weight = S.font.weights.h1, out}) => {
+  const f=useCurrentFrame();const dbg=useDebug();const chars=Array.from(text);
+  return <McBox kind="text" style={{display:'inline-block',whiteSpace:'pre',fontFamily:FONT,fontWeight:weight,fontSize:size,lineHeight:1,letterSpacing:size*S.font.tracking}}>
+    {chars.map((ch,i)=>{const p=ramp(f,at+i*M.character.stagger,M.character.frames);
+      const q=out===undefined?0:ramp(f,out+i*M.wordOut.stagger,M.wordOut.frames);
+      return <span key={i} style={{display:'inline-block',color:dbg?'transparent':accent?C.accent:C.ink,opacity:p*(1-q),
+        filter:dbg?undefined:`blur(${(1-p)*M.character.blur+q*M.wordOut.blur}px)`,transform:`translateY(${(1-p)*size*M.character.rise}px)`}}>{ch}</span>;
+    })}
+  </McBox>;
+};

package/vendor/motioncraft/assets/template/src/index.ts

@@ -0,0 +1,3 @@
+import {registerRoot} from 'remotion';
+import {Root} from './Root';
+registerRoot(Root);

package/vendor/motioncraft/assets/template/src/lib/anim.ts

@@ -0,0 +1,17 @@
+import {Easing, interpolate, spring} from 'remotion';
+import {S, FPS} from './tokens';
+export const cl = {extrapolateLeft: 'clamp', extrapolateRight: 'clamp'} as const;
+const b = (a: number[]) => Easing.bezier(a[0], a[1], a[2], a[3]);
+export const easeOut = b(S.ease.out);
+export const easeInOut = b(S.ease.inOut);
+export const easeIn = Easing.in(Easing.quad);
+export type Spr = {damping: number; stiffness: number; mass: number};
+// springs are evaluated at 60 fps internally so 30 fps renders stay smooth
+export const spr = (f: number, at: number, c: Spr) => spring({frame: (f - at) * (60 / FPS), fps: 60, config: c});
+export const ramp = (f: number, at: number, len: number, e = easeOut) => interpolate(f, [at, at + len], [0, 1], {...cl, easing: e});
+export const mix = (a: string, c: string, t: number) => {
+  const h = (s: string) => [1, 3, 5].map((i) => parseInt(s.slice(i, i + 2), 16));
+  const A = h(a), B = h(c);
+  return `rgb(${A.map((v, i) => Math.round(v + (B[i] - v) * t)).join(',')})`;
+};
+export const sec = (s: number) => Math.round(s * FPS);

package/vendor/motioncraft/assets/template/src/lib/beat.ts

@@ -0,0 +1,23 @@
+import {FPS, S} from './tokens';
+
+// Beats are seconds in the existing music beatgrid/timeline. Never invent a beat
+// when none was supplied. The per-style window keeps VO-led words from drifting.
+export const nearestBeatFrame = (frame: number, beats: number[], maxMs = S.motion.beat.snapMs) => {
+  if (!beats?.length) return frame;
+  const maxFrames = maxMs * FPS / 1000;
+  let best = frame, distance = Infinity;
+  for (const second of beats) {
+    const candidate = Math.round(second * FPS);
+    const delta = Math.abs(candidate - frame);
+    if (delta < distance) {best = candidate; distance = delta;}
+  }
+  return distance <= maxFrames ? best : frame;
+};
+export const beatAccent = (frame: number, beats: number[], strength = S.motion.beat.pulse) => {
+  if (!beats?.length) return 1;
+  const past = beats.map((t) => Math.round(t * FPS)).filter((b) => b <= frame);
+  const last = past[past.length - 1];
+  if (last === undefined) return 1;
+  const elapsed = frame - last, length = S.motion.beat.pulseFrames;
+  return elapsed < length ? 1 + strength * (Math.pow(1 - elapsed / length, 2)) : 1;
+};

package/vendor/motioncraft/assets/template/src/lib/debug.tsx

@@ -0,0 +1,12 @@
+// Layout debug mode. When the composition gets inputProps {mcDebug: true}, every registered box is painted
+// as a translucent block (text = red, block = green). `motioncraft qa overlap` renders this mode at low
+// resolution and flags pixels where two text boxes (or two blocks) stack, or where text leaves the safe area.
+import React, {createContext, useContext} from 'react';
+export const DebugCtx = createContext(false);
+export const useDebug = () => useContext(DebugCtx);
+type Kind = 'text' | 'block';
+export const McBox: React.FC<{kind: Kind; allowOverlap?: boolean; style?: React.CSSProperties; children: React.ReactNode}> = ({kind, allowOverlap, style, children}) => {
+  const dbg = useDebug();
+  const paint: React.CSSProperties = dbg && !allowOverlap ? {background: kind === 'text' ? 'rgba(255,0,0,0.5)' : 'rgba(0,255,0,0.35)', boxShadow: 'none'} : {};
+  return <div data-mc={kind} data-mc-allow={allowOverlap ? '1' : undefined} style={{...style, ...paint}}>{dbg && !allowOverlap ? <div style={{display: 'contents', visibility: 'hidden'}}>{children}</div> : children}</div>;
+};

package/vendor/motioncraft/assets/template/src/lib/fonts.ts

@@ -0,0 +1,6 @@
+// Fonts are loaded here. To change fonts: import another family from @remotion/google-fonts
+// (or use @remotion/fonts with a local file in public/fonts) AND update style.json font.display / font.mono.
+import {loadFont as loadDisplay} from '@remotion/google-fonts/Figtree';
+import {loadFont as loadMono} from '@remotion/google-fonts/JetBrainsMono';
+loadDisplay('normal', {weights: ['400', '500', '600', '700'], subsets: ['latin']});
+loadMono('normal', {weights: ['400', '500'], subsets: ['latin']});

package/vendor/motioncraft/assets/template/src/lib/format-context.tsx

@@ -0,0 +1,5 @@
+import React, {createContext, useContext} from 'react';
+export type Format = '16:9'|'1:1'|'4:5'|'9:16';
+export type Platform = 'wide'|'tiktok'|'reels'|'ig-feed';
+export const FormatCtx=createContext<{format:Format;platform:Platform}>({format:'16:9',platform:'wide'});
+export const useFormat=()=>useContext(FormatCtx);

package/vendor/motioncraft/assets/template/src/lib/format.d.mts

@@ -0,0 +1,2 @@
+export type Geometry={format:string;platform:string;width:number;height:number;insets:{left:number;right:number;top:number;bottom:number};safe:{x:number;y:number;width:number;height:number};zones:{top:number[];center:number[];bottom:number[]}};
+export function geometry(format?:string,platform?:string):Geometry;