什么值得做
GitHub 开源项目 · 11-6 写
0kzh/glisse · 0kzh

一条 19 秒的视频,把一个「烂大街」的题材做出 400 star:Glisse 和它的 Liquid Glass 控件

它是什么 一个免费的 React 组件库,装上就能在网页里用和 iPhone 一模一样的 Liquid Glass 按钮、开关、滑块、标签栏。

为什么火了 同类大多只给一块玻璃,它给的是一整套手感也对的控件;作者一条 19 秒演示帖 10.5 万浏览、1,500 收藏,11 月初又被 Instagram 搬运号和 CodePen 带出第二波。

B你可以怎么跟 按同样的还原度标准做 Vue 或 Svelte 版、或补齐它没有的 Sheet/Alert/导航栏,配一条只拍手感的短录屏发 X 和 Instagram。

B 级:打法清楚、换生态和补控件都还空着;但 Liquid Glass 已热了一年半,这类项目 star 天花板不高,作者也可能自己补上。 小圈子里在传
数据(每天更新) · 建库 2026-10-23 · 436 星 · 7 天 +300
GitHub · 星数
020040010-2810-3111-0311-0511-08436
数据 2026-10-28 → 2026-11-08(12 天,12 次观测)。10-28 以前的点来自 deeply / 存档补录,不是每天都有

纽约一位设计师兼工程师用两周时间,把 iOS 26 的 Liquid Glass 整套控件搬到了网页上。这个题材网上早就有一堆仓库,最大的一个一年前就有 6,600 star。他靠的是「更像」:每个参数都对着 iOS 模拟器量出来。下面讲它为什么能在拥挤的题材里冒头、star 从哪来,以及你想拿到同样的 star,该从哪下手。

一条 19 秒的视频

2026 年 10 月 26 日下午,Kelvin Zhang(X 上叫 @kelvinzhg)发了一条帖子,正文只有一句「Introducing Glisse - iOS 26 Liquid Glass for the web」,配一段 19 秒的录屏:网页上一排按钮、开关、滑块、底部标签栏,看起来和 iPhone 上的一模一样,拖动背景,玻璃会把后面的光掰弯。

这条帖子到 11-06 有 10.5 万次浏览、约 1,700 个赞、1,500 次收藏。收藏数和点赞数差不多,在开发者圈子里,这一般意味着「先存起来,以后项目里用」。

仓库 0kzh/glisse 是 10-23 建的,三天后发帖。作者的 GitHub 只有 189 个关注者,之前做过两个一两百 star 的小项目(minimal-youtube、minicraft),算不上有粉丝基础。

它到底是什么

一个 React 组件库,npm install glisse 就能用,样式跟着组件一起装进来,不用另外引 CSS。里面是一整套 iOS 26 控件:Button、TabBar、Switch、Slider、SegmentedControl、Menu、Input。MIT 协议,免费。

技术上它不用 WebGL,只用 SVG 滤镜加 CSS。Safari 和 Firefox 不支持把 SVG 滤镜用在背景模糊上,它就复制一份背景自己做折射,保证三个浏览器看起来都差不多。

凭什么在一堆同类里冒出来

Liquid Glass 从 2025 年 WWDC 起就是设计圈最热的视觉语言,网页版的仓库 2025 年 6 月就冒出来一批,下面是做同一件事的几家:

项目上线规模和 Glisse 的区别
rdev/liquid-glass-react2025-066,621 star,npm 周下载约 3.7 万只给一个玻璃容器,没有成套控件
AndrewPrifer/liquid-dom2026-042,581 star偏底层的效果引擎
dashersw/liquid-glass-js2025-061,700 star纯 JS 效果
shuding/liquid-glass2025-061,225 star一段可复制的 shader 演示
liquidGL / liquid-glass-studio2025-061,046 / 811 starWebGL/WebGPU,重,偏演示
callstack/liquid-glass2025-091,726 star,周下载约 21.5 万React Native,不是网页
Glassy UI、Tactile Glass UI 等2026-10很小和它同期冒出来,手感一般

