@devinilabs/reelstack 1.2.0

package/families/glass/palette.ts

@@ -0,0 +1,93 @@
+/**
+ * ReelStack — Glass Iridescent palette
+ *
+ * Verified against /Users/abhishekraj/my-video/src/GraphifyReel.tsx (the foundational
+ * preset). Other Glass presets (paperclip, gstack, lilagents, jcode) inherit this
+ * base and add accent variations in their own preset files.
+ *
+ * Mood: premium product reveal. Underwater-light caustics, glass surfaces,
+ * iridescent text shimmer.
+ */
+export const palette = {
+  // Backgrounds
+  bg: "#EFEAF2",
+  bgWarm: "#E9E2EE",
+  bgCool: "#E4E9F2",
+
+  // Ink (light-mode text)
+  ink: "#0E0E12",      // contrast 16.8:1 on bg #EFEAF2 — WCAG AAA
+  inkSoft: "#26242C",  // contrast 12.4:1 on bg #EFEAF2 — WCAG AAA
+  inkMuted: "#5A5867", // contrast 6.4:1  on bg #EFEAF2 — WCAG AA
+  inkDim: "#86848F",   // contrast 3.4:1  on bg #EFEAF2 — WCAG AA-Large
+
+  // Iridescent stops (used by CausticBlobs, FloatingGlyphs, ParticleBurst)
+  iriCyan: "#7FE8D4",
+  iriViolet: "#8B7FE8",
+  iriRose: "#E89BC4",
+  iriGold: "#F2D88F",
+
+  // Pills (eyebrow / contextual labels)
+  violetPill: "#9D8BF2",
+  tealPill: "#85DDC9",
+
+  // Glass-card surface tokens
+  glassFill: "rgba(255, 255, 255, 0.42)",
+  glassFillStrong: "rgba(255, 255, 255, 0.62)",
+  glassBorder: "rgba(255, 255, 255, 0.86)",
+
+  // Macro-window dots (for embedded UI screenshots)
+  macClose: "#FF5F57",
+  macMin: "#FEBC2E",
+  macMax: "#28C840",
+} as const;
+
+/**
+ * Safe-zone constants — every Glass scaffold reserves these.
+ * Top 280–290 px and bottom 1500–1640 px are off-limits for hero copy / CTAs.
+ */
+export const safeZones = {
+  top: 290,
+  bottom: 1500, // y where the bottom 22% reserved band begins
+  canvas: { width: 1080, height: 1920 },
+} as const;
+
+/**
+ * Iridescent gradient strings derived from the palette — pre-computed so
+ * presets can drop them straight into CSS without re-mixing.
+ */
+export const gradients = {
+  iridescent: `linear-gradient(135deg, ${palette.iriCyan} 0%, ${palette.iriViolet} 33%, ${palette.iriRose} 66%, ${palette.iriGold} 100%)`,
+  causticCyan: `radial-gradient(ellipse, ${palette.iriCyan}55 0%, transparent 60%)`,
+  causticViolet: `radial-gradient(ellipse, ${palette.iriViolet}55 0%, transparent 60%)`,
+  causticRose: `radial-gradient(ellipse, ${palette.iriRose}55 0%, transparent 60%)`,
+  causticGold: `radial-gradient(ellipse, ${palette.iriGold}55 0%, transparent 60%)`,
+} as const;
+
+/**
+ * Hard-coded "allowed accents" list. The lint command checks every fill /
+ * stroke / background color in a Glass Iridescent reel against this set
+ * (plus neutral ink shades). Anything off-list is flagged as a hue bleed.
+ */
+export const ALLOWED_ACCENTS = [
+  palette.iriCyan,
+  palette.iriViolet,
+  palette.iriRose,
+  palette.iriGold,
+  palette.violetPill,
+  palette.tealPill,
+  palette.ink,
+] as const;
+
+export type GlassPalette = typeof palette;
+
+/** Re-export grid units so consumers can pull them from the family entrypoint. */
+export {
+  GRID,
+  GRID_2,
+  GRID_4,
+  GRID_6,
+  GRID_8,
+  GRID_12,
+  GRID_16,
+  GRID_24,
+} from "../../utils/grid";

package/families/glass/presets/claudewatch.ts

