Perfectly Hooked

一个有 23 件商品的商店、一个有 14 张图片和循环动画的图库，以及一个申请定制订单的页面。

这家店是别人的。照片、名称和价格来自她原来的网站，尚未得到确认。

网站尚未上线：支付和定制申请已经做好，但处于关闭状态。

一个网站要承担三件事：卖商品、展示手工作品，以及接收定制订单的请求。

品牌方提供了照片、视频和文字，所以不能凭空编造来填补空白：没有提供库存信息，所以商品标注“Ask about availability”；运费也不编造，所以购物袋里写明配送在下单后另行安排。

每个效果都借自钩织：一排排扫过的针脚把图片显现出来，滚动时一根线沿页面拉下，菜单像一行行针脚一样织成。

不编造任何内容。不在品牌方价目表上的商品没有价格，名称只作描述；暂时还不能接单或接收请求的地方，网站会直说，并提供 WhatsApp，而不是假装可以。

价格绝不信任浏览器传来的数据。浏览器只发送订购了什么；服务器重新查出名称和价格，并在确认付款前先校验支付服务商的签名。

定制请求在启用行级安全且不对外开放的情况下存储，参考照片放在私有存储桶中；只有数据库确认保存之后，表单才会提示成功。

动效尊重访客。开启“减少动态效果”的人仍能看到柔和的淡入；手机设置为减少动态效果的人，也可以用“Full animations”开关把效果重新打开。

Cookie 只是一个简单的选择，而不是一堵墙：一行窄条、两个按钮，页脚里还有一个可以更改选择的链接。

摄影优先。直角，带细腻颗粒的象牙白页面，酒红色是唯一的强调色。

在桌面端，一缕毛线沿着首屏垂下。

使用 Next.js、TypeScript 和 Tailwind，动效用 GSAP，毛线用 Three.js。毛线只在带鼠标的宽屏上加载，所以手机不会下载任何 3D 代码。

触碰 Atelier 里的照片，它会化成水。“Stitch your name”会把你输入的内容钩出来。

结账时浏览器永远不能设定价格：由服务器重新计算。

公开页面提前生成并缓存；只有结账的返回页面和 API 路由是按需运行的。

原始文件保持不动，网页版本由它们生成：照片为 AVIF 或 WebP，并带有模糊预览；视频是无声循环，只在靠近屏幕时才加载，离开屏幕就暂停。

基本功都已内置：跳到正文的链接、清晰可见的焦点、带标签且会播报错误的表单，以及购物袋、菜单和图片查看器所用的原生对话框。

框架

Next.js 16、React 19、TypeScript

动效

GSAP、Three.js、WebGL

后端

Supabase、Paystack

源码

私有仓库

“Stitch your name”会把你输入的词一行一行地钩出来。Atelier 的照片可以在灯箱中打开。

它能正常运行，正等着它的主人。尚未公开：这些图片是它在本地运行时的截图。

它自己的说明记录了对正式构建的一次检查：最大内容绘制约一秒，没有布局偏移，首页的 JavaScript 约 300 kB。

剩下的由品牌方来确认：凭外观对应的名称和价格、库存与配送，以及开启支付和请求功能的密钥。