a floor plan is just data. walls, doors, windows, some rectangles for furniture
so i had claude turn one into a house you can walk through
no 3d models. no downloaded textures. every wall, sofa, stool and lemon is code. ~500 lines of three.js
how it works:
> the plan is one list: walls with openings, rooms, furniture footprints
> that same list draws the blueprint, extrudes the walls and builds the mini-map
> furniture is rounded boxes and cylinders. wood, marble and stone are painted on a canvas
> one warm sun through the glass + shadows do most of the "real" look
> the camera rides a spline through 8 keyframes, the dot on the mini-map follows it
> every frame is a function of time, so it renders frame by frame and ffmpeg stitches it
who'd actually pay for this:
> builders selling homes off plan
> architects showing a layout before the expensive renders
> interior designers checking furniture against real dimensions
> listings that only have a pdf plan
the prompt if you want to try it:
turn this floor plan into a walkable 3d scene in three.js.
- first write the plan as data: walls (start, end, thickness), openings (door / window / glass + heights), rooms, furniture footprints
- draw everything from that one list: blueprint view, 3d walls, mini-map
- no external models or textures. furniture from primitives, materials drawn on canvas
- warm sun from one side, real shadows, glass that lets the light in
- animate: plan draws itself → walls rise → furniture drops in → camera walks through at eye height
- make every frame a pure function of time so you can render it to video
steal the tiers 🔖
read → tap
write → hold 400ms
push / migrate → hold 1200ms, bg dims 40%
delete / drop → hold 2000ms, early release springs back (400/18)
press → scale 0.96 (600/30)
check → 500/20
fill is linear, never eased. progress shouldn't lie
coding agents ask permission the same way for ls and rm -rf. same button, same tap.
concept: hold time scales with blast radius. read = tap. force push = 1.2s. delete = 2s, and letting go early snaps it back.
numbers below 🔖
made a launch video for @monobankua, Ukraine's bank that lives only in your phone.
same structure as the one everyone saved this week:
intro → problem → use case → CTA
38 seconds, no after effects 🔖
(fan concept, not affiliated)
@Atlas3DAI the real test is the shoulders. auto-weights look fine in T-pose and fall apart the moment the arm goes overhead. how does it hold up past 90°?
pull the card stack, see where the money actually went
made a fake bank called AERA to try one gesture. drag the cards apart and each one shows what you spent on it while the rest of the screen blurs. let go and they snap back
plus cards, insights and a €120 transfer. all code, all springs
10 more web design sites worth stealing from. one component from each in the video 🔖
1. https://t.co/Jfmq38DmcE → 200+ WebGPU shader components, free editor
2. https://t.co/ZOgJp5GQC9 → your shadcn components, animated. same API
3. https://t.co/mmKyxBR6F7 → draw and animate ASCII. free, open source
4. https://t.co/sYeCe7p3Ew → animated numbers for React, zero deps
5. https://t.co/0klpNotTpa → 154 free components. the globe is the one
6. https://t.co/jtqxER2HeV → text shimmer, text loop, morphs
7. https://t.co/A3Pax7r2h8 → no-code WebGL scenes, 75+ effects
8. https://t.co/C3cNhD74R2 → timeline + spring editor for Motion
9. https://t.co/9LCLoMHmiu → inspiration that's actually recent
10. https://t.co/ZbcsMoZBoS → 13 skills that stop your agent from shipping generic UI
part 1 (12 more) below ↓
the numbers from the clip 🔖
380/12 → 36% bounce. feels cheap
380/30 → no bounce, but 180ms to land. feels slow
500/30 → 6% bounce, lands in 130ms. feels snappy
damping kills the bounce, stiffness buys the speed back. you almost always need both
slopping a clean onboarding.
same app. 4 prompts everyone types into AI:
"make it pop" → "more modern" → "add some delight" → "make it premium"
15 slop tells later 🫠
say this instead of "make it pop":
"keep the layout. 8pt grid, 24px margins. 1 display + 1 text font, max 3 sizes. paper bg, ink text, 1 accent. no gradients, no glow, no emoji icons. springs only, 70ms stagger"
🔖 save it for your next build
want one in your app? paste into claude:
"add a pixel-art canvas behind my chat. one character per theme. it reacts to 3 events: thinking, typing, reply done. 60fps, no libraries"
AI chat themes, but every world has someone living in it 🦈
a shark circles while it thinks. a croc snaps at typos. a samurai cuts long answers short.
pick yours 👇 (fan concept)
the springs, steal them 🔖
1 like → 500/14
2 toggle → 420/28, knob stretches on press
3 card → 260/26, grows from the tile
4 button → 300/26, morphs into the spinner
5 tabs → lead 500/30, trail 260/28
6 toast → 380/24
7 checkbox → 500/16
8 menu → 420/30, 30ms stagger