@@ -0,0 +1,64 @@
+/**
+ * Preset: claudewatch (Glass Iridescent)
+ * Source: ClaudeWatchReel.tsx
+ *
+ * The longest reel in the catalog (105.2s). Dual-narration structure (demo
+ * clip + technical explanation). Heavy use of frame-strip illustrations
+ * (film.mp4 sequences) for "video being watched" visuals.
+ */
+export const preset = {
+  name: "claudewatch",
+  family: "glass",
+  source: "ClaudeWatchReel",
+  durationFrames: 3156,
+  fps: 30,
+  copy: {
+    hook: "This custom Claude skill literally watches video.",
+    sub: "YouTube, any length. Whisper, auto-chapters, searchable, second brain.",
+    cta: "Free skill — link below.",
+  },
+  accents: {
+    claude: "#FF7A4D",   // coral
+    film: "#E89414",     // marigold
+    vector: "#6E6EFF",   // indigo
+    success: "#1FD891",  // mint
+    crimson: "#FF5C7E",
+    plasma: "#B58CFF",
+  },
+  beats: {
+    hook: 0,
+    viral: 240,
+    demo: 540,
+    result: 1110,
+    decode: 1410,
+    brain: 1740,
+    ytCta: 1980,
+    hood: 2160,
+    ytdlp: 2310,
+    ffmpeg: 2460,
+    flipbook: 2640,
+    local: 2820,
+    comment: 2970,
+    end: 3120,
+  },
+  primitives: [
+    "CausticBlobs",
+    "HairlineGrid",
+    "GlassCard", // strong variant: glassFill 0.42 / glassFillStrong 0.62
+    "EyebrowPill",
+    "StaggeredWords",
+    "Counter",
+    "SonarRings",
+    "ParticleBurst",
+    "LightBeam",
+    "FloatingGlyphs",
+    "FilmStrip", // perforated 35mm strip — "Type. Paste. Watch." centerpiece
+    "IridescentRing", // multi-stop chromatic halo — alternative to SonarRings
+    "IridescentText", // hero-word gradient treatment ("Watch.")
+    "BreakdownCard", // BREAKDOWN.MD callout under the filmstrip
+    "FrameStrip", // preset-specific — film.mp4 sequences as flipbook
+  ],
+  glassVariant: "strong",
+  notes:
+    "ClaudeWatch's six accent colors are named scene-specific (claude, film, vector, success, crimson, plasma). Pick the accent per scene from the named set rather than mixing across scenes.",
+} as const;

package/families/glass/presets/claudewatchcta.ts

@@ -0,0 +1,43 @@
+/**
+ * Preset: claudewatchcta (Glass Iridescent)
+ * Source: ClaudeWatchCTAReel.tsx
+ *
+ * 8-second standalone CTA cut. Uses ClaudeWatchReel's primitives but
+ * collapsed into a tight quick-hook + eyebrow + hero word + sub-line +
+ * description-pill structure. Use as an outro/sticker on other reels.
+ */
+export const preset = {
+  name: "claudewatchcta",
+  family: "glass",
+  source: "ClaudeWatchCTAReel",
+  durationFrames: 240,
+  fps: 30,
+  copy: {
+    hook: "Claude Watches Video.",
+    sub: "Free skill, link below.",
+  },
+  accents: {
+    claude: "#FF7A4D",
+  },
+  beats: {
+    hook: 0,
+    eyebrow: 30,
+    heroWord: 60,
+    subLine: 120,
+    descriptionPill: 180,
+    end: 240,
+  },
+  primitives: [
+    "CausticBlobs",
+    "GlassCard",
+    "EyebrowPill",
+    "StaggeredWords",
+    "SonarRings",
+    "ParticleBurst",
+    "IridescentText", // hero-word gradient — fits inside the 8s budget
+    "BreakdownCard", // optional sub-line if the CTA needs structured rows
+    "IridescentRing", // chromatic halo behind the hero word
+  ],
+  notes:
+    "Designed to be appended to longer reels as a final 8s CTA. Frame budget is tight — keep motion floors satisfied with concurrent layers, not sequenced ones.",
+} as const;

package/families/glass/presets/graphify.ts

