showcase
Background knowledge for droid-control workflows -- not invoked directly. Visual polish for videos via Remotion-powered window chrome, animations, and branded backgrounds.
- Installs
- 85
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/factory-ai/factory-plugins --skill showcase- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads showcase automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
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:
- Content truncated or a panel frozen early:
clipDurationis the longest clip, probed byrender-showcase.sh; a shorter clip holds its final frame. Trim or re-record the sources rather than editingclipDuration. - Missing clips in
public/: render fails with "Could not read file." The render script stages clips into its own per-render directory; never runnpx remotion renderdirectly. - Missing npm dependencies: run
cd ${REMOTION_DIR} && npm installif 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:
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)
cd ${DROID_PLUGIN_ROOT}/remotion && npm install
FAQ
What does the showcase skill do?
Background knowledge for droid-control workflows -- not invoked directly. Visual polish for videos via Remotion-powered window chrome, animations, and branded backgrounds.
How do I install showcase?
Run npx skills add https://github.com/factory-ai/factory-plugins --skill showcase in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/showcase/ (personal) or .claude/skills/showcase/ (project).
Which AI agents can use showcase?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is showcase safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains showcase?
It is published by factory-ai in factory-ai/factory-plugins, and it is an official skill from the maker of the technology it covers. It has 85 recorded installs.
More from factory-ai/factory-plugins
no-use-effect
factory-ai/factory-plugins
Enforce the no-useEffect rule when writing or reviewing React code. ACTIVATE when writing React components, refactoring existing useEffect calls, reviewing PRs with useEffect, or when an agent adds useEffect "just in case." Provides the five replacement patterns and the useMountEffect escape hatch.
human-writing
factory-ai/factory-plugins
Remove signs of AI-generated writing from text to make it sound more natural and human-written. Use when editing or reviewing any form of document including: markdown, technical docs, emails, blog posts, PRDs, or any dedicated writing content. Based on Wikipedia's comprehensive "Signs of AI writing" guide. Detects and fixes patterns including: inflated symbolism, promotional language, superficial -ing analyses, vague attributions, em dash overuse, rule of three, AI vocabulary words, negative parallelisms, and excessive conjunctive phrases.
simplify
factory-ai/factory-plugins
Review changed code for reuse, quality, and efficiency, then fix any issues found.
frontend-design
factory-ai/factory-plugins
Open the skill to read its SKILL.md instructions.
visual-design
factory-ai/factory-plugins
Image generation and presentations. Use when: - User asks for images: logos, icons, app assets, diagrams, flowcharts, architecture diagrams, patterns, textures, photo edits, restorations - User needs a presentation or slide deck Covers nanobanana CLI for image generation and Slidev for presentations.
security-review
factory-ai/factory-plugins
Scan code changes for security vulnerabilities using STRIDE threat modeling, validate findings for exploitability, and output structured results for downstream patch generation. Supports PR review, scheduled scans, and full repository audits.
Popular media & creative skills
hyperframes
heygen-com/hyperframes
Read first to make, edit, animate or render any video with HyperFrames (HTML rendered to video), including launch films, explainers, music videos, charts, maps, vertical clips, title cards, captions and overlays. Holds the render contract, the work loop and what each kind of video needs.
media-use
heygen-com/hyperframes
Get or make any media for a HyperFrames video - music, sound effects, images, icons, logos, voiceover, avatar and generated video, transcripts, cutouts, colour grades and looks - with HeyGen or free local tools, and mix placed audio. Also for footage that looks dark, flat or dull, or should be stylized or hidden.
hyperframes-registry
heygen-com/hyperframes
About 450 ready-made HyperFrames blocks and components installed as editable source - transitions, overlays, titles, kinetic type, captions, charts, map overlays, 3D, camera moves. Use it before hand-building any named visual (CRT scanlines, glitch, film grain, a chart); also for hyperframes add and catalog.
hyperframes-creative
heygen-com/hyperframes
Non-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use hyperframes-animation.
ai-video-generation
101-skills/superpowers
Generate AI videos with Google Veo, Seedance 2.0, HappyHorse, Wan, Grok and 40+ models via inference.sh CLI. Models: Veo 3.1, Veo 3, Seedance 2.0, HappyHorse 1.0, Wan 2.5, Grok Imagine Video, OmniHuman, Fabric, HunyuanVideo. Capabilities: text-to-video, image-to-video, reference-to-video, video editing, lipsync, avatar animation, video upscaling, foley sound. Use for: social media videos, marketing content, explainer videos, product demos, AI avatars. Triggers: video generation, ai video, text to video, image to video, veo, animate image, video from image, ai animation, video generator, generate video, t2v, i2v, ai video maker, create video with ai, runway alternative, pika alternative, sora alternative, kling alternative, seedance, happyhorse
ai-image-generation
101-skills/superpowers
Generate AI images with GPT-Image-2, FLUX, Gemini, Grok, Seedream, Reve and 50+ models via inference.sh CLI. Models: GPT-Image-2, FLUX Dev LoRA, FLUX.2 Klein LoRA, Gemini 3 Pro Image, Grok Imagine, Seedream 4.5, Reve, ImagineArt. Capabilities: text-to-image, image-to-image, inpainting, LoRA, image editing, upscaling, text rendering. Use for: AI art, product mockups, concept art, social media graphics, marketing visuals, illustrations. Triggers: flux, image generation, ai image, text to image, stable diffusion, generate image, ai art, midjourney alternative, dall-e alternative, text2img, t2i, image generator, ai picture, create image with ai, generative ai, ai illustration, grok image, gemini image, gpt image, openai image, chatgpt image