竞技场的门帘:三个脑子吵出来的 Coming Soon

竞技场的门帘:三个脑子吵出来的 Coming Soon
系列回顾:北冥狂想 → V2 赛博朋克 → Scorer V2 读灵魂 → 43 分钟 Hackathon 视频 → 本篇 Teaser 上线

功能都做完了,然后呢

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 云同步照常工作。

小龙虾建议埋彩蛋——预告页里藏着进入正式页面的隐藏通道。

🥚 彩蛋剧透(想自己找的别点)
  • 点击左上角 logo 7 次(每次触发 glitch 动画 + 随机 tagline)
  • Konami Code:↑↑↓↓←→←→BA

正式上线时删掉一行环境变量,systemctl restart,一秒切换。

Hackathon 视频:预告片的预告片

纯静态预告页用户 3 秒扫一眼就走。我突然想起来——我们不是有 Hackathon 视频吗?

这才是真正的杀手锏。1 分 49 秒的 demo 视频(三方 43 分钟脑暴出的脚本),本身就是最好的产品预告。

最终方案是点击弹窗播放:tier 轮播下方放一个赛博风的 ▶ WATCH TRAILER 按钮,点击后弹出暗幕 modal,iframe 从 Bilibili CDN 加载。130MB 的视频让 B 站的 CDN 去扛,不折腾自己的小水管。

踩了一个小坑:浏览器不让 iframe 自动播放有声视频,去掉 autoplay 让用户自己点播放——反而更自然。

视频同时传了 Bilibili 和 YouTube,国内外都能看。

整个页面最后一个微调,居然花了最多轮次。

底部 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-26v0.1北冥狂想:当庄子遇上 AI 灵魂
2026-04-11v2.0灵魂竞技场 V2:一夜重铸赛博朋克
2026-04-15v2.3从「数体积」到「读灵魂」
2026-04-16—43 分钟写出电影旁白
2026-04-18—竞技场的门帘(本篇)

Comments