做了一个匿名漂流瓶 Web 应用
把心事交给海风
互联网上从不缺社交产品，但大多数都在鼓励你展示最好的一面——精修的照片、精心编排的文案、可量化的社交资本。漂流瓶想做的恰恰相反：给你一片匿名的海，把想说的话塞进瓶子里扔出去，等一个素不相识的人捞起来，读一读，也许回一句。
没有关注、没有点赞、没有公开围观。每一段对话都只在两个人之间发生，像真正的漂流瓶一样，带着偶然性与温度。
你能用它做什么
扔一个瓶子
写下最多 500 字的心事，可以附一张图片，选一个情绪标签（治愈、坦白、深夜、勇气……）和一个主题（今日心事、关系困惑、工作学习……）。如果你希望这个瓶子在未来某个时刻才能被打开，可以设置一个"时间胶囊"——延时 1 分钟到 30 天不等。草稿会自动保存，不用担心写到一半丢失。
捞一个瓶子
点击"捞瓶子"，系统会从茫茫大海里为你随机打捞一个。算法偏向新瓶子，但也保留了一些随机性——不会每次都捞到同一个。捞起后你可以阅读内容，然后回复，开启一段一对一的匿名对话。
私密对话
每个瓶子都可以承载多段对话。瓶子的主人可以看到所有捞到它的人各自发来的回复，并在不同的对话线程之间切换。回复同样支持文字和图片，图片采用"阅后即焚"机制——对方首次查看后，图片会从服务器永久删除。
安全与边界
不想继续聊了？可以一键拉黑，双向屏蔽后彼此再也不会捞到对方的瓶子。遇到不当内容可以举报，管理后台会收到通知并可查看完整对话上下文进行审核。
一片用代码写出来的海
打开应用，首先映入眼帘的不是一个表单，而是一片 3D 海洋。
这个场景完全用 Three.js 和 React Three Fiber 构建，核心是一个近 2000 行的自定义 GLSL shader。海面由 8 层 Gerstner 波叠加而成，加入了次表面散射（SSS）、菲涅尔反射、GGX 高光和动态泡沫噪声，在不同光照角度下呈现出深浅变化的水色。
远处有一座灯塔矗立在岩石小岛上，光柱缓缓旋转，在水面投下移动的光斑。前景和远景分布着用 FBM（Fractal Brownian Motion）噪声生成的有机岩石群，配合雾气飘带和海浪泡沫层，营造出清晨海岸的氛围。
海面下有鱼群在游动——通过 Instanced Mesh 实现的成群结队的小鱼，还有海龟、蝠鲼和水母各自以不同节奏穿行。天空穹顶随时间渐变，太阳或月亮带有多层光晕效果。
不同页面使用不同的相机预设：首页视角开阔，扔瓶页俯视海面，捞瓶页则贴近水面，配合轻微的漂移动画，让每次切换都有身临其境的转场感。
技术栈一览
┌─────────────────────────────────────┐ │ 用户浏览器 │ │ React 19 + TypeScript + Vite │ │ Tailwind CSS + Radix UI │ │ Framer Motion (动画) │ │ Three.js + R3F (3D 海洋) │ │ Zustand (状态管理) │ ├─────────────────────────────────────┤ │ Cloudflare Edge │ │ Workers (API + 路由) │ │ D1 (SQLite 数据库) │ │ KV (限流计数) │ │ Assets (静态资源托管) │ └─────────────────────────────────────┘
整个应用跑在 Cloudflare 的边缘网络上，没有传统服务器。API 是 Cloudflare Workers，数据库是 D1（托管的 SQLite），限流用 KV 存储，前端构建产物直接托管在 Cloudflare Assets 上。部署一条命令搞定，全球 CDN 加速，冷启动几乎无感。
几个有意思的实现细节
匿名身份系统
没有注册、没有登录。用户首次访问时，客户端用 crypto.randomUUID() 生成一个永久 ID，通过 HttpOnly Cookie 维持会话。你可以选择设置昵称、头像和一些基本信息，但这些都是可选的。这个设计让"第一次打开就能用"成为可能，同时保留了足够的身份持久性来支撑对话和通知。
乐观更新与失败重试
发送回复时，消息会立即出现在对话底部，不等服务器响应。如果发送成功，本地的临时消息会被替换为服务器返回的真实数据；如果失败，消息前方会出现一个红色感叹号，点击可以重试或删除——和微信的体验一致。
加权随机捞瓶
捞瓶并不是纯随机的。系统先取出最近的 12 个候选瓶子（排除自己扔的、拉黑的、24 小时内已捞过的），然后按 weight = 0.55^i 的指数衰减分配权重。越新的瓶子越容易被捞到，但老瓶子也有机会，避免了"先到先得"的马太效应。
Hash 路由持久化
单页应用的一个常见痛点是刷新后回到首页。这里用 hash 路由（#home、#bottle/42、#messages 等）配合 history.pushState 和 popstate 事件，实现了刷新保持当前页面、浏览器前进后退按钮可用的完整导航体验。
管理后台
独立的 /admin 页面，密码认证，提供数据统计、举报审核（支持查看完整对话上下文）、用户封禁/解封、内容删除等功能。整个后台是一个自包含的 HTML 文件，不依赖额外的前端框架。
写在最后
漂流瓶是一个从 idea 到上线的完整全栈项目，涵盖了 3D 渲染、实时交互、匿名社交、内容审核等多个领域的工程实践。它不追求用户增长或商业变现，只是想在互联网的角落里留一片安静的海面——你可以在这里说一些平时不会说的话，然后等待一个陌生人的回音。
如果你也想试试，扔一个瓶子到海里吧。
