creator-editing-studio 1.3.2 → 1.3.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "creator-editing-studio",
-  "version": "1.3.2",
+  "version": "1.3.5",
   "description": "Scaffolds a Creator Editing OS studio — components, scripts and rules for editing video from a plain-English brief.",
   "license": "UNLICENSED",
   "type": "module",

package/template/CLAUDE.md

@@ -134,6 +134,51 @@ The plan is there to save them a rebuild, not to put a form in front of them.
 The failure this is guarding against is a whole edit rendered the wrong way. Anything that does
 not risk that should move fast.
 
+## What makes motion read as expensive
+
+The twelve motion laws stop an edit looking broken. These seven are what separate motion that
+looks competent from motion that looks paid for. They were taken from studying reference edits
+frame by frame, and they apply to UI, graphics and footage alike.
+
+**1. Blur anything that moves fast.** In the edits that feel most expensive, nothing travels
+sharp. An element crossing the frame in six frames should be a smear that only resolves as it
+slows — and that includes digits rolling from one number to another, and a line redrawing on a
+chart. Sharp fast motion is the single clearest tell of cheap animation, because real cameras and
+real eyes do not work that way. Use the velocity blur helpers rather than deciding per element.
+
+**2. Morph, don't replace.** When something becomes something else, animate the thing itself
+rather than fading one out and another in. A row that is clicked and confirmed should stretch and
+turn into the confirmation; it should not be covered by a new element that happens to sit in the
+same place. An element that exists in two moments travels between them. This is the law that most
+reliably makes a sequence feel connected rather than assembled.
+
+**3. Overshoot, then settle.** Things that arrive exactly at their final size and stop look
+pasted on. Let an arrival come in slightly too large, or slightly past its mark, and ease back.
+The overshoot is small — a few per cent — and it is the difference between landing and being
+placed.
+
+**4. Animate the data, not the container.** When a value, a chart or a list changes, hold the
+frame still and change only what actually changed. Re-entering the whole panel to show a new
+number throws away the viewer's orientation and makes the change read as a new scene instead of
+an update.
+
+**5. Reveal one thing at a time.** Rows, cards, icons and bullets arrive in reading order with a
+few frames between them, never as a group. If a container also needs to grow, grow it slowly
+underneath while the contents arrive — two speeds, not one.
+
+**6. Earn the hard cut.** In a piece built from continuous motion, a single hard cut to a flat
+colour lands hard precisely because it is the only one. Bursts of hard cuts are their own beat
+and work too, but mixing the two at random wastes both. Decide which the piece is.
+
+**7. Show what is coming.** Small anticipations make an interface feel alive: text typing into a
+pill that grows with it, with the next word already faintly present; a cursor that starts moving
+before the thing it will click appears. The viewer reads intent, not just motion.
+
+A note on where these come from. Every one of them was found by studying an edit frame by frame
+and writing down what it actually did — not by reading about animation. When something looks good
+to you, save the clip and the timecode and do the same. That habit is worth more than any list,
+including this one.
+
 ## Verify the render before you call it done
 
 You have not seen the video. The timeline in your head is not evidence. Before you say an

package/template/scripts/refs.mjs

@@ -7,7 +7,7 @@
  *   npm run refs -- --all   redo every sheet
  *
  * Reads entries shaped like:
- *   ## 4. `farza.mp4` — Farza
+ *   ## 4. `clip-name.mp4` — Creator name
  *   - **00:11–00:14** — what happens...
  * Writes work/refs/<clip>-<mm.ss>-<mm.ss>.jpg and work/refs/INDEX.md (moment -> sheet), and lists
  * clips that are in the folder but have no entry yet, or entries whose clip is missing.

package/template/src/components/CommandCard.tsx

@@ -205,7 +205,7 @@ export const CONNECT_SEGMENTS: Segment[] = [
   {kind: 'plain', text: 'claude mcp add '},
   {kind: 'flag', text: '--scope user --transport http '},
   {kind: 'accent', text: 'creator-editing-os'},
-  {kind: 'plain', text: ' https://creator-editing-os.mahipal-231.workers.dev/mcp/'},
+  {kind: 'plain', text: ' <your connector URL>'},
   {kind: 'redacted', text: 'XXXX-XXXX-XXXX-XXXX'},
 ];
 

