launch-video

Solid

Use when creating a launch, release, or announcement video for the Spool desktop app from real screen recordings. Covers the capture pipeline (Electron + native macOS window recording), the HyperFrames composition layout, common trailer-vs-PPT pitfalls, and the first-frame poster trick for social media. Invoke when the user mentions release video, launch video, announcement video, trailer, demo video, or wants to ship a video for a Spool version bump.

Code & Development 572 stars 40 forks Updated today NOASSERTION

Install

View on GitHub

Quality Score: 84/100

Stars 20%
92
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
50
License 10%
100
Description 5%
100

Skill Content

Build a release video for a Spool version. The output is a 1080p MP4 plus a poster JPG, intended for X / Twitter. Runtime scales with feature count: 20–40s, 3–8 feature beats + brand outro, optionally a stylised capstone scene before the outro for releases whose payoff is a tangible outcome the captured clips can't show on their own. ## Mental model A release video for Spool has two halves running in parallel on screen: 1. **Left third** — a text panel that introduces the current scene (kicker `01 / 04 — POLISH`, a 2-line headline, a 1–2 line sub). 2. **Right two-thirds** — the real Spool app, recorded as a native macOS window. The camera (CSS `transform-origin + scale` on the `.window`) zooms into the specific UI region for each feature. Focus on the active feature is carried by one of two devices: - **Amber annotation rectangles** inside `.window` that track the camera — good for "look at this strip" callouts. Cheap and precise when the feature is a single bounded region. - **Spotlight mask** — an SVG overlay that dims everything except 1–2 transparent "holes" punched through. Softer falloff means small coordinate drift disappears into the dim instead of reading as a misaligned outline. Dual holes let you keep the preview bright while a control on the right side lights up in sync with a click. See `references/spotlight.md`. This is **not** a PPT: text panel and demo coexist continuously, with hard match-cuts between feature clips. Don't reintroduce slide-style title c...

Details

Author
paperboytm
Repository
paperboytm/spool
Created
4 months ago
Last Updated
today
Language
TypeScript
License
NOASSERTION

Similar Skills

Semantically similar based on skill content — not just same category

Code & Development Listed

launch-video

Produce a polished launch or walkthrough video for a product, feature, or page and publish it end-to-end: real product screenshots, a Remotion motion video, an emotive AI voice-over, a YouTube upload, a click-to-play embed on the page, and a team announcement. Use this whenever the user wants a launch video, feature video, demo video, walkthrough, product video, screen-recording, or "make a video" for a page/tool/feature — and whenever they want to publish/ship/upload a video to YouTube or add narration/voice-over to one. Also use it to add videos to top-traffic pages (from analytics) at scale. Covers the whole pipeline, not just editing.

2 Updated 1 weeks ago
vood
AI & Automation Listed

product-launch-motion

Use when making, directing or rescuing a product launch video, promo, teaser, demo reel, sizzle, feature-announcement film or animated product explainer built from code — and when an existing one looks basic, reads as a slideshow, has reveals that miss the voiceover, an invisible cursor, an inaudible sound effect, a clipped or too-quiet mix, or every video coming out looking the same. Covers SaaS, apps, hardware, e-commerce, dev tools, services. Keywords include motion design, storyboard, voiceover sync, kinetic typography, GSAP, HyperFrames, Remotion, film grain, LUFS, ffmpeg.

2 Updated today
AbubakrChan
Code & Development Listed

product-launch-video

Turn a product or marketing URL, pasted script, or brief into a product launch / promo video — SaaS promos, feature reveals, product demos, app and company launches. Use when the user wants to market, launch, promote, or reveal a product; the default for any commercial URL. Not a general site tour (/website-to-video). Unclear → /hyperframes.

1 Updated today
jpratt9