AI UP LAB面向任务的 AI 实践资源AI resources for real tasks
收藏Saved
更多More
StarStar

按类型浏览Browse by type / 游戏/互动 Game / interactive

interactive

游戏/互动 Game / interactive

可直接玩或操作的教学游戏与 WebGL 演示。 当前 72 条。 Teaching games and WebGL demos you can play in the browser. 72 items now.

全部类型All types HTML 总览HTML overview
工具页 Tool 游戏/互动 Game / interactive

M3E Canvas：在浏览器里拖出 Material 3 界面草图，一键变成给 AI 写 App 的提示词 M3E Canvas: sketch Material 3 Expressive screens in the browser and turn them into a prompt for your AI coding tool

拖零件拼 Material 3 界面，一键写成给 AI 的提示词。 Drag Material 3 parts into screens, then copy one prompt for your AI coding tool.

html · design
工具页 Tool 游戏/互动 Game / interactive

CUBE Type：打几个字，变成等距方块字，免费导出图片或循环动图 CUBE Type: type a few words and get isometric block letters, free image or loop export

打几个字变成等距方块字，配色画幅随便调，导出免费商用。 Type a few words, get isometric block letters, and export them free for commercial use.

typography · isometric
game game 游戏/互动 Game / interactive

Triple-A Minesweeper：把扫雷做成「3A 大作」的恶搞网页游戏 Triple-A Minesweeper: classic Minesweeper parodied as a AAA blockbuster in the browser

一盘普通扫雷，硬塞进开场动画、全程配音和剧情电话。 Plain Minesweeper stuffed with splash screens, nonstop voice lines, and story calls.

game · parody
game game 游戏/互动 Game / interactive

Quake-SRP：1996 年的《雷神之锤》用纯安全 Rust 重写，浏览器里直接玩，代码几乎全由 Claude Code 写 Quake-SRP: 1996's Quake ported to dependency-free safe Rust, playable in the browser, written mostly by Claude Code

点开就能玩雷神之锤，整套移植由一群智能体完成。 Play Quake in the browser, ported to safe Rust by a fleet of Claude Code agents.

webassembly · rust
游戏/互动 Game / interactive 其他 Other

The people holding up the internet：一页滚动数据故事，40 亿部手机靠一个人维护的时区文件 The people holding up the internet: a scrolling data story on the time zone file four billion phones rely on

边往下滑边出数据，讲清一个人撑起全世界手机的时间。 Data appears as you scroll: how one person keeps the world's phone clocks right.

data-viz · scrollytelling
游戏/互动 Game / interactive demo demo

demoscene-recomp：把 90 年代 DOS 经典演示片逐条指令重编译，直接在浏览器里跑 demoscene-recomp: classic 1990s DOS demos recompiled instruction by instruction to run in the browser

Second Reality 原样在网页里跑，还能切 CRT 扫描线。 Second Reality runs in the page as it did in 1993, CRT scanlines optional.

demoscene · webassembly
游戏/互动 Game / interactive demo demo

A Walkable History of Art：从维基百科搭出来的 3D 艺术史博物馆 A Walkable History of Art: a 3D art-history museum built from Wikipedia

在时间轴上缩放穿越，再走进画廊看真画。 Zoom through a timeline, then walk into galleries of real paintings.

threejs · 3d
工具页 Tool 游戏/互动 Game / interactive

BIGWORDS.PAGE：把任何屏幕变成大字牌，链接就是整个页面 BIGWORDS.PAGE: turn any screen into a big sign, and the link is the whole page

打一句话铺满屏幕，链接就是整块牌子。 Type a line to fill the screen; the link is the whole sign.

signage · url-state
游戏/互动 Game / interactive demo demo

Banyan：一个 HTML 文件里长出的程序化榕树 Banyan: a procedural banyan tree grown in one HTML file

一个 HTML 文件，一个种子，长出一整棵能转着看的榕树。 One HTML file and one seed grow a whole banyan you can orbit.

three.js · single-file-html
工具页 Tool 游戏/互动 Game / interactive

GSS：用写 CSS 的方式写 3D 场景 GSS: write 3D scenes the way you write CSS

会写 CSS 就能写 3D：选择器加动画，编译成一个着色器。 If you can write CSS, you can write 3D: selectors and keyframes compiled to one shader.

css · shader
游戏/互动 Game / interactive 文档站 Docs

Samon：一笔把沙子耙完的枯山水谜题 Samon: a one-stroke Zen-garden raking puzzle

