Showcase

Showcase Polish

This atom describes the visual polish system. It is invoked by the compose atom — you should not need to invoke it directly. Load it when you need to understand what the presets look like and how the cinematic layers work.

What you control

You control the visual output by choosing a preset and passing props. Everything else is automatic — the Remotion components handle all cinematic layers internally based on the preset and palette.

Presets

Each preset configures window chrome, spacing, background style, and palette selection.

What each preset automatically includes

Factory / factory-hero presets (warm palette):

• Warm radial background vignette with amber glow blobs that intensify over video duration
• Warm-tinted box shadow with faint accent glow halo
• Warm color grade overlay (amber tint)
• Floating particles in Factory Orange

All other presets (cool Catppuccin palette):

• Cool-toned solid or gradient background
• Neutral box shadow
• Subtle cool color grade overlay
• Floating particles in accent blue

All presets include: floating particles, noise texture overlay, color grade, motion blur title→content transition (configurable via transitionStyle), animated window entrance, staggered panel entrance (side-by-side), and optional codeAnnotations syntax-highlighted overlays during the main content sequence.

Visual palettes

Palette is auto-selected based on preset. Factory/factory-hero use the warm palette; everything else uses cool.

Factory (warm)

Catppuccin (cool)

Transition styles

transitionStyle selects the crossfade presentation. Schema lives in compose/SKILL.md; preset-tier matching:

codeAnnotations is preset-agnostic — palette and font stack are auto-derived. See compose/SKILL.md for schema and authoring rules.

Operational notes

Render time: ~1-3 minutes for a 30-60s video at 1920x1080. Set worker timeouts to 5 minutes.

Common failure modes:

• Content truncated or a panel frozen early: clipDuration is the longest clip, probed by render-showcase.sh; a shorter clip holds its final frame. Trim or re-record the sources rather than editing clipDuration.
• Missing clips in public/: render fails with "Could not read file." The render script stages clips into its own per-render directory; never run npx remotion render directly.
• Missing npm dependencies: run cd ${REMOTION_DIR} && npm install if rendering fails on first use.

Debugging layout: render-showcase.sh --still <frame> renders one frame through the same normalization and staging as a full render (see compose/SKILL.md Step 3).

Cleanup: render-showcase.sh removes only the staged directory it created, on success, failure, or cancellation via Ctrl-C / process-group signal. A signal to the script's PID alone is deferred until the npx remotion child exits.

Rendering

Use the render script from compose — see compose/SKILL.md Step 3 for full usage:

bashCopy code
RENDER=${DROID_PLUGIN_ROOT}/scripts/render-showcase.sh

$RENDER --props "${RUN_DIR}/props.json" --output "${RUN_DIR}/showcase.mp4" "${RUN_DIR}/clip.mp4"

Advanced: GlitchTitle

A stylized glitch title card component exists at src/components/GlitchTitle.tsx for edgy/hacker-aesthetic intros (pixel-decay effect with scattered blocks assembling into text). This is NOT wired into the default Showcase composition. Using it requires writing a custom Remotion composition. Only pursue this if specifically requested — the standard TitleCard handles all normal use cases.

Prerequisites

• Node.js (>= 18)
• Chrome / Chromium (Remotion uses headless Chrome)
• ffmpeg and ffprobe (Remotion uses these under the hood)

bashCopy code
cd ${DROID_PLUGIN_ROOT}/remotion && npm install