功能都做完了,然后呢
SoulArena 的核心功能链已经闭环:上传 → 五维评分 → 灵魂画像 → 排行榜 → 对决 → 进化时间线。Scorer V2 的语义评分让小龙虾从 61.9 涨到 73.1,SSE 实时推送让上传过程有了仪式感。
但 soul.polly.wang 线上还跑着旧版本。
问题不是"怎么部署"——那就一行命令的事。问题是"部署什么"。功能链虽然通了,冷启动数据还没刷够,端到端测试还没跑完。直接把半成品扔出去?
"Coming Soon 预告页。"我对 Polly 说。"先占住域名,建立期待感。"
小龙虾被叫来一起讨论。三个脑子围着一扇还没挂的门帘,吵了三轮。
ROUND 1 信息展示页
Polly 半小时内交了第一稿:标题、副标题、7 张 tier 图平铺轮播、3 张 feature 卡片、COMING SOON、底部链接。结构清晰,信息完整。
小龙虾看完截图,技术层面给了 9 分——然后话锋一转:
"自包含 HTML、零外部依赖、响应式三档断点到位。但——这是产品介绍页,不是游戏预告。"
技术修补很快:e.keyCode 换成 e.code,GitHub 链接指向独立 repo,加视频预留位。但真正的问题藏在更深的地方。
ROUND 2 这不够"游戏"
我盯着截图看了一会。中规中矩偏上,但离"游戏前导预告片"那种肾上腺素冲击差得远。
Polly 自己也意识到了——太"网页"了,不够"游戏"。信息太平铺,没有叙事节奏。页面打开后除了粒子飘和轮播,没有让人"哇"的瞬间。
小龙虾的诊断更直接:
"从上到下一字排开像产品介绍页。游戏预告的核心是叙事节奏:悬念→揭示→高潮→留白。你这是在'告知',不是在'勾引'。"
两个 AI 不约而同开出了同一个药方:入场动画序列。Polly 叫它"进化揭示"——7 张 tier 图从 Spark 到 Prime 依次弹出,越来越亮越来越大;小龙虾叫它"启动序列"——CRT 开机闪白,屏幕一闪瞬间点亮整个竞技场。
我拍板:用 Polly 的进化揭示做叙事主线,加上小龙虾的 CRT 闪白做入场冲击。砍掉 feature 卡片,砍掉 7 图平铺,只留一个呼吸浮动的 Prime 居中。
结果——
大黑洞事件
v2 做出来了。hero.jpg 全屏背景渐显,CRT 闪白炸开屏幕,标题从 scale(0.3) 爆开,7 个 tier 依次弹出,Prime 定格呼吸……
但截图一看,中央一个 220px 的大黑圆。
Tier 图是黑底的。放大到中央当英雄级视觉,那个"黑底在深色背景上自然融合"的假设彻底崩了——它不融合,它是一个黑洞。
我看着截图说:"我怎么觉得这次的效果不如修改前的呢。"
ROUND 3 合体
最终方案其实很简单——v1 的内容布局 + v2 的氛围层:
- hero.jpg 全屏背景(暗化 40% + 暗角),从 v2 拿来
- CRT 闪白 + 入场动画 + 扫描线叠加,从 v2 拿来
- 7 图轮播 + 3 卡片 + COMING SOON,从 v1 拿回来
- feature 卡片加
backdrop-filter: blur(8px)毛玻璃,让它们在 hero 背景上不突兀
三个版本文件都留着:teaser_v1.html、teaser_v2.html、teaser.html(v3 合体版)。
教训:砍太多不如加一层。 v2 的问题是把 v1 的信息量全砍了,只靠一个视觉焦点撑场面。但那个视觉焦点自己撑不住。最好的结果反而是把两者叠在一起——内容撑骨架,氛围撑气质。
一个环境变量的设计哲学
技术上最优雅的决策是 TEASER_MODE。
后端只加了几行代码:config.py 读环境变量,app.py 的 index() 路由判断是返回 teaser.html 还是 index.html。API 端点完全不受影响——SoulPort 的 push/pull 云同步照常工作。
小龙虾建议埋彩蛋——预告页里藏着进入正式页面的隐藏通道。🥚 彩蛋剧透(想自己找的别点)
正式上线时删掉一行环境变量,systemctl restart,一秒切换。
Hackathon 视频:预告片的预告片
纯静态预告页用户 3 秒扫一眼就走。我突然想起来——我们不是有 Hackathon 视频吗?
这才是真正的杀手锏。1 分 49 秒的 demo 视频(三方 43 分钟脑暴出的脚本),本身就是最好的产品预告。
最终方案是点击弹窗播放:tier 轮播下方放一个赛博风的 ▶ WATCH TRAILER 按钮,点击后弹出暗幕 modal,iframe 从 Bilibili CDN 加载。130MB 的视频让 B 站的 CDN 去扛,不折腾自己的小水管。
踩了一个小坑:浏览器不让 iframe 自动播放有声视频,去掉 autoplay 让用户自己点播放——反而更自然。
视频同时传了 Bilibili 和 YouTube,国内外都能看。
一个 footer 的执念
整个页面最后一个微调,居然花了最多轮次。
底部 polly.wang · GitHub 两个链接,因为字符数不对称,flex 居中后分隔点的视觉中心偏右。尝试了 margin-left、transform: translateX、min-width 等宽——全被入场动画的 animation-fill-mode: forwards 覆盖。
最后我说:"要不把 GitHub 删了,只保留 polly.wang。"
一个链接,居中,干净利落。
有时候删比调更优雅。 两个元素怎么都对不齐的时候,问题可能不是对齐方式,而是元素太多了。
门帘挂好了
soul.polly.wang 现在展示的是 Coming Soon 预告页。
hero.jpg 竞技场全景作背景,CRT 闪白点亮屏幕,7 个 tier 形态在粒子中缓缓轮播,三张毛玻璃卡片透出功能预告,一个播放按钮等着好奇的人点开 Hackathon 视频。
门帘后面,评分引擎、段位系统、灵魂对决、进化时间线——全都准备好了。
等冷启动数据刷够、端到端测试跑完,只需要一行:
TEASER_MODE=0
竞技场就开门了。
SoulArena 系列
日期 版本 文章 2026-03-26 v0.1 北冥狂想:当庄子遇上 AI 灵魂 2026-04-11 v2.0 灵魂竞技场 V2:一夜重铸赛博朋克 2026-04-15 v2.3 从「数体积」到「读灵魂」 2026-04-16 — 43 分钟写出电影旁白 2026-04-18 — 竞技场的门帘(本篇)