一笔把沙子耙完的枯山水谜题，页面里就能试。 A one-stroke Zen-garden puzzle you can play on the page.

puzzle · zen-garden
游戏/互动 Game / interactive

Pumpkin Patch：认领一只南瓜，刻完让它亮着 Pumpkin Patch: claim a pumpkin, carve it, and leave it glowing

一百万只南瓜里认领一只，刻完让它亮着。 Claim one of a million pumpkins, carve it, leave it glowing.

halloween · canvas
游戏/互动 Game / interactive 动效 Motion

Thank you, Steve：滚动纪念乔布斯 Thank you, Steve: a scrolling tribute to Steve Jobs

往下滚，走过乔布斯做过的那些屏幕。 Scroll through the screens Steve Jobs made.

tribute · scroll
工具页 Tool 游戏/互动 Game / interactive

Flatten SF：在旧金山找最平的步行/骑车路线 Flatten SF: the flattest walking or cycling route across San Francisco

一根滑杆，在少走路和少爬坡之间挑。 One slider between shorter and flatter.

map · routing
游戏/互动 Game / interactive 作品集 Portfolio

stillwet：AI 模型用代码一笔笔画油画，还能回放作画过程 stillwet: AI models paint stroke by stroke in code, with replayable sessions

看 AI 用代码一笔笔把油画画出来。 Watch AI paint an oil painting, one coded stroke at a time.

generative-art · canvas
游戏/互动 Game / interactive demo demo

Island Three：在浏览器里走进一座 O’Neill 太空圆柱城 Island Three: walk around an O’Neill cylinder in the browser

在浏览器里走进一座太空圆柱城。 Walk into a space-colony cylinder in your browser.

3d · webgl
游戏/互动 Game / interactive 工具页 Tool

VB6 Studio Web：浏览器里的经典 Visual Basic 6 IDE VB6 Studio Web: the classic Visual Basic 6 IDE in your browser

在浏览器里拖控件做 VB6 窗体。 Build VB6 forms in your browser.

vb6 · ide
游戏/互动 Game / interactive demo demo

Lighthouses of the World：全球灯塔按真实闪光节奏亮起的地球 Lighthouses of the World: every charted light on a globe, blinking on its real cycle

看全球灯塔按真实节奏一起闪。 Watch the world's lighthouses blink in real rhythm.

globe · webgl
游戏/互动 Game / interactive 文档站 Docs

Timeline of the Far Future：把维基百科「遥远未来时间线」做成滚动旅程 Timeline of the Far Future: Wikipedia’s far-future timeline as a scrolling journey

滚动穿越到宇宙的遥远未来。 Scroll your way into the far future.

three.js · timeline
demo demo 游戏/互动 Game / interactive

56k.rip：浏览器里重演 1996 拨号上网 56k.rip: the 1996 dial-up internet experience in a browser

在浏览器里体验拨号上网年代。 Experience dial-up-era browsing in your browser.

retro · dial-up
demo demo 游戏/互动 Game / interactive

黑洞实时光线追踪：广义相对论测地线可视化 Real-time black hole raytracer along GR geodesics

用实时光线追踪探索黑洞视觉。 Explore black-hole visuals with real-time ray tracing.

blackhole · raytracing
game game 游戏/互动 Game / interactive

Destroy Any Website：用火柴人把任意网页打成碎片 Destroy Any Website: smash any page with a stickman

把网页变成火柴人的破坏游乐场。 Turn a web page into a stickman destruction playground.

game · interactive
demo demo 游戏/互动 Game / interactive

SkinLab：皮肤科医生做的浏览器 WebGL 皮肤生物物理模型 SkinLab: a dermatologist’s browser WebGL biophysical skin model

用互动模型探索皮肤的生物物理。 Explore skin biophysics with an interactive model.

webgl · threejs
游戏/互动 Game / interactive

The Last Day：互动恐龙绘画 The Last Day: an interactive dinosaur painting

用互动绘画探索恐龙的最后一天。 Explore the dinosaurs' last day through interactive art.

opus-5-5 · echohive
工具页 Tool 游戏/互动 Game / interactive

TiddlyInstall：单 HTML 做跨平台安装包 TiddlyInstall: one HTML file that builds cross-platform installers

用单个 HTML 制作跨平台安装包。 Make cross-platform installers with a single HTML file.

installer · single-file
游戏/互动 Game / interactive 工具页 Tool

Bastardica：浏览器里混字重的「bastard」字体工坊 Bastardica: in-browser foundry for bastard web fonts

