creator-editing-studio 1.3.5 → 1.3.6

package/template/scripts/transcribe.py

@@ -1,103 +1,103 @@
-"""Word-level transcript for a clip: WhisperX transcription + wav2vec2 forced alignment.
-
-Usage (from the project root):
-    python scripts/transcribe.py <media> [--language en] [--model small]
-
-Writes work/<clip-name>/words.json. Models are cached under the studio's .models folder.
-Words the aligner cannot place (often digits like "186%") keep start/end = null and must be
-fixed against the script before building the spine.
-"""
-
-import argparse
-import json
-import os
-import time
-from pathlib import Path
-
-import sys as _sys  # noqa: E402
-_sys.path.insert(0, str(Path(__file__).resolve().parent / "lib"))
-from media import FFMPEG, use_certifi  # noqa: E402
-
-# Models are large; cache them inside the studio so they survive and are easy to find.
-_MODELS = Path(__file__).resolve().parent.parent / ".models"
-os.environ.setdefault("HF_HOME", str(_MODELS / "huggingface"))
-os.environ.setdefault("TORCH_HOME", str(_MODELS / "torch"))
-os.environ["PATH"] = str(Path(FFMPEG).parent) + os.pathsep + os.environ["PATH"]
-
-# torch.hub fetches the word-alignment model with urllib, which on a python.org macOS
-# build has no root certificates — transcription then dies with CERTIFICATE_VERIFY_FAILED
-# after the slow part has already succeeded. Must run before torch is imported.
-use_certifi()
-
-try:
-    import whisperx  # noqa: E402  (must import after the cache/PATH/cert setup above)
-except ModuleNotFoundError as exc:  # pragma: no cover
-    # Run with the wrong interpreter and the bare error reads as "never installed", which
-    # sends you off to fix the wrong thing. Say which python is running and what to do.
-    _venv = Path(__file__).resolve().parent.parent / ".venv"
-    _venv_py = _venv / ("Scripts/python.exe" if os.name == "nt" else "bin/python3")
-    print(f"Cannot import {exc.name}.", file=_sys.stderr)
-    print(f"  running: {_sys.executable}  (python {_sys.version.split()[0]})", file=_sys.stderr)
-    if _venv_py.exists():
-        print(f"  the studio's environment is at {_venv_py}", file=_sys.stderr)
-        print("  run the transcriber with that python, or use: npm run prep", file=_sys.stderr)
-    else:
-        print("  the studio has no .venv yet. Build one with python 3.11 or 3.12:", file=_sys.stderr)
-        print("    py -3.12 -m venv .venv", file=_sys.stderr)
-        print("    .venv/Scripts/python.exe -m pip install -r requirements.txt", file=_sys.stderr)
-    print("  see what you have with: npm run doctor", file=_sys.stderr)
-    raise SystemExit(2)
-
-
-def main() -> None:
-    parser = argparse.ArgumentParser()
-    parser.add_argument("media")
-    parser.add_argument("--language", default=None, help="e.g. en, hi. Detected when omitted.")
-    parser.add_argument("--project", default=None, help="Video project name: writes to work/<project>/<clip>/")
-    parser.add_argument("--model", default="small", help="Whisper size: small (fast on CPU) or medium (more accurate)")
-    args = parser.parse_args()
-
-    media = Path(args.media)
-    out_dir = (Path("work") / args.project / media.stem) if args.project else (Path("work") / media.stem)
-    out_dir.mkdir(parents=True, exist_ok=True)
-    started = time.time()
-
-    audio = whisperx.load_audio(str(media))
-    model = whisperx.load_model(args.model, device="cpu", compute_type="int8", language=args.language)
-    result = model.transcribe(audio, batch_size=4, language=args.language)
-    language = result["language"]
-
-    align_model, metadata = whisperx.load_align_model(language_code=language, device="cpu")
-    aligned = whisperx.align(result["segments"], align_model, metadata, audio, device="cpu", return_char_alignments=False)
-
-    words = []
-    for segment in aligned["segments"]:
-        for w in segment.get("words", []):
-            words.append(
-                {
-                    "word": w["word"],
-                    "start": round(w["start"], 3) if "start" in w else None,
-                    "end": round(w["end"], 3) if "end" in w else None,
-                    "score": round(w["score"], 3) if "score" in w else None,
-                }
-            )
-
-    output = {
-        "source": str(media),
-        "language": language,
-        "model": args.model,
-        "durationSec": round(len(audio) / 16000, 3),
-        "text": " ".join(s["text"].strip() for s in aligned["segments"]),
-        "words": words,
-    }
-    out_file = out_dir / "words.json"
-    out_file.write_text(json.dumps(output, indent=2, ensure_ascii=False), encoding="utf-8")
-
-    unplaced = [w["word"] for w in words if w["start"] is None]
-    print(f"language: {language} | words: {len(words)} | unplaced: {len(unplaced)} {unplaced if unplaced else ''}")
-    print(f"text: {output['text']}")
-    print(f"wrote {out_file} in {time.time() - started:.0f}s")
-
-
-if __name__ == "__main__":
-    main()
+"""Word-level transcript for a clip: WhisperX transcription + wav2vec2 forced alignment.
+
+Usage (from the project root):
+    python scripts/transcribe.py <media> [--language en] [--model small]
+
+Writes work/<clip-name>/words.json. Models are cached under the studio's .models folder.
+Words the aligner cannot place (often digits like "186%") keep start/end = null and must be
+fixed against the script before building the spine.
+"""
+
+import argparse
+import json
+import os
+import time
+from pathlib import Path
+
+import sys as _sys  # noqa: E402
+_sys.path.insert(0, str(Path(__file__).resolve().parent / "lib"))
+from media import FFMPEG, use_certifi  # noqa: E402
+
+# Models are large; cache them inside the studio so they survive and are easy to find.
+_MODELS = Path(__file__).resolve().parent.parent / ".models"
+os.environ.setdefault("HF_HOME", str(_MODELS / "huggingface"))
+os.environ.setdefault("TORCH_HOME", str(_MODELS / "torch"))
+os.environ["PATH"] = str(Path(FFMPEG).parent) + os.pathsep + os.environ["PATH"]
+
+# torch.hub fetches the word-alignment model with urllib, which on a python.org macOS
+# build has no root certificates — transcription then dies with CERTIFICATE_VERIFY_FAILED
+# after the slow part has already succeeded. Must run before torch is imported.
+use_certifi()
+
+try:
+    import whisperx  # noqa: E402  (must import after the cache/PATH/cert setup above)
+except ModuleNotFoundError as exc:  # pragma: no cover
+    # Run with the wrong interpreter and the bare error reads as "never installed", which
+    # sends you off to fix the wrong thing. Say which python is running and what to do.
+    _venv = Path(__file__).resolve().parent.parent / ".venv"
+    _venv_py = _venv / ("Scripts/python.exe" if os.name == "nt" else "bin/python3")
+    print(f"Cannot import {exc.name}.", file=_sys.stderr)
+    print(f"  running: {_sys.executable}  (python {_sys.version.split()[0]})", file=_sys.stderr)
+    if _venv_py.exists():
+        print(f"  the studio's environment is at {_venv_py}", file=_sys.stderr)
+        print("  run the transcriber with that python, or use: npm run prep", file=_sys.stderr)
+    else:
+        print("  the studio has no .venv yet. Build one with python 3.11 or 3.12:", file=_sys.stderr)
+        print("    py -3.12 -m venv .venv", file=_sys.stderr)
+        print("    .venv/Scripts/python.exe -m pip install -r requirements.txt", file=_sys.stderr)
+    print("  see what you have with: npm run doctor", file=_sys.stderr)
+    raise SystemExit(2)
+
+
+def main() -> None:
+    parser = argparse.ArgumentParser()
+    parser.add_argument("media")
+    parser.add_argument("--language", default=None, help="e.g. en, hi. Detected when omitted.")
+    parser.add_argument("--project", default=None, help="Video project name: writes to work/<project>/<clip>/")
+    parser.add_argument("--model", default="small", help="Whisper size: small (fast on CPU) or medium (more accurate)")
+    args = parser.parse_args()
+
+    media = Path(args.media)
+    out_dir = (Path("work") / args.project / media.stem) if args.project else (Path("work") / media.stem)
+    out_dir.mkdir(parents=True, exist_ok=True)
+    started = time.time()
+
+    audio = whisperx.load_audio(str(media))
+    model = whisperx.load_model(args.model, device="cpu", compute_type="int8", language=args.language)
+    result = model.transcribe(audio, batch_size=4, language=args.language)
+    language = result["language"]
+
+    align_model, metadata = whisperx.load_align_model(language_code=language, device="cpu")
+    aligned = whisperx.align(result["segments"], align_model, metadata, audio, device="cpu", return_char_alignments=False)
+
+    words = []
+    for segment in aligned["segments"]:
+        for w in segment.get("words", []):
+            words.append(
+                {
+                    "word": w["word"],
+                    "start": round(w["start"], 3) if "start" in w else None,
+                    "end": round(w["end"], 3) if "end" in w else None,
+                    "score": round(w["score"], 3) if "score" in w else None,
+                }
+            )
+
+    output = {
+        "source": str(media),
+        "language": language,
+        "model": args.model,
+        "durationSec": round(len(audio) / 16000, 3),
+        "text": " ".join(s["text"].strip() for s in aligned["segments"]),
+        "words": words,
+    }
+    out_file = out_dir / "words.json"
+    out_file.write_text(json.dumps(output, indent=2, ensure_ascii=False), encoding="utf-8")
+
+    unplaced = [w["word"] for w in words if w["start"] is None]
+    print(f"language: {language} | words: {len(words)} | unplaced: {len(unplaced)} {unplaced if unplaced else ''}")
+    print(f"text: {output['text']}")
+    print(f"wrote {out_file} in {time.time() - started:.0f}s")
+
+
+if __name__ == "__main__":
+    main()

