AI UP LAB HTML 收集 · 每日更新HTML Collection · daily updates

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

interactive

游戏/互动 Game / interactive

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

全部类型All types HTML 总览HTML overview
+ 精选 + Featured 游戏/互动 Game / interactive 文档站 Docs

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

Demjan Vester 的公开互动百科：收录约 143 条人体小怪癖 / 反射 / 感知现象（耳鸣轰鸣、胃咕噜、jamais vu 等），可按身体部位与类型浏览，带「吓人但正常」「现在就能试」入口与搜索。纯前端，Show HN item 49649789（约 271 分）。 Demjan Vester’s public interactive encyclopedia of ~143 bodily quirks / reflexes / percepts (ear rumbling, stomach growling, jamais vu, …), browsable by body region and kind, with “scary but normal” / “try right now” entry points and search. Pure front-end; Show HN item 49649789 (~271 points).

body · encyclopedia
+ 精选 + Featured 游戏/互动 Game / interactive 工具页 Tool

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

Dmitry Brant 的公开互动演示：把光速压到 5 km/h（约步行速度），在公园视角里用 WASD 加速，观察洛伦兹收缩、光行差、多普勒变色与相对论光束效应，各效应可单独开关。Show HN 当日上过热榜（item 49637385）；纯前端可打开，无需登录。 Dmitry Brant’s public interactive demo: the speed of light is set to 5 km/h (a brisk walk); accelerate with WASD through a park and watch length contraction, aberration, Doppler colour shift, and relativistic beaming, each toggleable. Hit the Show HN front page the same day (item 49637385); pure front-end, no login.

physics · relativity
+ 精选 + Featured 游戏/互动 Game / interactive 工具页 Tool

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

Basel Ashraf 的浏览器几何小品：手绘（或选一个）轮子轮廓并放好轴心，即时算出该轮无滑滚动时对应的路面曲线，可调滚速、双轮轴距、路面倾斜，并导出 PNG / 切割文件 / 录制循环。纯前端互动；Show HN item 49641755，仓库开源。 Basel Ashraf’s browser geometry toy: draw (or pick) a wheel outline, place its axle, and instantly get the road profile it rolls on without slipping; adjust roll speed, two-wheel wheelbase and road tilt, and export PNG / cut files / a recorded loop. Pure front-end interactive; Show HN item 49641755, source on GitHub.

geometry · canvas
+ 精选 + Featured 游戏/互动 Game / interactive demo demo

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

tanishalfelven 的公开演示：用 HTML/CSS 做可交互 3D 掌机壳体与卡带流程，配自研小游戏引擎（PixiJS 画屏）与触控优先操控。Show HN 可对上；仓库开源可点进。 tanishalfelven’s public demo: an interactive 3D handheld shell and cartridge flow in HTML/CSS, plus a small game engine (PixiJS for the screen) and touch-first controls. Tied to a Show HN; source is open on GitHub.

html · css
+ 精选 + Featured 组件 Component 文档站 Docs

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

f12io 的 Maple：浏览器内按 DOM 出现的工具类即时生成原子 CSS，无需构建与配置文件；可变优先、OKLCH 调色与混合暗色模式。演示站可公开打开。 f12io’s Maple: a variable-first atomic CSS engine that generates utilities in the browser as classes appear in the DOM — no build step, no config. OKLCH palettes and hybrid dark mode. Demo is publicly open.

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

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

e-infinity 的拓扑图画书：钢笔素描风格的拓扑曲面与空间，可在浏览器里翻页浏览。公开可玩。 e-infinity’s topological picture book: pen-and-ink topology surfaces and spaces, browsable in the browser. Publicly open.

topology · illustration
+ 精选 + Featured 游戏/互动 Game / interactive demo demo

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

纯浏览器激光涂鸦：鼠标当激光可当场试；也可接投影仪+摄像头校准后用真激光指针在墙上画。零依赖、MIT。刷子、墨水滴落、3D 挤出、万花筒与井字棋都有。 Browser laser graffiti: try with your mouse as the laser, or calibrate a projector + webcam and draw on a wall with a real pointer. Zero dependencies, MIT. Brushes, wet ink, 3D extrusion, kaleidoscope, and tic-tac-toe.

canvas · interactive
+ 精选 + Featured 组件 Component 游戏/互动 Game / interactive

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

kikkupico 的物理光照 CSS：共享 key/fill 光，阴影与表面梯度跟着光向走。演示页可调材质、厚度、边缘与旋钮面板；另有纯 CSS 包与 React 组件。 kikkupico’s physically based CSS: a shared key/fill light so shadows and surface gradients follow the light vector. The demo retints materials, thickness, edges, and knob panels; ships a pure CSS package plus React components.

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

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

一整套 BYOK SaaS 脚手架塞进一个 HTML：免费日限额、License 解锁 Pro、密钥只留在当前标签页内存。可直接打开演示页。 A full BYOK SaaS scaffold in one HTML file: free daily quota, license unlock for Pro, keys kept in tab memory only. Open the demo page directly.

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

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

把围棋落在 Voronoi 剖分上的网页对弈：可人机、可旁观、可通信对局。浏览器即开即玩的交互棋盘，规则与传统围棋同源但棋盘几何不同。 Play Go on a Voronoi tessellation in the browser — human vs bot, watch mode, and correspondence games. Same lineage as classic Go, different board geometry.