package/template/src/components/DataLine.tsx

@@ -0,0 +1,103 @@
+import React from 'react';
+import {useCurrentFrame, useVideoConfig} from 'remotion';
+import {EASE} from '../design/motion';
+import {progress} from '../lib/animate';
+
+/**
+ * Live data morph — the chart holds still and only the data moves.
+ *
+ * The approved beat. When a value, a line or a list changes, the frame does not reset: the axes,
+ * the panel and the grid stay exactly where they are, and the line redraws into its new shape and
+ * recolours as it goes. Re-entering the whole panel to show a new number throws away the viewer's
+ * orientation and makes an update read as a new scene.
+ *
+ * Two series morph into each other point by point, so they must have the same number of points —
+ * resample before passing them in if they do not. Values are 0..1, bottom to top.
+ *
+ * `draw` handles the first appearance: the line is drawn on left to right by a dash offset, which
+ * is a playhead rather than a motion, so it runs linear in time.
+ */
+export const DataLine: React.FC<{
+  /** The series it starts on. Values 0..1. */
+  from: number[];
+  /** The series it becomes. Same length as `from`. Omit to only draw `from`. */
+  to?: number[];
+  /** Frame the morph begins, relative to the enclosing sequence. */
+  at: number;
+  /** How long the morph takes. Default 0.6s. */
+  frames?: number;
+  /** Frame the line draws itself on. Omit to have it present from the start. */
+  drawAt?: number;
+  drawFrames?: number;
+  width: number;
+  height: number;
+  colour: string;
+  /** Colour it becomes, if the state change carries a colour change too. */
+  toColour?: string;
+  strokeWidth?: number;
+  /** Faint fill under the line. */
+  fill?: string;
+}> = ({from, to, at, frames, drawAt, drawFrames, width, height, colour, toColour, strokeWidth = 5, fill}) => {
+  const frame = useCurrentFrame();
+  const {fps} = useVideoConfig();
+
+  if (to && to.length !== from.length) {
+    throw new Error(`DataLine: series must be the same length (${from.length} vs ${to.length}). Resample first.`);
+  }
+
+  const t = to ? progress(frame, at, frames ?? Math.round(0.6 * fps), EASE.inOut) : 0;
+  const values = from.map((v, i) => (to ? v + (to[i] - v) * t : v));
+
+  const pts = values.map((v, i) => {
+    const x = (i / Math.max(1, values.length - 1)) * width;
+    const y = height - v * height;
+    return [x, y] as const;
+  });
+
+  /** A Catmull-Rom style smoothing, so the line curves rather than kinking at every sample. */
+  const d = pts
+    .map(([x, y], i) => {
+      if (i === 0) return `M${x.toFixed(2)} ${y.toFixed(2)}`;
+      const [px, py] = pts[i - 1];
+      const cx = (px + x) / 2;
+      return `C${cx.toFixed(2)} ${py.toFixed(2)} ${cx.toFixed(2)} ${y.toFixed(2)} ${x.toFixed(2)} ${y.toFixed(2)}`;
+    })
+    .join(' ');
+
+  // Generous over-estimate of the path length; exactness does not matter for a dash wipe.
+  const LEN = width * 2.2;
+  const drawn =
+    drawAt === undefined ? 1 : Math.max(0, Math.min(1, (frame - drawAt) / (drawFrames ?? Math.round(1 * fps))));
+
+  const stroke = toColour ? blend(colour, toColour, t) : colour;
+
+  return (
+    <svg width={width} height={height} style={{overflow: 'visible'}}>
+      {fill ? (
+        <path d={`${d} L${width} ${height} L0 ${height} Z`} fill={fill} opacity={drawn} stroke="none" />
+      ) : null}
+      <path
+        d={d}
+        fill="none"
+        stroke={stroke}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeDasharray={drawAt === undefined ? undefined : LEN}
+        strokeDashoffset={drawAt === undefined ? undefined : LEN * (1 - drawn)}
+      />
+    </svg>
+  );
+};
+
+/** Straight sRGB blend. Good enough between two brand colours; not a perceptual mix. */
+const blend = (a: string, b: string, t: number): string => {
+  const parse = (h: string) => {
+    const n = parseInt(h.replace('#', ''), 16);
+    return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
+  };
+  const [r1, g1, b1] = parse(a);
+  const [r2, g2, b2] = parse(b);
+  const m = (x: number, y: number) => Math.round(x + (y - x) * t);
+  return `rgb(${m(r1, r2)}, ${m(g1, g2)}, ${m(b1, b2)})`;
+};

