一张平面图滚成一栋房子:casa-serra 的 470 颗星不是 GitHub 给的
它是什么 一个 3D 网页 demo:打开是一张建筑平面图,往下滚墙从图里长出来,镜头走进每个房间;仓库主要放的是做它用的起手 prompt。
为什么火了 「图纸一滚变房子」三秒就看懂,又赶上 Opus 5.5 刚发布;作者是专业视频剪辑,先在 Threads、LinkedIn、YouTube 铺视频,第二波靠 18.9 万粉的老板 Meng To 挂链接转发。
C你可以怎么跟 别再做平面图变房子;换一个同样「图纸就是成品」的视觉反转,赶下一个新模型发布,先发短视频测反应,再建仓库放 demo、prompt 和一小时复现版,并争取一个大号转发。
- 数据(每天更新) · 建库 2026-10-13 · 474 星 · 7 天 +172
GitHub · 星数 数据 2026-10-14 → 2026-11-08(26 天,26 次观测)。10-28 以前的点来自 deeply / 存档补录,不是每天都有
Samnang Aing 用 Claude Code 和 Opus 5.5 做了一个网页:打开是一张建筑平面图,往下滚,墙从图纸里长出来,镜头走进一个个房间。仓库 24 天拿到 470 颗星、107 个 fork,但这些星几乎都是他在 Threads、LinkedIn、YouTube 上的视频带来的,第二波来自他老板的一次转发。点子三周内就被人照抄了,抄的人拿到的星是 0。
10 月 12 日,「这种事从来没发生在我身上」
2026 年 10 月 12 日,Samnang Aing 在 X 上发了一条帖:「This got over 60K views on Threads and LinkedIn combined overnight, which never happens to me. So here it is for X.」他在 Design+Code 做视频剪辑和创意开发,前一天把一段十几秒的录屏发到了 Threads 和 LinkedIn:一张黑线白底的户型图,标着房间名和尺寸,一滚动,墙立起来,镜头从正门进去,客厅、庭院、一棵橄榄树。LinkedIn 那条最后有 1,113 个反应、153 条评论,评论里问得最多的是「怎么做的」。
第二天(10-13 UTC 凌晨),他建了 GitHub 仓库 casa-serra,README 第一屏就放出了一段「起手 prompt」。四天后仓库 159 颗星。
它到底是什么
一个虚构的里斯本建筑事务所「Lintel」的落地页,主角是辛特拉山上一栋 946 m² 的庭院住宅 Casa Serra。在线 demo 挂在 GitHub Pages 上。
README 里讲了做法:约 70 次 prompt、两周、推倒重来四个版本;一开始的灵感是一个老游戏网站的短视频,「平面图」这个点子是第四天才冒出来的。技术栈很朴素:three.js + GSAP ScrollTrigger + Lenis,纯文件,没有构建步骤;所有几何体都是代码生成的,没开 Blender;贴图用的是 Poly Haven 的免费 CC0 扫描(笔记本上约 39 MB,手机上约 13 MB,设备跑不动就给静帧和录屏)。
真正让人停下来的是一句话:平面图不是图片,是真的 3D 模型在 1.2 米高处剖开、用超长焦从正上方看。 往下滚就是把剖切面往上抬,看起来就是墙在长。图纸和房子是同一个东西,所以 2D 到 3D 是连续的,不是「放一张图,再切到模型」。每个房间在镜头到达之前都保持线稿,到了材质才扫过去。
要注意:仓库里的代码是压缩过的,没法读。它真正给出去的是那段 prompt,加上一个对照仓库 casa-larga——作者拿这段 prompt 开了一个全新会话,一小时后拿到的第一个检查点,代码原样放出(现在 31 星、18 fork)。
星是怎么涨上来的
| 日期 | star | fork | 发生了什么 |
|---|---|---|---|
| 10-11/12 | — | — | Threads + LinkedIn 首发,一夜 6 万观看;10-12 发到 X |
| 10-13 | 0 | — | 建仓库,README 主打 starter prompt |
| 10-17 | 159 | 39 | 第一波 |
| 10-21 | 251 | 68 | YouTube 制作过程视频这段时间上线 |
| 10-28 | 285 | 76 | 平台期,每天 +1 到 +5 |
| 11-03 | 304 | 81 | Meng To 挂着仓库链接转发 |
| 11-04 | 393 | 94 | 单日 +89,最高的一天 |
| 11-05 | 445 | 99 | +52 |
| 11-06 | 470 | 107 | 近 7 天 +165,前一周只有 +33 |
数据:GitHub 仓库页与逐日 star 记录(10-17 起);Trendshift 的 CSS 类目榜上它前后两次冲到第 2,中间掉到 7–16 名。它没上过 GitHub 全站 trending。
一条一条说。
短视频首发。 先发 Threads 和 LinkedIn,火了再搬到 X、Instagram(10-24 的 reel)和 TikTok(账号只有 42 个粉丝,几乎没贡献)。建筑、室内、地产、网页设计四个圈子都愿意转一个「平面图变房子」的三秒反转。
YouTube 长视频。 「A lot of you asked how this was made, so I made a video about it」——《Opus 5.5 Turned a Flat Floor Plan Into a Walkable 3D House》,约 15.8 万次观看。作者本职就是剪视频,节奏和标题都很专业。
老板转发。 11 月 3 日,Meng To(Design+Code 和 Aura.build 的创始人,X 上约 18.9 万粉)发:「novel way to mix architecture, web design and 3d. opus 5.5 is a beast with three.js. prompt: github.com/Sam1983Aing/casa-serra」。作者 X 简介写着「@ Design+Code」,也就是说这是自己老板转的。转帖直接挂 GitHub 链接,于是 11-04、11-05 两天涨了 141 颗星——这就是第二波的全部来源。
之后的二次传播,作者没出力。 opuskill.com 把它的 prompt 做成教程页,tripo3d 的 prompt 库、WO! Discover 周刊、各种「awesome-opus-5.5」清单都收了;Instagram 上的 AI 引流号拿「Claude 把平面图变成可走的 3D 房子」做成「评论 CLAUDE 领 7 个 prompt」的帖子。没找到广告、Hacker News 或 Reddit 首发的痕迹。
fork 和 star 的比例约 23%,明显偏高。原因很直接:这是一个 Pages demo,fork 一份就有自己的在线地址可以改;原帖引导的本来就是「拿 prompt 去做你自己的」。所以点星的人多半是在收藏一个 prompt、抄一个做法,不是在用一个库。
为什么是它
- 一眼就懂。 「看着是图纸,一滚变房子」,不用解释,自动播放的三秒就讲完了。
- 赶上了 Opus 5.5 刚发布。 每条帖都写「Built with Claude Opus 5.5」,那几周所有人都在找「新模型能做出什么好看的东西」,它正好是一个样例。Meng To 转帖的原话也是在夸模型。
- 作者会做视频,也有人脉。 第一波靠他自己在五个平台铺视频,第二波靠 18.9 万粉的老板。这两样,照抄 prompt 的人都拿不到。
谁在跟它抢
| 项目 | 上线 | 体量 | 和它的区别 |
|---|---|---|---|
| Matterport、建商的 3D 户型漫游服务 | 多年前 | 商业服务,有公开报价每套户型 $1,495 起 | 实景 / 户型漫游工具;casa-serra 是一张营销页的叙事手法 |
| cvdlab/react-planner | 2016 | 1,490 星 | 画户型、切 3D 看的编辑器,没有滚动叙事 |
| Home Assistant 3D 户型(ha-floorplan、neonplan3d) | 2017 / 2026-09 | 1,738 / 1,056 星 | 智能家居面板,实用工具 |
| fireship-io/threejs-scroll-animation-demo | 2021 | 1,673 星 | 通用 three.js 滚动教程 |
| Moh4696/open-3d-skills | 10-31 | 269 星(6 天) | 给 Claude Code / Codex 用的 3D 网页技能包,是工具 |
真正和它同类的「AI 做的一张 3D 滚动页」几乎都是几星的小仓库;星多的那几个要么是老牌工具,要么像 open-3d-skills 这样,把「怎么让 agent 做 3D 网页」打包成了别人能直接装的东西。
抄的人拿到了什么
作者自己接着出了续作:flat-to-3d(10-28,「七种把平面图滚动变 3D 的做法」,每种都带 prompt,68 星)、lintel 的完整版、casa-larga。
外人也很快照着做了:mys1erious/3d-plan-to-walk(11-03,帕拉迪奥的圆厅别墅,描述里一字不差地写着「cut 1.2 m above the floor」)、wilsonwu-ai/floor-plan-to-house(11-04,「A floor plan that becomes a 3D house as you scroll」),还有几个类似仓库——到 11-06 都是 0 星。Instagram 上有人做了系列「Boring to Game Ep 1」,开头就说「The idea was first shown by Sam Aing」;YouTube 上有「Floor Plan to 3D House With Claude Code (Free Master Prompt)」,不到 3,000 次观看。
这说明两件事:点子一段 prompt 就能复制(作者自己用 casa-larga 证明了一小时出第一版),所以守不住;而复制了点子的人拿不到星,因为星从来不是 GitHub 自己给的,是视频和转发给的。
如果是你
判断: 别再做「平面图滚成房子」,这个视觉已经被作者和 AI 引流号用完了,照抄的仓库都是 0 星。值得学的是它的发法:先发视频测反应,评论都在问「怎么做的」再建仓库放 prompt。
适合谁: 会剪视频、在 LinkedIn / Threads / X 上已经有一点受众的前端或 three.js 开发者;懂某个视觉行业(建筑、产品设计、汽车、钟表、博物馆)、能想出一个「一句话讲得清的视觉反转」的人。
不适合谁: 只想写代码、不愿意自己出镜或剪视频的;指望把一个 demo 放上 GitHub 等自然流量的;想换个房子再做一遍同一个效果的。
怎么做: 找一个和「平面图就是剖开的模型」同一级别的点子——图纸和成品是同一个东西,一滚就变:爆炸图滚成一台相机、一张乐谱滚成一个乐队、一张地铁图滚成一座城市、一张拼板图纸滚成一把椅子。用新模型做,迭代到质感过关(作者花了两周、70 次 prompt)。仓库里放三样:在线 demo、起手 prompt、一个「只用这段 prompt 一小时跑出来的版本」当证据。代码可以不放,星照样来。
怎么获客: 先在 Threads 和 LinkedIn 发 10–15 秒竖屏录屏,标题写「Built with <新模型名>」;一夜过万再搬到 X、Instagram,补一条 YouTube 制作过程视频,所有地方都回链仓库;想办法让一个有量的人(同行、模型厂商的生态号、设计圈大号)挂着仓库链接转一次——casa-serra 一半的星就是一次转发带来的。
什么时候之前: 下一个大模型发布后的两三周内。新模型刚出时大家最愿意转「它能做出什么」,过了这个窗口,同样的作品只是又一个 three.js demo。
什么情况说明看错了: ① 有人只靠 GitHub 本身(没有视频、没有大号转发)把一个同类 3D 滚动页做到几百星——说明 GitHub 这一侧也有自然流量,门槛比我想的低;② 「平面图变房子」的跟风仓库里出现上百星的——说明这个具体点子还没用完;③ 下一个模型发布后,「Built with 新模型」的视觉 demo 普遍拿不到量——说明这股新鲜劲过了。
数据与出处:GitHub 仓库页、README 与逐日 star 记录(10-17 至 11-06);trendshift.io/repositories/302292;作者 X 帖(x.com/SammmAing,10-12);LinkedIn 原帖(反应与评论数,11-06);YouTube《Opus 5.5 Turned a Flat Floor Plan Into a Walkable 3D House》;Meng To 的 X 帖(11-03);Instagram reel(10-24);opuskill.com、tripo3d、WO! Discover W42 的收录页;跟风仓库的 GitHub 页(11-06)。各渠道分别带来多少星分不清;Threads 原帖的数据和 Meng To 转帖的观看数没拿到。
研究底稿:竞品表、获客证据、完整研究报告
- 竞品
名字 在哪 上线 规模 它和这家不同在哪 Matterport 和建商 3D 户型 tour 服务 其他 多年前 商业服务,公开报价每套户型 $1,495 起(Substack 引述) 那些是实景或户型的漫游工具 / 服务;casa-serra 是一张营销落地页的滚动叙事手法,免费,用 prompt 就能复刻 cvdlab/react-planner 开源 2016 1,490 星 画 2D 户型、切到 3D 浏览的编辑器;没有滚动叙事,也没有 2D 到 3D 的连续变形 Home Assistant 3D 户型(neonplan3d / ha-floorplan) 开源 2017 / 2026-09 1,738 / 1,056 星 智能家居控制面板,实用工具,不是展示页 fireship-io/threejs-scroll-animation-demo 开源 2021 1,673 星 通用的 three.js 滚动作品集教程;没有建筑概念,也不是 AI 生成 Moh4696/open-3d-skills 开源 2026-10-31 262 星 给 agent 用的 3D 网页技能包,是工具;casa-serra 是一个单一的爆款视觉样例 Leonxlnx/realestateopus5 开源 2026-07 7 星 同样是 Opus 做的地产滚动片,但没有「平面图就是模型」的反转,也没人分发 - 用户从哪来
- 查实 Threads + LinkedIn 短视频首发:作者 X 10-12:「over 60K views on Threads and LinkedIn combined overnight」;LinkedIn 原帖 1,113 个反应、153 条评论
- 查实 X 作者帖:x.com/SammmAing/status/2109708195031900310(10-12)
- 查实 YouTube 制作过程长视频:作者频道《Opus 5.5 Turned a Flat Floor Plan Into a Walkable 3D House》158,618 次观看,README / flat-to-3d 都回链
- 查实 大号转发(作者的老板):Meng To(Design+Code / Aura 创始人,X 约 18.9 万粉)11-03 02:40 UTC 挂 GitHub 链接转发;次日 +89、再次日 +52
- 查实 Instagram / TikTok reel:Instagram samnang.aing 10-24 reel;TikTok @samnang_aing(42 粉,贡献小)
- 查实 内容农场和聚合站二次传播:opuskill.com 教程页、tripo3d prompt 库、WO! Discover W42、nicheloom、githubsignals、Myth & Machine Shorts
- 查实 Trendshift 类目榜:CSS 类目两次冲到第 2,是结果也带了一点长尾
Sam1983Aing/casa-serra:为什么一个「平面图滚成房子」的 demo 能拿到 460 星
研究日期 2026-11-06。数据:我们的 github 库(repo_day 自 10-28 起)、数据卡、GitHub API、Jina 搜索与网页正文。
一句话
它是 Samnang Aing(Design+Code 的视频剪辑 / 创意开发)用 Claude Code + Opus 5.5 做的滚动叙事 3D 网页:页面打开是一张建筑平面图,往下滚墙从图里长出来,镜头走进每个房间。GitHub 只是落地页,star 是他在 Threads / LinkedIn / X / YouTube / Instagram / TikTok 发短视频带过来的,其中第二波是他老板 Meng To(X 18.9 万粉)11-03 转发直接带出来的。
1. 它是什么
- 仓库:github.com/Sam1983Aing/casa-serra ,在线 demo:sam1983aing.github.io/casa-serra/
- 虚构的里斯本建筑事务所「Lintel」的落地页,房子叫 Casa Serra(辛特拉山上 946 m² 的庭院住宅,16 个房间、一棵橄榄树)。
- 做法(README):约 70 次 prompt、两周、4 个完整版本;three.js + GSAP ScrollTrigger + Lenis,没有构建步骤;几何全部代码生成,没用 Blender;贴图是 Poly Haven 的 CC0 扫描(笔记本约 39 MB,手机约 13 MB)。发布的是压缩过的代码。
- 核心技巧:「平面图不是图片,是真 3D 模型在 1.2 m 处剖切、用超长焦从正上方看」。往下滚就是剖切高度升高,看上去就是墙在长。没走到的房间保持线稿,镜头到了材质才扫过去。
- README 附了一段起手 prompt(starter-prompt.md),还有一个对照仓库 casa-larga:新会话只用这段 prompt、一小时跑出的第一个检查点(31 星 / 18 fork)。
2. 数据
| 日期 | star | fork | 说明 |
|---|---|---|---|
| 10-13 | 0 | – | 建库(02:27 UTC),在社交帖发出之后 |
| 10-17 | 159 | 39 | 第一波(数据卡 daily) |
| 10-21 | 251 | 68 | |
| 10-28 | 285 | 76 | 平台期,日增 1–5 |
| 11-03 | 304 | 81 | |
| 11-04 | 393 | 94 | +89,单日最高 |
| 11-05 | 445 | 99 | +52 |
| 11-06 | 461 | 104 | gain_7d=165,前一周 33 |
- Trendshift 的 CSS 类目榜:前后两次冲到第 2(10 月中一次,11 月初一次),中间掉到 7–16 名(https://trendshift.io/repositories/302292)。
- fork/star 约 23%,明显偏高。这是一个 GitHub Pages demo,fork 一份就能拿自己的 Pages 地址改着玩,而且原帖引导的就是「拿 prompt 去做自己的」。
- 没进 GitHub 全站 trending(trending_days_any=0,建库也不满 60 天)。
3. 用户从哪来(增长手段)
时间线基本可以排出来,全是作者自己的内容分发,外加一次有分量的转发:
- Threads + LinkedIn 首发(约 10-11/12)。作者 10-12 在 X 上写:「This got over 60K views on Threads and LinkedIn combined overnight, which never happens to me. So here it is for X.」(https://x.com/SammmAing/status/2109708195031900310 ,2026-10-12 18:10 UTC)。LinkedIn 原帖 1,113 个反应、153 条评论(https://www.linkedin.com/posts/samnang-aing-639168341_im-exploring-a-new-way-to-use-3d-on-a-web-activity-7515242371945783298-xdsP)。
- 建 GitHub 仓库接流量(10-13):帖子火了、评论里都在问「怎么做的」之后才建的仓库,README 主打「starter prompt」。第一周 0→159 星。
- YouTube 长视频「怎么做的」:《Opus 5.5 Turned a Flat Floor Plan Into a Walkable 3D House》,作者频道,约 3 周前发,158,618 次观看(https://www.youtube.com/watch?v=rKv4PrtBkb8)。作者 X 帖说「A lot of you asked how this was made, so I made a video about it」。
- Instagram / TikTok 短视频:Instagram reel 10-24(https://www.instagram.com/reel/De4c2KUSf9c/);TikTok @samnang_aing 也发了,但账号只有 42 粉,贡献不大。
- Meng To 转发(11-03 02:40 UTC):「novel way to mix architecture, web design and 3d. opus 5.5 is a beast with three.js. prompt: github.com/Sam1983Aing/casa-serra」(https://x.com/MengTo/status/2117446870033445104)。Meng To 是 Design+Code 和 Aura.build 的创始人,X 约 18.9 万粉;作者 X 简介写着「@ Design+Code」,也就是自己老板转的。转帖直接挂的是 GitHub 链接,所以 11-04 单日 +89、11-05 +52,第二波就是这么来的。
- 二次传播 / 内容农场收录(作者没出力):Myth & Machine 的 YouTube Short(10-20,1.2K 观看);opuskill.com 把它的 prompt 做成教程页;tripo3d.ai 的 prompt 库;WO! Discover 2026-W42 周刊、nicheloom、githubsignals 等收录;awesome-opus-5.5 一类的清单。另外,「Claude 把平面图变成可走的 3D 房子」这个题材在 Instagram 已经被 godofprompt 这类 AI 号做成了引流帖(「Comment CLAUDE 领 7 个 prompt」),Substack「Mother Using AI」10-17 提到「一条这类帖三天 30.3 万观看、5,600 收藏」——这几条不一定指作者本人,但说明题材本身在大范围传。
没有找到广告、HN 或 Reddit 首发的证据。x-radar 本地语料搜不到相关推文(库没覆盖到)。
4. 为什么能起来
- 一眼就懂的视觉反转:「看着是平面图,一滚变成房子」,3 秒短视频就讲完了,很适合 Threads / LinkedIn / Reels 的自动播放。建筑、室内、地产、设计四个圈子都愿意转。
- 蹭上了 Opus 5.5 的发布热度:每条帖都写「Built with Claude Opus 5.5」;Meng To 的转帖也是「opus 5.5 is a beast with three.js」。新模型刚出,大家都在找「新模型能做出什么」的样例,它正好是一个好看的样例。
- 把 GitHub 当「领 prompt」的地方:仓库没有可读源码(压缩过),真正给的是 starter prompt 加一个能复现的 casa-larga。star 和 fork 的动机是「收藏这个 prompt / 抄这个做法」,不是用这个库。
- 作者懂视频:作者本职是视频剪辑,录屏、节奏、标题都很专业;而且他很早就把 demo 做成了「设备跑不动就给静帧和录屏」的降级。
- 靠资源:第二波完全是 Meng To 转发带的。作者在 Design+Code 工作,这次转发属于圈内资源,不是纯自然流量。
5. 竞品与同类
- 做同一件事的商业产品:Matterport 这类实景 3D 漫游、给建商做 3D 户型 tour 的服务公司(Substack 作者查到公开报价每套户型 $1,495 起)、Walkable Plans 这种 1:1 投影户型、Ideal House 一类 AI 户型生成器。它们是工具 / 服务;casa-serra 是一张营销落地页的叙事手法,两者不是一个东西。
- 开源户型编辑器:cvdlab/react-planner(1,490 星,2016)、Home Assistant 3D 户型(neonplan3d 1,056 星、ha-floorplan 1,738 星)、openPlan3D(272 星)、egmalt/house-planner(372 星)。这些是「画户型 / 看户型」的工具,不做滚动叙事。
- 滚动 3D 网页 demo:fireship-io/threejs-scroll-animation-demo(1,673 星,2021)、Leonxlnx/realestateopus5(7 星,地产滚动片)、Moh4696/open-3d-skills(262 星,10-31 建,给 agent 用的 3D 网页技能)。同样是「AI 做 3D 网页」,但没有「平面图就是剖开的模型」这个点子。
- 大厂功能:没有直接对应的。
6. 跟风者
- 作者自己续作:flat-to-3d(67 星,10-28 建,「七种把平面图滚动变 3D 的做法」,每种都带 prompt)、lintel-flat-2d / lintel-live(v10 完整版)、casa-larga。注意:数据卡里说的「67 星跟风仓库」其实是作者本人的,不是外人。
- 外人照抄:mys1erious/3d-plan-to-walk(11-03,帕拉迪奥圆厅别墅,描述里直接用了「cut 1.2 m above the floor」)、wilsonwu-ai/floor-plan-to-house(11-04,「A floor plan that becomes a 3D house as you scroll」)、Michaelfun/meridalDesign、jplovensa/veil-of-light 等,都是 0–1 星;Instagram quietbuilder88「Boring to Game Ep 1」(10-17)明说「The idea was first shown by Sam Aing」;YouTube 上 MaxDevAi「Floor Plan to 3D House With Claude Code (Free Master Prompt)」(2,966 观看)。
- 题材已经被 AI 引流号拿去用了(godofprompt 的「7 prompts」帖)。
7. 差异化,以及它是不是跑出来的原因
差异化只有一条,而且是个概念:「平面图 = 剖切的真模型」。2D 到 3D 是连续的同一个物体,而别人的做法通常是贴一张图再切到模型。再加上「每个房间先是线稿,走到才上材质」,建筑学的味道很足。这一条正是它能传开的原因:视觉反转靠的就是它。但这个概念用一句 prompt 就能复制(作者自己用 casa-larga 证明了一小时出第一版),外人 3 周内就抄出了一模一样的描述。所以这个差异化带来了传播,但守不住。真正难抄的是作者两周 70 次迭代打磨出来的质感,和他的分发渠道(LinkedIn、YouTube 15 万播放,外加老板转发)。
8. 能借鉴什么
- 社交首发,GitHub 接流量:先在 Threads / LinkedIn 发短视频,看到「怎么做的」评论多了,再建仓库放 prompt。仓库的价值是 prompt 加可复现的证据(casa-larga),不是源码。
- 把一个视觉概念拆成系列:一个爆款之后接着出「七种做法」、v10 完整版、教程视频,每一个都回链原仓库。
- 借新模型的发布窗口:「Built with <新模型>」让模型厂商的生态号、AI 内容号愿意转载。
- 找有量的同行或老板转一次,第二波就来了。
9. 还不确定的
- Threads 原帖的具体数据没拿到;Substack 说的「30.3 万观看、5,600 收藏」那条帖是谁发的未核实。
- Meng To 转帖的观看数没拿到(x-radar 没收录)。
- 第一波里 YouTube、LinkedIn、X 各贡献了多少 star,分不清。
- 作者有没有拿这个接活或卖课(Design+Code 是卖课的):没查到直接证据。