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.

Preset	Look	Best for
factory	Warm black bg with amber radial glow, traffic-light dots, 12px radius, generous margins. Rich cinematic warmth.	Official Factory content
factory-hero	Same as factory + gradient background. Maximum cinematic punch.	Factory landing pages, social media
hero	Cool gradient bg, large margins, prominent shadow.	Non-Factory marketing, third-party
macos	Clean dark bg, traffic lights, subtle shadow. Professional but understated.	General-purpose demos, README heroes
presentation	Black bg, generous margins. Designed to look good on slides.	Talks, slide decks
minimal	No window bar, tiny radius, tight margins. Barely-there frame.	Docs embeds, inline clips

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)

Token	Hex	Role
bg	#0a0804	Warm near-black
surface	#18120e	Terminal content bg
accent	#EE6018	Factory Orange
text	#f0e8e0	Warm white
muted	#948781	De-emphasized text

Catppuccin (cool)

Token	Hex	Role
bg	#0d1117	Cool dark
surface	#181818	Content bg
accent	#89b4fa	Blue accent
text	#cdd6f4	Cool white
muted	#6c7086	De-emphasized text

Transition styles

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

Preset	Recommended (default first)	Avoid
factory, factory-hero	motion-blur, light-leak, whip-pan, flash	glitch-lite (clashes with warm tone)
hero, presentation	motion-blur, whip-pan, flash	light-leak (warm sweep clashes with cool palette)
macos, minimal	motion-blur	glitch-lite, light-leak (too much personality for utilitarian frames)

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:

• clipDuration mismatch: video has blank frames at end or truncates early. The render-showcase.sh script auto-detects duration via ffprobe — prefer using it over manual npx remotion render.
• Missing clips in public/: render fails with "Could not read file." The render script handles staging automatically.
• Missing npm dependencies: run cd ${REMOTION_DIR} && npm install if rendering fails on first use.

Debugging layout: Use npx remotion still Showcase --props='...' --frame=30 --scale=0.5 /tmp/check.png to render a single frame and inspect it visually before committing to a full render.

Cleanup: The render-showcase.sh script removes staged clips from public/ after rendering. If you run npx remotion render directly, clean up public/ manually.

Rendering

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

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

$RENDER --props /tmp/props.json --output /tmp/showcase.mp4 /tmp/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)

cd ${DROID_PLUGIN_ROOT}/remotion && npm install