@@ -0,0 +1,45 @@
+/**
+ * Preset: graphify (Glass Iridescent)
+ * Source: GraphifyReel.tsx — the foundational Glass reel.
+ *
+ * The reference build for the entire family. Multimodal product reveal,
+ * 65 seconds, full primitive vocabulary on display.
+ */
+export const preset = {
+  name: "graphify",
+  family: "glass",
+  source: "GraphifyReel",
+  durationFrames: 1956,
+  fps: 30,
+  copy: {
+    hook: "Multimodal Claude understands the whole web. Graph everything.",
+    cta: "Hit my YouTube for the full walkthrough.",
+  },
+  accents: {},
+  beats: {
+    intro: 0,
+    hookEnd: 180,
+    problem: 540,
+    revealName: 720,
+    mechanism: 1020,
+    clip: 1320,
+    numbers: 1500,
+    multimodal: 1680,
+    compat: 1830,
+    cta: 1860,
+  },
+  primitives: [
+    "CausticBlobs",
+    "HairlineGrid",
+    "GlassCard",
+    "EyebrowPill",
+    "StaggeredWords",
+    "Counter",
+    "SonarRings",
+    "ParticleBurst",
+    "LightBeam",
+    "FloatingGlyphs",
+  ],
+  notes:
+    "Use this preset when in doubt — it carries the strongest motion-floor budget and the most polished primitive composition.",
+} as const;

package/families/glass/presets/gstack.ts

@@ -0,0 +1,48 @@
+/**
+ * Preset: gstack (Glass Iridescent)
+ * Source: GstackReel.tsx
+ *
+ * Long-form (94s) feature-callout heavy reel. Heaviest GlassCard usage in
+ * the family — backdropFilter blur(32px) saturate(180%) for that frosted
+ * heavy feel.
+ */
+export const preset = {
+  name: "gstack",
+  family: "glass",
+  source: "GstackReel",
+  durationFrames: 2820,
+  fps: 30,
+  copy: {
+    hook: "The president of YC just open-sourced his entire Claude Code setup. It's called gstack.",
+    cta: "Free, MIT, just clone.",
+  },
+  accents: {
+    ycOrange: "#F26625",
+    emerald: "#34D399",
+    rose: "#FB7185",
+  },
+  beats: {
+    hook: 0,
+    name: 240,
+    officeHours: 720,
+    qa: 1140,
+    cso: 1500,
+    parallel: 1860,
+    install: 2280,
+    cta: 2580,
+    end: 2820,
+  },
+  primitives: [
+    "CausticBlobs",
+    "HairlineGrid",
+    "GlassCard", // heavy variant — backdropFilter blur(32px) saturate(180%)
+    "EyebrowPill",
+    "StaggeredWords",
+    "SonarRings",
+    "ParticleBurst",
+    "FloatingGlyphs",
+  ],
+  glassVariant: "heavy",
+  notes:
+    "Use the heavy GlassCard variant — gstack's feature callouts need stronger glass to read against the iridescent caustics behind them.",
+} as const;

package/families/glass/presets/jcode.ts

@@ -0,0 +1,50 @@
+/**
+ * Preset: jcode (Glass Iridescent)
+ * Source: JcodeReel.tsx
+ *
+ * Performance-claim reel with a single rust-orange accent on the iridescent
+ * base. ScrambleText (incremental char reveal) is the signature element.
+ * Film-grain overlay constant throughout.
+ */
+export const preset = {
+  name: "jcode",
+  family: "glass",
+  source: "JcodeReel",
+  durationFrames: 2164,
+  fps: 30,
+  copy: {
+    hook: "63 times faster than Codex. Jcode rebuilt in Rust. Parallel swarms.",
+    cta: "GitHub link below.",
+  },
+  accents: {
+    rust: "#E55A1A",
+    rustSoft: "#F9C5A5",
+    rustDeep: "#9B3A0E",
+  },
+  beats: {
+    hook: 0,
+    nameDrop: 348,
+    benchmark: 554,
+    rustReveal: 907,
+    parallel: 1153,
+    swarms: 1463,
+    install: 1660,
+    cta: 1995,
+    end: 2164,
+  },
+  primitives: [
+    "CausticBlobs",
+    "HairlineGrid",
+    "GlassCard",
+    "EyebrowPill",
+    "StaggeredWords",
+    "Counter",
+    "SonarRings",
+    "ParticleBurst",
+    "FloatingGlyphs", // code symbols only — no emojis
+    "ScrambleText",   // preset-specific
+    "FilmGrain",      // constant overlay (SVG turbulence, opacity 0.06)
+  ],
+  notes:
+    "FloatingGlyphs use code-symbol set only (∑, ∫, ⟨⟩, ≠) — no emojis ever. Film grain stays on for the whole reel; do not toggle per scene.",
+} as const;