(GitHub 与 npm,11-06)

别人做的大多是「一块玻璃」,Glisse 做的是「一整套能直接用的 iOS 控件,而且手感也对」。作者的提交记录里写满了这种话:「measured in the simulator at 3x」(在模拟器 3 倍分辨率下量的)、「red bends a fifth further than blue」(红光比蓝光多弯五分之一)。按钮按下去放大 15 像素再回弹;开关和滑块的拇指一按住就「抬起来变成一块透镜」;标签栏透镜边缘有 2–3 像素的色散;边缘高光在 1.2 像素内消失。这些细节在 19 秒视频里一眼就看得出来,就是那 1,500 次收藏的理由。

10-24 到 10-29,他发了 9 个版本(0.1.0 到 0.5.0)。提交里能看到 Devin 的机器人 PR,作者在用 AI 辅助写代码推断。

不是没人挑刺。帖子底下点赞最多的评论是「doesn't feel or look the same as actual liquid glass. had my hopes up..」(和真的 Liquid Glass 感觉不一样,白期待了,39 赞),另一条是「animations are smooth, but still not glass enough」(动画顺,但还不够玻璃)。挑刺的人在意的也是「像不像」,这正是它在比的东西。

star 从哪来:两波

GitHub 上的数字(每日 star,10-28 起):

日期star当天新增
10-28100—
10-29121+21
10-30 到 11-03127 → 143每天 +2 到 +7
11-04191+48
11-05312+121
11-06385+73

第一波是作者自己那条 X 帖子,10-26 到 10-28 带来大约 100 个 star。之后 VentureDex、What Ships、几个 React 组件导航站陆续收录;Threads 上有个中文号 10-28 做了转述,帖子里还留着模板占位句「这里补你自己的一句」,是批量搬运号。

第二波在 11-04、11-05,来源没有完全查清。时间对得上的有三件事:

  • 11-02,CodePen 官方账号拿 Glisse 的网址演示自家 AI 功能,约 2,900 次浏览,量不大。
  • 11-03,Instagram 上的 Louis Raillé(@louis_rlee)发了一条 Reel,开头一句「This isn't iOS. It's a website.」,文案把卖点列成五条:「拖动壁纸,玻璃会把后面的光掰弯」「按住滑块或开关,它会抬起来变成透镜」「全是 React 组件」「不用 WebGL,只用 SVG 滤镜和 CSS」「免费,MIT」,最后一句是「Comment LIQUID and I'll DM you the link + my starter kit」(评论 LIQUID,我私信你链接和我的入门资料包)。这是 Instagram 上很常见的打法:拿别人做得好看的免费项目当素材,用「评论领资料」攒私信名单。
  • 11-03 前后,X 正式换上 Liquid Glass 风格(taisy0.com 11-03 报道),「网页也想要这个效果」的人又多了一批推断,没找到直接证据把流量连到 Glisse。

可能还有没搜到的大号转发。HN、Reddit、Product Hunt 上都没找到它的帖子。

npm 下载比 star 涨得早、也更稳:10-24 首日 818 次,11-04 涨到 3,461 次,10-30 到 11-05 一周共 14,296 次(npm,里面可能有镜像和 CI 的噪声,未核实)。有人真在装,还有下游项目开了 issue 评估要不要用它做工具栏。

它没做的部分

  • 只有 React。Vue 有一个小的 glassy-liquid,Svelte、Solid、原生 Web Components 都没有成套、手感对的版本。
  • 只有 iOS 的一部分控件。没有 Sheet、Alert、导航栏、列表、日期选择这些 App 里最常见的东西。
  • 没有设计稿。没有 Figma 组件、没有整页模板,设计师拿不到。
  • 更新停了。最后一次提交是 10-30,之后一周没有动静。
  • 有人觉得不够像。上面那两条评论说明,「像」这件事还有上升空间。

如果是你

判断:B。可以试。它证明的东西很清楚:在一个被做烂的视觉题材里,「最像原版、拿来就能用」加一段能看出细节的短视频,一条帖子就能起来。但这个题材的 star 天花板不高,它两周 400 star,领头的做了一年才 6,600;Liquid Glass 也已经热了一年半,新鲜感在往下走。

