Stream Showcase

可展开剧集、原地播放的流媒体片架。
分类
构建提示词

# Stream Showcase：可直接交给其他 Agent 的复现提示词

独立实现浅色扇形视频专题浏览器：标题Queue up. / Level up.，下方海报沿远处圆心扇形排列；中间海报彩色并显示信息，侧面灰阶。使用本目录shows.json的全部专题/海报/hero/episodeList，保持顺序及字段。不得加载旧JS或iframe包页；YouTube iframe仅用于用户点击一集后的实际播放器。拆分尺寸/姿态、索引运动、专题渲染、剧集面板。

## 静态画面

全屏背景#f5f5f7、文字#1a1a1a，Geist正文；stage touch-actionnone,overflowhidden。标题区top96px，水平居中、z10、pointer-eventsnone；10px NOW BROWSING / 当前专题名，.14em字距、细边白底胶囊；主标题Caveat Brush400 clamp(3.25rem,11vw,9rem)/.9、字距−.01em、上距16，两行。手机W<768标题区top64px。

海报卡圆角16、无阴影、透明背景；img同圆角、cover。焦点项底部渐变透明50%到#16140fe6，左下16px标题18px/600/1.4白色；small显示year · seasons · episodes，11px/400/opacity.7、上距7。左上12px评分胶囊，右上12px类型胶囊，10px、半透明黑底；非焦点时这些文案与veil全透明。手机标题14px、small9px。hero、旧blurb、hud、rail label节点保留数据更新但视觉隐藏。

## 扇形尺寸与运动

原专题数N，卡片复制3轮，共3N。index=target=N。每帧index+=(target−index)×(拖动?.35:.12)；index<N/2则index/target都加N；index≥2.5N则都减N，循环至范围内。

W<768为mobile。angleStep=mobile?10:16°；origin=mobile?200:250（百分比）；a=H×(mobile?.44:.5)；θ=(mobile?1:2)angleStep×π/180；n=(origin−50)/100。

cardH=floor(min((H−a−12)/(.5+n(1−cosθ)+(.75sinθ+cosθ)/2),(W/2−(mobile?12:24))/(n sinθ+(.75cosθ+sinθ)/2),560))；cardW=floor(.75cardH)。left=W/2−cardW/2，top=a+12，transform-origin=50% origin%。该公式保证扇形在视口内，不能用普通平移轮播替代。

每卡rel=展开后索引−index，away=|rel|。away>4只设opacity0并跳过其他属性更新；否则transform rotate(rel×angleStep)，filter grayscale(min(1,away)×100%)，opacity=clamp(1−(away−3.5)/.5)，图片opacity=.5+.5max(0,1−away)，图片scale=1−.15min(away,1)，zIndex=100−round(away×10)，away<.5加is-focus。当前专题正模(round(index),N)，变化时更新browsing与隐藏hero/blurb，hero仅当前on；隐藏blurb动画opacity0/y24→1/0 .55s power3.out。入场strip opacity0/y60，delay.2,duration1,power3.out；GSAP关闭lagSmoothing。

## 输入

滚轮取绝对值较大的deltaX或deltaY，target+=delta×.0022；剧集面板打开时忽略滚轮。strip按下记录lastX及累计0；全局pointermove每次target−=dx×.0055并累加|dx|；全局松开：累计≥6则target=round(target)；否则点击卡与index距离<.5时打开专题剧集，侧卡则只target=该卡展开后的索引。右键target=round(target)+1，左键−1，Escape关闭剧集。取消拖动清理状态并吸附。

## 剧集与播放器

面板全屏z60、白字；scrim黑.86/blur8，panel中心width min(92vw,880px)、maxheight82vh、overflowYauto、背景#111116、圆角10、padding26。标题22px/600，副标题12.5px/opacity.6，内容year · seasons · episodes · rating★。列表gap10；每li flex、padding10、圆角8、hover白.08；编号宽22、14px/.5；缩略图132×74、圆角4，URL `https://i.ytimg.com/vi/{videoId}/hqdefault.jpg`；标题14px/500、时长12px/.55。

打开清空player和on状态，填对应episodeList，面板opacity0/y26/scale.97→1/0/1，.45s power3.out。点击某集插入 iframe `https://www.youtube.com/embed/{videoId}?autoplay=1&rel=0`，title取集名，allow autoplay; encrypted-media，allowfullscreen；player变on、16:9、圆角8、上下18px，iframe填满无边框。关闭钮、背景和Escape立刻移除iframe并关闭面板，确保停止播放。隐藏playBtn仍可以打开当前专题并播放第一集，moreBtn打开当前专题列表。

## 验收

1440×1000和390×844，初始2800ms、右键、滚轮250、水平拖动并吸附，核对扇形角度/尺寸/灰度/透明度及browsing文本。点击焦点卡打开对应专题，剧集数量/标题正确；点第一集生成匹配URL的播放器；Escape卸载iframe。验证外部播放时可使用网络fixture检查接线，但不得将其报告成YouTube实际播放成功。清理事件/rAF/tween与iframe。脚本 `rewrite/scripts/check-stream-showcase.mjs`，证据 `artifacts/rewrite-validation/stream-showcase/`。

## 本地图片与中英文（2026-09-21 更新）

本轮已接入本地公开图片和中英双语。复现时同时遵循 [共享规范](../../shared/README.md)：沿用当前本地图片路径，使用共享词典与语言偏好（`zh` / `en`），覆盖动态内容、辅助标签和 Canvas 文字；不要恢复旧的远程图片链接。中文拆字标题应先翻译再拆分，并保持原有动画机制。图片来源与替换映射在共享规范中列出。