OVERRIDE: editable product demo starter — skill, brief, prompt and Remotion scene

This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters

This is a skill and editable example, not an automatic installer. Use your existing agent and authorised tools. No account sessions or API keys are included.

1. Read product-demo/SKILL.md. It contains the complete procedure.

2. Put the skill where your agent discovers it. Current documented project options: Codex .agents/skills/product-demo/SKILL.md; Claude Code .claude/skills/product-demo/SKILL.md. Hermes uses ~/.hermes/skills/product-demo/SKILL.md for a personal skill. Check the linked official documentation for your version.

3. Verify discovery in your agent. Codex supports $ mentions; Claude Code supports /product-demo; Hermes supports /skills and natural-language skill requests.

4. Set up Node.js and a working Remotion project before rendering. Blender and a voice provider are optional for this starter scene.

5. Download this Gist ZIP and extract it. Create a src folder and move index.tsx into it. Keep package.json and package-lock.json in the root. Run npm ci, then npm run dev. npm run render exports a silent original example scene. Move SKILL.md into the product-demo skill folder for your chosen agent, as described above. No image files or API credentials are needed for this silent scene.

6. Replace the example with your actual app assets. Read brief.txt and use prompt.txt.

Test status: Remotion example and local build tested in this Codex workspace. Claude Code and Hermes instructions were checked against official docs; no claimed execution test in those agents.

Rebuild v2: The included scene is the focus task interface used in the rebuilt film. Source renders silently; the film adds its own action sounds and narration. Local Node dependencies are not bundled. No browser sessions or credentials are included.

This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters

This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters

return<divstyle={{position:'absolute',inset:0,background:'#f7f6f1',color:'#192227'}}><divstyle={{position:'absolute',left:0,top:0,bottom:0,width:226,background:'#172126',padding:'34px 25px',color:'#e9ece7'}}><divstyle={{fontSize:34,fontWeight:700,letterSpacing:-2}}>focus<spanstyle={{color:C.red}}>.</span></div><divstyle={{fontSize:12,letterSpacing:2,color:'#8a999e',marginTop:61}}>WORKSPACE</div>{['◎ All tasks','◷ Today','▦ Projects'].map((t,i)=><divkey={t}style={{marginTop:17,padding:'14px 12px',fontSize:18,borderRadius:8,background:i===(transfer>.5?1:0)?'#344046':'transparent',color:i===(transfer>.5?1:0)?'#fff':'#91a1a5'}}>{t}</div>)}<divstyle={{position:'absolute',bottom:31,left:37,fontSize:13,color:'#91a1a5'}}>A LITTLE LESS NOISE.</div></div>

<divstyle={{position:'absolute',left:278,top:36,fontSize:13,letterSpacing:2,color:'#89928e'}}>PERSONAL WORKSPACE</div><divstyle={{position:'absolute',left:278,top:71,fontSize:47,fontWeight:700,letterSpacing:-2,opacity:1-motion(transfer,0,.35),transform:translateY(${-16*motion(transfer,0,.35)}px)}}>Too much on your list?</div><divstyle={{position:'absolute',left:278,top:77,fontSize:47,fontWeight:700,letterSpacing:-2,opacity:motion(transfer,.65,1),transform:translateY(${12*(1-motion(transfer,.65,1))}px)}}>Make room for what matters.</div><divstyle={{position:'absolute',left:279,top:139,fontSize:18,color:'#7d8784',opacity:1-motion(transfer,0,.35)}}>Choose three things worth finishing.</div>

<divstyle={{position:'absolute',right:45,top:103,background:selection.every(Boolean)?C.red:'#e5e7e1',color:selection.every(Boolean)?'#fff':'#98a19d',padding:'16px 21px',borderRadius:9,fontSize:17,fontWeight:700,opacity:1-motion(transfer,0,.35)}}>Plan my day ↗</div>

<divstyle={{position:'absolute',left:284,top:244,width:315,opacity:motion(transfer,.6,1)}}><divstyle={{fontSize:104,fontWeight:700,lineHeight:1,letterSpacing:-7,color:C.red}}>03</div><divstyle={{fontSize:24,lineHeight:1.4,marginTop:24}}>Priorities.<br/>A clear next step.</div><divstyle={{width:180,height:2,background:'#cbd2c9',marginTop:35}}/><divstyle={{fontSize:15,color:'#7c8681',marginTop:25}}>Everything else can wait.</div></div>

<divstyle={{position:'absolute',left:650,top:627,fontSize:18,color:'#487e5e',opacity:done}}>✓ Your day has a plan.</div>{f<240&&<Pointerx={x}y={y}press={press}/>}</div>} This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters

This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters

This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters

Use the product-demo skill. Read brief.txt and inspect my assets. Show the task list, select today's priorities, then carry those rows into the finished Today view. Make a 15-second proof first. Put the click after the pointer arrives. Hold the result so it can be read. Check the rendered transitions before expanding. Report what was actually tested. Do not publish. Create or revise an animated product demonstration from supplied app screens, branding and a viewer brief. Use for short demo videos, not generic research or publishing.

Product demo

Read the project's brief and inspect the actual interface assets. Identify one user action and the visible result it produces. Keep factual claims tied to evidence; distinguish animation from captured footage.

Before generating, check the local tools needed for this scene. Ask the user to configure missing credentials securely; never put them in the project or video. A skill supplies instructions, not installed renderers or account access.

Write a short shot plan with initial state, pointer/action, consequence, reading hold and transition. Carry the relevant UI object between shots. Give each motion a purpose and keep essential text readable.

Build a 15-second proof using the project's renderer and supplied assets. Use deterministic frame-based animation. Label reconstructed UI in the episode's disclosure; do not invent live interactions or product capabilities.

Inspect consecutive transition frames, render a playable export and review audio where supported. Report any unreviewed aspect. Fix clipping, incorrect cursor/click order, unreadable UI or narration without a corresponding subject before extending the sequence.

Deliver the video, editable source and source notes. Creating a demo does not authorize publishing it.