适合谁:自己就是设计师兼前端、对动效和像素有洁癖、手里有一台 Mac 能开 iOS 模拟器对着量的人;在 X 或 Instagram 上能发出一条好看录屏的人。

不适合谁:只想换个框架把代码翻译一遍、不在乎手感的人(那就是第十个「一块玻璃」,没人收藏);没有任何发帖渠道、指望 GitHub 自然流量的人(它建库不满 60 天进不了 trending,star 全是帖子带来的)。

怎么做,三选一,按值得程度排:

  1. 换生态:做 Vue 或 Svelte 版的整套 Liquid Glass 控件,还原度对齐 Glisse 的标准,在 README 和提交里同样写清「在模拟器里量出来的参数」。Vue 那边现在只有一个小项目。
  2. 补它没做的控件:Sheet、Alert、导航栏、列表这些,可以直接给 Glisse 提 PR 攒名声,也可以单独做成「Liquid Glass 整页模板」。
  3. 换一门设计语言,照着同样的方法做:下一个被大厂推出来、网页拿不到原生 API 的视觉风格(比如苹果下一代系统的新风格,或 visionOS 那种空间质感),谁先做出「最像的那一个」,谁拿这一波 star。

怎么获客:一条 20 秒以内的竖屏录屏,只拍手感:按下去、拖一下、按住变透镜,第一句话就写「这不是 App,是网页」。先发 X,再把同一段视频给 Instagram、TikTok 上做前端和设计内容的号——他们正缺这种素材,会自己来搬。做好一个能在线玩的演示站,别只放 GitHub 链接。

什么时候之前:越早越好,最好 2027 年 1 月前。Liquid Glass 热了一年半,等苹果明年 6 月 WWDC 换新风格,这个题材的关注会掉一截推断。

什么情况说明看错了:① Glisse 作者自己在一两个月内出了 Vue/Svelte 版或补齐了控件——第一、二条路就被堵上了;② 11 月以后 Glisse 每天新增 star 回到个位数,而且 rdev/liquid-glass-react 也不再涨——说明网页 Liquid Glass 这波已经过去;③ 反过来,如果出现一个新的同题材仓库靠一条视频两周拿到 1,000 star 以上,说明天花板比这里估的高,要更快动手。

数据与出处

GitHub:0kzh/glisse 仓库页、提交记录与每日 star(10-28 到 11-06);同类仓库的 star 数(11-06)。npm:glisse 及同类包的下载数(api.npmjs.org,截至 11-05)。X:@kelvinzhg 10-26 发布帖及评论、@CodePen 11-02 帖。Instagram:@louis_rlee 11-03 Reel。聚合站:VentureDex、What Ships、verso.haotrr.com、reactlibraryhub。X 换装报道:taisy0.com 2026-11-03。写「推断」「未核实」的地方是推断和未核实。

GitHub 仓库 ↗