package/template/src/components/MorphState.tsx

@@ -0,0 +1,128 @@
+import React, {type CSSProperties} from 'react';
+import {useCurrentFrame, useVideoConfig} from 'remotion';
+import {EASE} from '../design/motion';
+import {perFrame, progress} from '../lib/animate';
+import {VelocityBlur} from './VelocityBlur';
+
+/**
+ * Morph into state — one element becoming its next state, in place.
+ *
+ * The approved beat. When something changes meaning — a row that is clicked and confirmed, a
+ * button that becomes a success pill, a card that becomes a badge — the element itself stretches,
+ * recolours and swaps its contents. It is never covered by a second element that happens to sit
+ * in the same place, and it never fades out while a replacement fades in.
+ *
+ * This is the single change that most reliably makes a sequence feel connected rather than
+ * assembled, because the viewer's eye stays on one object for the whole move instead of being
+ * handed off between two.
+ *
+ * What morphs: width, height, corner radius, background and text colour. The children cross-fade
+ * across the middle of the move — late enough that the shape has already started changing, so the
+ * swap reads as the same object relabelling itself rather than a cut.
+ *
+ * Travel is velocity-blurred, because nothing fast should be sharp.
+ */
+
+export type MorphFace = {
+  width: number;
+  height: number;
+  radius?: number;
+  background?: string;
+  colour?: string;
+  children?: React.ReactNode;
+};
+
+export const MorphState: React.FC<{
+  /** The state it starts in. */
+  from: MorphFace;
+  /** The state it becomes. */
+  to: MorphFace;
+  /** Frame the morph begins, relative to the enclosing sequence. */
+  at: number;
+  /** How long the morph takes. Default 0.4s — long enough to read, short enough to feel decisive. */
+  frames?: number;
+  style?: CSSProperties;
+}> = ({from, to, at, frames, style}) => {
+  const frame = useCurrentFrame();
+  const {fps} = useVideoConfig();
+  const dur = frames ?? Math.round(0.4 * fps);
+
+  // One curve drives every property, so nothing arrives out of step with anything else.
+  const p = (f: number) => progress(f, at, dur, EASE.emphasis);
+  const t = p(frame);
+
+  const mix = (a: number, b: number) => a + (b - a) * t;
+  const width = mix(from.width, to.width);
+  const height = mix(from.height, to.height);
+  const radius = mix(from.radius ?? 999, to.radius ?? 999);
+
+  /**
+   * Contents swap across the middle 40% of the move. Swapping at the very start shows the new
+   * label in the old shape; swapping at the end looks like a glitch on arrival.
+   */
+  const swap = Math.max(0, Math.min(1, (t - 0.3) / 0.4));
+
+  // Width is what actually travels here, so that is what the blur is sized from.
+  const vx = perFrame((f) => mix2(from.width, to.width, p(f)), frame);
+  const vy = perFrame((f) => mix2(from.height, to.height, p(f)), frame);
+
+  return (
+    <VelocityBlur
+      vx={vx}
+      vy={vy}
+      bleed={0.4}
+      style={{
+        ...style,
+        width,
+        height,
+        borderRadius: radius,
+        // Backgrounds cross-fade by stacking, which handles gradients and alpha correctly where
+        // a numeric colour interpolation would not.
+        backgroundColor: from.background,
+        position: 'relative',
+        overflow: 'hidden',
+        display: 'grid',
+        placeItems: 'center',
+      }}
+    >
+      <div
+        style={{
+          position: 'absolute',
+          inset: 0,
+          backgroundColor: to.background,
+          opacity: t,
+        }}
+      />
+      <Face opacity={1 - swap} colour={from.colour}>
+        {from.children}
+      </Face>
+      <Face opacity={swap} colour={to.colour}>
+        {to.children}
+      </Face>
+    </VelocityBlur>
+  );
+};
+
+const mix2 = (a: number, b: number, t: number) => a + (b - a) * t;
+
+/** One of the two labels, centred and clipped to the shape. */
+const Face: React.FC<{opacity: number; colour?: string; children?: React.ReactNode}> = ({opacity, colour, children}) => {
+  if (opacity <= 0) return null;
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        inset: 0,
+        display: 'grid',
+        placeItems: 'center',
+        opacity,
+        color: colour,
+        whiteSpace: 'nowrap',
+        // Never opacity alone: the outgoing label drifts back slightly as it goes.
+        transform: `scale(${0.97 + opacity * 0.03})`,
+      }}
+    >
+      {children}
+    </div>
+  );
+};

