creator-editing-studio 1.3.7 → 1.3.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "creator-editing-studio",
-  "version": "1.3.7",
+  "version": "1.3.8",
   "description": "Scaffolds a Creator Editing OS studio — components, scripts and rules for editing video from a plain-English brief.",
   "license": "UNLICENSED",
   "type": "module",
@@ -10,6 +10,7 @@
   "files": [
     "bin",
     "template",
+    "media",
     "history.json",
     "README.md"
   ],

package/template/CLAUDE.md

@@ -143,6 +143,10 @@ what each video needs (`preview.tsx`, `TweaksProvider`).
 - Render only when they press **Render final video**, and give the estimated render time only then.
 - If the preview tool is missing (not switched on yet), say so in one line and fall back to rendering with
   the time estimate. Never send them off to fix it mid-edit.
+- **"What's new" / "show me what's new"** → `preview_edit({video: "whats-new"})`: a short demo with one new
+  effect per beat, named on screen. Open it after every update too. It is a sandbox: let them press every
+  button. Save works as usual; if they press Render, say in one line that it is the demo, and that the same
+  buttons appear on every video of their own.
 
 ### Motion tracking — only when asked
 

package/template/preview/lib.mjs

@@ -41,6 +41,9 @@ export function configFor(name) {
   const source = readdirSync(code)
     .filter((f) => /\.(tsx?|json)$/.test(f))
     .map((f) => readFileSync(join(code, f), 'utf8'))
+    // The brand's own font files are named in tokens.ts, not in the video — without this the preview of
+    // every video fell back to a system font.
+    .concat(existsSync(join(SRC, 'design', 'tokens.ts')) ? [readFileSync(join(SRC, 'design', 'tokens.ts'), 'utf8')] : [])
     .join('\n');
   const folders = new Set(['fonts']);
   // Only the fonts this edit names — the studio has many, and each one is ~1 MB in the page.

package/template/src/videos/whats-new/WhatsNewEdit.tsx

@@ -0,0 +1,175 @@
+import React from 'react';
+import {AbsoluteFill, useCurrentFrame} from 'remotion';
+import {Captions} from '../../components/Captions';
+import {HeadPin} from '../../components/HeadPin';
+import {DataLine} from '../../components/DataLine';
+import {MorphState} from '../../components/MorphState';
+import {TypeAhead} from '../../components/TypeAhead';
+import {EASE} from '../../design/motion';
+import {COLOR, FONT, WEIGHT} from '../../design/tokens';
+import {progress} from '../../lib/animate';
+import {sampleTrack, type TrackFile} from '../../lib/track';
+import {TweaksProvider, Tweaked, type Tweaks} from '../../lib/tweaks';
+import {BEATS, FRAMES, WORDS} from './beats';
+import headTrack from './head-track.json';
+import SAVED_TWEAKS from './tweaks.json';
+
+/**
+ * whats-new — the demo every studio carries: 25 seconds, one new effect per beat, each named by a small
+ * label. It opens in the live preview after an update so the person SEES what arrived and can try the
+ * buttons on something that is not their own work.
+ *
+ * NO REAL PERSON. No footage and no voice ship — only the words (as captions) and the motion of a head
+ * recorded once (head-track.json: positions, nothing else). A plain stand-in silhouette rides that path,
+ * so motion tracking and "Follow head" have something to follow. Colours and type are the studio's own
+ * tokens, so it appears in the customer's brand.
+ *
+ * 1280×720, the size the track was recorded at, so its pixels are the composition's pixels.
+ */
+export {FRAMES};
+export const WIDTH = 1280;
+export const HEIGHT = 720;
+const TRACK = headTrack as TrackFile;
+/** One unbroken clip: composition frame = source frame. */
+export const toSource = (f: number) => (f >= 0 && f < FRAMES ? f : null);
+
+const W = (i: number) => WORDS[i].f;
+const SHADOW = '0 2px 18px rgba(0,0,0,0.45)';
+
+/** The stand-in: a soft head-and-shoulders shape on the recorded head path (the track sits at the hairline). */
+const StandIn: React.FC = () => {
+  const f = useCurrentFrame();
+  const p = sampleTrack(TRACK, f);
+  if (!p) return null;
+  const fill = 'rgba(255,255,255,0.10)';
+  return (
+    <div style={{position: 'absolute', left: p.x, top: p.y, transform: `translate(-50%, 0) scale(${p.s}) rotate(${p.r}deg)`, transformOrigin: '50% 140px'}}>
+      <div style={{position: 'absolute', left: -125, top: -10, width: 250, height: 310, borderRadius: '50% 50% 46% 46%', background: fill}} />
+      <div style={{position: 'absolute', left: -330, top: 330, width: 660, height: 420, borderRadius: '300px 300px 0 0', background: fill}} />
+    </div>
+  );
+};
+
+/** In over 8 frames at `from`, out over 6 before `to`. */
+const useInOut = (from: number, to: number) => {
+  const f = useCurrentFrame();
+  if (f < from || f >= to) return 0;
+  return Math.min(progress(f, from, 8, EASE.out), 1 - progress(f, to - 6, 6, EASE.in));
+};
+
+/** The effect's name, top left, for the length of its beat. */
+const Label: React.FC<{text: string; from: number; to: number}> = ({text, from, to}) => {
+  const o = useInOut(from, to);
+  if (!o) return null;
+  return (
+    <div style={{position: 'absolute', left: 48, top: 40, opacity: o, transform: `translateY(${(1 - o) * -10}px)`, display: 'flex', alignItems: 'center', gap: 10, fontFamily: FONT.sans}}>
+      <span style={{background: COLOR.accent, color: COLOR.onAccent, fontSize: 15, fontWeight: WEIGHT.bold, letterSpacing: '0.08em', padding: '5px 10px', borderRadius: 999}}>NEW</span>
+      <span style={{color: COLOR.fgOnDark, fontSize: 24, fontWeight: WEIGHT.semibold, textShadow: SHADOW}}>{text}</span>
+    </div>
+  );
+};
+
+/** Beat 4: the jobs, landing one by one as they are named. */
+const JOBS: [string, number][] = [
+  ['Cut the gaps', W(41)],
+  ['Add captions', W(44)],
+  ['Bring in b-roll', W(46)],
+  ['Zooms', W(49)],
+  ['Motion graphics', W(53)],
+];
+const Jobs: React.FC<{to: number}> = ({to}) => {
+  const f = useCurrentFrame();
+  const out = 1 - progress(f, to - 6, 6, EASE.in);
+  if (f >= to || f < JOBS[0][1] - 2) return null;
+  return (
+    <div style={{position: 'absolute', left: 930, top: 170, display: 'flex', flexDirection: 'column', gap: 18, fontFamily: FONT.sans, opacity: out}}>
+      {JOBS.map(([text, at]) => {
+        const p = progress(f, at - 2, 9, EASE.overshoot);
+        if (p <= 0) return null;
+        return (
+          <div key={text} style={{display: 'flex', alignItems: 'center', gap: 14, opacity: Math.min(1, p * 1.6), transform: `translateX(${(1 - Math.min(1, p)) * 40}px)`}}>
+            <span style={{width: 14, height: 14, borderRadius: 999, background: COLOR.accent, boxShadow: SHADOW}} />
+            <span style={{color: COLOR.fgOnDark, fontSize: 34, fontWeight: WEIGHT.bold, textShadow: SHADOW}}>{text}</span>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+/** A slow push-in on "zooms", easing back out before the next beat. */
+const zoomAt = (f: number) => {
+  const inP = progress(f, W(52) - 4, 18, EASE.inOut);
+  const outP = progress(f, W(56) - 16, 14, EASE.inOut);
+  return 1 + 0.07 * inP * (1 - outP);
+};
+
+export const WhatsNewEdit: React.FC<{tweaks?: Tweaks}> = ({tweaks = SAVED_TWEAKS as Tweaks}) => {
+  const f = useCurrentFrame();
+  const [hook, simple, , list, morph, data] = BEATS;
+  const words = React.useMemo(() => WORDS.map((w) => ({text: w.text, start: w.f / 30, end: w.t / 30, paragraph: 0, matched: true})), []);
+  return (
+    <TweaksProvider tweaks={tweaks} beatStarts={BEATS.map((b) => b.fromF)} track={TRACK} toSource={toSource}>
+      <AbsoluteFill style={{background: COLOR.surfaceDark}}>
+        <AbsoluteFill style={{transform: `scale(${zoomAt(f)})`, transformOrigin: '50% 40%', background: 'radial-gradient(ellipse at 50% 30%, rgba(255,255,255,0.07), transparent 65%)'}}>
+          <StandIn />
+        </AbsoluteFill>
+
+        <Tweaked>
+          {BEATS.map((b) => (
+            <Label key={b.name} text={b.name} from={b.fromF} to={b.toF} />
+          ))}
+
+          {/* 1 · Motion tracking: the tag is pinned to the head. */}
+          <HeadPin track={TRACK} toSource={toSource} from={W(2)} to={hook.toF} dx={350} dy={90}>
+            <div style={{fontFamily: FONT.sans, color: COLOR.onAccent, background: COLOR.accent, fontSize: 28, fontWeight: WEIGHT.bold, padding: '8px 18px', borderRadius: 999, boxShadow: SHADOW, whiteSpace: 'nowrap'}}>
+              ← this follows your head
+            </div>
+          </HeadPin>
+
+          {/* 2 · Type-ahead */}
+          {f >= simple.fromF && f < simple.toF ? (
+            <div style={{position: 'absolute', left: 60, top: 300, opacity: 1 - progress(f, simple.toF - 6, 6, EASE.in)}}>
+              <TypeAhead text="The idea is pretty simple." at={W(16)} speed={1.1} colour={COLOR.onAccent} ghost="rgba(0,0,0,0.28)" background={COLOR.accent} fontSize={34} fontFamily={FONT.sans} fontWeight={WEIGHT.bold} />
+            </div>
+          ) : null}
+
+          {/* 4 · The list that builds */}
+          <Jobs to={list.toF} />
+
+          {/* 5 · Morph: the same pill relabels itself */}
+          {f >= W(59) - 4 && f < morph.toF ? (
+            <div style={{position: 'absolute', left: 70, top: 300, opacity: Math.min(progress(f, W(59) - 4, 8, EASE.out), 1 - progress(f, morph.toF - 6, 6, EASE.in))}}>
+              <MorphState
+                at={W(66)}
+                from={{width: 210, height: 64, background: 'rgba(255,255,255,0.92)', colour: '#111', children: <span style={{fontFamily: FONT.sans, fontSize: 28, fontWeight: WEIGHT.bold}}>Raw clip</span>}}
+                to={{width: 300, height: 64, background: COLOR.accent, colour: COLOR.onAccent, children: <span style={{fontFamily: FONT.sans, fontSize: 28, fontWeight: WEIGHT.bold}}>Ready to post ✓</span>}}
+              />
+            </div>
+          ) : null}
+
+          {/* 6 · Live data line: time spent editing, dropping on "saves" */}
+          {f >= data.fromF ? (
+            <div style={{position: 'absolute', left: 900, top: 190, fontFamily: FONT.sans, opacity: progress(f, data.fromF, 8, EASE.out)}}>
+              <div style={{color: COLOR.fgOnDark, fontSize: 24, fontWeight: WEIGHT.semibold, textShadow: SHADOW, marginBottom: 10}}>Hours spent editing</div>
+              <DataLine
+                from={[0.85, 0.8, 0.88, 0.78, 0.84, 0.8]}
+                to={[0.85, 0.62, 0.44, 0.3, 0.18, 0.1]}
+                drawAt={data.fromF + 2}
+                drawFrames={14}
+                at={W(70)}
+                width={320}
+                height={150}
+                colour={COLOR.fgOnDark}
+                toColour={COLOR.accent}
+              />
+            </div>
+          ) : null}
+        </Tweaked>
+
+        {/* 3 · Captions, word by word, all the way through */}
+        <Captions words={words} placement={() => ({x: 240, y: 610, width: 800, align: 'center', size: 34})} />
+      </AbsoluteFill>
+    </TweaksProvider>
+  );
+};

package/template/src/videos/whats-new/beats.ts

@@ -0,0 +1,44 @@
+/**
+ * whats-new — the short demo every studio carries, so the person can see the newest effects working on a
+ * short sample and try the live preview's buttons on it before they edit anything of their own.
+ *
+ * Each beat shows one effect and names it in a small label, so nobody needs the vocabulary to follow.
+ * A beat runs from its first word to the next beat's first word.
+ */
+import data from './words.json';
+
+export const WORDS = data.words as {text: string; f: number; t: number}[];
+export const FRAMES = data.frames;
+
+/** [first word, name, what is on screen (and the effect it shows)] */
+const PLAN: [number, string, string][] = [
+  [0, 'Motion tracking', 'A label rides with the head — moves, scales and tilts with it'],
+  [15, 'Type-ahead', 'The sentence types into a pill that grows with it, the rest already faint'],
+  [21, 'Word-by-word captions', 'Captions sharpen in word by word, on the spoken timing'],
+  [32, 'A list that builds', 'Each job lands as it is named; a slow zoom on "zooms"'],
+  [56, 'Morph', 'One pill turns from "Raw clip" into "Ready to post" — the same object, relabelled'],
+  [68, 'Live data line', 'A line draws on, then drops on "saves"'],
+];
+
+const mmss = (s: number) => `${Math.floor(s / 60)}:${String(Math.floor(s % 60)).padStart(2, '0')}`;
+
+export const BEATS = PLAN.map(([a, name, beat], i) => {
+  const fromF = i === 0 ? 0 : WORDS[a].f;
+  const next = PLAN[i + 1];
+  const toF = next ? WORDS[next[0]].f : FRAMES;
+  const last = next ? next[0] - 1 : WORDS.length - 1;
+  return {
+    name,
+    beat,
+    icons: [] as string[],
+    fromF,
+    toF,
+    from: fromF / 30,
+    to: toF / 30,
+    time: `${mmss(fromF / 30)}–${mmss(toF / 30)}`,
+    says: WORDS.slice(a, last + 1).map((w) => w.text).join(' '),
+  };
+});
+
+export type {Tweak, Tweaks} from '../../lib/tweaks';
+export {TWEAK_LIMITS as LIMITS} from '../../lib/tweaks';