creator-editing-studio 1.0.20260930

package/template/src/components/LogoIcon.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import {useCurrentFrame, useVideoConfig} from 'remotion';
+import {EASE} from '../design/motion';
+import logos from '../design/logos.json';
+import {durFrames, progress, staggerFrames} from '../lib/animate';
+
+type IconSet = {width: number; height: number; icons: Record<string, {body: string; width?: number; height?: number}>};
+const SET = logos as IconSet;
+
+/**
+ * A full-colour brand logo (SVG Logos via Iconify, CC0) that assembles itself: each shape of the
+ * logo pops in slightly after the previous one, so the icon feels animated rather than pasted in.
+ */
+export const LogoIcon: React.FC<{name: keyof typeof logos.icons; size: number; at: number}> = ({name, size, at}) => {
+  const frame = useCurrentFrame();
+  const {fps} = useVideoConfig();
+  const icon = SET.icons[name];
+  const width = icon.width ?? SET.width;
+  const height = icon.height ?? SET.height;
+
+  const defs = icon.body.match(/<defs>[\s\S]*?<\/defs>/)?.[0] ?? '';
+  const rest = icon.body.replace(defs, '');
+  const parts = rest.match(/<(path|g|circle|rect|polygon|ellipse)\b[\s\S]*?(?:\/>|<\/\1>)/g) ?? [rest];
+
+  return (
+    <svg width={size} height={size} viewBox={`0 0 ${width} ${height}`} style={{overflow: 'visible'}}>
+      {defs ? <g dangerouslySetInnerHTML={{__html: defs}} /> : null}
+      {parts.map((part, i) => {
+        const p = progress(frame, at + staggerFrames(i, fps, 'tight'), durFrames('base', fps), EASE.out);
+        return (
+          <g
+            key={i}
+            style={{
+              opacity: Math.min(1, p * 1.6),
+              transformBox: 'fill-box',
+              transformOrigin: 'center',
+              transform: `scale(${(0.9 + 0.1 * p).toFixed(4)})`,
+            }}
+            dangerouslySetInnerHTML={{__html: part}}
+          />
+        );
+      })}
+    </svg>
+  );
+};

package/template/src/components/MacWindow.tsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import {COLOR, FONT, MOCKUP, RADIUS, SHADOW} from '../design/tokens';
+
+const Light: React.FC<{color: string}> = ({color}) => (
+  <span style={{width: 16, height: 16, borderRadius: RADIUS.pill, backgroundColor: color}} />
+);
+
+const NavButton: React.FC<{flip?: boolean}> = ({flip}) => (
+  <span
+    style={{
+      width: 36,
+      height: 36,
+      borderRadius: RADIUS.pill,
+      backgroundColor: MOCKUP.navButton,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      transform: flip ? 'scaleX(-1)' : undefined,
+    }}
+  >
+    <svg width={18} height={18} viewBox="0 0 18 18">
+      <path d="M14 9 H4 M8.5 4.5 L4 9 L8.5 13.5" fill="none" stroke={MOCKUP.navIcon} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  </span>
+);
+
+/**
+ * Light Mac-style browser window (matches the user's reference): traffic lights, back/forward,
+ * URL field with search icon, overflow menu. Fills its parent; content goes in `children`.
+ */
+export const MacWindow: React.FC<{url: string; children?: React.ReactNode}> = ({url, children}) => (
+  <div
+    style={{
+      position: 'absolute',
+      inset: 0,
+      borderRadius: MOCKUP.radius,
+      overflow: 'hidden',
+      backgroundColor: MOCKUP.content,
+      boxShadow: SHADOW.pop,
+      display: 'flex',
+      flexDirection: 'column',
+    }}
+  >
+    <div
+      style={{
+        height: MOCKUP.barHeight,
+        flexShrink: 0,
+        backgroundColor: MOCKUP.bar,
+        borderBottom: `1px solid ${MOCKUP.barDivider}`,
+        display: 'flex',
+        alignItems: 'center',
+        padding: '0 26px',
+        gap: 10,
+      }}
+    >
+      <Light color={MOCKUP.close} />
+      <Light color={MOCKUP.minimize} />
+      <Light color={MOCKUP.maximize} />
+      <span style={{width: 18}} />
+      <NavButton />
+      <NavButton flip />
+      <div
+        style={{
+          flex: 1,
+          height: 38,
+          marginLeft: 12,
+          marginRight: 12,
+          borderRadius: RADIUS.pill,
+          backgroundColor: MOCKUP.urlField,
+          display: 'flex',
+          alignItems: 'center',
+          padding: '0 18px',
+          fontFamily: FONT.sans,
+          fontSize: 18,
+          color: MOCKUP.urlText,
+          whiteSpace: 'nowrap',
+          overflow: 'hidden',
+        }}
+      >
+        <span style={{flex: 1}}>{url}</span>
+        <svg width={18} height={18} viewBox="0 0 18 18">
+          <circle cx={7.5} cy={7.5} r={5} fill="none" stroke={MOCKUP.navIcon} strokeWidth={2} />
+          <path d="M11.5 11.5 L16 16" stroke={MOCKUP.navIcon} strokeWidth={2} strokeLinecap="round" />
+        </svg>
+      </div>
+      <span style={{display: 'flex', flexDirection: 'column', gap: 4, padding: '0 4px'}}>
+        {[0, 1, 2].map((i) => (
+          <span key={i} style={{width: 4, height: 4, borderRadius: RADIUS.pill, backgroundColor: COLOR.surface}} />
+        ))}
+      </span>
+    </div>
+    <div style={{position: 'relative', flex: 1, overflow: 'hidden'}}>{children}</div>
+  </div>
+);

