feat(droid-control): render callout effects in Showcase composition (MB-17)

Schema-valid callout effects were silently dropped by the Showcase
composition. Adds CalloutOverlay (palette-aware text pill at percent
anchors, content-local timing) and a render-time warning for any
remaining schema-valid-but-unrendered effect types (fade-in/fade-out).

Co-authored-by: factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>

Author: factory-ain3sh

.gitignore

@@ -1 +1,2 @@
 .factory/
+node_modules/

plugins/droid-control/README.md

@@ -76,7 +76,7 @@ For the full rationale and runtime pipeline, see [`ARCHITECTURE.md`](ARCHITECTUR
 
 ## Video rendering
 
-The compose stage uses [Remotion](https://www.remotion.dev/) for video compositing. Presets provide window chrome, spacing, palettes, backgrounds, particles, noise, color grading, configurable transitions (`motion-blur`, `flash`, `whip-pan`, `light-leak`, `glitch-lite`), zooms, spotlights, keystroke overlays, section headers, and syntax-highlighted code annotations.
+The compose stage uses [Remotion](https://www.remotion.dev/) for video compositing. Presets provide window chrome, spacing, palettes, backgrounds, particles, noise, color grading, configurable transitions (`motion-blur`, `flash`, `whip-pan`, `light-leak`, `glitch-lite`), zooms, spotlights, callout annotations, keystroke overlays, section headers, and syntax-highlighted code annotations.
 
 The `render-showcase.sh` helper owns the full pipeline: `.cast` conversion via `agg`, clip staging, duration detection, Remotion rendering, and cleanup.
 

plugins/droid-control/remotion/src/components/CalloutOverlay.tsx

@@ -0,0 +1,93 @@
+import { useCurrentFrame, useVideoConfig, interpolate, Easing } from 'remotion';
+import type { Effect } from '../lib/schema';
+import type { Palette } from '../lib/palettes';
+
+type Callout = Extract<Effect, { fx: 'callout' }>;
+
+const CalloutPill: React.FC<{
+  callout: Callout;
+  palette: Palette;
+  enterFrame: number;
+  exitFrame: number;
+}> = ({ callout, palette, enterFrame, exitFrame }) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  const isVisible = frame >= enterFrame && frame < exitFrame;
+  if (!isVisible) return null;
+
+  const localFrame = frame - enterFrame;
+
+  // Pop-in animation over 0.25s (same overshoot bezier as KeystrokePill)
+  const enterProgress = interpolate(localFrame, [0, 0.25 * fps], [0, 1], {
+    easing: Easing.bezier(0.34, 1.56, 0.64, 1),
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+
+  // Fade out over last 0.2s
+  const totalFrames = exitFrame - enterFrame;
+  const fadeOutStart = totalFrames - 0.2 * fps;
+  const exitOpacity = interpolate(
+    localFrame,
+    [fadeOutStart, totalFrames],
+    [1, 0],
+    {
+      extrapolateLeft: 'clamp',
+      extrapolateRight: 'clamp',
+    }
+  );
+
+  const scale = interpolate(enterProgress, [0, 1], [0.85, 1]);
+
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        left: callout.at.x,
+        top: callout.at.y,
+        transform: `translate(-50%, -50%) scale(${scale})`,
+        opacity: Math.min(enterProgress, exitOpacity),
+        backgroundColor: `${palette.surface}E6`,
+        color: palette.text,
+        fontSize: 24,
+        fontFamily: "'Geist', 'Inter', sans-serif",
+        fontWeight: 500,
+        lineHeight: 1.4,
+        padding: '12px 24px',
+        borderRadius: 12,
+        border: `1px solid ${palette.border}`,
+        borderLeft: `3px solid ${palette.accent}`,
+        backdropFilter: 'blur(12px)',
+        boxShadow: '0 8px 32px rgba(0, 0, 0, 0.35)',
+        maxWidth: '40%',
+        textAlign: 'center',
+        zIndex: 90,
+        pointerEvents: 'none',
+      }}
+    >
+      {callout.text}
+    </div>
+  );
+};
+
+export const CalloutOverlay: React.FC<{
+  callouts: Callout[];
+  palette: Palette;
+}> = ({ callouts, palette }) => {
+  const { fps } = useVideoConfig();
+
+  return (
+    <>
+      {callouts.map((callout) => (
+        <CalloutPill
+          key={`${callout.t}-${callout.text}`}
+          callout={callout}
+          palette={palette}
+          enterFrame={Math.round(callout.t * fps)}
+          exitFrame={Math.round((callout.t + callout.dur) * fps)}
+        />
+      ))}
+    </>
+  );
+};

plugins/droid-control/remotion/src/compositions/Showcase.tsx

@@ -31,6 +31,7 @@ import { ZoomEffect } from '../components/ZoomEffect';
 import { SectionTransitionOverlay } from '../components/SectionTransition';
 import { DroidOutro } from '../components/DroidOutro';
 import { CodeAnnotationOverlay } from '../components/CodeAnnotationOverlay';
+import { CalloutOverlay } from '../components/CalloutOverlay';
 
 export const showcaseSchema = z.object({
   clips: z.array(z.string()),
@@ -68,6 +69,23 @@ export const showcaseSchema = z.object({
 const TITLE_DURATION_S = 4;
 const TRANSITION_FRAMES = 15;
 
+// Effect types this composition actually renders. Anything schema-valid but
+// absent from this set is a silent no-op — warn instead of dropping quietly.
+const RENDERED_FX = new Set(['zoom', 'spotlight', 'callout']);
+const warnedUnrenderedFx = new Set<string>();
+
+const warnUnrenderedEffects = (effects: z.infer<typeof effectSchema>[]) => {
+  for (const effect of effects) {
+    if (RENDERED_FX.has(effect.fx) || warnedUnrenderedFx.has(effect.fx)) {
+      continue;
+    }
+    warnedUnrenderedFx.add(effect.fx);
+    console.warn(
+      `Showcase: effect fx='${effect.fx}' is schema-valid but not rendered by this composition`
+    );
+  }
+};
+
 const resolveFidelity = (
   props: z.infer<typeof showcaseSchema>
 ): 'compact' | 'standard' | 'inspect' =>
@@ -211,6 +229,16 @@ export const ShowcaseComposition: React.FC<z.infer<typeof showcaseSchema>> = (
     [props.effects]
   );
 
+  const callouts = useMemo(
+    () =>
+      props.effects.filter(
+        (e): e is Extract<typeof e, { fx: 'callout' }> => e.fx === 'callout'
+      ),
+    [props.effects]
+  );
+
+  warnUnrenderedEffects(props.effects);
+
   return (
     <AbsoluteFill>
       <Background palette={palette} config={config} />
@@ -289,6 +317,11 @@ export const ShowcaseComposition: React.FC<z.infer<typeof showcaseSchema>> = (
               />
             ))}
 
+            {/* Callout annotations: timed text pills at percent positions */}
+            {callouts.length > 0 && (
+              <CalloutOverlay callouts={callouts} palette={palette} />
+            )}
+
             {/* Frosted sweep at section boundaries */}
             {props.sections && props.sections.length > 1 && (
               <SectionTransitionOverlay sections={props.sections} />

plugins/droid-control/skills/compose/SKILL.md

@@ -245,8 +245,8 @@ Use a run-scoped props path like `$PROPS`; do not reuse a global `/tmp/showcase-
 
 | Effect | Props | Description |
 |---|---|---|
-| `fade-in` | `t`, `dur` | Fade from black |
-| `fade-out` | `t`, `dur` | Fade to black |
+| `fade-in` | `t`, `dur` | Fade from black (schema-valid but not yet rendered by Showcase — emits a render-time warning) |
+| `fade-out` | `t`, `dur` | Fade to black (schema-valid but not yet rendered by Showcase — emits a render-time warning) |
 | `zoom` | `t`, `dur`, `to: {x,y,w,h}` | Directed zoom to a target region (30% in, 40% hold, 30% out) |
 | `spotlight` | `t`, `dur`, `on: {x,y,w,h}`, `dim?` | Dim everything except a region (`dim`: 0–1, default 0.6) |
 | `callout` | `t`, `dur`, `text`, `at: {x,y}` | Text overlay anchored to a point |