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:
clipDurationmismatch: video has blank frames at end or truncates early. Therender-showcase.shscript auto-detects duration via ffprobe — prefer using it over manualnpx 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 installif 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.mp4Advanced: 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