在浏览器里实验混合字重。 Experiment with mixed font weights in your browser.

font · typography
游戏/互动 Game / interactive demo demo

koi.rest：和陌生人一起看锦鲤的安静池塘 koi.rest: a quiet shared koi pond

和陌生人一起看一个安静的锦鲤池。 Watch a quiet koi pond with strangers.

koi · canvas
游戏/互动 Game / interactive 工具页 Tool

PipeFitter：浏览器里参数化做异径管接头 PipeFitter: parametric pipe connectors in the browser

用参数化工具设计异径管接头。 Design pipe reducers with a parametric tool.

cad · parametric
游戏/互动 Game / interactive 工具页 Tool

C3 Playground：浏览器里编图形与声音的 C3 游乐场 C3 Playground: in-browser C3 with graphics and sound

在浏览器里编写图形与声音。 Code graphics and sound in your browser.

c3 · wasm
工具页 Tool 游戏/互动 Game / interactive

CMS-EP-SFX：气隙可用的自解密 HTML 加密页 CMS-EP-SFX: air-gapped self-decrypting HTML encryption

用自解密 HTML 在离线环境分享密文。 Share encrypted content offline through self-decrypting HTML.

encryption · cms
demo demo 游戏/互动 Game / interactive

3d-retro：CC0 可整页粘贴的复古 3D 技巧博物馆 3d-retro: CC0 museum of retro 3D tricks you can paste into a page

可整页粘贴的复古立体技巧，每件都是一个文件。 A museum of retro 3D tricks, each one a single file you can paste into a page.

webgl · canvas
游戏/互动 Game / interactive 工具页 Tool

Fractalysis：浏览器里无限放大的 Mandelbrot 查看器 Fractalysis: browser Mandelbrot viewer with infinite zoom

在浏览器里把分形放大到普通精度之外。 Zoom a fractal in the browser, far past ordinary precision.

fractal · mandelbrot
游戏/互动 Game / interactive demo demo

Simten NAND：在浏览器用 TypeScript 从门电路搭 CPU Simten NAND: build a CPU from gates in TypeScript in the browser

在浏览器用代码接线，从门电路搭起一台处理器。 Wire gates in the browser and build a processor up from them.

typescript · hdl
游戏/互动 Game / interactive game game

runboli.com：把 Halo 3 Guardian 做成可逛的个人站 runboli.com: Halo 3 Guardian as an explorable personal site

把 Halo 3 大厅做成可逛的个人站，藏着照片和小游戏。 Walk Halo 3's lobby as a personal site, with photos and mini-games tucked in.

threejs · webgl
游戏/互动 Game / interactive library library

gpu-lexer：约 27KB 的语言无关 WebGPU 语法高亮 gpu-lexer: ~27KB language-agnostic WebGPU syntax highlighter

语言无关的 WebGPU 高亮，没见过的语言也能猜类型。 A language-agnostic WebGPU highlighter that guesses unseen languages.

webgpu · syntax-highlight
游戏/互动 Game / interactive 文档站 Docs

WebGCM：浏览器里跑的全球气候模型（WebGPU） WebGCM: a global climate model in the browser (WebGPU)

在浏览器里跑的全球气候模型，大气和海洋都在。 A global climate model in the browser, atmosphere and ocean together.

webgpu · climate
+ 精选 + Featured 文档站 Docs 游戏/互动 Game / interactive

System Design Atlas：带交互架构图的系统设计阅读站 System Design Atlas: system-design reading with interactive architecture diagrams

系统设计阅读站，点开文档就能看架构图。 Read system-design notes and click through the architecture diagrams.

system-design · architecture
+ 精选 + Featured 游戏/互动 Game / interactive 文档站 Docs

Transformer Explainer：浏览器里可视化 GPT-2 Transformer Transformer Explainer: GPT-2 Transformer visualized in the browser

在浏览器里跑 GPT-2，并能展开注意力和概率。 Run GPT-2 in the browser and open attention and the probabilities.

transformer · gpt-2
工具页 Tool 游戏/互动 Game / interactive

GeoJSON Viewer：粘贴校验并画地图 GeoJSON Viewer: paste, validate, and draw on a map

粘贴 GeoJSON，校验过再画上地图，全程不上传。 Paste GeoJSON, validate it, and draw the map without uploading.

geojson · map
游戏/互动 Game / interactive 其他 Other

GSB：按营收排金银铜的商业 trivia GSB: rank four companies by revenue (Gold Silver Bronze)

读当年的标题，按营收给公司排成金、银、铜。 Read the year's headlines and rank companies by revenue.