package/template/src/components/CommandCard.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import {useCurrentFrame, useVideoConfig} from 'remotion';
-import {COLOR, FONT, PALETTE, RADIUS, SHADOW, SPACE, TYPE, WEIGHT} from '../design/tokens';
+import {withAlpha} from '../design/color';
+import {COLOR, FONT, RADIUS, SHADOW, SPACE, TYPE, WEIGHT} from '../design/tokens';
 import {EASE} from '../design/motion';
 import {progress} from '../lib/animate';
 
@@ -38,8 +39,8 @@ export type Segment =
   | {kind: 'redacted'; text: string; label?: string};
 
 const COLOR_FOR: Record<Segment['kind'], string> = {
-  plain: PALETTE.stone100,
-  flag: PALETTE.stone400,
+  plain: COLOR.fgOnDark,
+  flag: COLOR.fgMuted,
   accent: COLOR.accent,
   redacted: 'transparent',
 };
@@ -59,8 +60,8 @@ const Redaction: React.FC<{width: number; label?: string}> = ({width, label}) =>
       verticalAlign: 'middle',
       borderRadius: RADIUS.sm / 2,
       // Accent at low alpha, not a grey smear: it reads as a deliberate mark rather than a mistake.
-      backgroundColor: `${PALETTE.lime400}2e`,
-      border: `2px solid ${PALETTE.lime400}66`,
+      backgroundColor: withAlpha(COLOR.accent, 0.18),
+      border: `2px solid ${withAlpha(COLOR.accent, 0.4)}`,
     }}
   >
     <span