研究底稿:竞品表、获客证据、完整研究报告
竞品
名字在哪上线规模它和这家不同在哪
rdev/liquid-glass-react开源2025-06-106,621 star;npm 周下载约 3.7 万只有一个玻璃包裹容器,没有整套 iOS 控件和按压/透镜交互
AndrewPrifer/liquid-dom开源2026-04-182,581 star;@liquid-dom/react 周下载约 860偏底层效果引擎;Glisse 是成品控件
shuding/liquid-glass开源2025-06-111,225 star可复制的 SVG shader demo,不是组件库
dashersw/liquid-glass-js开源2025-06-111,700 star;npm 周下载约 480纯 JS 效果,不做 iOS 控件
naughtyduk/liquidGL / iyinchao/liquid-glass-studio开源2025-061,046 / 811 starWebGL/WebGPU 渲染,重、偏演示;Glisse 只用 SVG 滤镜 + CSS 并有 Safari/Firefox 降级
ybouane/liquidglass开源2026-04-04601 star效果库,无控件
callstack/liquid-glass开源2025-09-021,726 star;npm 周下载约 21.5 万React Native 原生桥接,不是网页
Glassy UI / Tactile Glass UI网页2026-10-20 / 2026-10-26小(LinkedIn 自发帖)同期同题材,还原度与交互手感宣传弱;Tactile 用 WebGL2
Apple .glassEffect() / expo-glass-effect大厂功能iOS 26 起系统级只在原生 App,网页拿不到——正是 Glisse 的空档
用户从哪来
  • 查实 作者 X 发布帖 + 演示视频:2026-10-26 @kelvinzhg 发布帖 105.3K 浏览、约 1.7K 赞、1.5K 收藏;之后 npm 下载抬升
  • 查实 Instagram 达人「评论领资料」搬运:2026-11-03 Louis Raillé Reel「This isn't iOS. It's a website」,文案引导评论 LIQUID 私信领 starter kit;时间对上 11-04/05 star 峰值
  • 查实 CodePen 官方账号示例:2026-11-02 @CodePen 用 glisse 演示其 AI agent,约 2.9K 浏览,FB/IG 同步
  • 查实 聚合站与搬运号:VentureDex(10-26)、What Ships、reactlibraryhub、haotrr verso(10-28)、Threads @dingyi 中文转述(留有模板占位句)
  • 查实 YouTube 小博主:Sadra Majidi 教程视频约 190 浏览
  • 推断 平台事件:X 等大 App 11 月初换 Liquid Glass:taisy0.com 2026-11-03 报道 X 铺开 Liquid Glass;与峰值同期,但无直接引流证据
  • 推断 HN / Reddit / 广告 / Product Hunt:我们的 hackernews 库无相关帖;搜索未见 Reddit 专帖或广告

0kzh/glisse:iOS 26 Liquid Glass for the web

研究日期 2026-11-06。仓库 github.com/0kzh/glisse ,站点 glisse.kelvinzhang.ca (也用 .com),npm 包 glisse,MIT。

一句话结论

Glisse 是一位「设计师兼工程师」(Kelvin Zhang,纽约,X @kelvinzhg)两周内做出的 React 版 Liquid Glass 组件库。它跑出来,主要靠产品本身的手艺:按 iOS 26.1 模拟器 3x 截图逐像素对齐按压弹簧、镜头折射、色散、边缘高光,并且给出能直接 npm install 用的整套控件(Button / TabBar / Switch / Slider / SegmentedControl / Menu / Input),再加一条 20 秒的演示视频在 X 上爆了(10.5 万次浏览)。11 月初又有 Instagram 搬运号、CodePen 官方账号拿它当示例,带来第二波。热度来自 Liquid Glass 这个已经被做烂的题材里「最像真的那一个」,不是来自新题材。

1. 数据

  • GitHub(我们的 github 库 repo_day / 数据卡):2026-10-23 建库;10-28 已有 100 star,10-28 到 11-03 每天只涨 3–20;11-04 涨 48、11-05 涨 121、11-06 涨 73,到 385(11-06 用 API 查已到 402),fork 18。建库不满 60 天,没进 trending。
  • 作者其他仓库:minimal-youtube 183、minicraft 117,有做爆小项目的前科,但粉丝基础很小(GitHub followers 189)。
  • npm 下载(api.npmjs.org):10-24 发 0.1.0;日下载 10-24 818 → 10-30 1,727 → 11-04 3,461 → 11-05 2,630;近 7 天(10-30~11-05)14,296。下载量明显比 star 涨得早、涨得稳,说明有人真在装(里面可能有镜像/CI 噪声,未核实)。
  • 发版节奏:10-24 到 10-29 发了 0.1.0 → 0.5.0 共 9 个版本;commit 说明写得极细(「measured in the simulator at 3x」「red bends a fifth further than blue」),看得出是追求还原度的作者。外部 PR 3 个(onlymoein),另有 devin-ai-integration bot 的 PR——作者在用 Devin 辅助开发。

2. 竞品(做同一件事的)

