最新 HTML Latest HTML

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 组件 Component 文档站 Docs

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

shadcss：无 JS 的 shadcn 风 HTML/CSS 组件 shadcss: shadcn-look HTML/CSS with zero JS framework

russfranky 的 MIT 组件库：把 shadcn/ui 视觉搬到纯 HTML/CSS（`:has()`、Popover API、原生 dialog、设计 token），面向 SSR / HTMX / Astro / AI 生成页。演示站公开可打开，声称数十个组件、gzip 十多 KB、零运行时依赖。 russfranky’s MIT kit: shadcn/ui visuals in plain HTML/CSS (`:has()`, Popover API, native dialog, design tokens) for SSR / HTMX / Astro / AI-generated pages. Public demo; dozens of components, ~tens of KB gzipped, zero JS runtime.

css · html

+ 精选 + Featured 组件 Component 文档站 Docs

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

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 demo demo 游戏/互动 Game / interactive

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

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

+ 精选 + Featured 工具页 Tool 落地页 Landing

SceneAI：UI 提示库（AETHER Claude 首屏演示同源） SceneAI: UI prompt library (source of AETHER’s Claude hero demo)

Orixadesign 出品的 UI 提示库：140+ 落地页 / Hero 区块提示、70+ 动态背景与渐变，每周上新，可复制进 Claude / GPT / Gemini 等生成。首页免费浏览样本；「Copy Prompt」与下载需 All Access（$49/月或 $199 终身，标价 $498 六折）。AETHER 的 3Portals Claude 网页设计演示片回复串即链到此站。 A UI prompt library by Orixadesign: 140+ landing-page / hero prompts, 70+ animated backgrounds and gradients, weekly drops, meant to be pasted into Claude / GPT / Gemini and friends. Samples browse free on the homepage; Copy Prompt and downloads need All Access ($49/mo or $199 lifetime, listed $498 at 60% off). AETHER’s 3Portals Claude web-design clip links here in its reply thread.

落地页 Landing template template

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

Cocoon：免费 Tailwind 4 单页模板 Cocoon: free Tailwind CSS 4 one-page template

MIT 开源咨询/SaaS 深色单页：Tailwind CSS 4 + 原生 JS，public/ 免构建可直接部署，含滚动动画与响应式布局。 MIT open-source dark one-pager for consultancies/SaaS: Tailwind CSS 4 + vanilla JS, ready-to-deploy public/ folder, scroll motion and responsive layout.

tailwind · template

工具页 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 组件 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

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 工具页 Tool

MeiGen MeiGen

免费 GPT Image 2 / Nano Banana / Seedance 2.5 提示画廊。按广告、品牌、视频、插画、海报、人像分类，复制即用。另有 MCP、Skills、Figma 插件。 Free prompt gallery for GPT Image 2, Nano Banana, and Seedance 2.5. Browse ads, branding, video, illustration, posters, portraits — copy and generate. Also MCP, Skills, and a Figma plugin.

+ 精选 + Featured 工具页 Tool 文档站 Docs

Refero Styles Refero Styles

2000+ 份从真实产品站抽出来的 DESIGN.md：颜色、字体、间距、组件，给 Cursor / Claude Code / Codex 直接读。 2,000+ DESIGN.md files pulled from real product sites — colors, type, spacing, components — readable by Cursor, Claude Code, and Codex.

工具页 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 工具页 Tool 文档站 Docs

DesignLang DesignLang

开源 CLI：对任意网址跑一遍 headless Chromium，抽出完整设计系统。DTCG token、Tailwind、CSS 变量、Figma、SwiftUI / Compose / Flutter，以及给 Cursor 的 MCP。 Open-source CLI: point headless Chromium at any URL and pull the full design system — DTCG tokens, Tailwind, CSS variables, Figma, SwiftUI / Compose / Flutter, plus an MCP for Cursor.

css · design

+ 精选 + Featured 文档站 Docs 工具页 Tool

海报构图手册 · 下册 Poster Composition Handbook Vol. 2

下册 16 种：网格系统、图文关系和信息密度。构图管阅读路径，Grid 管对齐与复用；给图像模型一套，给 HTML/CSS 一套。 Vol. 2’s 16 layouts: grid systems, type–image relations, and density. Composition sets the reading path; the grid handles alignment and reuse — one prompt set for image models, one for HTML/CSS.

css · grid

落地页 Landing 作品集 Portfolio

B2TF：复古 iOS 应用目录 B2TF: vintage iOS app directory