package/template/src/components/TypeAhead.tsx

@@ -0,0 +1,72 @@
+import React, {type CSSProperties} from 'react';
+import {useCurrentFrame, useVideoConfig} from 'remotion';
+import {EASE} from '../design/motion';
+import {progress} from '../lib/animate';
+
+/**
+ * Ghosted type-ahead — text typing into a container that grows with it, with the words still to
+ * come already present in pale grey.
+ *
+ * The approved beat, and the cheapest way to make an interface feel alive. A plain typewriter
+ * makes the viewer wait to find out where a sentence is going; showing the rest faintly means
+ * they read the whole thought immediately and then watch it get committed. The container growing
+ * with the text is what stops it feeling like a caption pasted over a box.
+ *
+ * Typing is linear on purpose. A character count is a count, not a motion, and easing it makes
+ * the speaker sound like they are slowing down.
+ */
+export const TypeAhead: React.FC<{
+  text: string;
+  /** Frame typing starts, relative to the enclosing sequence. */
+  at: number;
+  /** Characters per frame. 1.6 reads as fast but followable at 30fps. */
+  speed?: number;
+  /** Colour of the committed text. */
+  colour: string;
+  /** Colour of the text still to come. Keep it faint — it is a hint, not content. */
+  ghost: string;
+  /** The pill behind it. Pass `null` for bare text. */
+  background?: string | null;
+  fontSize?: number;
+  fontFamily?: string;
+  fontWeight?: number;
+  style?: CSSProperties;
+}> = ({text, at, speed = 1.6, colour, ghost, background = null, fontSize = 40, fontFamily, fontWeight, style}) => {
+  const frame = useCurrentFrame();
+  const {fps} = useVideoConfig();
+
+  const typed = Math.max(0, Math.min(text.length, Math.floor((frame - at) * speed)));
+  const written = text.slice(0, typed);
+  const ahead = text.slice(typed);
+
+  /**
+   * The pill grows in once at the start rather than tracking each character — a container that
+   * resizes on every frame judders, and the text inside it never settles.
+   */
+  const open = progress(frame, at - 2, Math.round(0.26 * fps), EASE.outDecisive);
+  if (open <= 0) return null;
+
+  return (
+    <div
+      style={{
+        ...style,
+        display: 'inline-flex',
+        alignItems: 'baseline',
+        padding: background ? `${fontSize * 0.34}px ${fontSize * 0.58}px` : 0,
+        borderRadius: 999,
+        backgroundColor: background ?? undefined,
+        fontFamily,
+        fontSize,
+        fontWeight,
+        lineHeight: 1.1,
+        whiteSpace: 'pre',
+        opacity: open,
+        transform: `scale(${0.94 + open * 0.06})`,
+        transformOrigin: 'left center',
+      }}
+    >
+      <span style={{color: colour}}>{written}</span>
+      <span style={{color: ghost}}>{ahead}</span>
+    </div>
+  );
+};