package/families/glass/presets/lilagents.ts

@@ -0,0 +1,52 @@
+/**
+ * Preset: lilagents (Glass Iridescent)
+ * Source: LilAgentsReel.tsx
+ *
+ * Character-driven (Bruce + Jazz). Dock dark background variant + ThoughtBubble
+ * components. Sits in Glass family because the iridescent glass primitives
+ * still drive scene composition, but uses a darker bg.
+ */
+export const preset = {
+  name: "lilagents",
+  family: "glass",
+  source: "LilAgentsReel",
+  durationFrames: 2160,
+  fps: 30,
+  copy: {
+    hook: "Tiny Claude agents walk on your dock. Bruce and Jazz. Local, no signup.",
+    cta: "Free download below.",
+  },
+  accents: {
+    dockBg: "#1c162e", // overrides bg for the dock-style dark variant
+    peach: "#FFB088",
+    bruce: "#E89BC4",
+    jazz: "#7FE8D4",
+    terminalText: "#A8FFD9",
+  },
+  beats: {
+    hook: 0,
+    bruceIntro: 165,
+    jazzIntro: 268,
+    interaction: 448,
+    capability1: 542,
+    capability2: 711,
+    capability3: 837,
+    install: 1093,
+    privacy: 1391,
+    local: 1681,
+    cta: 2016,
+  },
+  primitives: [
+    "CausticBlobs",
+    "GlassCard",
+    "EyebrowPill",
+    "StaggeredWords",
+    "SonarRings",
+    "ParticleBurst",
+    "ThoughtBubble", // preset-specific
+    "DockSurface",   // preset-specific (dark dock-style bg)
+  ],
+  bgOverride: "dockBg",
+  notes:
+    "Override the family bg with dockBg (#1c162e) for character scenes. ThoughtBubbles float on sine paths. Terminal-text accent (#A8FFD9) for code/install scenes.",
+} as const;

package/families/glass/presets/paperclip.ts

@@ -0,0 +1,43 @@
+/**
+ * Preset: paperclip (Glass Iridescent)
+ * Source: PaperclipReel.tsx
+ *
+ * Open-source reveal. 55 seconds. PaperclipGlyph (custom SVG paperclip with
+ * iridescent stroke draw-in via dash offset) is the signature element.
+ */
+export const preset = {
+  name: "paperclip",
+  family: "glass",
+  source: "PaperclipReel",
+  durationFrames: 1650,
+  fps: 30,
+  copy: {
+    hook: "It's called Paperclip. It's not OpenAI, it's not Google. MIT licensed, open source.",
+    cta: "Link in description.",
+  },
+  accents: {},
+  beats: {
+    hook: 0,
+    reveal: 270,
+    demoIn: 594,
+    demoOut: 1410,
+    cta: 1560,
+  },
+  primitives: [
+    "CausticBlobs",
+    "HairlineGrid",
+    "GlassCard",
+    "EyebrowPill",
+    "StaggeredWords",
+    "SonarRings",
+    "ParticleBurst",
+    "PaperclipGlyph", // preset-specific: see family components/PaperclipGlyph.tsx
+  ],
+  embeddedClip: {
+    path: "captures/paperclip/demo.mp4",
+    sequenceStart: 594,
+    durationFrames: 816, // 27.17s
+  },
+  notes:
+    "PaperclipGlyph uses dash-offset animation on the inline SVG. Audio-locked beats are critical: demo cut points snap to whisper SRT segments.",
+} as const;

package/families/glass/typography.ts

