RageLayer
摘要
RageLayer 是一个开源的网页彩蛋库，让访客用锤子、火、链锯等 15 种工具「砸碎」真实页面，产生物理碎片效果，再由扫帚恢复原状；支持 React、Vue、Svelte 和原生 HTML，MIT 协议、TypeScript 编写、零运行时依赖。
<p>
让访客砸碎你的网站，再把碎片扫回原样
</p>
<p>
<a href="https://www.producthunt.com/products/ragelayer?utm_campaign=producthunt-atom-posts-feed&utm_medium=rss-feed&utm_source=producthunt-atom-posts-feed">讨论</a>
|
<a href="https://www.producthunt.com/r/p/1269166?app_id=339">链接</a>
</p>
查看缓存全文
缓存时间: 2026/10/28 08:20
# RageLayer：让访客砸烂你的网站，再一键扫回原样 | Product Hunt
来源：https://www.producthunt.com/products/ragelayer
RageLayer 是一个藏在你自己网站里的彩蛋。访客可以选择锤子、火焰、电锯或黑洞等工具，对真实页面大肆破坏：文字和卡片会碎裂成物理碎片，各种特效还能相互作用（水可以灭火），然后一把扫帚把一切恢复原样。内置 15 种工具。兼容 React、Vue、Svelte 以及原生 HTML。免费开源，MIT 协议，使用 TypeScript 编写，零运行时依赖，并提供 SDK 用于自定义工具。先去玩玩在线演示吧。
相似文章
@GitHub_Daily: 看到一个好看的网站想照着做，光提取配色、字体、间距就得翻半天 CSS。 SkillUI 给它一个网址，能把整套设计系统自动扒下来。 配色、字体、间距、动画、组件截图，打包成 Claude Code 能直接读的 Skill。 GitHub：…
SkillUI 是一个命令行工具，可以从任意网站提取完整的设计系统，包括配色、字体、间距、动画和组件截图，并打包成 Claude Code 可直接读取的格式，帮助快速复刻网站的视觉风格。
Layers
Layers 是一款免费工具，允许用户创建漂亮的动画代码片段视频。
@servasyy_ai: 爽了！打死我都不敢信，居然有人把这种东西全开源了！！！ 244 种顶级游戏像素特效，爆炸、闪电、火焰、冰冻、传送门、魔法阵、大招连击…… 别人在素材站打包卖几百几千块的东西，这老哥倒好，直接 MIT 协议一锅端全免费开源了，随便商用 关键…
pixelfx 以 MIT 协议开源了 244 种纯代码实时生成的游戏像素特效，零图片素材，支持网页预览与导出 Sprite Sheet，并附带一套让 Claude Code 自动迭代特效的 Skill。
@VincentLogic: 以前做前端，为了个加载动画，要么到处找 GIF，要么自己写 CSS 写到头秃。 最近看到这个 math-curve-loaders 开源库，完全是用数学公式生成的动效。 我看了一下，玫瑰曲线、李萨如曲线这些数学图形，动效极其优雅。纯 HT…
介绍了一个名为 math-curve-loaders 的开源前端库，利用数学公式（如玫瑰曲线、李萨如曲线）生成优雅的加载动画，纯 HTML+CSS 实现，零依赖，并带有可视化调试面板，可以实时调整参数并一键复制代码。
@10xmylife: 这个网站很棒，各种动画效果都有了，还是开源的
介绍 Amicro，一个开源的 React 微交互和过渡组件库，可通过 CLI 添加漂亮的动画效果。