package/template/src/compositions/BeatTest.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import {AbsoluteFill, Sequence} from 'remotion';
+import {DataLine} from '../components/DataLine';
+import {MorphState} from '../components/MorphState';
+import {TypeAhead} from '../components/TypeAhead';
+import {FONT, PALETTE, SHADOW, WEIGHT} from '../design/tokens';
+
+/**
+ * The three beats added from the UI-motion reference, side by side so they can be judged before
+ * any video uses them. Each runs on a loop of its own so a still at almost any frame shows
+ * something mid-move rather than at rest.
+ *
+ * Render stills with:  node scripts/stills.mjs BeatTest --frames=14,30,46,70
+ */
+
+const LIME = PALETTE.lime400;
+
+const Label: React.FC<{children: React.ReactNode}> = ({children}) => (
+  <div style={{fontFamily: FONT.sans, fontSize: 24, fontWeight: WEIGHT.semibold, letterSpacing: '0.06em', color: '#8a8880', textTransform: 'uppercase'}}>
+    {children}
+  </div>
+);
+
+export const BEAT_TEST_FRAMES = 90;
+
+export const BeatTest: React.FC = () => (
+  <AbsoluteFill style={{backgroundColor: PALETTE.cream, fontFamily: FONT.sans, padding: 80, gap: 56, display: 'flex', flexDirection: 'column'}}>
+    {/* 1. Morph into state — a payment row becoming its own confirmation. */}
+    <div style={{display: 'flex', flexDirection: 'column', gap: 16}}>
+      <Label>Morph into state</Label>
+      <MorphState
+        at={10}
+        style={{boxShadow: SHADOW.pop}}
+        from={{
+          width: 620,
+          height: 104,
+          radius: 999,
+          background: PALETTE.white,
+          colour: PALETTE.ink900,
+          children: (
+            <span style={{fontSize: 34, fontWeight: WEIGHT.medium, padding: '0 36px'}}>
+              Send ₹2,000 to Wise account
+            </span>
+          ),
+        }}
+        to={{
+          width: 340,
+          height: 104,
+          radius: 999,
+          background: LIME,
+          colour: PALETTE.ink900,
+          children: <span style={{fontSize: 36, fontWeight: WEIGHT.bold}}>Received ✓</span>,
+        }}
+      />
+    </div>
+
+    {/* 2. Live data morph — the panel holds still, only the line changes. */}
+    <div style={{display: 'flex', flexDirection: 'column', gap: 16}}>
+      <Label>Live data morph</Label>
+      <div style={{width: 820, height: 260, borderRadius: 24, backgroundColor: PALETTE.white, border: '1px solid rgba(18,18,16,0.10)', padding: 32, boxShadow: SHADOW.pop}}>
+        <DataLine
+          width={756}
+          height={196}
+          drawAt={2}
+          drawFrames={26}
+          at={38}
+          frames={20}
+          from={[0.22, 0.44, 0.3, 0.58, 0.41, 0.69, 0.52, 0.78, 0.6, 0.72]}
+          to={[0.3, 0.26, 0.52, 0.38, 0.72, 0.5, 0.86, 0.62, 0.9, 0.84]}
+          colour="#3b82f6"
+          toColour="#e5484d"
+          fill="rgba(229,72,77,0.07)"
+        />
+      </div>
+    </div>
+
+    {/* 3. Ghosted type-ahead — the rest of the sentence is already there, faintly. */}
+    <div style={{display: 'flex', flexDirection: 'column', gap: 16, alignItems: 'flex-start'}}>
+      <Label>Ghosted type-ahead</Label>
+      <Sequence from={0} layout="none">
+        <TypeAhead
+          text="cut the gaps and add captions"
+          at={8}
+          speed={1.3}
+          colour={PALETTE.ink900}
+          ghost="rgba(18,18,16,0.22)"
+          background={LIME}
+          fontSize={42}
+          fontFamily={FONT.sans}
+          fontWeight={WEIGHT.semibold}
+        />
+      </Sequence>
+    </div>
+  </AbsoluteFill>
+);

package/template/templates/BRIEF.md

@@ -90,3 +90,8 @@ Music: added by me in Premiere / Instagram     <!-- or a file name in audio/ -->
 | Cut to the music | Whole edit built off the track: slow intro, faster build, hardest on the drop |
 | Film look | Grain, halation, light leak, gate weave (looks: clean, film, super8, cinema) |
 | Sound pass | Whooshes, impacts and risers placed off the cut list, ducked under the voice |
+| Morph into state | An element becomes its next state in place — the row you click turns into the confirmation, instead of one thing fading out and another in |
+| Directional blur | Anything moving fast smears and only resolves as it slows, including rolling digits and redrawing lines |
+| Overshoot and settle | Arrivals come in slightly too big, or just past the mark, and ease back |
+| Live data morph | A chart or list updates in place: only the data moves, the panel never re-enters |
+| Ghosted type-ahead | Text types itself into a pill that grows with it, the words still to come already there in pale grey |