package/template/src/components/MaskReveal.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import {useCurrentFrame, useVideoConfig} from 'remotion';
+import type {Dur} from '../design/motion';
+import {maskRevealOffset, perFrame} from '../lib/animate';
+import {VelocityBlur} from './VelocityBlur';
+
+/**
+ * Text that rises out of a mask (and exits upward through it), with velocity
+ * motion blur. `lineHeightPx` = fontSize x lineHeight of the text inside.
+ */
+export const MaskReveal: React.FC<{
+  at: number;
+  until?: number;
+  dur?: Dur;
+  lineHeightPx: number;
+  children: React.ReactNode;
+}> = ({at, until, dur, lineHeightPx, children}) => {
+  const frame = useCurrentFrame();
+  const {fps} = useVideoConfig();
+  const offsetAt = (f: number) => maskRevealOffset({frame: f, fps, at, until, dur}) * lineHeightPx;
+
+  return (
+    // Padding gives descenders and the highlight room inside the mask.
+    <span style={{display: 'inline-block', overflow: 'hidden', padding: '0.04em 0 0.16em'}}>
+      <VelocityBlur
+        as="span"
+        vy={perFrame(offsetAt, frame)}
+        style={{display: 'inline-block', transform: `translate3d(0, ${offsetAt(frame).toFixed(3)}px, 0)`}}
+      >
+        {children}
+      </VelocityBlur>
+    </span>
+  );
+};

package/template/src/components/MotionBlur.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import {AbsoluteFill, Freeze, useCurrentFrame} from 'remotion';
+import {BLUR} from '../design/motion';
+
+/**
+ * Film-style motion blur, sampled symmetrically around the current frame.
+ * Unlike @remotion/motion-blur's CameraMotionBlur (which samples ahead of the frame),
+ * blurred and unblurred frames share the same timing, so switching blur on only
+ * while things move never causes a hitch. Costs `samples`x render time while active.
+ * Keep static backgrounds outside this component.
+ */
+export const MotionBlur: React.FC<{
+  children: React.ReactNode;
+  active: (frame: number) => boolean;
+  shutterAngle?: number;
+  samples?: number;
+}> = ({children, active, shutterAngle = BLUR.shutterAngle, samples = BLUR.samples}) => {
+  const frame = useCurrentFrame();
+
+  if (!active(frame) || samples < 2 || shutterAngle <= 0) {
+    return <AbsoluteFill>{children}</AbsoluteFill>;
+  }
+
+  const shutter = shutterAngle / 360;
+  return (
+    <AbsoluteFill style={{isolation: 'isolate'}}>
+      {Array.from({length: samples}, (_, i) => (
+        <AbsoluteFill key={i} style={{mixBlendMode: 'plus-lighter', filter: `opacity(${1 / samples})`}}>
+          <Freeze frame={frame + (i / (samples - 1) - 0.5) * shutter}>{children}</Freeze>
+        </AbsoluteFill>
+      ))}
+    </AbsoluteFill>
+  );
+};