trivia · business
游戏/互动 Game / interactive 其他 Other

Sparse-SNN：浏览器里的类脑脉冲网络 Sparse-SNN: connectome-inspired spiking network in the browser

在画板上写数字，让浏览器里的脉冲网络来认。 Draw a digit and let an in-browser spiking network classify it.

snn · spiking
游戏/互动 Game / interactive 其他 Other

Mineral Gems：程序化矿物宝石 Mineral Gems: procedurally generated mineral gems

在浏览器里看程序化生成的矿物宝石。 Procedurally generated mineral gems you can explore in the browser.

procedural · gems
游戏/互动 Game / interactive

Page Rage：在浏览器里砸烂任意网页 Page Rage: smash any web page in the browser

在浏览器里砸预制网页；砸任意网页需要扩展。 Smash ready-made pages in the browser; any page needs the extension.

game · browser
demo demo 游戏/互动 Game / interactive

Redis City：浏览器里的 Redis 内部 3D 互动图 Redis City: interactive 3D map of how Redis works

在立体场景里走一遍 Redis 内部是怎么工作的。 Walk through how Redis works, as an interactive scene in the browser.

redis · 3d
游戏/互动 Game / interactive demo demo

Soundmap：摄像头上的「声音相机」 Soundmap: a sound camera on your webcam

把声音叠在摄像头画面上，在浏览器里看见它。 See sound drawn over your webcam, right in the browser.

webcam · audio
游戏/互动 Game / interactive demo demo

Hopla Games：浏览器里的儿童体感游戏（无 Kinect） Hopla Games: Kinect-style kids games in the browser

免费儿童体感小游戏，摄像头画面留在本机。 Free webcam movement games for kids, with the camera staying on the device.

webcam · kids
游戏/互动 Game / interactive 文档站 Docs

Session Context：一页网页能「看懂」你什么 Session Context: what one web page can learn about you

看清一张网页在要权限之前，能从浏览器知道什么。 See what one page can learn about you before it asks for permission.

privacy · fingerprint
+ 精选 + Featured 游戏/互动 Game / interactive 文档站 Docs

Programming Museum：能走进去的源代码博物馆 Programming Museum: a walkable museum of source code

走进可漫游的房间，把能跑的源码当展品看。 Walk through rooms where runnable source code hangs as the exhibits.

museum · source-code
游戏/互动 Game / interactive 文档站 Docs

Bodily Oddities：身体也能「怪」一点的百科 Bodily Oddities: strange things bodies can (sometimes) do

可检索的人体小怪癖百科，吓人的往往也正常。 A searchable guide to odd bodily quirks, including the scary-but-normal ones.

body · encyclopedia
游戏/互动 Game / interactive 工具页 Tool

Relativity Park：光速降到步行时的狭义相对论 Relativity Park: special relativity when light walks

把光速降到步行，在公园里看见相对论。 Set the speed of light to a walking pace and watch relativity in a park.

physics · relativity
游戏/互动 Game / interactive 工具页 Tool

Roadwright：画轮子，看它滚出的路面 Roadwright: draw a wheel, see the road it rolls on

画一个轮子，立刻看到它无滑滚动时的路面。 Draw a wheel and instantly see the road it rolls along without slipping.

geometry · canvas
游戏/互动 Game / interactive demo demo

NissyGirl：纯 HTML/CSS 的 3D 掌机演示 NissyGirl: a 3D handheld console rendered in HTML/CSS

纯 HTML 和 CSS 做出可交互的立体掌机壳体。 An interactive 3D handheld shell built in HTML and CSS.

html · css
组件 Component 文档站 Docs

Maple：零构建原子 CSS Maple: zero-build atomic CSS

浏览器里按类名即时生成原子 CSS，不用构建。 Atomic CSS generated in the browser as classes appear, with no build step.

css · atomic
游戏/互动 Game / interactive demo demo

Topological Picture Book：钢笔拓扑曲面 Topological Picture Book: pen-and-ink topology surfaces

用钢笔素描翻看拓扑曲面，在浏览器里就能读。 Turn the pages of a pen-and-ink book of topology surfaces in the browser.

topology · illustration
游戏/互动 Game / interactive demo demo

Laser Graffiti：浏览器激光涂鸦 Laser Graffiti: draw on walls in the browser

用鼠标当激光在浏览器里涂鸦，也能接到墙上。 Draw laser graffiti in the browser with your mouse, or aim a real pointer at a wall.

