# 3D Website Inspiration & Three.js Resources

> A personal collection of 303 websites, tools and tutorials on interaction, 3D, technical design and more, updated regularly. Every one was made by hand, before AI coding agents.

- Web page: https://jingfu.design/resources
- Updated: 29 September 2026
- 🔥 ratings run from 1 to 5: the more flames, the stronger the recommendation.

## Website Galleries

Award sites and curated galleries for finding standout web design.

- **Awwwards** — [awwwards.com](https://www.awwwards.com/), 3D category: [awwwards.com/websites/3d](https://www.awwwards.com/websites/3d/), Three.js category: [awwwards.com/websites/three-js](https://www.awwwards.com/websites/three-js/)
- **CSS Design Awards** — [cssdesignawards.com](https://www.cssdesignawards.com/)
- **Muzli** — [me.muz.li](https://me.muz.li/)

## 3D Websites

Studios, creators and campaigns building real-time 3D for the web with WebGL, WebGPU and Three.js.

- **Edan Kwan** (🇬🇧 Bristol) — [edankwan.com](https://edankwan.com/)
- **Lusion** (🇬🇧) — [lusion.co](https://lusion.co/) (🔥 5/5), [v2.lusion.co](https://v2.lusion.co/), Labs: [labs.lusion.co](https://labs.lusion.co/), Trailer: [operanorth.co.uk/turn-of-the-screw-immersive-trailer/#day](https://www.operanorth.co.uk/turn-of-the-screw-immersive-trailer/#day), [exp-abduction.lusion.co](https://exp-abduction.lusion.co/) (🔥 2/5), [exp-infinite-passerella.lusion.co](https://exp-infinite-passerella.lusion.co/), [exp-lost-in-parallel-universe.lusion.co](https://exp-lost-in-parallel-universe.lusion.co/), [medium.com/@edankwan/lost-in-parallel-universe-dba640efd39a](https://medium.com/@edankwan/lost-in-parallel-universe-dba640efd39a), [cineshader.com](https://cineshader.com/), [ddd.live](https://ddd.live/), [world.org](https://world.org/), [exp-mind-flayer.lusion.co](https://exp-mind-flayer.lusion.co/), [oftheoak.co.uk](https://oftheoak.co.uk/)
- **Bruno Simon** (🇫🇷) — [bruno-simon.com](https://bruno-simon.com/) (🔥 2/5), [bruno-simon.com/#debug](https://bruno-simon.com/#debug), Three.js Journey: [threejs-journey.com](https://threejs-journey.com/) (🔥 2/5), [chartogne-taillet.com/en](https://chartogne-taillet.com/en) (🔥 5/5), [three-js-tsl-particles-system.vercel.app](https://three-js-tsl-particles-system.vercel.app/)
- **Bruno Imbrizi** — [github.com/brunoimbrizi/interactive-particles](https://github.com/brunoimbrizi/interactive-particles)
- **Immersive Garden** (🇫🇷) — [immersive-g.com](https://immersive-g.com/) (🔥 1/5), [awwwards.com/immersivegarden](https://www.awwwards.com/immersivegarden/), [aten7.com/intro](https://www.aten7.com/intro), [hatom.com](https://www.hatom.com/), [alireza.com](https://alireza.com/), [davidwhyte.com/experience](https://davidwhyte.com/experience/), [masardestination.com.sa/en/experience](https://www.masardestination.com.sa/en/experience), [midwam.com/en](https://www.midwam.com/en/), [gleec.com/coin](https://gleec.com/coin), [longines.com/en-us/spirit-flyback](https://www.longines.com/en-us/spirit-flyback/), [aramco.com/en/about-us/our-history/the-birth-of-oil](https://www.aramco.com/en/about-us/our-history/the-birth-of-oil), [cartier.com/en-fr/watchesandwonders](https://www.cartier.com/en-fr/watchesandwonders), [100lostspecies.com](https://www.100lostspecies.com/)
- **Planet Omega** — [omegawatches.jp/planet-omega/space/remove-debris/clearspace](https://www.omegawatches.jp/planet-omega/space/remove-debris/clearspace)
- **Henri Heymans** — [henriheymans.com](https://henriheymans.com/)
- **Cosmic Shelter** (🇫🇷) — [cosmicshelter.com/projects](https://cosmicshelter.com/projects/)
- **makemepulse** — [2019.makemepulse.com](https://2019.makemepulse.com/) (🔥 3/5), [2018.makemepulse.com](https://2018.makemepulse.com/)
- **Louis Ansa** — [louisansa.com](https://www.louisansa.com/)
- **Active Theory** (🇺🇸) — [activetheory.net](https://activetheory.net/) (🔥 3/5), [sustainablehorizons.ai](https://sustainablehorizons.ai/) (🔥 3/5), [thefield.wsjbarrons.com/wsj-lobby](https://thefield.wsjbarrons.com/wsj-lobby) (🔥 3/5), [prometheusfuels.ai](https://prometheusfuels.ai/)
- **Luis Bizarro** (🇺🇸): 3D for Apple's website — [bizar.ro](https://bizar.ro/), [apple.com/macbook-pro](https://www.apple.com/macbook-pro/), Active Theory: [xbox.activetheory.dev/en/welcome](https://xbox.activetheory.dev/en/welcome)
- **Gamemcu** (🇨🇳) — Xiaomi SU7: [gamemcu.com/su7](https://gamemcu.com/su7/) (🔥 3/5), Midea metaverse: [meta.midea.com](https://meta.midea.com/)
- **abeto** — [abeto.co](https://abeto.co/), [igloo.inc](https://www.igloo.inc/) (🔥 3/5), [messenger.abeto.co](https://messenger.abeto.co/), [x.com/abeto_co](https://x.com/abeto_co)
- **Summer Afternoon** — [summer-afternoon.vlucendo.com](https://summer-afternoon.vlucendo.com/)
- **Unseen Studio** (🇬🇧) — [unseen.co](https://unseen.co/), [bluemarinefoundation.com/the-sea-we-breathe](https://www.bluemarinefoundation.com/the-sea-we-breathe/), Long-form content: [casadisolare.com](https://casadisolare.com/), [rspca.org.uk/webContent/animalfutures](https://www.rspca.org.uk/webContent/animalfutures/), [organimo.com](https://organimo.com/) (🔥 1/5), [web.archive.org/web/20230828175201/https://www.blueyard.com/biology](https://web.archive.org/web/20230828175201/https://www.blueyard.com/biology/), [contra.com/project-rate-hiring-calculator](https://contra.com/project-rate-hiring-calculator/), [experiencethebestyou.com](https://www.experiencethebestyou.com/), [symphonyofvines.unseen.co](https://symphonyofvines.unseen.co/)
- **basement.studio**: Vercel · Cursor · Next.js — [basement.studio](https://basement.studio/), Lab, 70+ demos with code: [basement.studio/lab](https://basement.studio/lab), [vercel.com](https://vercel.com/)
- **DeadRabbit** (🇨🇳) — [deadrabbit.collax.app](https://deadrabbit.collax.app/), [x.com/deadrabbbbit](https://x.com/deadrabbbbit)
- **KpertC** (🇨🇳) — [3d.keychron.com](https://3d.keychron.com/)
- **Anderson Mancini** (🇧🇷) — [andersonmancini.dev](https://andersonmancini.dev/), [water-simulation.vercel.app](https://water-simulation.vercel.app/), [custom.gomezsimindustries.com](https://custom.gomezsimindustries.com/), [watchpro.vercel.app](https://watchpro.vercel.app/)
- **Yuri Artiukh** (🇺🇦) — [continuous.vc](https://www.continuous.vc/)
- **Refokus** (🌐 Remote): Instance — [refokus.com](https://www.refokus.com/), [arqitel.com](https://www.arqitel.com/)
- **Shopify** — Black Friday globe: [bfcm.shopify.com](https://bfcm.shopify.com/) (🔥 3/5), Summer 2025 Edition: [shopify.com/ca/editions/summer2025/drive](https://www.shopify.com/ca/editions/summer2025/drive)
- **Stripe**: Black Friday 2024 — [stripe.com/newsroom/news/bfcm2024](https://stripe.com/newsroom/news/bfcm2024)
- **POLA** (🇯🇵): Mother's Day campaign — [pola.co.jp/special/o/wecaremore/mothersday](https://www.pola.co.jp/special/o/wecaremore/mothersday/)
- **Resn** (🇳🇿) — Bader Rutter 🇳🇱: [cornrevolution.resn.global](https://cornrevolution.resn.global/) (🔥 3/5), [nvg8.io](https://nvg8.io/)
- **Cosmos Studio** (🇺🇦) — [cosmos.studio](https://www.cosmos.studio/), [mirfundmerch.com](https://www.mirfundmerch.com/)
- **They Call Me Giulio** — [theycallmegiulio.com](https://www.theycallmegiulio.com/)
- **Studio Carto** (🇫🇷) — [studio-carto-urban-project.netlify.app](https://studio-carto-urban-project.netlify.app/)
- **DeSo**: Web3 — [deso.com](https://www.deso.com/) (🔥 3/5)
- **Andrew Woan** — [woanminecraftfolio.com](https://www.woanminecraftfolio.com/), [youtube.com/@andrewwoan](https://www.youtube.com/@andrewwoan), [sooahs-room-folio.com](https://www.sooahs-room-folio.com/)
- **Quantum Wallet**: Web3 — [quantumwallet.tech](https://quantumwallet.tech/)
- **mofu** (🇯🇵) — [mofu-dev.com](https://mofu-dev.com/) (🔥 1/5), [wonderlandams.com](https://wonderlandams.com/), 3D NFT: [opensea.io/assets/ethereum/0x0a1bbd57033f57e7b6743621b79fcb9eb2ce3676/7000080](https://opensea.io/assets/ethereum/0x0a1bbd57033f57e7b6743621b79fcb9eb2ce3676/7000080), [mofu-dev.com/en/blog/stable-fluids](https://mofu-dev.com/en/blog/stable-fluids/), [fluid-threejs.netlify.app](https://fluid-threejs.netlify.app/)
- **Desktop.fm** — [desktop.fm](https://desktop.fm/)
- **Otherlife** (🇨🇦 Toronto) — [otherlife.xyz](https://www.otherlife.xyz/), [labs.otherlife.xyz/virtual-car-showroom](https://labs.otherlife.xyz/virtual-car-showroom) (🔥 2/5)
- **GT America**: Typeface by Grilli Type — [gt-america.com](https://www.gt-america.com/) (🔥 3/5)
- **Renault Espace**: By Little Workshop — [renaultespace.littleworkshop.fr](https://renaultespace.littleworkshop.fr/)
- **Orano** — [orano.group/experience/innovation/en/protect](https://www.orano.group/experience/innovation/en/protect)
- **ChainGPT**: Linear-style design — [chaingpt.org](https://www.chaingpt.org/) (🔥 2/5)
- **Utsubo** (🇯🇵): WebGPU — [utsubo.com](https://www.utsubo.com/) (🔥 1/5), [works.utsubo.com/labs/aoi-01](https://works.utsubo.com/labs/aoi-01)
- **WLT Design** — [wlt.design](https://wlt.design/)
- **reKILL**: Top-down shooter — [rekill.io/play](https://rekill.io/play)
- **3D Pinball** — OUIGO: [letsplay.ouigo.es](https://letsplay.ouigo.es/), Cosmic Shelter: [pinball.cosmicshelter.com](https://pinball.cosmicshelter.com/)
- **Patrick Schroen** (🇨🇦 Toronto): FWA judge — [ufo.ai](https://ufo.ai/), [space.js.org/examples/mars](https://space.js.org/examples/mars/), [alien.js.org](https://alien.js.org/), [x.com/pschroen](https://x.com/pschroen)
- **Robert Borghesi** (🇮🇹 Milan): Awwwards jury — [robertborghesi.is](https://robertborghesi.is/), [astrodither.robertborghesi.is](https://astrodither.robertborghesi.is/), [x.com/dghez_](https://x.com/dghez_)
- **100,000 Stars**: Chrome Experiment — [stars.chromeexperiments.com](https://stars.chromeexperiments.com/)
- **Astromaterials 3D Explorer**: NASA — [ares.jsc.nasa.gov/astromaterials3d/explorer](https://ares.jsc.nasa.gov/astromaterials3d/explorer/)
- **Keep Track**: 3D satellite tracker — [app.keeptrack.space](https://app.keeptrack.space/)
- **Earth Nullschool**: Global wind and weather map — [earth.nullschool.net](https://earth.nullschool.net/)
- **Yi Zhe**: South China Morning Post — [multimedia.scmp.com/infographics/news/world/article/3292066/drone-shows](https://multimedia.scmp.com/infographics/news/world/article/3292066/drone-shows/)
- **3D Web Lab** — [3dweblab.com](https://3dweblab.com/) (🔥 1/5)
- **Adrián Gubrica** (🇸🇰) — CleverFarm · Unity: [virtual.cleverfarm.ag/#](https://virtual.cleverfarm.ag/#/), [freespeech.gubrica.com](https://freespeech.gubrica.com/) (🔥 1/5)
- **Star Atlas**: Space MMO — [staratlas.com](https://staratlas.com/)
- **Toby** (🇭🇺): Creative developer — [nhtoby.com](https://nhtoby.com/)
- **bryantcodes.art** — [bryantcodes.art](https://bryantcodes.art/)
- **Joshua**: Interaction designer — [joshuas.world](https://www.joshuas.world/)
- **homunculus** (🇯🇵) — [homunculus.jp](https://homunculus.jp/), [web.archive.org/web/20180709024810/http://homunculus.jp/about](https://web.archive.org/web/20180709024810/http://homunculus.jp/about/)
- **Gapsy Studio** — [gapsystudio.com](https://gapsystudio.com/)
- **Brilliant Labs**: AR glasses, exploded view — [brilliant.xyz](https://brilliant.xyz/) (🔥 1/5)
- **SynthCity**: Cyberpunk 3D fly-through — [jeff-beene.com/synthcity](https://jeff-beene.com/synthcity/)
- **Moncy Yohannan** — [moncy.dev](https://www.moncy.dev/)
- **Alei 张毅力** (🇨🇳 Hangzhou) — [christanalei.space](https://christanalei.space/), [christanalei.space/underwater](https://christanalei.space/underwater/)
- **Slow Roads**: Driving — [slowroads.io](https://slowroads.io/)
- **Digital Present** — [digitalpresent.io](https://digitalpresent.io/), [tat2spirits.com](https://tat2spirits.com/)
- **Uelike** (🇨🇳) — [uelike.com](https://www.uelike.com/)
- **Red Collar** (🇺🇸 🇷🇺) — [redcollar.co](https://redcollar.co/)
- **Arago** — [arago.inc](https://www.arago.inc/)
- **Monogrid** (🇮🇹): First-person 3D — [monogrid.com/en](https://monogrid.com/en/), [project2075.oakley.com](https://project2075.oakley.com/), [awwwards.com/engine-station-by-monogrid-a-3d-experiential-e-commerce-destination.html](https://www.awwwards.com/engine-station-by-monogrid-a-3d-experiential-e-commerce-destination.html)
- **Noomo** (🇺🇸) — [labs.noomoagency.com](https://labs.noomoagency.com/), [noomoagency.com](https://noomoagency.com/), [valentime.noomoagency.com](https://valentime.noomoagency.com/), 2D: [jasminadenner.com](https://jasminadenner.com/), [playground.noomoagency.com](https://playground.noomoagency.com/)
- **Savoir Faire** (🇺🇸) — [savoirfaire.nyc](https://www.savoirfaire.nyc/), [inkwell.tech](https://inkwell.tech/) (🔥 2/5)
- **Hi Fly**: Airbus A340 — [hifly.aero/fleet/a340](https://hifly.aero/fleet/a340/)
- **Happy Together Town**: Metaverse concept by Univision — [univision.mn/game/en](https://www.univision.mn/game/en/)
- **Mike Fernandez** (🇫🇷) — [mike-fernandez.dev](https://www.mike-fernandez.dev/)
- **dverso studio** (🇮🇹) — [dversostudio.io](https://dversostudio.io/), [caffe.design](https://www.caffe.design/)
- **AlphaWave** — [alpha-wave.ai](https://alpha-wave.ai/)
- **Buttermax** (🇺🇸) — [buttermax.net](https://buttermax.net/) (🔥 1/5), [sloshseltzer.com](https://sloshseltzer.com/), [reliable.co](https://reliable.co/) (🔥 2/5)
- **FunTech** (🇯🇵) — [funtech.inc](https://www.funtech.inc/) (🔥 1/5), [sbro.co.jp](https://sbro.co.jp/)
- **Chrono**: Webflow — [chronothreads.webflow.io](https://chronothreads.webflow.io/)
- **BOSS Dubai**: By Dogstudio — [boss-halo-store.dogstudio.co](https://boss-halo-store.dogstudio.co/)
- **Curious & Company** (🇺🇸) — [curious.co](https://curious.co/) (🔥 1/5)
- **Griflan** — [griflan.com](https://www.griflan.com/), [techspeed.com](https://techspeed.com/)
- **Say Social** (🇨🇭 Lugano) — [say.social/en](https://say.social/en) (🔥 1/5)
- **Monks** (🌐) — [monks.com/connect](https://www.monks.com/connect), [bitkraft.vc](https://www.bitkraft.vc/)
- **Lynk & Co** (🇨🇳): Online showroom · KTX textures — [hall.lynkco.com.cn](https://hall.lynkco.com.cn/)
- **Sperotto**: 3D van — [sperottospa.com/en](https://www.sperottospa.com/en)
- **执楠科技** (🇨🇳) — [zhinan.tech](https://www.zhinan.tech/)
- **Joël Mik** — [wooz.store](https://wooz.store/), [x.com/JolMik](https://x.com/JolMik)
- **Franky Hung** (🇭🇰): Made the Three.js water example — [arkon.digital](https://arkon.digital/), [franky-arkon-digital.medium.com/realistic-but-fast-water-waves-in-three-js-a48e2c9b0695](https://franky-arkon-digital.medium.com/realistic-but-fast-water-waves-in-three-js-a48e2c9b0695)
- **KiloKilo** (🇨🇭 Zurich) — [kilokilo.ch](https://kilokilo.ch/), [zikd.space/en](https://www.zikd.space/en/)
- **Studio Freight** — [studiofreight.com](https://studiofreight.com/)
- **VW Lab** — [vwlab.io/pages/showcase](https://vwlab.io/pages/showcase)
- **FWA 100**: By Jam3 — [fwa100.jam3.com](https://fwa100.jam3.com/)
- **Obys** (🇺🇦) — [j-vers.com](https://www.j-vers.com/)
- **TIM Historical Archive**: Museum experience — [archiviostoricoexperience.gruppotim.it/en/history-is-calling](https://archiviostoricoexperience.gruppotim.it/en/history-is-calling/) (🔥 1/5)
- **Tamagotchi** — [worawork-tamagotchi.vercel.app](https://worawork-tamagotchi.vercel.app/)
- **Samsy** — [samsy.ninja](https://samsy.ninja/), Lab: [lab.samsy.ninja](http://lab.samsy.ninja/), [virtualexpodubai.com](https://virtualexpodubai.com/)
- **Denis Lomov** — [theprogressors.redcollar.co](https://theprogressors.redcollar.co/)
- **How to Talk to White Kids About Racism**: Book — [howtotalktowhitekidsaboutracism.com](https://howtotalktowhitekidsaboutracism.com/)
- **Glass Frog** — [glassfrog.co](https://glassfrog.co/)
- **The Web Designer Pro** — [thewebdesignerpro.com](https://thewebdesignerpro.com/), [thewebdesignerpro.com/portfolio.html](https://thewebdesignerpro.com/portfolio.html), [thewebdesignerpro.com/lighthouse.html](https://thewebdesignerpro.com/lighthouse.html)
- **Letter Run**: SOTD · By Edgar Allan — [letter-run.webflow.io](https://letter-run.webflow.io/) (🔥 1/5)
- **ASTRAL Kreativ** (🇩🇪): SOTD — [dotincorp.com/en/product/dotpadx](https://www.dotincorp.com/en/product/dotpadx)
- **Alexandre Pujol** (🇫🇷): Lots of experiments — [alexandrepujol.com](https://www.alexandrepujol.com/), Experiments: [alexandrepujol.com/experiments](https://www.alexandrepujol.com/experiments)
- **Mats Stafseng Einarsen**: 3D Earth travel — [trailmarks.earth](https://trailmarks.earth/), [x.com/matseinarsen](https://x.com/matseinarsen)
- **Julien Renau** — [composites.archi](https://www.composites.archi/), [x.com/julien_rno](https://x.com/julien_rno)
- **Aristide Benoist** — [in-cognita-corp.com/fr](https://in-cognita-corp.com/fr)
- **Anime.js** — [animejs.com](https://animejs.com/) (🔥 3/5)
- **NC** — [nc.com](https://www.nc.com/)
- **Stripe Press**: 3D book — [press.stripe.com](https://press.stripe.com/), [stripe.press/scaling](https://www.stripe.press/scaling) (🔥 1/5)
- **noclip**: Game maps, including GTA — [noclip.website](https://noclip.website/) (🔥 3/5), [github.com/magcius/noclip.website](https://github.com/magcius/noclip.website)
- **Rogier de Boevé** (🇧🇪): Creative developer — [rogierdeboeve.com](https://rogierdeboeve.com/)
- **KODE** — [kodemedia.com/immersive](https://kodemedia.com/immersive)
- **Xbox Design Lab** — [xboxdesignlab.xbox.com/en-us/configure/xbox-elite-wireless-controller-series-2](https://xboxdesignlab.xbox.com/en-us/configure/xbox-elite-wireless-controller-series-2?recipeId=839BXW3B)
- **Ibicash** — [ibi.cash](https://www.ibi.cash/)
- **Tobias Stoulil** (🇨🇿) — [tobiasstoulil.com](https://www.tobiasstoulil.com/), [visualisation-artist.vercel.app](https://visualisation-artist.vercel.app/)
- **Paweł Bród** — [pawel-brod.com](https://pawel-brod.com/)
- **Regis Grumberg** — [regisgrumberg.com](https://www.regisgrumberg.com/)
- **HLE** — [hle.io](https://hle.io/)
- **DICH Fashion**: A bit laggy — [dich-fashion.webflow.io](https://dich-fashion.webflow.io/)
- **Tracing Art**: Getty — [getty.edu/tracingart](https://www.getty.edu/tracingart/)
- **Infinite Garden** — [infinite-garden.xyz](https://www.infinite-garden.xyz/)
- **BioDigital Human**: Biology — [human.biodigital.com](https://human.biodigital.com/)
- **Adi Dizdarevic** — [adidizdarevic.com/about](https://www.adidizdarevic.com/about)
- **AMP** — [ampsortation.com](https://ampsortation.com/)
- **Silencio** — [silencio.es](https://silencio.es/)
- **Red Bull Motormania**: Game — [redbull.com/fr-fr/events/red-bull-motormania/jeu](https://www.redbull.com/fr-fr/events/red-bull-motormania/jeu?rbcs-fsxp-autoplay)
- **Adoratorio Studio** (🇮🇹) — [thebluedesert.com](https://thebluedesert.com/)
- **Francobolli per la Lessinia** — [francobollimontilessini.com](https://www.francobollimontilessini.com/)
- **Aether 1**: Earbuds — [aether1.ai](https://www.aether1.ai/)
- **李杰**: Framer — [jayzhushi.com](https://jayzhushi.com/)
- **Siena Film Foundation** — [siena.film](https://www.siena.film/)
- **sbkswyy.cn** — [sbkswyy.cn](https://www.sbkswyy.cn/)
- **Kanak Naturals** — [kanaknaturals.com](https://www.kanaknaturals.com/)
- **Founders Search Advisors** — [founderssa.com](https://founderssa.com/)
- **Alphane Labs** — [solutions.alphanelabs.com](https://solutions.alphanelabs.com/)
- **mola-zone.com** — [mola-zone.com/en](https://mola-zone.com/en)
- **Alche** — [alche.studio](https://alche.studio/) (🔥 1/5)
- **8bit** — [8bit.ai](https://www.8bit.ai/)
- **KOKUYO** — [kokuyo.com/special/curiosity-is-life](https://www.kokuyo.com/special/curiosity-is-life/)

## 3D Editors

Tools for designing and publishing interactive 3D in the browser.

- **Vectary** — [vectary.com](https://www.vectary.com/)
- **PeachWeb** — [peachweb.io](https://peachweb.io/), [terranest.space](https://terranest.space/)
- **Spline** — Prism Coin: [app.spline.design/community/file/57c77977-ccbc-4211-9469-8bd62561fe1b](https://app.spline.design/community/file/57c77977-ccbc-4211-9469-8bd62561fe1b)
- **Unity** — Metavido: [play.unity.com/en/games/f4e0ea34-bd6d-4b2d-b24d-69ffa6e88795/metavido](https://play.unity.com/en/games/f4e0ea34-bd6d-4b2d-b24d-69ffa6e88795/metavido)
- **Webflow**: Example: Evervault — [evervault.com](https://evervault.com/)
- **Pacdora**: 3D mockup editor — [pacdora.com](https://www.pacdora.com/)

## 2D Websites

Sites that stand out for layout, typography and motion, no 3D required.

- **Linear** — [linear.app](https://linear.app/)
- **Benjamin**: Head of design at Framer — [forms.supply/#demos](https://forms.supply/#demos), [x.com/benjaminnathan](https://x.com/benjaminnathan) (🔥 3/5)
- **Framer University** — [framer.university/resources](https://framer.university/resources/) (🔥 4/5), [game-box.learnframer.site](https://game-box.learnframer.site/)
- **Tofu Design** — [tofudesign.co](https://www.tofudesign.co/), [unifiersofjapan.framer.website](https://unifiersofjapan.framer.website/) (🔥 3/5)
- **Vercel** — Vercel Ship: [vercel.com/ship](https://vercel.com/ship)
- **makepill.com** — [makepill.com](https://makepill.com/)
- **Jitter** — [jitter.video](https://jitter.video/)
- **Dennis Snellenberg** (🇳🇱) — [dennissnellenberg.com](https://dennissnellenberg.com/) (🔥 3/5), [fabric.codebydennis.com](https://fabric.codebydennis.com/)
- **Decide AI** — [decideai.xyz](https://decideai.xyz/)
- **Antoine Wodniack** (🇪🇺): 2D canvas — [wodniack.dev](https://wodniack.dev/) (🔥 1/5), [codepen.io/wodniack](https://codepen.io/wodniack), [nodcoding.com](https://nodcoding.com/)
- **Variant** — [variant.com](https://variant.com/)
- **Resn** — [kprverse.com](https://kprverse.com/), [gehry.getty.edu](https://gehry.getty.edu/)
- **NEWFOLK** (🇯🇵) — [newfolk.jp](https://newfolk.jp/)
- **Luma Dream Machine** — [lumalabs.ai/dream-machine](https://lumalabs.ai/dream-machine)
- **ANAI** (🇯🇵) — [anaiwood.com/en](https://anaiwood.com/en)
- **Obys** (🇺🇦) — [obys.agency](https://obys.agency/), [ayocin.com](https://ayocin.com/)
- **Outloud** (🇸🇰) — [outloud.co](https://outloud.co/)
- **Nothing Studio**: Framer — [nothingstudio.framer.website](https://nothingstudio.framer.website/)
- **28k Studio** (🇩🇰 🇨🇦) — Dumpling.FM: [28k.studio/work/dumpling-fm](https://28k.studio/work/dumpling-fm)
- **bobaicecream.com** — [bobaicecream.com](https://www.bobaicecream.com/) (🔥 1/5)
- **rise2.studio** — [rise2.studio](https://rise2.studio/)
- **Opal** — [op.al](https://op.al/)
- **BYD Solar** — [solar.byd.com/en](https://solar.byd.com/en/)
- **Z1** (🇪🇸) — FreezPak: [freezpak.com](https://www.freezpak.com/)
- **JIEJOE** (🇨🇳) — [jiejoe.com](https://www.jiejoe.com) (🔥 1/5), Video: [bilibili.com/video/BV1hYceeGEuq](https://www.bilibili.com/video/BV1hYceeGEuq)
- **Sigma Software Labs** — [labs.sigma.software](https://labs.sigma.software/)
- **NANFU** — [nanfu.global](https://www.nanfu.global/)
- **Raad** — [raad.com](https://raad.com/)
- **Rejouice** — [rejouice.com](https://www.rejouice.com/)
- **QClay** — [qclay.design](https://qclay.design/)
- **Ollivere** — [ollivere.webflow.io](https://ollivere.webflow.io/)
- **The First The Last** — [thefirstthelast.agency](https://thefirstthelast.agency/), Don't Board Me: [dontboardme.com](https://dontboardme.com/) (🔥 1/5)
- **Nicola Romei** — Retronova: [retronovaworld.webflow.io](https://retronovaworld.webflow.io/)
- **Dan Hollick**: Works at Tailwind CSS — [alcohollick.com](https://alcohollick.com/), Making Software: [makingsoftware.co](https://www.makingsoftware.co/), [typefully.com/DanHollick](https://typefully.com/DanHollick)
- **ToyFight** — [toyfight.co](https://toyfight.co/)
- **daedalOS**: Desktop OS in the browser — [dustinbrett.com](https://dustinbrett.com/)
- **deepseecommerce.com** — [deepseecommerce.com](https://deepseecommerce.com/)
- **Google Labs**: 2D physics — [labs.google](https://labs.google/)
- **Romain Granai** (🇧🇪) — [romaingranai.xyz](https://romaingranai.xyz/)
- **Zajno** (🇺🇸) — [zajno.com](https://zajno.com/), [motion.zajno.com](https://motion.zajno.com/), 3D: [codepen.io/Zajno/full/YzJgYKP](https://codepen.io/Zajno/full/YzJgYKP)
- **Ford M-Sport Raptor** — [msport-raptor.com](https://www.msport-raptor.com/)
- **Social Impact Capital** — [social-impact-capital.com](https://social-impact-capital.com/)
- **Cash App Design**: Brand guidelines — [design.cash.app](https://design.cash.app/) (🔥 2/5)
- **KUYA** (🇺🇸) — [hellokuya.co](https://www.hellokuya.co/)
- **iRegene** — [iregene.com](https://www.iregene.com/)
- **45R**: Denim karuta — [45r.jp/ja/45denim-karuta](https://45r.jp/ja/45denim-karuta/)
- **edisyl** — [edisyl.com](https://www.edisyl.com/)
- **MEW** — [mew.xyz](https://mew.xyz/)
- **BitBar** — [bitbar.webflow.io](https://bitbar.webflow.io/)
- **Defiant**: Video particle effect — [defiant.vc](https://defiant.vc/)
- **Digital Present** — SuperFile: [superfile.com](https://www.superfile.com/)
- **Ronin 161**: SOTD · 404 page — [ronin161.com/404](https://www.ronin161.com/404)
- **Monogram** (🇺🇸) — [monogram.io](https://monogram.io/)
- **Canals**: By Marcus Brown & Aristide Benoist — [canals-amsterdam.com](https://canals-amsterdam.com/)
- **Cosmos** — [cosmos.so](https://www.cosmos.so/)
- **Camille Mormal** (🇺🇸) — [camillemormal.com](https://camillemormal.com/)
- **Hyperbolic**: GPU vector — [hyperbolic.ai](https://www.hyperbolic.ai/)
- **Thiings**: 3D icons — [thiings.co/things](https://www.thiings.co/things)
- **Adaline** — [adaline.ai](https://www.adaline.ai/)
- **Faint Film** — [faint-film.com/record06](https://www.faint-film.com/record06)
- **Palmer**: Dinnerware — [palmer-dinnerware.com](https://www.palmer-dinnerware.com/)
- **SHIPS**: 50th anniversary — [shipsltd.co.jp/pages/sp_50th_anniversary.aspx](https://www.shipsltd.co.jp/pages/sp_50th_anniversary.aspx)

## Design Concepts

Concept designs for 3D and interactive sites, not live websites.

- **Mariusz Mitkow** — [dribbble.com/Mitkow](https://dribbble.com/Mitkow)
- **Gleb Kuznetsov** — [dribbble.com/glebich](https://dribbble.com/glebich)
- **Tubik** — [dribbble.com/tubik_ux](https://dribbble.com/tubik_ux)
- **Geex Arts** — [dribbble.com/GeexArts](https://dribbble.com/GeexArts)
- **FlatWhiteMotion** — [xiaohongshu.com/user/profile/5be42feeddc075000148ba42](https://www.xiaohongshu.com/user/profile/5be42feeddc075000148ba42)

## Agent-Made Websites

Websites built with AI coding agents; everything else on this page was made by hand, before agentic programming.

- **Ryan Sael** (🇬🇧 London) — [sael.net](https://sael.net/), Token Town: [sael.net/token-town](https://sael.net/token-town/), The Plane of Focus: [sael.net/plane-of-focus](https://sael.net/plane-of-focus/), [x.com/RyanSael](https://x.com/RyanSael)
- **Jayden Davis** (🇺🇸 North Carolina) — INKWAVE: [inkwave-aah.pages.dev](https://inkwave-aah.pages.dev/), GitHub: [github.com/jaydendavisnc/inkwave](https://github.com/jaydendavisnc/inkwave), [x.com/JaydenDavisNC/status/2103357848961036304](https://x.com/JaydenDavisNC/status/2103357848961036304)

## UI Components

React and Tailwind CSS libraries of animated, interactive components.

- **BuouUI** — [ui.buoucoding.com](https://ui.buoucoding.com/)
- **React Bits** — [reactbits.dev](https://www.reactbits.dev/) (🔥 3/5)
- **daisyUI**: Tailwind CSS — [daisyui.com](https://daisyui.com/)
- **shadcn/ui**: Vercel — [ui.shadcn.com](https://ui.shadcn.com/)
- **Animate UI** — [animate-ui.com](https://animate-ui.com/)
- **Hover.dev** — [hover.dev](https://www.hover.dev/)
- **Fancy Components** — [fancycomponents.dev](https://www.fancycomponents.dev/)
- **Smooothy**: Smooth-scrolling slider — [smooothy.federic.ooo](https://smooothy.federic.ooo/)

## Development

Libraries, tutorials, demos and tools for building 3D on the web.

### Model Viewers

Drop in a glTF or GLB file to inspect, debug or convert it.

- **Three.js Editor** — [threejs.org/editor](https://threejs.org/editor/)
- **Babylon.js Sandbox** — [sandbox.babylonjs.com](https://sandbox.babylonjs.com/)
- **glTF to R3F** — [gltf.pmnd.rs](https://gltf.pmnd.rs/)
- **glTF Report**: Built on glTF Transform — [gltf.report](https://gltf.report/)

### Three.js & R3F

Core React Three Fiber libraries, plus tools for TSL, the Three.js shading language.

- **React Three Fiber** — Docs: [r3f.docs.pmnd.rs/getting-started/introduction](https://r3f.docs.pmnd.rs/getting-started/introduction)
- **Drei** — Docs: [drei.docs.pmnd.rs/getting-started/introduction](https://drei.docs.pmnd.rs/getting-started/introduction), Storybook: [drei.pmnd.rs](https://drei.pmnd.rs/?path=/docs/staging-accumulativeshadows--docs)
- **React Postprocessing** — Docs: [react-postprocessing.docs.pmnd.rs/introduction](https://react-postprocessing.docs.pmnd.rs/introduction)
- **React Three Rapier** — GitHub: [github.com/pmndrs/react-three-rapier](https://github.com/pmndrs/react-three-rapier), Demo: [react-three-rapier.pmnd.rs](https://react-three-rapier.pmnd.rs/)
- **TSL Editor** — [threejs.org/examples/webgpu_tsl_editor.html](https://threejs.org/examples/webgpu_tsl_editor.html)
- **TSL Textures** — [boytchev.github.io/tsl-textures](https://boytchev.github.io/tsl-textures/)
- **Ecctrl**: Character controller by Andrew Chen — GitHub: [github.com/pmndrs/ecctrl](https://github.com/pmndrs/ecctrl), Demo: [character-control.vercel.app](https://character-control.vercel.app/), [x.com/AndrewChenE](https://x.com/AndrewChenE)

### Tutorials

Courses, channels and writing for learning Three.js, React Three Fiber and shaders.

- **Three.js Journey** — [threejs-journey.com](https://threejs-journey.com/) (🔥 3/5)
- **Wawa Sensei** — [wawasensei.dev/courses/react-three-fiber](https://wawasensei.dev/courses/react-three-fiber), Book slider demo: [r3f-animated-book-slider-final.vercel.app](https://r3f-animated-book-slider-final.vercel.app/)
- **Yuri Artiukh** (🇺🇦): Recorded live streams · TSL — [youtube.com/@akella_](https://www.youtube.com/@akella_) (🔥 3/5), Three.js Workshops: [threejs-workshops.com](https://threejs-workshops.com/)
- **SimonDev**: Three.js and game dev — [simondev.io](https://simondev.io/), YouTube: [youtube.com/@simondev758](https://www.youtube.com/@simondev758)
- **Maxime Heckel**: Raymarching — [maximeheckel.com](https://maximeheckel.com/) (🔥 3/5), [r3f.maximeheckel.com/sdf13](https://r3f.maximeheckel.com/sdf13)
- **Nik Lever** (🇬🇧): TSL · Boids — [niklever.com](https://niklever.com/) (🔥 2/5), [niklever.com/getting-to-grips-with-threejs-shading-language-tsl](https://niklever.com/getting-to-grips-with-threejs-shading-language-tsl/)
- **React Three Fiber: Canvas** — [gracious-keller-98ef35.netlify.app/docs/api/canvas](https://gracious-keller-98ef35.netlify.app/docs/api/canvas/)
- **Discover three.js** — [discoverthreejs.com](https://discoverthreejs.com/)
- **Gianluca Lomarco** — [rockbiter.dev](https://www.rockbiter.dev/)
- **Shader Learning** — [shader-learning.com](https://shader-learning.com/)

### Articles & Demos

Technical write-ups and live demos worth studying, many with source code.

- **Codrops** — [tympanus.net/codrops/demos](https://tympanus.net/codrops/demos/)
- **Singularity**: Optimized R3F demo by Niccolò Fanton · Codrops — [singularity.niccolofanton.dev](https://singularity.niccolofanton.dev/)
- **Pavel Boytchev**: CodePen demo — [codepen.io/boytchev/pen/ZEPNPyj](https://codepen.io/boytchev/pen/ZEPNPyj)
- **codepen.io** — [codepen.io/filipz/pen/KwwKRRr](https://codepen.io/filipz/pen/KwwKRRr)
- **Marco Gomez**: 12 demos — [mgz.me](https://mgz.me/), [x.com/TheCodeTherapy](https://x.com/TheCodeTherapy)
- **Rope**: By Mister Prada — [rope.misterprada.com](https://rope.misterprada.com/)
- **WebGPU Compute + InstancedMesh** — [threejs-webgpu-test.netlify.app](https://threejs-webgpu-test.netlify.app/), [threejs-webgpu-test.netlify.app/test2](https://threejs-webgpu-test.netlify.app/test2)
- **Green Baths** — [greenbaths.vercel.app](https://greenbaths.vercel.app/)
- **Monolith**: SDF · By luruke — [luruke.github.io/monolith/index.html](https://luruke.github.io/monolith/index.html)
- **The Substance**: Scroll, refraction and shader effects in R3F — [github.com/drcmda/the-substance](https://github.com/drcmda/the-substance)
- **Xavier (Jack)** — [youtube.com/watch](https://www.youtube.com/watch?v=aaSiXQ3JGIU), [three.tools](https://three.tools/), [x.com/KMkota0](https://x.com/KMkota0)
- **R3F WebGPU Post-processing**: By Anderson Mancini — [r3f-webgpu-post-processing.vercel.app](https://r3f-webgpu-post-processing.vercel.app/)
- **PlayCanvas React**: Declarative 3D with React — [blog.playcanvas.com/declarative-3d-with-playcanvas-react](https://blog.playcanvas.com/declarative-3d-with-playcanvas-react/)
- **Hatom Hold Change** — [tech-01-hatom-hold-change.vercel.app](https://tech-01-hatom-hold-change.vercel.app/)
- **BlueBox Design** (🇨🇭 Zurich) — [bluebox.design](https://bluebox.design/)
- **Luma WebGL Library**: Gaussian splatting — [lumalabs.ai/luma-web-library](https://lumalabs.ai/luma-web-library) (🔥 1/5)
- **FreeTimeGS**: Gaussian splatting — [zju3dv.github.io/freetimegs](https://zju3dv.github.io/freetimegs/), 4DV viewer: [4dv.ai/viewer/salmon_10s](https://www.4dv.ai/viewer/salmon_10s?showdemo=4dv)
- **Three.js Realistic Render** — [chrismaldona2.github.io/threejs-realistic-render](https://chrismaldona2.github.io/threejs-realistic-render/)
- **LudoGL**: By Marco Ludovico Perego — [ludo-gl.netlify.app](https://ludo-gl.netlify.app/), [github.com/emmelleppi/LudoGL](https://github.com/emmelleppi/LudoGL), [x.com/mlperego](https://x.com/mlperego)
- **Niklas Niehus**: Source code included — [holtsetio.com](https://holtsetio.com/)
- **Faraz Shaikh**: Source code included — Car paint: [faraz-portfolio.github.io/demo-2025-car-paint](https://faraz-portfolio.github.io/demo-2025-car-paint/), Raymarched liquid glass: [faraz-portfolio.github.io/demo-2025-raymarched-liquid-glass](https://faraz-portfolio.github.io/demo-2025-raymarched-liquid-glass/), [x.com/CantBeFaraz](https://x.com/CantBeFaraz)
- **Xor** — [xordev.com](https://www.xordev.com/), [x.ai](https://x.ai/)

#### Demo Collections

Labs and portfolios with many experiments in one place.

- **David Li** — [david.li](https://david.li/) (🔥 3/5)
- **mameson** (🇯🇵): TSL · Lots of demos · Source in the page HTML — [mameson.com](https://www.mameson.com/) (🔥 1/5)
- **Looper**: Hundreds of loop effects · By Spite — [spite.github.io/looper/#4](https://spite.github.io/looper/#4) (🔥 3/5)
- **Pavel Mazhuga**: Personal lab · TSL shaders · Git repos — [pavelmazhuga.com/lab](https://pavelmazhuga.com/lab), [museum.samokat.ru](https://museum.samokat.ru/)
- **SBCODE Editor**: Three.js examples — [editor.sbcode.net/examples.html](https://editor.sbcode.net/examples.html)
- **🍊佬** — [three-demo.online/#/home](http://three-demo.online/#/home)
- **猫佬** — [gcat.cc/demo](https://gcat.cc/demo)
- **Open Three** — [z2586300277.github.io/three-cesium-examples](https://z2586300277.github.io/three-cesium-examples), [threehub.cn](https://threehub.cn/), GitHub: [github.com/z2586300277/three-cesium-examples](https://github.com/z2586300277/three-cesium-examples)
- **Luis Bizarro**: Portfolio source code — [github.com/bizarro/2024](https://github.com/bizarro/2024/)
- **Felix Martinez**: Clock demo — [felixmartinez.dev](https://felixmartinez.dev/), [clock.felixmartinez.dev](https://clock.felixmartinez.dev/)

#### Particles

GPU particle systems and effects.

- **Dissolve Effect**: Codrops — [dissolve-particles.vercel.app](https://dissolve-particles.vercel.app/)
- **Bouquet**: By Hadaly Villasclaras — [bouquet.hhvv.org](https://bouquet.hhvv.org/)
- **ko-yelie**: CodePen demo — [codepen.io/ko-yelie/pen/LqXWWx](https://codepen.io/ko-yelie/pen/LqXWWx) (🔥 1/5)

#### Fluid Simulation

Real-time fluid, smoke and water simulations in the browser.

- **WebGL Fluid Simulation**: By Pavel Dobryakov — [paveldogreat.github.io/WebGL-Fluid-Simulation](https://paveldogreat.github.io/WebGL-Fluid-Simulation/) (🔥 3/5)
- **There Is No God** — [artemhlezin.github.io/there-is-no-god](https://artemhlezin.github.io/there-is-no-god/)
- **React Fluid Distortion** — [codesandbox.io/p/github/whatisjery/react-fluid-distortion/main](https://codesandbox.io/p/github/whatisjery/react-fluid-distortion/main)
- **WebGL Water**: By Evan Wallace — [madebyevan.com/webgl-water](https://madebyevan.com/webgl-water/) (🔥 1/5)
- **Vercel Fluid** — [vercel.com/fluid](https://vercel.com/fluid)
- **Liquid Layers**: By Grant Kot — [grantkot.com/ll](https://grantkot.com/ll/)
- **Three.js Fluid and Smoke Simulation** — [threejs-fluid-simulation.vercel.app](https://threejs-fluid-simulation.vercel.app/)
- **Infinite World**: Three.js Journey — [infinite-world.vercel.app](https://infinite-world.vercel.app/)
- **grid-amin.vercel.app** — [grid-amin.vercel.app](https://grid-amin.vercel.app/)

#### Physics

Physics-driven interaction demos.

- **Drag Ribbon** — [ulucode.com/random/ribbon](https://ulucode.com/random/ribbon/)
- **balloons-js** — [arturbien.github.io/balloons-js](https://arturbien.github.io/balloons-js/)

#### No Live Demo

Work shown only in videos and posts.

- **Gianluca Lomarco**: Cursor trail interaction (WIP) — [x.com/__rockbiter/status/1929543165511430255](https://x.com/__rockbiter/status/1929543165511430255)
- **bleuje**: Processing — [bleuje.com/animationsite/2025_1](https://bleuje.com/animationsite/2025_1/)

### Creative Tools

Generators and playgrounds for shaders, type and visual effects.

- **ShaderGPT**: By 14islands — [shadergpt.14islands.com](https://shadergpt.14islands.com/)
- **Ksenia Kondrashova**: Apple-event style · Online tools — [codepen.io/ksenia-k/pens/public](https://codepen.io/ksenia-k/pens/public) (🔥 1/5), Liquid Metal: [app.paper.design/playground/liquid-metal](https://app.paper.design/playground/liquid-metal), GL Liquid: [codepen.io/ksenia-k/full/MWMObrY](https://codepen.io/ksenia-k/full/MWMObrY)
- **Atery**: Typeface — [atery.artikulierung.ch](https://www.atery.artikulierung.ch/)
- **Hypha** — [hyphahypha.com](https://hyphahypha.com/)
- **ASCII Art Archive** — [asciiart.eu](https://www.asciiart.eu/)
- **GridType** — [grid-type.com](https://www.grid-type.com/)

### Dev Tools

Browser extensions for inspecting and debugging WebGL and Three.js scenes.

- **ThreeTools**: Chrome extension — [three.tools](https://three.tools/)
- **Spector.js**: Chrome extension — [chromewebstore.google.com/detail/spectorjs/denbgaamihkadbghdceggmchnflmhpmk](https://chromewebstore.google.com/detail/spectorjs/denbgaamihkadbghdceggmchnflmhpmk)
- **Shader Editor**: Chrome extension — [chromewebstore.google.com/detail/shader-editor/ggeaidddejpbakgafapihjbgdlbbbpob](https://chromewebstore.google.com/detail/shader-editor/ggeaidddejpbakgafapihjbgdlbbbpob)

## Tech Products

Hardware brands with exceptional product design and websites.

- **Nothing** — [us.nothing.tech](https://us.nothing.tech/)
- **Teenage Engineering** — [teenage.engineering](https://teenage.engineering/)