01为什么专门写一篇
因为每次有人问「你这个界面在哪下的」，我都得解释一遍：素材是官方的，代码是我写的，两者都别拿去商用。
02素材来源
- P5R 官方虚拟背景（四轩茶屋 / 勒布朗 / 阁楼 / 天鹅绒房间）：Atlus 官方 2020 年免费配布
- P5X 官方 Fan Kit：官网明确写明可用于个人网站、博客与 SNS
- P5R Steam 商店素材 / 动画 Key Visual：用于个人非商业装饰
- 角色立绘：P5R 英文官网
- 字体：社区同人作品（p5hatty、Persona5FanRansom），保留原作者署名
03使用规则
- 个人非商业使用没问题
- 不要转卖素材、印成商品、宣称自绘
- 转载文章请保留页脚的版权声明
04想要同款？
本站的 CSS 与 JS 全部手写，没有引入任何 UI 框架。你可以直接打开开发者工具抄走任意一段——包括斜切菜单、撕纸字和总攻击转场。
05本地素材清单
| 文件 | 来源 | 说明 |
|---|---|---|
assets/img/hero-joker.webp | P5R Steam 商店头图 | 首页横幅 |
assets/img/bg-leblanc.jpg | Atlus 免费配布虚拟背景 | 关于页 / 封面 |
assets/img/cover-*.jpg | P5X 官方 Fan Kit、动画官网 | 文章封面 |
assets/img/joker-thief.webp | P5R 英文官网角色立绘 | 关于页的作者立绘 |
assets/fonts/*.ttf | 社区同人字体 | 保留原作者署名 |
assets/img/cursor/*.png | persona5-style-portfolio（从原作 .ani 拆帧） | 怪盗光标 48×48 × 30 帧 |
assets/sfx/select.mp3 | persona5-style-portfolio | 菜单音效 |
assets/img/weather/* | Persona5-Weather-Forecast | 天气精灵图与城市背景 |
assets/img/map/* | Persona5Startpage（MIT · © 2021 Trever Hibbs） | 东京地图与 25 组标签 |
assets/clip/dive.webm | 《过场进入异世界》绿幕素材，本地 ffmpeg 抠像 | 进文章的「潜入」转场，118 KB |
assets/js/curtain-data.js | 《过场joker拉下帷幕》的逐帧矢量轮廓：亚像素追踪 + 按弧长重采样，由 tools/curtain/gen.py 从源片量出来（同 p5-ui-css 复刻对话框的思路，但这里要还原「动」） | 站内导航转场，逐帧形变；懒加载 40 KB（gzip 13 KB），首屏不为它付钱 |
assets/img/ui/dialog.png | p5-ui（Vue 组件库）的 notification 框体 | 文章对话框卡片，8.7 KB |
assets/img/crowd/*.png | p5-ui（Vue 组件库）的人群过场帧 | 地图页出发的人群转场，12 帧共 228 KB |
assets/img/portrait/joker-artbook.png | 官方画集 p5artbook-020 右页的正面线稿，本地抠底（tools/portrait-crop/extract.py） | 对话框里「我」的立绘，11 KB |
assets/img/phone/frame.webp | 手机样式图（本地抠掉蓝底） | 右边手机挂件的外壳，27 KB |
assets/music/*.mp3 | Lyn 演唱的三首原曲（Beneath the Mask / -rain- / 星と僕らと），128 kbps 转码 | 手机里的音乐播放器，开站自动播放第一首 |
光标、音效、天气页与地图页的界面都移植自上面三个社区项目，按原项目许可保留署名，代码重写过一遍。进文章的转场是离线处理过的视频：把绿幕抠成 VP9+alpha 压到 960×540。导航那段《过场joker拉下帷幕》已经不用视频了：逐帧把轮廓追踪成顶点表，渲染时对相邻帧做顶点插值（形变），所以 30fps 的原片在 60fps 上是连续形变而不是跳帧。运动不是手编的缓动，时间轴也按源片帧号标定过，只把中间那段黑场压掉。对账方式是拿渲染结果与原片逐像素比：剪影 IoU 0.98、幕色 0.98；每帧绘制 0.15ms，占 60fps 预算的 0.9%。对话卡片的框体与预告信标题的样式取自 p5-ui；地图页出发时的人群过场也是从 p5-ui 的 canvas 组件移植的，12 帧路人图跟着仓库走，不放进被 .gitignore 排除的 assets/clip/，所以公开仓库里也有这一段。
06在文章里插图
markdown
图片会自动套上白框与红色投影，不用写行内样式——风格统一交给 CSS，写作时只管内容。