tldr;
生日蜡烛模拟器网页应用 已经上线,网址: birthday-cake.online
引言
不知道你有没有过这种尴尬的经历:朋友或家人的生日到了,蛋糕准备好了,却发现忘了买蜡烛😅。
为了解决这样的“临时缺蜡烛”的窘境,我就自己动手开发了一个在线吹蛋糕蜡烛工具。
设计理念
市面上并非没有这样的 app,但是,在过生日这样的危急关头,现场需下载一个app,未免太不方便,而且可能还会需要注册登录之类的,这就要跟解决的问题的场景完全相悖了,所以我认为开发一个web app来实现这个功能是最佳的选择
我做的时候,特别想让它满足几个很实在的点:
- 蛋糕要够精美,选择要多。网站里的蛋糕都像精致的插画,有不同款式可以选,视觉上首先得像个正经的“生日会场”。
- 摆蜡烛要“聪明”。你可以自由选择蜡烛数量,它会自动在蛋糕上排列得整整齐齐。如果年龄数字比较大(比如30、40),你还可以直接选择数字形状的蜡烛,省去一根根数、一根根摆的麻烦。
- “吹灭”的仪式感要足。每根蜡烛上都有闪烁的火苗动画。最关键的环节是,你可以对着电脑或手机的麦克风“呼呼”一吹,屏幕上的蜡烛就会以非常炫酷的动画效果依次熄灭,然后绽放出庆祝的动画。这个瞬间,真的能带来许愿成真的快乐。
现在有了这个应用,哪怕真的忘了买蜡烛,也能立马掏出手机,补上一个完整、有趣甚至更炫的吹蜡烛环节。它成了我聚会时的一个应急小法宝,朋友们也觉得新奇好玩。
如果你也想试试这个不担心忘带蜡烛的生日小工具,可以直接访问 birthday-cake.online ,无需注册登录,即可直接使用。 中文版链接🔗:
生活中总有些小仪式值得被认真对待,哪怕是用一种有点科技感的方式。希望这个小工具也能给你的生日时刻增添一点方便和乐趣。
提示词:
开发一个吹生日蛋糕蜡烛web应用,设计要非常精美现代化,配有精美的生日蛋糕素材(要想插画一样精美,要有多种生日蛋糕可选),还要能够让用户选择蜡烛数量,并能针对蜡烛在蛋糕上的位置进行自动排布、优化;或者选择数字形状蜡烛(比如数字 23 形状的蜡烛,这样就不用摆23根)。蜡烛上要有火苗闪烁的动画。当用户吹麦克风时,应用以非常炫酷的动画模拟蜡烛熄灭的效果,同时展示出绚丽的庆祝动画。大概功能就是这样,其他细节你可以自行脑补,界面和要惊艳,要有氛围感、质感。要求:1. web app 运行不依赖 AI 前端 js 代码实现所有的业务逻辑。图片生成等过程均在客户端进行2. 要适应多端3. 界面要有艺术水准,要是美术生做出来的风格,可以使用 shadcn ui 等流行的组件,但不能简单堆砌,要高度定制化,界面精美,交互动画顺滑4. 输入体验要好,细节诸如:如果涉及图片输入,图片除了支持拖拽上传外,还要支持粘贴。5. SEO 要好,各种 meta 要设置起来,尽可能使用预构建,而不要全部都依赖客户端渲染6. 要有 favicon 的文件7. 性能优化:大文件需预加载/缓存,避免每次请求远程服务8. PWA 支持:使用 Workbox 生成 Service Worker,实现离线访问和安装到桌面9. 要支持国际化!并且每种语言都要有子路由,默认先给我中文、英语、日语、法语、阿拉伯语(注意文字方向)
🎉手机里吹生日蜡烛,礼炮特效必须安排
最近正在做一个吹生日蜡烛的网站,用户对着麦克风吹气,就能吹灭生日蛋糕蜡烛,不仅支持选择蛋糕、蜡烛数量和样式,蜡烛熄灭时还带有有烟花庆祝效果,氛围感和仪式感爆棚!#一个人过生日也要有仪式感#生日惊喜
封面测试:封面只发个简单截图,根本不行,下次试试视频要带框
想做个过生日吹蜡烛的app,会对你有帮助吗
吹蛋糕应用更新啦:
配置完成之后,应该还要有个分享按钮,生成分享链接(不用存储到服务端,就在客户端用 lzstring 生成 url 参数),可以分享给别人。打开分享后的页面,看到的状态应该就是配置完成的状态
蛋糕场景应该再做得沉浸式一点,毕竟这是核心功能,配置完成后的状态下,应尽可能通过动效,过渡到只保留蛋糕场景可见(不管是桌面端还是移动端)