html · game
+ 精选 + Featured 游戏/互动 Game / interactive 工具页 Tool

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

单页静态 HTML：在浏览器里跑约 31 项探针（canvas、WebGL/WebGPU、音频、字体、WASM、WebRTC IP 等），展示原始值与可识别度估计。默认本地运行，仅 IP 地理可选外联；MIT 源码。 One static HTML page: ~31 in-browser probes (canvas, WebGL/WebGPU, audio, fonts, WASM, WebRTC IP, …) with raw values and an identifiability estimate. Mostly local; IP geo is the optional phone-home. MIT source.

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

Flexbox Froggy Flexbox Froggy

用闯关游戏学习 CSS Flexbox：写属性把青蛙放到荷叶上。Thomas Park / Codepip 出品，开源，支持简体中文。 Learn CSS Flexbox as a game: write properties to put frogs on lily pads. By Thomas Park / Codepip, open source, with Simplified Chinese.

flexbox · css
游戏/互动 Game / interactive

CSS Grid Garden CSS Grid Garden

用浇水闯关学习 CSS Grid。与 Flexbox Froggy 同一作者系列，开源，可在浏览器里直接玩。 Learn CSS Grid by watering a garden. Same author series as Flexbox Froggy, open source, playable in the browser.

grid · css
游戏/互动 Game / interactive

three.js examples three.js examples

three.js 官方示例墙：大量可在浏览器运行的 WebGL / HTML 互动演示，可点进查看源码。 Official three.js example wall: many in-browser WebGL / HTML interactive demos you can open to read the source.

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

Scroll-driven Animations Scroll-driven Animations

Chrome 开发者布拉姆斯做的演示站：阅读进度、封面流转、堆叠卡片、横向卷轴等，全部用滚动驱动动画，演示页本身就是手写 HTML/CSS/JS，无构建步骤。 Bramus’s Chrome-developer demo site: reading progress, cover-flow, stacked cards, horizontal scroll, all scroll-driven. The demo itself is handwritten HTML/CSS/JS with no build step.

scroll · css
动效 Motion 组件 Component

css-doodle css-doodle

基于 Web Components 的 CSS 图案生成器：用扩展 CSS 语法画网格、图形与动画，文档站本身就是可点击的现场演示。 Web Components CSS pattern generator: draw grids, shapes, and motion with an extended CSS syntax. The docs site is a clickable live demo.

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

slideVars slideVars

CodePen 开源的 CSS 变量控制面板：自动读取 :root 自定义属性，生成滑杆和取色器，改值立刻反映到页面。MIT，演示页公开可访问。 CodePen’s open-source CSS-variable control panel: it auto-detects :root custom properties, builds sliders and color pickers, and reflects changes live. MIT, and the demo page is public.

css · custom-properties
+ 精选 + Featured 游戏/互动 Game / interactive

Don't Wordle Don't Wordle

免费每日单词游戏：规则像 Wordle，但目标是避开隐藏词。绿格必须留在原位、黄格必须换位、灰格禁用；有效词池会越猜越少，猜中即败。可撤销。 A free daily word game: Wordle rules, but you lose if you guess the hidden word. Greens stay put, yellows must move, grays are banned; the valid-word pool shrinks until you get cornered. Undos allowed.

wordle · game
+ 精选 + Featured 游戏/互动 Game / interactive 工具页 Tool

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

整台模块化 techno 机写在一个 HTML 文件里：鼓组、贝斯、效果、场景与 CV 接线，浏览器即开即玩，无需安装。GitHub Pages 上的可玩页。 A modular techno machine in a single HTML file: drums, bass, FX, scenes, and a CV patchbay. Open it in the browser — no install. Live on GitHub Pages.

audio · web-audio
+ 精选 + Featured 组件 Component 游戏/互动 Game / interactive

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

Layoutit 的 DOM 原生 CSS 3D：OBJ/glTF/VOX 的每个多边形都是可点选的 DOM 节点，用 matrix3d 摆位置。有公开画廊、builder，以及 vanilla / React / Vue 入口。 Layoutit’s DOM-native CSS 3D: every polygon from OBJ/glTF/VOX is a clickable DOM node placed with matrix3d. Public gallery and builder, plus vanilla / React / Vue entry points.

css · 3d
+ 精选 + Featured 游戏/互动 Game / interactive demo demo

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

纯浏览器民防警报场景：雨夜庇护所窗外城市，拉闸后警报塔用 Web Audio 实时合成双音（非录音）。源码单 HTML、MIT；另有 how-it-works 说明页。 A free browser scene: rainy city outside a shelter window; pull the breaker and a civil-defense siren spins up — synthesized live in Web Audio, not a recording. Single-file MIT source; how-it-works page included.

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

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

免费浏览器 Texture Studio：25 种 Canvas 2D 纹理/故障滤镜，全在本地跑，无账号、无上传，导出 PNG。只收录网页工具，不含移动端 App。 Free browser Texture Studio: 25 Canvas 2D texture / glitch filters, all client-side — no account, no upload, PNG export. Catalogues the web tool only, not the mobile app.

canvas · glitch
+ 精选 + Featured demo demo 游戏/互动 Game / interactive

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

浏览器里的系统发育生命树：按性状滑块过滤类群，比较祖先与照片/分布。Show HN 公开演示。 An interactive phylogeny tree of life in the browser: trait sliders filter taxa; compare ancestors with photos/ranges. Public Show HN demo.

phylogeny · interactive