canvas · interactive
组件 Component 游戏/互动 Game / interactive

Ambient CSS v3：物理光照 CSS Ambient CSS v3: physically based CSS

共享一盏光的 CSS，阴影和表面跟着光向走。 Physically based CSS where shadows and surfaces follow one shared light.

css · skeuomorphic
工具页 Tool 游戏/互动 Game / interactive

Single-File SaaS：单文件 BYOK 模板 Single-File SaaS: BYOK in one HTML file

一整套自带密钥的应用脚手架，塞在一个文件里。 A whole bring-your-own-key app scaffold, packed into one file.

single-file · saas
游戏/互动 Game / interactive

Voronoi Go：没有网格的围棋 Voronoi Go: Go without the grid

在没有方格的棋盘上下围棋，浏览器里就能开局。 Play Go on a board with no grid, right in the browser.

html · game
游戏/互动 Game / interactive 工具页 Tool

GlassBox：浏览器指纹台 GlassBox: browser fingerprint bench

在浏览器里跑指纹探针，看自己有多好认。 Run fingerprint probes in the browser and see how identifiable you are.

html · single-file
+ 精选 + Featured 游戏/互动 Game / interactive

Flexbox Froggy Flexbox Froggy

写 Flexbox 把青蛙放到荷叶上，用闯关来学。 Learn Flexbox as a game: write the properties that land frogs on lily pads.

flexbox · css
+ 精选 + Featured 游戏/互动 Game / interactive

CSS Grid Garden CSS Grid Garden

用浇水闯关来学网格布局。 Learn grid layout as a game of watering a garden.

grid · css
游戏/互动 Game / interactive

three.js examples three.js examples

一墙可在浏览器里跑的立体示例，点进去能看源码。 A wall of 3D demos you can run in the browser and open to read the source.

webgl · threejs
+ 精选 + Featured 动效 Motion 游戏/互动 Game / interactive

Scroll-driven Animations Scroll-driven Animations

用滚动驱动的演示：进度、封面和堆叠卡片。 Scroll-driven demos for reading progress, cover flow, and stacked cards.

scroll · css
动效 Motion 组件 Component

css-doodle css-doodle

用扩展的样式语法画网格和动画，文档页就是现场。 Draw grids and motion with an extended style syntax; the docs are the live demo.

web-components · css
工具页 Tool 游戏/互动 Game / interactive

slideVars slideVars

自动给样式变量做出滑杆，改值页面立刻变。 Builds sliders for style variables, and the page updates as you move them.

css · custom-properties
游戏/互动 Game / interactive

Don't Wordle Don't Wordle

每天一词，规则像 Wordle，但猜中隐藏词就输。 A daily word game with Wordle's rules, except guessing the hidden word loses.

wordle · game
游戏/互动 Game / interactive 工具页 Tool

RACK-02：单文件 techno 机 RACK-02: a techno machine in one HTML file

一整台 techno 机写在一个 HTML 文件里，打开即玩。 A modular techno machine in one HTML file that plays in the browser.

audio · web-audio
组件 Component 游戏/互动 Game / interactive

PolyCSS：不用 WebGL 的 CSS 3D 引擎 PolyCSS: a CSS 3D engine without WebGL

不用 WebGL 的 CSS 立体引擎，每个面都能点。 A CSS 3D engine without WebGL, where every polygon is a clickable element.

css · 3d
游戏/互动 Game / interactive demo demo

Sirenfall：浏览器民防警报场景 Sirenfall: a browser civil-defense siren scene

雨夜里拉下闸，听浏览器实时合成的民防警报。 Pull the breaker on a rainy night and hear a siren synthesized in the browser.

web-audio · interactive
工具页 Tool 游戏/互动 Game / interactive

Yan Texture Studio：浏览器纹理实验室 Yan Texture Studio: in-browser texture lab

在本地生成纹理和故障滤镜，再导出图片。 Generate textures and glitch filters locally, then export the image.

canvas · glitch
demo demo 游戏/互动 Game / interactive

Ptree：可交互生命树 Ptree: interactive tree of life

在浏览器里翻生命树，用性状滑块筛出类群。 Browse a tree of life in the browser and filter groups with trait sliders.

phylogeny · interactive
工具页 Tool demo demo

Scrolling Text Generator：浏览器跑马灯/字幕导出 Scrolling Text Generator: browser marquee, ticker, and credits export

在浏览器里调跑马灯和字幕，再导出或嵌进网页。 Tune a ticker or credits line in the browser, then export or embed it.

marquee · ticker