@@ -0,0 +1,15 @@
+/** Glass Iridescent typography scale. Geist Sans + Geist Mono only.
+ *  Pulled from existing template usage; locks the implicit scale into named tokens.
+ *  Letter-spacing follows leonxlnx/taste-skill: tighter at large sizes, looser for caption/mono.
+ */
+export const typography = {
+  hero: { fontSize: 96, fontWeight: 700, letterSpacing: -2, lineHeight: 1.05, fontFamily: "Geist, system-ui" },
+  h1:   { fontSize: 84, fontWeight: 700, letterSpacing: -1.5, lineHeight: 1.1, fontFamily: "Geist, system-ui" },
+  h2:   { fontSize: 56, fontWeight: 700, letterSpacing: -1.5, lineHeight: 1.15, fontFamily: "Geist, system-ui" },
+  h3:   { fontSize: 36, fontWeight: 600, letterSpacing: -1, lineHeight: 1.2, fontFamily: "Geist, system-ui" },
+  body: { fontSize: 24, fontWeight: 500, letterSpacing: -0.2, lineHeight: 1.5, fontFamily: "Geist, system-ui" },
+  caption: { fontSize: 18, fontWeight: 500, letterSpacing: 0.5, lineHeight: 1.4, fontFamily: "Geist, system-ui", textTransform: "uppercase" as const },
+  mono: { fontSize: 22, fontWeight: 500, letterSpacing: 0.3, lineHeight: 1.4, fontFamily: "Geist Mono, monospace" },
+  counter: { fontSize: 144, fontWeight: 700, letterSpacing: -2, lineHeight: 1, fontFamily: "Geist Mono, monospace" },
+} as const;
+export type Typography = typeof typography;

package/families/index.ts

@@ -0,0 +1,49 @@
+/**
+ * ReelStack — family registry.
+ *
+ * The CLI scaffolder reads this when handed `--family=<name> --preset=<name>`
+ * to validate inputs and to pull palette + preset metadata.
+ */
+import * as glass from "./glass";
+import * as paper from "./paper";
+import * as dark from "./dark";
+import * as warm from "./warm";
+import * as forbidden from "./forbidden";
+
+export const families = {
+  glass,
+  paper,
+  dark,
+  warm,
+  forbidden,
+} as const;
+
+export type FamilyName = keyof typeof families;
+
+export const FAMILY_NAMES: FamilyName[] = ["glass", "paper", "dark", "warm", "forbidden"];
+
+export function resolveFamily(name: string) {
+  if (!(name in families)) {
+    throw new Error(
+      `Unknown family "${name}". Valid families: ${FAMILY_NAMES.join(", ")}.`
+    );
+  }
+  return families[name as FamilyName];
+}
+
+export function resolvePreset(familyName: string, presetName: string) {
+  const fam = resolveFamily(familyName);
+  if (!(presetName in fam.presets)) {
+    const valid = Object.keys(fam.presets).join(", ");
+    throw new Error(
+      `Unknown preset "${presetName}" in family "${familyName}". Valid presets: ${valid}.`
+    );
+  }
+  // @ts-expect-error - dynamic key access; runtime narrowing happens above
+  return fam.presets[presetName];
+}
+
+export const TOTAL_PRESETS = Object.values(families).reduce(
+  (n, fam) => n + Object.keys(fam.presets).length,
+  0,
+); // === 22

package/families/paper/components/CardSpring.tsx

@@ -0,0 +1,42 @@
+import React, { CSSProperties, ReactNode } from "react";
+import { spring, useCurrentFrame, useVideoConfig } from "remotion";
+import { palette, springConfig, paperShadow } from "../palette";
+
+/**
+ * CardSpring — generic dark-green card revealed with the family's signature
+ * spring (damping 20 / stiffness 200).
+ *
+ * Animates from translateY(32px) + scale(0.96) + opacity(0) to identity over
+ * the spring curve. Background is `palette.cardForest` with the multi-layer
+ * `paperShadow.card` stack. Cream text on forest green is the Cream Paper
+ * family contract — never override `color` to a dark value.
+ */
+export const CardSpring: React.FC<{
+  startFrame: number;
+  reduceMotion?: boolean;
+  style?: CSSProperties;
+  children?: ReactNode;
+}> = ({ startFrame, reduceMotion = false, style, children }) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+  const local = Math.max(0, frame - startFrame);
+  const t = reduceMotion ? 1 : spring({ frame: local, fps, config: springConfig });
+  return (
+    <div
+      style={{
+        background: palette.cardForest,
+        color: "#e9eee8",
+        borderRadius: 24,
+        padding: 36,
+        boxShadow: paperShadow.card,
+        opacity: t,
+        transform: reduceMotion
+          ? "none"
+          : `translateY(${(1 - t) * 32}px) scale(${0.96 + t * 0.04})`,
+        ...style,
+      }}
+    >
+      {children}
+    </div>
+  );
+};