公开可提交的复古 iOS 应用设计目录。格子里是带视频预览的手机界面：磁带、像素、拟物相机。免费浏览，欢迎投稿。 A public, submission-open directory of retro-style iOS apps. A grid of phone UIs with video previews: cassettes, pixels, skeuomorphic cameras. Free to browse; submissions welcome.

ios · retro

+ 精选 + Featured 文档站 Docs 工具页 Tool

海报构图手册 · 上册 Poster Composition Handbook Vol. 1

Adrian Punk 的 AI 海报 / HTML 构图手册上册：16 种控制焦点、平衡、几何骨架和视线动势的构图，每条带图像模型与 HTML/CSS 提示词。 Adrian Punk’s AI poster / HTML composition handbook, vol. 1: 16 layouts for focus, balance, geometric skeleton, and eye path — each with image-model and HTML/CSS prompts.

css · grid

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 工具页 Tool 落地页 Landing

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

组件 Component

Millenium Bug：90 年代银行风 CSS Millenium Bug: retro-banking CSS

无依赖 classless-first CSS，把语义 HTML 收成 90 年代末银行后台：嵌套灰字段、钴蓝页签、荧光黄高亮。一文件、零构建。 A dependency-free, classless-first CSS kit that restyles semantic HTML as late-90s bank back-office UI: nested gray fieldsets, cobalt tabs, fluorescent yellow highlights. One file, zero build.

css · retro

MotionSites MotionSites

现成落地页提示库，给 Lovable / Bolt / Cursor / Claude 复制即用。分类有落地页、Hero、页脚、SaaS，偏电影感和 3D 动效。 Ready-to-use landing-page prompts for Lovable, Bolt, Cursor, and Claude. Browse landing pages, heroes, footers, SaaS — cinematic and 3D motion.

+ 精选 + 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 工具页 Tool demo demo

HTML Presentation Editor：单文件自编辑演示稿 HTML Presentation Editor: self-editing single-file slides

MIT 单文件（~42KB）演示稿编辑器：浏览器内 contenteditable，Cmd+S 写回同文件；文档/幻灯双模式、主题与强调色、图片嵌 base64，无构建无服务器。 MIT single-file (~42KB) presentation editor: in-browser contenteditable, Cmd+S writes the same file; document/slides modes, themes + accents, base64 images — no build, no server.

single-file · slides

+ 精选 + Featured 工具页 Tool

OpenDesign OpenDesign

开源 Claude Design 替代：本机优先的桌面应用，用已有的编程助手生成落地页、仪表盘、幻灯片、图片和视频，导出 HTML / PDF / PPTX / MP4。自带 BYOK，接 20 多种 CLI。 Open-source Claude Design alternative: a local-first desktop app that turns your coding agent into a design engine — prototypes, landing pages, dashboards, decks, images and video, exported as HTML / PDF / PPTX / MP4. BYOK across 20+ CLIs.

+ 精选 + Featured 工具页 Tool 组件 Component

SparkUI：给 AI Agent 用的一次性互动页（URL 即 UI） SparkUI: ephemeral interactive pages for AI agents (UI via URL)

Limeade Labs 开源的 Agent UI 工具：Agent 一次 API / MCP 调用推送结账、计时、投票、审批等模板页，用户点开 URL 互动，结果经 WebSocket 回传，页可自毁。npm `@limeade-labs/sparkui`，宣称 11 模板 / 8 组件 / MIT；演示站公开可开。非 Grok Bot 官方件，接 MCP 以当日客户端为准。 Limeade Labs’ open-source agent UI toolkit: one API / MCP call pushes checkout, timer, poll, approval and other template pages; the user opens a URL, actions stream back over WebSocket, pages can self-destruct. npm `@limeade-labs/sparkui`; site claims 11 templates / 8 components / MIT; public demo. Not an official Grok Bot piece — MCP wiring depends on the client of the day.

agent-ui · mcp

+ 精选 + Featured 工具页 Tool 文档站 Docs

Taste Skill Taste Skill

给编程助手装上设计品味的 Anti-Slop 技能包。13 个 Skill：代码实现（含 soft / minimalist / brutalist）和图像参考稿。先读简报，再映射设计系统，出厂前约 60 项检查。 Anti-slop agent skills that give coding agents design taste. 13 skills: code output (including soft / minimalist / brutalist) and image-gen references. Read the brief first, map a real design system, then a ~60-item ship check.