名称在哪上线规模和 Glisse 的不同
rdev/liquid-glass-react开源/npm2025-06-106,621 star;npm 周下载约 3.7 万只给一个 <LiquidGlass> 包裹容器,没有整套 iOS 控件和交互手感
AndrewPrifer/liquid-dom开源/npm2026-04-182,581 star;@liquid-dom/react 周下载约 860也是「Liquid Glass for the Web」,偏底层效果引擎;Glisse 是成品控件
shuding/liquid-glass开源2025-06-111,225 star一段可复制的 SVG shader demo,不是组件库
dashersw/liquid-glass-js开源/npm2025-06-111,700 star;周下载约 480纯 JS 效果库
naughtyduk/liquidGL、iyinchao/liquid-glass-studio开源2025-061,046 / 811 starWebGL/WebGPU 渲染,重、偏演示;Glisse 只用 SVG 滤镜 + CSS
ybouane/liquidglass开源2026-04-04601 star效果库,无 iOS 控件
callstack/liquid-glass开源(React Native)2025-09-021,726 star;周下载约 21.5 万RN 原生桥接,不是网页
Glassy UI、Tactile Glass UI、glassy-liquid(Vue)网页/开源2026-10-20、10-26、约 10 月中小,LinkedIn/Reddit 自发帖同期冒出来的同类,手感和还原度宣传弱;Tactile 用 WebGL2
Apple 原生 .glassEffect() / expo-glass-effect大厂功能iOS 26 起—只在原生 App 里,网页拿不到,这正是 Glisse 的空档

结论:竞品很多,而且早一年就有 6 千 star 级别的库。Glisse 不是第一个,也不是最大的。

3. 增长:用户从哪儿来

  1. 作者 X 发布帖(已确认,主引擎):2026-10-26 @kelvinzhg「Introducing Glisse - iOS 26 Liquid Glass for the web」配 20 秒演示视频,105.3K 浏览、约 1.7K 赞、1.5K 收藏(r.jina.ai 读 x.com/kelvinzhg/status/2114756680047321369)。收藏数接近点赞数,是典型的「开发者先存起来以后用」。评论里也有质疑「doesn't feel or look the same as actual liquid glass」(@wojsacewicz,39 赞)。这条帖子之后 npm 下载开始抬升;star 在 10-26~10-28 涨到 100 左右。
  2. 聚合站 / 搬运号(已确认):VentureDex 10-26 收录发布视频;What Ships 收录发布片;reactlibraryhub、olio.my 收录 npm 包;haotrr verso 10-28 收录;Threads 中文号 @dingyi 10-28 转述(帖子里留着模板占位句「这里补你自己的一句」,是批量搬运)。
  3. Instagram 达人 + 「评论领资料」漏斗(已确认,时间对得上第二波):2026-11-03 Louis Raillé(@louis_rlee)发 Reel「This isn't iOS. It's a website.」,文案末尾「Comment LIQUID and I'll DM you the link + my starter kit」。这是 IG 上常见的用别人开源项目做私信引流、卖/攒自己资料包的打法。另有一条 Instagram 帖(DfXPc2CDQ5v)用同样文案。
  4. CodePen 官方(已确认,量小):2026-11-02 @CodePen 发帖用 glisse.kelvinzhang.com 演示其 AI agent 能读 URL 并据此生成作品,约 2.9K 浏览;CodePen 的 Facebook/Instagram 也同步发了。
  5. YouTube(已确认,量小):Sadra Majidi「Free iOS 26 Liquid Glass for Your Website (Open Source, React)」,约 190 浏览(10 月底)。
  6. 下游项目采用(已确认,信号):cameronapak/dotflowy 开 issue「Evaluate Glisse for bounded liquid-glass toolbar adoption」;CrystalPlatforms/wspolniak 开了 Liquid Glass UI 的 PRD/提案 issue;GitDiagram 生成了架构图页。
  7. 平台事件(推测):2026-11-03 前后 X 正式铺开 Liquid Glass 设计支持(taisy0.com 11-03 报道),TikTok、YouTube 也在换 Liquid Glass 风格(TikTok 上大量相关视频),「网页也要做 Liquid Glass」的需求被再次点燃。时间和 11-04~05 的 star 峰值吻合,但没有直接证据把流量连到 Glisse。
  8. 没查到:HN(我们的 hackernews 库里没有 Glisse 帖子)、Reddit 专帖、广告、Product Hunt。我们的 X 本地语料也没收录相关帖子(不在跟踪圈子)。