@@ -113,7 +114,7 @@ export const CommandCard: React.FC<{
         width,
         maxWidth: '100%',
         borderRadius: RADIUS.md,
-        backgroundColor: PALETTE.ink900,
+        backgroundColor: COLOR.surfaceDark,
         boxShadow: SHADOW.pop,
         overflow: 'hidden',
         opacity: land,
@@ -126,11 +127,11 @@ export const CommandCard: React.FC<{
           alignItems: 'center',
           gap: SPACE[2],
           padding: `${SPACE[2]}px ${SPACE[3]}px`,
-          backgroundColor: PALETTE.ink800,
-          borderBottom: `2px solid ${PALETTE.ink700}`,
+          backgroundColor: COLOR.borderStrong,
+          borderBottom: `2px solid ${withAlpha(COLOR.fgOnDark, 0.08)}`,
         }}
       >
-        {[PALETTE.stone600, PALETTE.stone600, PALETTE.stone600].map((c, i) => (
+        {[COLOR.fgSecondary, COLOR.fgSecondary, COLOR.fgSecondary].map((c, i) => (
           <span key={i} style={{width: 14, height: 14, borderRadius: RADIUS.pill, backgroundColor: c}} />
         ))}
         <span style={{flex: 1}} />
@@ -141,7 +142,7 @@ export const CommandCard: React.FC<{
             fontWeight: WEIGHT.medium,
             letterSpacing: TYPE.eyebrow.tracking,
             textTransform: 'uppercase',
-            color: note ? COLOR.accent : PALETTE.stone400,
+            color: note ? COLOR.accent : COLOR.fgMuted,
           }}
         >
           {note ?? (platform === 'mac' ? 'macOS' : platform === 'windows' ? 'Windows' : '')}
@@ -155,7 +156,7 @@ export const CommandCard: React.FC<{
           fontSize,
           lineHeight: 1.65,
           letterSpacing: '-0.01em',
-          color: PALETTE.stone100,
+          color: COLOR.fgOnDark,
           wordBreak: 'break-word',
         }}
       >

package/template/src/components/Cursor.tsx

@@ -1,153 +1,153 @@
-import React from 'react';
-import {useCurrentFrame, useVideoConfig} from 'remotion';
-import {EASE} from '../design/motion';
-import {COLOR, FONT, RADIUS, WEIGHT} from '../design/tokens';
-import {durFrames, perFrame, progress, travelFrames} from '../lib/animate';
-import {Presence} from './Presence';
-import {VelocityBlur} from './VelocityBlur';
-
-/** A point the cursor ARRIVES at by frame `at` (the tip of the arrow). */
-export type CursorStop = {at: number; x: number; y: number; click?: boolean};
-
-const CLICK_FRAMES = 6;
-/** Pointer size and where its tip sits inside the 64px artwork. */
-const POINTER = 68;
-const TIP = 6 * (POINTER / 64);
-
-/**
- * An arrow cursor that guides the eye: travels between stops on gentle arcs,
- * arriving exactly on time, and clicks with a press + ripple.
- */
-export const Cursor: React.FC<{
-  stops: CursorStop[];
-  hideAt: number;
-  /**
-   * A name tag riding behind the arrow, the way a collaborator's cursor is labelled in Figma.
-   * Optional and additive: every existing use renders exactly as before without it.
-   *
-   * Pass a function of the frame to change the word mid-move — "copy" becoming "copied" the
-   * instant the click lands reads as the action succeeding, with no second element needed.
-   */
-  label?: string | ((frame: number) => string);
-  /**
-   * Arrow colour. Defaults to the brand accent, which is what every earlier use gets.
-   *
-   * The setup walkthrough passes ink instead, asked for directly ("the arrow should be black"):
-   * over a white email and a light desktop a accent arrow reads as a graphic sitting on the shot,
-   * where a black one reads as the viewer's own pointer.
-   */
-  fill?: string;
-  /** Tag colour, as a function of the frame where it changes state mid-move. */
-  tagColour?: string | ((frame: number) => string);
-  /** Tag text colour, for tags too dark for ink to read on. */
-  tagText?: string | ((frame: number) => string);
-}> = ({
-  stops,
-  hideAt,
-  label,
-  fill = COLOR.accent,
-  tagColour = COLOR.accent,
-  tagText = COLOR.fg,
-}) => {
-  const frame = useCurrentFrame();
-  const {fps} = useVideoConfig();
-
-  const positionAt = (f: number) => {
-    let x = stops[0].x;
-    let y = stops[0].y;
-    for (let i = 1; i < stops.length; i++) {
-      const from = stops[i - 1];
-      const to = stops[i];
-      const distance = Math.hypot(to.x - from.x, to.y - from.y);
-      const travel = Math.min(travelFrames(distance, fps), Math.max(1, to.at - from.at));
-      const depart = to.at - travel;
-      if (f <= depart) break;
-      const t = progress(f, depart, travel, EASE.inOut);
-      // Arc: bulge perpendicular to the path, peaking mid-way.
-      const bulge = Math.sin(Math.PI * t) * distance * 0.1;
-      const nx = distance ? -(to.y - from.y) / distance : 0;
-      const ny = distance ? (to.x - from.x) / distance : 0;
-      x = from.x + (to.x - from.x) * t + nx * bulge;
-      y = from.y + (to.y - from.y) * t + ny * bulge;
-    }
-    return {x, y};
-  };
-
-  const {x, y} = positionAt(frame);
-  const click = stops.find((s) => s.click && frame >= s.at && frame < s.at + durFrames('slow', fps));
-  const pressT = click ? progress(frame, click.at, CLICK_FRAMES, EASE.inOut) : 0;
-  const press = 1 - 0.14 * Math.sin(Math.PI * pressT);
-  const ripple = click ? progress(frame, click.at, durFrames('slow', fps)) : 0;
-
-  // Resolved first so a label that returns an empty string removes the tag outright, which is
-  // how "copied" disappears once the line has been pasted.
-  const labelText = typeof label === 'function' ? label(frame) : label;
-
-  return (
-    <Presence at={stops[0].at} until={hideAt} dur="fast" from="none" style={{position: 'absolute', inset: 0}}>
-      {click ? (
-        <div
-          style={{
-            position: 'absolute',
-            left: click.x - 70 * ripple,
-            top: click.y - 70 * ripple,
-            width: 140 * ripple,
-            height: 140 * ripple,
-            borderRadius: RADIUS.pill,
-            border: `4px solid ${fill}`,
-            opacity: 1 - ripple,
-          }}
-        />
-      ) : null}
-      <VelocityBlur
-        vx={perFrame((f) => positionAt(f).x, frame)}
-        vy={perFrame((f) => positionAt(f).y, frame)}
-        style={{
-          position: 'absolute',
-          left: x - TIP,
-          top: y - TIP,
-          transformOrigin: `${TIP}px ${TIP}px`,
-          transform: `scale(${press.toFixed(4)})`,
-          filter: `drop-shadow(0 8px 14px ${COLOR.fg}66)`,
-        }}
-      >
-        {/* Solid pointer (as in the reference): tip top-left, notched tail. */}
-        <svg width={POINTER} height={POINTER} viewBox="0 0 64 64">
-          <path
-            d="M6 6 L58 26 Q60 27 58 28 L35 35 L28 58 Q27 60 26 58 Z"
-            fill={fill}
-            stroke={COLOR.fg}
-            strokeWidth={3}
-            strokeLinejoin="round"
-          />
-        </svg>
-      </VelocityBlur>
-
-      {labelText ? (
-        <div
-          style={{
-            position: 'absolute',
-            // Sits behind and below the tip, where a Figma cursor label sits, so it never
-            // covers the thing being pointed at.
-            left: x + POINTER * 0.42,
-            top: y + POINTER * 0.52,
-            display: 'flex',
-            alignItems: 'center',
-            padding: '7px 16px',
-            borderRadius: RADIUS.pill,
-            backgroundColor: typeof tagColour === 'function' ? tagColour(frame) : tagColour,
-            fontFamily: FONT.sans,
-            fontSize: 26,
-            fontWeight: WEIGHT.semibold,
-            letterSpacing: '-0.015em',
-            color: typeof tagText === 'function' ? tagText(frame) : tagText,
-            whiteSpace: 'nowrap',
-            boxShadow: `0 6px 16px ${COLOR.fg}33`,
-          }}
-        >
-          {labelText}
-        </div>
-      ) : null}
-    </Presence>
-  );
-};
+import React from 'react';
+import {useCurrentFrame, useVideoConfig} from 'remotion';
+import {EASE} from '../design/motion';
+import {COLOR, FONT, RADIUS, WEIGHT} from '../design/tokens';
+import {durFrames, perFrame, progress, travelFrames} from '../lib/animate';
+import {Presence} from './Presence';
+import {VelocityBlur} from './VelocityBlur';
+
+/** A point the cursor ARRIVES at by frame `at` (the tip of the arrow). */
+export type CursorStop = {at: number; x: number; y: number; click?: boolean};
+
+const CLICK_FRAMES = 6;
+/** Pointer size and where its tip sits inside the 64px artwork. */
+const POINTER = 68;
+const TIP = 6 * (POINTER / 64);
+
+/**
+ * An arrow cursor that guides the eye: travels between stops on gentle arcs,
+ * arriving exactly on time, and clicks with a press + ripple.
+ */
+export const Cursor: React.FC<{
+  stops: CursorStop[];
+  hideAt: number;
+  /**
+   * A name tag riding behind the arrow, the way a collaborator's cursor is labelled in Figma.
+   * Optional and additive: every existing use renders exactly as before without it.
+   *
+   * Pass a function of the frame to change the word mid-move — "copy" becoming "copied" the
+   * instant the click lands reads as the action succeeding, with no second element needed.
+   */
+  label?: string | ((frame: number) => string);
+  /**
+   * Arrow colour. Defaults to the brand accent, which is what every earlier use gets.
+   *
+   * The setup walkthrough passes ink instead, asked for directly ("the arrow should be black"):
+   * over a white email and a light desktop a accent arrow reads as a graphic sitting on the shot,
+   * where a black one reads as the viewer's own pointer.
+   */
+  fill?: string;
+  /** Tag colour, as a function of the frame where it changes state mid-move. */
+  tagColour?: string | ((frame: number) => string);
+  /** Tag text colour, for tags too dark for ink to read on. */
+  tagText?: string | ((frame: number) => string);
+}> = ({
+  stops,
+  hideAt,
+  label,
+  fill = COLOR.accent,
+  tagColour = COLOR.accent,
+  tagText = COLOR.fg,
+}) => {
+  const frame = useCurrentFrame();
+  const {fps} = useVideoConfig();
+
+  const positionAt = (f: number) => {
+    let x = stops[0].x;
+    let y = stops[0].y;
+    for (let i = 1; i < stops.length; i++) {
+      const from = stops[i - 1];
+      const to = stops[i];
+      const distance = Math.hypot(to.x - from.x, to.y - from.y);
+      const travel = Math.min(travelFrames(distance, fps), Math.max(1, to.at - from.at));
+      const depart = to.at - travel;
+      if (f <= depart) break;
+      const t = progress(f, depart, travel, EASE.inOut);
+      // Arc: bulge perpendicular to the path, peaking mid-way.
+      const bulge = Math.sin(Math.PI * t) * distance * 0.1;
+      const nx = distance ? -(to.y - from.y) / distance : 0;
+      const ny = distance ? (to.x - from.x) / distance : 0;
+      x = from.x + (to.x - from.x) * t + nx * bulge;
+      y = from.y + (to.y - from.y) * t + ny * bulge;
+    }
+    return {x, y};
+  };
+
+  const {x, y} = positionAt(frame);
+  const click = stops.find((s) => s.click && frame >= s.at && frame < s.at + durFrames('slow', fps));
+  const pressT = click ? progress(frame, click.at, CLICK_FRAMES, EASE.inOut) : 0;
+  const press = 1 - 0.14 * Math.sin(Math.PI * pressT);
+  const ripple = click ? progress(frame, click.at, durFrames('slow', fps)) : 0;
+
+  // Resolved first so a label that returns an empty string removes the tag outright, which is
+  // how "copied" disappears once the line has been pasted.
+  const labelText = typeof label === 'function' ? label(frame) : label;
+
+  return (
+    <Presence at={stops[0].at} until={hideAt} dur="fast" from="none" style={{position: 'absolute', inset: 0}}>
+      {click ? (
+        <div
+          style={{
+            position: 'absolute',
+            left: click.x - 70 * ripple,
+            top: click.y - 70 * ripple,
+            width: 140 * ripple,
+            height: 140 * ripple,
+            borderRadius: RADIUS.pill,
+            border: `4px solid ${fill}`,
+            opacity: 1 - ripple,
+          }}
+        />
+      ) : null}
+      <VelocityBlur
+        vx={perFrame((f) => positionAt(f).x, frame)}
+        vy={perFrame((f) => positionAt(f).y, frame)}
+        style={{
+          position: 'absolute',
+          left: x - TIP,
+          top: y - TIP,
+          transformOrigin: `${TIP}px ${TIP}px`,
+          transform: `scale(${press.toFixed(4)})`,
+          filter: `drop-shadow(0 8px 14px ${COLOR.fg}66)`,
+        }}
+      >
+        {/* Solid pointer (as in the reference): tip top-left, notched tail. */}
+        <svg width={POINTER} height={POINTER} viewBox="0 0 64 64">
+          <path
+            d="M6 6 L58 26 Q60 27 58 28 L35 35 L28 58 Q27 60 26 58 Z"
+            fill={fill}
+            stroke={COLOR.fg}
+            strokeWidth={3}
+            strokeLinejoin="round"
+          />
+        </svg>
+      </VelocityBlur>
+
+      {labelText ? (
+        <div
+          style={{
+            position: 'absolute',
+            // Sits behind and below the tip, where a Figma cursor label sits, so it never
+            // covers the thing being pointed at.
+            left: x + POINTER * 0.42,
+            top: y + POINTER * 0.52,
+            display: 'flex',
+            alignItems: 'center',
+            padding: '7px 16px',
+            borderRadius: RADIUS.pill,
+            backgroundColor: typeof tagColour === 'function' ? tagColour(frame) : tagColour,
+            fontFamily: FONT.sans,
+            fontSize: 26,
+            fontWeight: WEIGHT.semibold,
+            letterSpacing: '-0.015em',
+            color: typeof tagText === 'function' ? tagText(frame) : tagText,
+            whiteSpace: 'nowrap',
+            boxShadow: `0 6px 16px ${COLOR.fg}33`,
+          }}
+        >
+          {labelText}
+        </div>
+      ) : null}
+    </Presence>
+  );
+};