creator-editing-studio 1.3.3 → 1.3.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "creator-editing-studio",
-  "version": "1.3.3",
+  "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/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 |