[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-82478":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":18,"stars30d":19,"stars90d":16,"forks30d":16,"starsTrendScore":20,"compositeScore":21,"rankGlobal":10,"rankLanguage":10,"license":10,"archived":22,"fork":22,"defaultBranch":23,"hasWiki":22,"hasPages":22,"topics":24,"createdAt":10,"pushedAt":10,"updatedAt":25,"readmeContent":26,"aiSummary":27,"trendingCount":16,"starSnapshotCount":16,"syncStatus":28,"lastSyncTime":29,"discoverSource":30},82478,"liquid-dom","AndrewPrifer\u002Fliquid-dom","AndrewPrifer","Liquid Glass for the Web","https:\u002F\u002Fliquid-dom-showcase.vercel.app",null,"TypeScript",2159,100,11,1,0,53,157,192,159,105.01,false,"master",[],"2026-06-12 04:01:38","# Liquid DOM\n\n\u003Cimg width=\"1796\" height=\"780\" alt=\"Liquid DOM Showcase 2026-05-21T20 25 18\" src=\"https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002Fc6283990-8a0e-48f6-865d-ca62f6ecbe49\" \u002F>\n\n\u003Ctable>\n  \u003Ctr>\n    \u003Ctd>\u003Cimg alt=\"Liquid DOM Showcase 2026-05-21T20 35 00@2x\" src=\"https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002Ff94be645-033a-4257-bfcc-eac718b1f16d\" \u002F>\u003C\u002Ftd>\n    \u003Ctd>\u003Cimg alt=\"Liquid DOM Showcase 2026-05-21T20 35 14@2x\" src=\"https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002Fdbdce5f1-1457-4f56-9131-ed97c0a3acea\" \u002F>\u003C\u002Ftd>\n    \u003Ctd>\u003Cimg alt=\"Liquid DOM Showcase 2026-05-21T20 35 32@2x\" src=\"https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002Fdc4dd675-0dc0-4a84-bd7b-331ed951d8ce\" \u002F>\u003C\u002Ftd>\n    \u003Ctd>\u003Cimg alt=\"Liquid DOM Showcase 2026-05-21T20 36 01@2x\" src=\"https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002Fd1b0706e-3279-4946-bd47-e874db9f8a22\" \u002F>\u003C\u002Ftd>\n    \u003Ctd>\u003Cimg alt=\"Liquid DOM Showcase 2026-05-21T20 35 43@2x\" src=\"https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002Fc2ca03b0-607e-478d-a61a-4c4146feb1e1\" \u002F>\u003C\u002Ftd>\n  \u003C\u002Ftr>\n\u003C\u002Ftable>\n\nLiquid DOM is a monorepo for WebGPU liquid-glass rendering, React bindings, Three.js integration, React Three Fiber integration, and the renderer-agnostic layout engine used by the higher-level APIs.\n\nThe packages are split by integration layer. Use the lowest-level package that matches the renderer you own, or the higher-level React packages when you want declarative layout.\n\n## Packages\n\n| Package | Purpose | Use it when |\n| --- | --- | --- |\n| [`@liquid-dom\u002Fcore`](.\u002Fpackages\u002Fcore) | Imperative DOM-backed scene graph, WebGPU renderer, reusable glass core, and layout classes. | You want direct control over the scene graph or you are building an adapter for another renderer. |\n| [`@liquid-dom\u002Freact`](.\u002Fpackages\u002Freact) | React 19 bindings for the layout and glass APIs. | You want to describe glass UI in React and let `LiquidCanvas` own the canvas, or you need a headless scene for another renderer. |\n| [`@liquid-dom\u002Fthree`](.\u002Fpackages\u002Fthree) | Adapter for compositing liquid glass over Three's WebGPU renderer. | You already render a Three WebGPU scene and want liquid glass as a post-composited layer. |\n| [`@liquid-dom\u002Fr3f`](.\u002Fpackages\u002Fr3f) | React Three Fiber bridge built on `@liquid-dom\u002Fthree` and `@liquid-dom\u002Freact`. | You use R3F with Three's WebGPU renderer and want React liquid-glass UI over the scene. |\n| [`@liquid-dom\u002Flayout`](.\u002Fpackages\u002Flayout) | Renderer-agnostic layout engine. | You need SwiftUI-style measurement and placement without any renderer dependency. |\n\n## Package Relationships\n\n`@liquid-dom\u002Flayout` is independent. `@liquid-dom\u002Fcore` uses it for the layout subpath but also exposes a lower-level imperative scene graph and WebGPU renderer. `@liquid-dom\u002Freact` wraps the layout classes from `@liquid-dom\u002Fcore\u002Flayout` in React components. `@liquid-dom\u002Fthree` hosts the reusable WebGPU core inside a Three WebGPU renderer. `@liquid-dom\u002Fr3f` combines the React and Three packages for React Three Fiber.\n\n## Installation\n\nInstall the package that matches your integration target. Package-specific READMEs list the full install command including peer dependencies.\n\n```sh\npnpm add @liquid-dom\u002Fcore\npnpm add @liquid-dom\u002Freact react react-dom\npnpm add @liquid-dom\u002Fthree @liquid-dom\u002Fcore three\npnpm add @liquid-dom\u002Fr3f @liquid-dom\u002Freact @react-three\u002Ffiber react react-dom three\npnpm add @liquid-dom\u002Flayout\n```\n\n## Repository Development\n\n```sh\npnpm install\npnpm -r build\npnpm --filter @liquid-dom\u002Flayout test\npnpm --filter @liquid-dom\u002Fcore test\npnpm --filter @liquid-dom\u002Freact test\n```\n\nUse the package READMEs for package-level build and test commands.\n\n## Browser And Runtime Requirements\n\nThe liquid-glass renderer requires WebGPU. DOM-backed `Html` content also requires the experimental HTML-in-Canvas API, which is currently available only behind Chrome's Canvas Draw Element flag: `chrome:\u002F\u002Fflags\u002F#canvas-draw-element`. The implementation uses `\u003Ccanvas layoutsubtree>` and canvas paint events to copy live DOM content into GPU textures.\n\nThe DOM and React packages can build scene graphs in any browser-like environment, but rendering requires a browser with `navigator.gpu`; rendering DOM-backed content additionally requires the Chrome flag above. Three integrations require Three's WebGPU renderer, not WebGLRenderer.\n\nReference: [WICG HTML-in-Canvas](https:\u002F\u002Fwicg.github.io\u002Fhtml-in-canvas\u002F).\n","Liquid DOM 是一个用于WebGPU液态玻璃渲染的项目，支持React绑定、Three.js集成、React Three Fiber集成以及与渲染器无关的布局引擎。其核心功能包括基于WebGPU的渲染器、可复用的玻璃核心和布局类，能够为Web应用提供流畅且具有现代感的液态玻璃效果。技术上，该项目使用TypeScript编写，并以模块化的方式提供了不同层次的封装，从底层的直接控制到高层的声明式布局，满足多样化的开发需求。适用于需要在Web应用中实现高级视觉效果的场景，如游戏界面、创意网站或任何希望提升用户体验的交互设计。",2,"2026-06-11 04:08:45","high_star"]