XG Experiments
yishan.li来自 X 书签和 GitHub 星标的技术 demo
-
Unfake
把发糊、放大过的像素图收回整齐的 1× 格子，或描成 SVG。台上的四张图是示例数据。
· li.yishan.app/unfake/ -
Fluid Functionalism
用注册表里的按钮、对话框、选择、分页、开关、滑块和消息，当场调节弹簧速度、强调色、接近高亮、表面层级和密度，再复制当前主题。
· li.yishan.app/fluid-functionalism/ -
Base UI
Real Base UI components, retuned live: slide duration, easing, scale origin, radius, shadow and hue, watch every data attribute change, then copy the CSS.
· li.yishan.app/base-ui/ -
INITIĀLIS 装饰首字母
A demo of INITIĀLIS by Azlen Elza (MIT): tune a generative decorated initial with sliders and a live preview, pick from a variation grid, export PNG or settings JSON, and watch it grow into a 有所启发-style article opening whose body text…
· li.yishan.app/initialis/ -
dithercn 抖动引擎
用 dithercn 引擎做的一页抖动效果演示：WebGL 抖动场做首屏，早报风格的柱状图、仪表和山脊图都用抖动填充（全部是示例数据），一张 NASA《地出》照片可以换算法抖动并导出 PNG / SVG，最后是一个可以选预设、拖滑块、直接改 GLSL 的 field playground。跟随系统深浅色和「减少动态效果」，也可以手动整页静止。
· li.yishan.app/dithercn/ -
Agent Status 组件
一组让人看清 AI 助理在做什么的 React 组件：状态胶囊、运行卡片（思考 → 调用工具 → 等待批准 → 完成 / 出错，带用时）、运行时间线和积分用量表（统一额度 vs 分开额度）。点「播放」走一遍完整运行，所有名字和数字都是示例数据。
· li.yishan.app/agent-status/ -
fx0 设计风格对比
同一份产品需求（「Pulse 笔记」定价页），用 fx0 内置的四种 design.md 风格并排渲染，并预览「提示词 → 单文件 HTML」的逐轮版本。全部为预先生成的示例数据，不调用模型。
· li.yishan.app/fx0/ -
我怎么用 Grok Bot
一页 ASCII / 终端风格的分享稿：17 个各管一件事的 bot 的一天时间线、按小组分组的卡片、四条协作流程和设计取舍。纯静态单页，跟随系统深浅色，适合投影。
· li.yishan.app/grok/ -
SeeCode 交互图解
用 SeeCode 把一段 JSON 渲染成可悬停高亮、点击看详情、逐步演示的动画图：xbm 夜间流水线、审批对话时序图、画廊上线甘特图，以及标注「示例数据」的产品流程图和桑基图，跟随系统深浅色。
· li.yishan.app/seecode/ -
ManimGX 讲解动画画廊
官方 ManimGX showcase 场景（二次方程、傅里叶 π、Lorenz 吸引子）GIF 与 Python 源码并排展示，跟随系统深浅色。
· li.yishan.app/manimgx/ -
snapcn 产品演示组件
Remotion 产品演示视频组件（AI 回答流、终端、手机外壳、卡拉 OK 字幕、标题揭示），源码复制自 snapcn 注册表，用 Remotion Player 在浏览器里实时预览，跟随系统深浅色。
· li.yishan.app/snapcn/ -
Focus Mk3, opened up
Four working isometric models of a Ford Focus Mk3 sedan (1.6 Ti-VCT, PowerShift automatic): cam phasers, the DPS6 twin-clutch gearbox, electric power steering and the Control Blade rear axle. Drag, press keys or let each one run its tour.
· li.yishan.app/focus-mk3-anatomy/ -
Open Intelligent UI
智能体不只回一段文字，而是从你的设计系统里挑组件来回答：天气卡、指标图、行程表单、发布清单、套餐对比，都能直接操作。全部为脚本化示例数据，没有接入真实模型。
· li.yishan.app/open-intelligent-ui/ -
ascii.rest
用 ascii.rest 0.4.0（bas3line/ascii，MIT）的动画 ASCII 作品做了三页：217 个作品按 15 个分类的画廊（fps / mono 开关、浅色/深色），一个只用 ascii.rest 作品拼出的“agent fleet terminal”状态页（真实数据：上线 demo、每周 demo 数和合并的 PR 数；0.4 起用 ascii.rest/kit 的 barChart 画「每周上线 demo 数」、typewriter…
更新 · 0.4.0 · li.yishan.app/ascii-rest/ -
Answer me with HTML
用上游 am CLI（QingYunA/answer-me-with-html v0.5.10，MIT）把 8 份短 Markdown 草稿渲染成离线单页 HTML：xbm demo 流程时序图（挑选、审批、构建、开 PR）、Vercel vs Cloudflare Worker 对比表、画廊时间线、上游 TCP 示例、ASD-STE100 页面，以及 v0.5 新功能的两页示例数据：er 需求变更数据模型（改前/变更/改后切换）和「标注」Remark 发回…
更新 · 0.5.10 · 共 2 次 · li.yishan.app/answer-me-with-html/ -
TanStack Charts
A one-page dashboard built with TanStack Charts 1.1 — six responsive SVG charts, including a demo launch timeline with the new brushX date-range brush (start/end dates drawn at the handles), with hover tooltips, keyboard focus and…
更新 · 1.1.0 · li.yishan.app/tanstack-charts/ -
SlideBlocks
A 10-slide Chinese web deck on 「Personal Agent 的发展现状」 in SlideBlocks-style block layouts — title, agenda, comparison, timeline, capability diagram, product grid, metric cards and closing — with keyboard navigation, a slide overview grid…
更新 · upstream 78d5074 · li.yishan.app/slideblocks/ -
Hairline 细线实验室
探索全部 33 个等距交互图形（Hairline 0.5.1），切换 9 类、明暗主题和交互强度；再用 Dicembre → Grok → Muse 的模拟任务体验规划、审阅、执行与交接；「03 Agent 工作流」用 0.5.0 新增的 Relay / Rebuild / Stack / Format / Settle 演示主 agent 把任务交给子 agent（示例数据）；「04 SVG 转线稿」用 0.5.1 新增的 hairline-adopt…
更新 · 0.5.1 · 共 2 次 · li.yishan.app/hairline/ -
pdfcn
A frontend gallery of themed PDF document layouts — invoice, resume, report cover, and receipt — with a block picker and document theme switcher. Built with shadcn/ui and Vite with real A4 PDF export through a small Cloudflare Worker…
· li.yishan.app/pdfcn/ -
Shadcn Admin
A frontend-only showcase of the shadcn-admin dashboard pattern: a collapsible sidebar shell, a KPI and chart dashboard, a TanStack Table task list with faceted filters, sorting and pagination, settings forms, a sign-in page, and…
· li.yishan.app/shadcn-admin/ -
AntV Infographic gallery
A Vite + React showcase of SVG infographic templates powered by the real MIT library @antv/infographic (~200 built-in templates). Pick a curated template, preview the live SVG, and copy the declarative DSL.
· li.yishan.app/antv-infographic/ -
docu.md
Single-page showcase of the docu.md product experience: open sample markdown docs, see a polished live preview with Mermaid diagrams, toggle themes, and export real PDFs (rendered by a small Cloudflare Worker) or standalone HTML —…
· li.yishan.app/docu-md/ -
obsidian-ui
Interactive showcase of 11 signature effects from ObsidianUI by Atharvsinh (@athrix_codes) — an open-source React + Tailwind CSS library of components, blocks and landing-page templates built with Motion, GSAP and WebGL, installable…
更新 · upstream 19c858d (2026-10-31) · li.yishan.app/obsidian-ui/ -
spectrum-ui
Interactive showcase of 12 signature animated components for AI-agent UIs, inspired by Spectrum UI (by Arihant Jain) — an open-source library of 250+ animated React components and blocks built on shadcn/ui, Tailwind CSS and Motion,…
· li.yishan.app/spectrum-ui/ -
transitions-dev
Interactive gallery of 12 essential UI transitions, inspired by the free set on transitions.dev (by Jakub Antalik) — a collection of copy-paste UI transitions for web apps, built to be used by AI coding agents via a skill.
· li.yishan.app/transitions-dev/ -
figures4papers
Single-user showcase: paper-style Without vs With Jev A/B figures from a recorded local-run proxy (not a formal benchmark).
· li.yishan.app/figures4papers/