package/families/paper/components/CreamGrid.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { AbsoluteFill } from "remotion";
+import { palette } from "../palette";
+
+/**
+ * CreamGrid — full-bleed 72×72 grid in `palette.paperGrid` (a quiet warm
+ * tone) with a radial mask fade from center.
+ *
+ * Provides "paper texture" — the document feel the buyer reads as editorial
+ * rather than digital. Pure CSS background, zero per-frame cost. Sits at the
+ * very bottom of the layer stack, just above `palette.bg`.
+ */
+export const CreamGrid: React.FC = () => (
+  <AbsoluteFill
+    style={{
+      backgroundImage: `
+        linear-gradient(to right,  ${palette.paperGrid} 1px, transparent 1px),
+        linear-gradient(to bottom, ${palette.paperGrid} 1px, transparent 1px)
+      `,
+      backgroundSize: "72px 72px",
+      WebkitMaskImage: "radial-gradient(ellipse at center, rgba(0,0,0,1) 35%, rgba(0,0,0,0) 80%)",
+      maskImage:        "radial-gradient(ellipse at center, rgba(0,0,0,1) 35%, rgba(0,0,0,0) 80%)",
+      pointerEvents: "none",
+    }}
+  />
+);

package/families/paper/components/EditorialSerifText.tsx

@@ -0,0 +1,51 @@
+import React, { CSSProperties } from "react";
+import { useCurrentFrame } from "remotion";
+import { palette } from "../palette";
+import { ease } from "../../../utils/easing";
+
+/**
+ * Editorial-serif hero text for Cream Paper reels.
+ * Falls back through Lyon Text → Newsreader → Playfair Display → serif.
+ * Inspired by leonxlnx/taste-skill-minimalist's "serif fonts ONLY for hero".
+ */
+export const EditorialSerifText: React.FC<{
+  startFrame: number;
+  text: string;
+  fontSize?: number;
+  color?: string;
+  italic?: boolean;
+  reduceMotion?: boolean;
+  style?: CSSProperties;
+}> = ({
+  startFrame,
+  text,
+  fontSize = 96,
+  color = palette.heading,
+  italic = false,
+  reduceMotion = false,
+  style,
+}) => {
+  const frame = useCurrentFrame();
+  const local = Math.max(0, frame - startFrame);
+  const tRaw = Math.min(1, local / 24);
+  const t = reduceMotion ? 1 : ease.power3Out(tRaw);
+  return (
+    <span
+      style={{
+        display: "inline-block",
+        fontFamily: "'Lyon Text', 'Newsreader', 'Playfair Display', Georgia, serif",
+        fontSize,
+        fontWeight: 500,
+        fontStyle: italic ? "italic" : "normal",
+        letterSpacing: -1,
+        lineHeight: 1.05,
+        color,
+        opacity: t,
+        transform: reduceMotion ? "none" : `translateY(${(1 - t) * 12}px) scale(${0.97 + t * 0.03})`,
+        ...style,
+      }}
+    >
+      {text}
+    </span>
+  );
+};

package/families/paper/components/GreenAccentCard.tsx

@@ -0,0 +1,10 @@
+import { CardSpring } from "./CardSpring";
+
+/**
+ * GreenAccentCard — semantic alias of `CardSpring`.
+ *
+ * Some Cream Paper presets reference the spring-revealed forest-green card by
+ * the more descriptive `GreenAccentCard` name. Both names resolve to the same
+ * component so preset metadata can use whichever reads better in context.
+ */
+export const GreenAccentCard = CardSpring;

package/families/paper/components/PaperShadow.tsx

@@ -0,0 +1,30 @@
+import React, { CSSProperties, ReactNode } from "react";
+import { paperShadow } from "../palette";
+
+/**
+ * PaperShadow — wrapper that applies one of the family's three printed-shadow
+ * stacks to its children.
+ *
+ * Depths:
+ *   - "soft"     — page-level lift, used under inline thumbnails
+ *   - "card"     — default, matches `CardSpring`
+ *   - "elevated" — anchor-scene cards that need a second layer of depth
+ *
+ * The shadow is applied via inline `boxShadow`, so the wrapped element should
+ * be the visual surface (a div with a background and borderRadius). Wrapping
+ * a transparent fragment will cast no shadow.
+ */
+export const PaperShadow: React.FC<{
+  depth?: "soft" | "card" | "elevated";
+  style?: CSSProperties;
+  children?: ReactNode;
+}> = ({ depth = "card", style, children }) => (
+  <div
+    style={{
+      boxShadow: paperShadow[depth],
+      ...style,
+    }}
+  >
+    {children}
+  </div>
+);