demo-studio

Name: demo-studio
Author: tryproduck

487stars7forks

How to install demo-studio?

tryproduck/produck-skills/demo-studio

$npx -y skills add tryproduck/produck-skills --skill demo-studio

Installs into the current project.

Summary

Build a premium, fully-animated PRODUCT-DEMO / launch motion-graphics video from a written brief about your product — the "one seamless film" style: scene-by-scene motion graphics with camera moves, real UI mockups, and full sound design, rendered from HTML+CSS+GSAP to MP4 via Hy

Files · 1

View on GitHub

SKILL.md

1	# DemoStudio — the playbook
2
3	You are building a premium product-demo motion-graphics film: one seamless timeline of
4	full-screen scenes telling the USER'S story (pick an arc that fits their product, e.g. problem →
5	product → payoff, before → after, or many inputs → one output; do not default to a feedback-capture
6	loop), with camera moves between beats. The whole video is ONE self-contained HyperFrames composition
7	(`index.html` = HTML + CSS + GSAP) that renders to MP4, then a single SFX track is muxed on.
8
9	Start from the example: `example/index.html` is a compact, commented, working scaffold that
10	shows the whole architecture (paused timeline, 3 scenes, a camera push, a flood, an endcard). Read
11	it first, then grow it into the real thing scene by scene.
12
13	---
14
15	## 0. When to use / not use
16	- Use for animated product demos, launch/hype videos, feature stories, flywheel/loop narratives.
17	Any "show the product doing something, beautifully, scene by scene" film.
18	- Not for: single-concept explainer reels (one scene per spoken beat), talking-head/CapCut
19	edits, or avatar/TTS videos. Different tools entirely.
20
21	## 1. Architecture (always the same)
22	- One paused timeline: `const tl = gsap.timeline({paused:true})`; register it on
23	`window.__timelines["main"] = tl`. HyperFrames seeks it per frame.
24	- Scenes = absolutely-positioned full-frame `<div>`s inside `#stage`, overlapping in the DOM;
25	faded in/out by the timeline. Only the active one is visible at a given time.
26	- Schedule by ABSOLUTE time — the last arg of every `tl.*` call is the start time in seconds.
27	Anchor scene offsets with named consts (e.g. `S1`, `S2`, `END`) so changing one shifts the rest.
28	A `DUR` const + the `data-duration` attrs (root, bg, stage) must all match the total length.
29	- Deterministic only: no `Math.random()` / `Date.now()` / argless `new Date()` — they break the
30	frame-seeked render. Use a seeded PRNG (see the `mul()`/`rnd()` helpers in the example).
31	- Build loop:
32	```
33	npx hyperframes lint # 0 errors required
34	npx hyperframes render --output out/raw.mp4 -q high
35	ffmpeg -i out/raw.mp4 -c:v libx264 -pix_fmt yuv420p -g 30 -keyint_min 30 \
36	-sc_threshold 0 -r 30 -crf 17 -movflags +faststart out/vNN.mp4 # ALWAYS re-encode
37	ffmpeg -ss <t> -i out/vNN.mp4 -frames:v 1 /tmp/f.png # verify by viewing frames
38	```
39	- gsap defaults: `gsap.defaults({ease:"power3.out", duration:0.6})`. Register `MotionPathPlugin` if used.
40
41	## 2. Brand tokens (re-skin per product) — see docs/BRANDING.md
42	Everything visual is driven by `:root` CSS vars. To make it your product's film, swap the tokens
43	and keep the system: one canvas colour, near-black ink, exactly ONE restrained accent, status
44	green/red/blue, a shadow style, and three fonts (display / body / mono). **Keep one focal accent per
45	scene.** Dark scenes use a deep navy + a warm radial glow, never flat black.
46
47	## 3. The technique library — copy these patterns
48	The full, code-level version is in docs/ARCHITECTURE.md. The set-pieces:
49	- Text: typewriter caption (per-char spans + stagger, flip the last word to the accent), kinetic
50	fly-in lines (`opacity/y/blur` + stagger), count-up numbers (`tl.call` sets text + a scale punch).
51	- People as circular avatars: any square photo → `border-radius:50%; overflow:hidden` + a name +
52	a role/credibility pill. Mix real faces with code-drawn identicons (deterministic 5×5 symmet

People who liked this also viewed

6 picks

Type

demo-studio

487stars7forks

View on GitHub

How to install demo-studio?

tryproduck/produck-skills/demo-studio

$npx -y skills add tryproduck/produck-skills --skill demo-studio

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# DemoStudio — the playbook
2
3	You are building a premium product-demo motion-graphics film: one seamless timeline of
4	full-screen scenes telling the USER'S story (pick an arc that fits their product, e.g. problem →
5	product → payoff, before → after, or many inputs → one output; do not default to a feedback-capture
6	loop), with camera moves between beats. The whole video is ONE self-contained HyperFrames composition
7	(`index.html` = HTML + CSS + GSAP) that renders to MP4, then a single SFX track is muxed on.
8
9	Start from the example: `example/index.html` is a compact, commented, working scaffold that
10	shows the whole architecture (paused timeline, 3 scenes, a camera push, a flood, an endcard). Read
11	it first, then grow it into the real thing scene by scene.
12
13	---
14
15	## 0. When to use / not use
16	- Use for animated product demos, launch/hype videos, feature stories, flywheel/loop narratives.
17	Any "show the product doing something, beautifully, scene by scene" film.
18	- Not for: single-concept explainer reels (one scene per spoken beat), talking-head/CapCut
19	edits, or avatar/TTS videos. Different tools entirely.
20
21	## 1. Architecture (always the same)
22	- One paused timeline: `const tl = gsap.timeline({paused:true})`; register it on
23	`window.__timelines["main"] = tl`. HyperFrames seeks it per frame.
24	- Scenes = absolutely-positioned full-frame `<div>`s inside `#stage`, overlapping in the DOM;
25	faded in/out by the timeline. Only the active one is visible at a given time.
26	- Schedule by ABSOLUTE time — the last arg of every `tl.*` call is the start time in seconds.
27	Anchor scene offsets with named consts (e.g. `S1`, `S2`, `END`) so changing one shifts the rest.
28	A `DUR` const + the `data-duration` attrs (root, bg, stage) must all match the total length.
29	- Deterministic only: no `Math.random()` / `Date.now()` / argless `new Date()` — they break the
30	frame-seeked render. Use a seeded PRNG (see the `mul()`/`rnd()` helpers in the example).
31	- Build loop:
32	```
33	npx hyperframes lint # 0 errors required
34	npx hyperframes render --output out/raw.mp4 -q high
35	ffmpeg -i out/raw.mp4 -c:v libx264 -pix_fmt yuv420p -g 30 -keyint_min 30 \
36	-sc_threshold 0 -r 30 -crf 17 -movflags +faststart out/vNN.mp4 # ALWAYS re-encode
37	ffmpeg -ss <t> -i out/vNN.mp4 -frames:v 1 /tmp/f.png # verify by viewing frames
38	```
39	- gsap defaults: `gsap.defaults({ease:"power3.out", duration:0.6})`. Register `MotionPathPlugin` if used.
40
41	## 2. Brand tokens (re-skin per product) — see docs/BRANDING.md
42	Everything visual is driven by `:root` CSS vars. To make it your product's film, swap the tokens
43	and keep the system: one canvas colour, near-black ink, exactly ONE restrained accent, status
44	green/red/blue, a shadow style, and three fonts (display / body / mono). **Keep one focal accent per
45	scene.** Dark scenes use a deep navy + a warm radial glow, never flat black.
46
47	## 3. The technique library — copy these patterns
48	The full, code-level version is in docs/ARCHITECTURE.md. The set-pieces:
49	- Text: typewriter caption (per-char spans + stagger, flip the last word to the accent), kinetic
50	fly-in lines (`opacity/y/blur` + stagger), count-up numbers (`tl.call` sets text + a scale punch).
51	- People as circular avatars: any square photo → `border-radius:50%; overflow:hidden` + a name +
52	a role/credibility pill. Mix real faces with code-drawn identicons (deterministic 5×5 symmet

People who liked this also viewed

6 picks

Type