An HTML house that unfolds with a mechanical three-second motion

Ian (伊恩)@ianneo_ai

用 HTML 盖栋房子，点一下就展开

到位时那一下轻轻的回落，会让网页里的模型有点重量感。这次参考 Akshat Singh 的404页面，研究它的等距线稿和机械动作手感，主体换成折叠庭院

机械动作要有固定的连接关系

窗框和墙面共用一套转动，整块板一起走，连接处就不会散。屋顶用两块互相铰接的板，后板连在背墙上，折起来也始终接得住

几组动作错开起步，前一组还没停，后一组就跟上，能看出整套机构被带动的过程

一次展开约三秒，末尾保留很小的过冲再落稳。展开后会一直停住，留多少时间看内部，由观众自己决定。收起沿同一条时间线倒着走

制作时还修过一个背景跟着晃的问题，原因是每一帧都按模型当前的轮廓重新居中，部件一展开，整个画面就被带着挪

这里改成按完整动作预留范围，取景的位置和缩放全程固定，底座和网格也就稳住了。零件有了固定的参照，转动的方向和幅度才能看清楚

这类交互适合用在空间概念展示和产品结构演示里，也可以做成网页中的互动插画，让观众自己动手查看一个对象的内部关系

交给 AI 做：

把下面这段复制给 Claude 或 ChatGPT，就能做出差不多的效果👇