11-04~05 star 峰值的确切来源没有定论:GitHub stargazers 接口这次查不到时间戳;已知的 11-02 CodePen、11-03 Instagram Reel 都只能部分解释,可能还有没被搜索到的 X 大号转发或 TikTok/IG 搬运。

4. 凭什么起来

  • 题材有持续需求、网页端一直没有好用的成品:Liquid Glass 从 2025 WWDC 起是设计圈最热的视觉语言,2026 年 iOS 27 继续、X/TikTok/YouTube 等大 App 陆续换装,网页设计师和独立开发者想要「同款」但苹果只给原生 API。
  • 还原度和交互手感是卖点:commit 里大量「在模拟器 3x 下量出来」的参数——按钮按压放大 15px 后回弹、Switch/Slider 拇指按住后「抬起成透镜」、TabBar 透镜的 RGB 色散 2–3px、边缘高光 1.2px 内消失。这些在 20 秒视频里一眼能看出来,是 X 帖子被大量收藏的原因。
  • 能直接用:npm install glisse,样式自动注入(仿 Sonner),Safari/Firefox 不支持 SVG 滤镜作用于 backdrop 时用 data-glisse-backdrop 复制背景折射,保证跨浏览器都能看;不用 WebGL。
  • 作者有设计 + 工程双背景:个人站自称「designer and engineer focused on building high-craft」;以前也做出过 100+ star 的小项目。

5. 差异化

和同类比,Glisse 的不同在于:它是一整套 iOS 26 控件(不是一个玻璃容器或一段 shader),而且把交互动效也按 iOS 实测参数复刻;技术上只用 SVG 滤镜 + CSS,不用 WebGL,跨浏览器有降级方案。 这个差异化就是它跑出来的原因——演示视频里能看到的正是「按住会变成透镜」「色散」「弹簧」这些别家没有的细节。但它也有天花板:评论里有人说不像真的;star 规模(约 400)远低于 rdev/liquid-glass-react(6.6K)。

6. 能见度与跟风

  • 能见度:小圈子里在传。作者 X 帖 10 万浏览,加上 IG 达人、CodePen 官方、几个聚合站;没有媒体报道、没上 HN 首页、没有 trending。开源免费,没有收入可公开。
  • 跟风者:没有直接仿 Glisse 的仓库;但已经有人拿它做二次分发——Instagram 达人用「评论 LIQUID 领 starter kit」引流;同期还冒出 Glassy UI、Tactile Glass UI 等同题材库(更像是同时在做,不是在抄它)。

7. 别人能借鉴的

  • 在一个已经被做烂的热门视觉题材里,用「实测对齐原版」的还原度打穿,配一个 20 秒、能看出细节的视频,一条 X 帖子就能冷启动。
  • commit/文档里写清「按模拟器量出来的参数」,本身就是可信度的营销。
  • 对 IG/TikTok 的「评论领资料」搬运号,做得好看的免费开源组件就是他们的弹药,作者什么都不用做就能拿到二次传播。
  • 机会点:付费的 Pro 组件 / Figma 套件 / 「Liquid Glass 网页模板」目前没人做成规模;Glisse 本身没有变现。

8. 不确定的

  • 11-04~05 star 峰值的具体来源(没拿到 stargazer 时间戳,也没找到 11-04 当天的大号帖)。
  • npm 每周 1.4 万下载里真实用户占多少。
  • 作者 X 粉丝数、是否有后续变现打算(未核实)。
  • 是否会长期维护:最后一次 push 是 10-30,之后一周没有新 commit。

出处

文章由 AI 根据公开数据和我们每天采集的数据写成,数字带出处,推断已标明