package/template/src/components/PlatformTile.tsx

@@ -0,0 +1,153 @@
+import React from 'react';
+import {useCurrentFrame, useVideoConfig} from 'remotion';
+import {COLOR, FONT, RADIUS, SHADOW, TYPE, WEIGHT} from '../design/tokens';
+import {durFrames, progress, staggerFrames} from '../lib/animate';
+import {Presence} from './Presence';
+
+export type TileBox = {x: number; y: number; w: number; h: number; radius: number};
+
+/**
+ * A rounded tile whose border draws itself on, then its icon and label arrive.
+ * `box` can be animated by the caller (e.g. the tile growing into a window);
+ * `contentOpacity` fades the tile's own content out while `children` fade in.
+ */
+export const PlatformTile: React.FC<{
+  box: TileBox;
+  enterAt: number;
+  icon: React.ReactNode;
+  label: string;
+  /** 0 = normal, 1 = fully dimmed (not the focus). */
+  dim?: number;
+  checkAt?: number;
+  exitAt?: number;
+  contentOpacity?: number;
+  /** Label under the tile (default) or beside it on the right (for vertical stacks). */
+  labelSide?: 'below' | 'right';
+  labelSize?: number;
+  children?: React.ReactNode;
+}> = ({box, enterAt, icon, label, dim = 0, checkAt, exitAt, contentOpacity = 1, labelSide = 'below', labelSize, children}) => {
+  const frame = useCurrentFrame();
+  const {fps} = useVideoConfig();
+  const draw = progress(frame, enterAt, durFrames('slow', fps));
+
+  return (
+    <Presence
+      at={enterAt}
+      until={exitAt}
+      exitTo="below"
+      distance={24}
+      style={{position: 'absolute', left: box.x, top: box.y, width: box.w, height: box.h}}
+    >
+      <div style={{position: 'absolute', inset: 0, opacity: 1 - 0.65 * dim}}>
+        <div
+          style={{
+            position: 'absolute',
+            inset: 0,
+            borderRadius: box.radius,
+            backgroundColor: COLOR.surface,
+            boxShadow: SHADOW.card,
+          }}
+        />
+        <svg
+          width={box.w}
+          height={box.h}
+          style={{position: 'absolute', inset: 0, overflow: 'visible', opacity: contentOpacity}}
+        >
+          <rect
+            x={1.5}
+            y={1.5}
+            width={Math.max(0, box.w - 3)}
+            height={Math.max(0, box.h - 3)}
+            rx={box.radius}
+            pathLength={1}
+            fill="none"
+            stroke={COLOR.borderStrong}
+            strokeWidth={3}
+            strokeDasharray={1}
+            strokeDashoffset={1 - draw}
+          />
+        </svg>
+        <Presence
+          at={enterAt + staggerFrames(1, fps)}
+          blur={8}
+          style={{
+            position: 'absolute',
+            inset: 0,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          <div style={{opacity: contentOpacity}}>{icon}</div>
+        </Presence>
+        <Presence
+          at={enterAt + staggerFrames(2, fps)}
+          style={
+            labelSide === 'right'
+              ? {
+                  position: 'absolute',
+                  left: box.w + 36,
+                  top: 0,
+                  height: box.h,
+                  display: 'flex',
+                  alignItems: 'center',
+                  whiteSpace: 'nowrap',
+                  fontFamily: FONT.sans,
+                  fontSize: labelSize ?? TYPE.h3.size,
+                  fontWeight: WEIGHT.bold,
+                  color: COLOR.fg,
+                }
+              : {
+                  position: 'absolute',
+                  left: -40,
+                  right: -40,
+                  top: box.h + 22,
+                  textAlign: 'center',
+                  fontFamily: FONT.sans,
+                  fontSize: labelSize ?? TYPE.caption.size,
+                  fontWeight: TYPE.caption.weight,
+                  color: COLOR.fgSecondary,
+                }
+          }
+        >
+          <div style={{opacity: contentOpacity}}>{label}</div>
+        </Presence>
+        {checkAt !== undefined ? (
+          <div style={{opacity: contentOpacity}}>
+          <Presence
+            at={checkAt}
+            scaleFrom={0.9}
+            distance={10}
+            style={{
+              position: 'absolute',
+              right: -14,
+              top: -14,
+              width: 46,
+              height: 46,
+              borderRadius: RADIUS.pill,
+              backgroundColor: COLOR.accent,
+              border: `3px solid ${COLOR.surface}`,
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              opacity: contentOpacity,
+            }}
+          >
+            <svg width={22} height={22} viewBox="0 0 22 22">
+              <polyline
+                points="4,11.5 9,16 18,6"
+                fill="none"
+                stroke={COLOR.onAccent}
+                strokeWidth={3}
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+            </svg>
+          </Presence>
+          </div>
+        ) : null}
+        {children}
+      </div>
+    </Presence>
+  );
+};

package/template/src/components/Presence.tsx

@@ -0,0 +1,27 @@
+import React, {type CSSProperties} from 'react';
+import {useCurrentFrame, useVideoConfig} from 'remotion';
+import {perFrame, presenceStyle, presenceValues, type PresenceOptions} from '../lib/animate';
+import {VelocityBlur} from './VelocityBlur';
+
+/**
+ * Standard entrance/exit (see presenceValues) with velocity motion blur.
+ * Renders the element itself — put its layout styles in `style`.
+ */
+export const Presence: React.FC<
+  Omit<PresenceOptions, 'frame' | 'fps'> & {as?: 'div' | 'span'; style?: CSSProperties; children?: React.ReactNode}
+> = ({as, style, children, ...options}) => {
+  const frame = useCurrentFrame();
+  const {fps} = useVideoConfig();
+  const valuesAt = (f: number) => presenceValues({...options, frame: f, fps});
+
+  return (
+    <VelocityBlur
+      as={as}
+      vx={perFrame((f) => valuesAt(f).x, frame)}
+      vy={perFrame((f) => valuesAt(f).y, frame)}
+      style={{...style, ...presenceStyle(valuesAt(frame))}}
+    >
+      {children}
+    </VelocityBlur>
+  );
+};

package/template/src/components/RollingNumber.tsx

@@ -0,0 +1,89 @@
+import React from 'react';
+import {useCurrentFrame, useVideoConfig} from 'remotion';
+import {EASE, type Dur} from '../design/motion';
+import {durFrames, perFrame, progress, staggerFrames} from '../lib/animate';
+import {VelocityBlur} from './VelocityBlur';
+
+/**
+ * Stat reveal where each digit rolls to its final value, rightmost first.
+ * With `from` (same format, e.g. "$26.50" -> "$48.94"), each digit rolls from its old value
+ * to its new one; otherwise digits roll up from 0.
+ * Motion is continuous every frame (a plain counter "ticks" as it slows down), digits are
+ * motion-blurred by speed, and every slot keeps its final glyph width so nothing shifts.
+ * Set font styles on the parent; `sizePx` must equal its font size.
+ * `at` is in the enclosing Sequence's frames.
+ */
+export const RollingNumber: React.FC<{value: string; from?: string; at: number; sizePx: number; dur?: Dur}> = ({
+  value,
+  from,
+  at,
+  sizePx,
+  dur = 'scene',
+}) => {
+  const frame = useCurrentFrame();
+  const {fps} = useVideoConfig();
+  const chars = [...value];
+  const fromChars = from ? [...from] : null;
+  const sameShape =
+    fromChars !== null &&
+    fromChars.length === chars.length &&
+    chars.every((c, i) => /\d/.test(c) === /\d/.test(fromChars[i]) && (/\d/.test(c) || c === fromChars[i]));
+  if (from && !sameShape) {
+    throw new Error(`RollingNumber: "${from}" and "${value}" must have the same format.`);
+  }
+  const digitPositions = chars.flatMap((c, i) => (/\d/.test(c) ? [i] : []));
+
+  return (
+    <span style={{display: 'inline-flex', alignItems: 'flex-start', lineHeight: 1, whiteSpace: 'pre'}}>
+      {chars.map((char, i) => {
+        if (!/\d/.test(char)) {
+          return (
+            <span key={i} style={{height: '1em'}}>
+              {char}
+            </span>
+          );
+        }
+        const target = Number(char);
+        const origin = fromChars ? Number(fromChars[i]) : 0;
+        const order = digitPositions.length - 1 - digitPositions.indexOf(i);
+        const offsetPx = (f: number) => {
+          const p = progress(f, at + staggerFrames(order, fps, 'tight'), durFrames(dur, fps), EASE.out);
+          return -(origin + (target - origin) * p) * sizePx;
+        };
+        return (
+          <span
+            key={i}
+            style={{
+              position: 'relative',
+              display: 'inline-block',
+              height: '1em',
+              // Clip vertically only, so wide digits can pass through narrow slots.
+              clipPath: 'inset(0 -50% 0 -50%)',
+            }}
+          >
+            <span style={{visibility: 'hidden'}}>{char}</span>
+            <VelocityBlur
+              as="span"
+              vy={perFrame(offsetPx, frame)}
+              style={{
+                position: 'absolute',
+                left: '50%',
+                top: 0,
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                transform: `translate3d(-50%, ${offsetPx(frame).toFixed(3)}px, 0)`,
+              }}
+            >
+              {Array.from({length: Math.max(target, origin) + 1}, (_, digit) => (
+                <span key={digit} style={{height: '1em'}}>
+                  {digit}
+                </span>
+              ))}
+            </VelocityBlur>
+          </span>
+        );
+      })}
+    </span>
+  );
+};

package/template/src/components/ScreenView.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import {Img, staticFile, useCurrentFrame, useVideoConfig} from 'remotion';
+import {perFrame} from '../lib/animate';
+import {sequence, type Keyframe} from '../lib/continuity';
+import {VelocityBlur} from './VelocityBlur';
+
+/** A camera on a screenshot: top-left image pixel (x, y) and content px per image px. */
+export type ViewKey = 'x' | 'y' | 'scale';
+export type View = Record<ViewKey, number>;
+
+/**
+ * A screenshot inside a frame (e.g. a browser window) that pans and zooms between views.
+ * Children are overlays positioned in the screenshot's own pixels, so annotations stay glued
+ * to the content while it moves.
+ */
+export const ScreenView: React.FC<{
+  src: string;
+  width: number;
+  height: number;
+  start: View;
+  keys?: Keyframe<ViewKey>[];
+  children?: React.ReactNode;
+}> = ({src, width, height, start, keys = [], children}) => {
+  const frame = useCurrentFrame();
+  const {fps} = useVideoConfig();
+  const viewAt = (f: number) => sequence(f, fps, start, keys);
+  const v = viewAt(frame);
+
+  return (
+    <VelocityBlur
+      bleed={0}
+      vx={perFrame((f) => -viewAt(f).x * viewAt(f).scale, frame)}
+      vy={perFrame((f) => -viewAt(f).y * viewAt(f).scale, frame)}
+      style={{position: 'absolute', inset: 0, overflow: 'hidden'}}
+    >
+      <div
+        style={{
+          position: 'absolute',
+          left: 0,
+          top: 0,
+          width,
+          height,
+          transformOrigin: '0 0',
+          transform: `translate3d(${(-v.x * v.scale).toFixed(3)}px, ${(-v.y * v.scale).toFixed(3)}px, 0) scale(${v.scale.toFixed(5)})`,
+        }}
+      >
+        <Img src={staticFile(src)} style={{display: 'block', width, height}} />
+        {children}
+      </div>
+    </VelocityBlur>
+  );
+};

package/template/src/components/Stage.tsx

@@ -0,0 +1,103 @@
+import React from 'react';
+import {Img, OffthreadVideo, staticFile, useCurrentFrame, useVideoConfig} from 'remotion';
+import {EASE} from '../design/motion';
+import {SCRIM, SHADOW} from '../design/tokens';
+import {durFrames, perFrame} from '../lib/animate';
+import {sequence, type Keyframe} from '../lib/continuity';
+import {VelocityBlur} from './VelocityBlur';
+
+export type StageKey = 'x' | 'y' | 'w' | 'h' | 'radius' | 'focusX' | 'focusY' | 'zoom' | 'shadow' | 'scrim';
+export type StageState = Record<StageKey, number>;
+
+export type StageSource = {
+  /** Path inside assets/. */
+  video: string;
+  width: number;
+  height: number;
+  /** Frame-aligned RGBA cutout frames (assets/<dir>/f<frame>.png) for the given frame ranges. */
+  cutout?: {dir: string; ranges: Array<[number, number]>};
+};
+
+/** Cover the stage box with the video (times `zoom`), keeping the focus point centred where possible. */
+const mediaRect = (s: StageState, src: StageSource) => {
+  const scale = Math.max(s.w / src.width, s.h / src.height) * s.zoom;
+  const width = src.width * scale;
+  const height = src.height * scale;
+  const left = Math.min(0, Math.max(s.w - width, s.w / 2 - s.focusX * scale));
+  const top = Math.min(0, Math.max(s.h - height, s.h / 2 - s.focusY * scale));
+  return {left, top, width, height};
+};
+
+/**
+ * 0..1 zoom envelope around a jump cut (d = frames from the cut): ease-in-out push that is fastest at
+ * the cut, then a slow ease-out back to rest.
+ */
+const cutZoomPulse = (d: number, fps: number): number => {
+  const push = durFrames('fast', fps); // frames on each side of the cut
+  const relax = durFrames('drift', fps) / 2; // settle back afterwards
+  if (d < -push || d > push + relax) return 0;
+  if (d <= push) return EASE.inOut((d + push) / (2 * push));
+  return 1 - EASE.inOut((d - push) / relax);
+};
+
+/**
+ * The talking-head video, moving between layouts (full frame, card, push-in...) without ever cutting.
+ * Render it twice with the same keys: layer="video" at the bottom, layer="cutout" above anything
+ * that should sit behind the subject. Both layers share one geometry, so they always line up.
+ */
+export const Stage: React.FC<{
+  source: StageSource;
+  start: StageState;
+  keys: Keyframe<StageKey>[];
+  layer: 'video' | 'cutout';
+  /**
+   * Jump cuts in the footage (first frame after each cut). The framing alternates between normal
+   * and `zoom` at every cut, so a cut reads as a deliberate camera change instead of a skip.
+   */
+  punchIns?: {frames: number[]; zoom: number};
+  /**
+   * Zoom THROUGH each jump cut instead of snapping: the frame pushes in, moving fastest at the cut
+   * (so the eye reads motion, not a jump), then eases back out. `amount` is the extra zoom at the peak.
+   */
+  cutZoom?: {frames: number[]; amount: number};
+}> = ({source, start, keys, layer, punchIns, cutZoom}) => {
+  const frame = useCurrentFrame();
+  const {fps} = useVideoConfig();
+  const stateAt = (f: number) => sequence(f, fps, start, keys);
+  const s = stateAt(frame);
+
+  const sourceFrame = Math.round(frame);
+  if (layer === 'cutout' && !source.cutout?.ranges.some(([a, b]) => sourceFrame >= a && sourceFrame <= b)) {
+    return null;
+  }
+
+  const cutsSoFar = punchIns ? punchIns.frames.filter((cut) => sourceFrame >= cut).length : 0;
+  const punch = punchIns && cutsSoFar % 2 === 1 ? punchIns.zoom : 1;
+  const through = cutZoom ? 1 + cutZoom.amount * Math.max(0, ...cutZoom.frames.map((cut) => cutZoomPulse(frame - cut, fps))) : 1;
+  const rect = mediaRect({...s, zoom: s.zoom * punch * through}, source);
+  const media =
+    layer === 'video' ? (
+      <OffthreadVideo src={staticFile(source.video)} style={{position: 'absolute', ...rect}} />
+    ) : (
+      <Img src={staticFile(`${source.cutout!.dir}/f${sourceFrame}.png`)} style={{position: 'absolute', ...rect}} />
+    );
+
+  return (
+    <VelocityBlur
+      bleed={0.05}
+      vx={perFrame((f) => stateAt(f).x + stateAt(f).w / 2, frame)}
+      vy={perFrame((f) => stateAt(f).y + stateAt(f).h / 2, frame)}
+      style={{position: 'absolute', left: s.x, top: s.y, width: s.w, height: s.h}}
+    >
+      {layer === 'video' && s.shadow > 0.01 ? (
+        <div style={{position: 'absolute', inset: 0, borderRadius: s.radius, boxShadow: SHADOW.pop, opacity: s.shadow}} />
+      ) : null}
+      <div style={{position: 'absolute', inset: 0, borderRadius: s.radius, overflow: 'hidden'}}>
+        {media}
+        {layer === 'video' && s.scrim > 0.01 ? (
+          <div style={{position: 'absolute', inset: 0, backgroundImage: SCRIM, opacity: s.scrim}} />
+        ) : null}
+      </div>
+    </VelocityBlur>
+  );
+};