Opus 5.5代码动效视频：一句话入口与可复用工作流

本站编写，可粘贴；模型是否支持代码渲染以实际能力为准。

你是动效导演兼前端工程师。先向我索取8到12个UI状态、目标时长、画幅、品牌色、节奏曲线和导出方式；如果我已提供，就不要再追问。然后只输出一个可本地运行的index.html：纯代码绘制，不用After Effects，不用外部图片、字体或音频；包含requestAnimationFrame时间轴、状态机、缓动函数、分辨率适配、左上角当前状态水印、总时长自动停止；结尾附不超过20行的运行说明和自检清单。不要声称已生成MP4，不要虚构性能数据。

合成练习清单，状态名与时长可自行替换；十项ms合计11700，配合骨架的3000ms转场余量，总时长约15秒。

{"topic":"记账应用15秒动效","duration_sec":15,"canvas":"1920x1080","palette":{"bg":"#0B1020","accent":"#7C5CFF","text":"#F5F7FF"},"states":[{"name":"logo","ms":900,"motion":"scale-in"},{"name":"input","ms":1400,"motion":"caret-type"},{"name":"chips","ms":1100,"motion":"stagger"},{"name":"loader","ms":900,"motion":"spin-morph"},{"name":"card","ms":1500,"motion":"slide-up"},{"name":"chart","ms":1800,"motion":"draw-line"},{"name":"alert","ms":900,"motion":"pulse"},{"name":"player","ms":1200,"motion":"progress"},{"name":"share","ms":1100,"motion":"orbit"},{"name":"end","ms":900,"motion":"fade-logo"}]}

本站可运行练习骨架，只保证绘制逻辑完整；复杂镜头、配乐和导出需在生成后人工核对。

<!doctype html><html lang="zh-CN"><meta charset="utf-8"><title>AI Play Motion Demo</title><style>html,body{margin:0;background:#0B1020;height:100%;overflow:hidden}canvas{display:block;width:100vw;height:100vh}</style><canvas id="c" width="1920" height="1080"></canvas><script>
const states=[{name:'logo',ms:900},{name:'input',ms:1400},{name:'chips',ms:1100},{name:'loader',ms:900},{name:'card',ms:1500},{name:'chart',ms:1800},{name:'alert',ms:900},{name:'player',ms:1200},{name:'share',ms:1100},{name:'end',ms:900}];
const c=document.getElementById('c'),x=c.getContext('2d');let t0=performance.now();
const ease=t=>t<.5?2*t*t:1-Math.pow(-2*t+2,2)/2;
function frame(now){const el=now-t0;let acc=0,cur=states[states.length-1],local=1;for(const s of states){if(el<acc+s.ms){cur=s;local=(el-acc)/s.ms;break}acc+=s.ms}const p=ease(Math.max(0,Math.min(1,local)));x.clearRect(0,0,1920,1080);x.fillStyle='#0B1020';x.fillRect(0,0,1920,1080);x.save();x.translate(960,540);x.strokeStyle='#7C5CFF';x.lineWidth=10;for(let i=0;i<8;i++){x.rotate(Math.PI/4);x.globalAlpha=.25+.75*p;x.beginPath();x.roundRect(180,-40,240*p,80,28);x.stroke()}x.restore();x.globalAlpha=1;x.fillStyle='#F5F7FF';x.font='48px system-ui';x.fillText('AI PLAY · '+cur.name+' · '+Math.round(p*100)+'%',64,100);if(el<states.reduce((a,s)=>a+s.ms,0)+3000)requestAnimationFrame(frame);}
requestAnimationFrame(frame);
</script>

本站验收配置；把must_not_claim当作防夸大约束。

{"must_pass":["单文件可直接打开","无外部图片字体音频","Console无报错","总时长15秒内自动停止","状态名水印与清单一致"],"must_not_claim":["不要说已生成MP4","不要说After Effects参与","不要保证60fps在所有机器达成"],"replace_each_run":["topic","states","palette","duration_sec"]}