world.execute (me).html

来自UM7lab的项目

项目地址

https://github.com/UM7lab/world.execute.me.html

本地示例

https://wem.yangyang8002.xin/

音乐本身讲述了一个训练AI理解爱，AI把爱曲解为病娇的故事

下面是Kimi的总结

这是一段用 HTML/CSS/JS 写成的「音乐可视小说」。页面打开后，伴随同名歌曲（world-execute-me.wav）的播放，歌词会在终端风格的黑色屏幕上逐字打出，同时触发一系列实时特效，把歌词里的意象变成可互动的视觉元素。

核心看点

1. 终端叙事 绿色等宽字体 + CRT 扫描线，营造 90 年代黑客氛围；每一句歌词以“C:>”提示符开始，像一段正在被执行的脚本。
2. 节拍同步特效 通过 requestAnimationFrame 与 audio.currentTime 精准对时，0.1 秒级的事件表让歌词、动画与鼓点完全对齐。 • 0:10「Switch on the power line」→ 横向电流光带闪现 • 2:55「A.D to B.C」→ 时间轴金色年份穿梭 • 3:20「F to M」→ 性别符号 ♀→♂ 三维翻转 • 4:40「BSOD」→ 蓝屏死机，内存转储 • 2:28-2:47 长达 10 秒的「EXECUTION」弹幕风暴
3. 多层视觉语言 • 数学：点、圆、正弦、切线、极限线实时绘制 • 生物化学：🍆🍅 出现同时弹出“Nutrients / Antioxidants”分子漂浮 • 网络文化：二进制雨、蓝屏、故障抖动、trance 旋涡 • 情感：粉红爱心脉冲、涟漪、渐变光晕
4. 零依赖纯前端 单文件即可跑，无需服务器。只要把 world-execute-me.wav 放在同一目录，点击“run”即可开演。
5. 彩蛋与细节 • 鼠标点击 overlay 后，画面会进入“blind + dizzy”模糊眩晕 3 秒 • 歌词「I am trapped」时屏幕出现无限循环的 love{} 代码块 • 结束前的「EIN DOS TROIS NE FEM LIU」闪现六种语言计数，致敬歌曲原 MV

如何体验

1. 把 index.html 与 world-execute-me.wav 放在同一文件夹
2. 浏览器打开 index.html
3. 点击「Click to run」
4. 戴上耳机，全屏，享受 3 分钟 11 秒的赛博浪漫崩溃

技术笔记

• 使用 CSS 变量做主题切换（AC/DC 红蓝电流）
• Canvas 2D 实现 60fps 二进制雨
• 全部动画基于 CSS keyframes + JS 动态注入元素，兼顾性能与可维护
• 10 MB 以内单页应用，移动端亦可流畅运行

一句话总结

这是一首写给极客的情歌：在代码与心跳之间，世界按下回车，执行（处刑）了“我”。