Glass Folder
介绍
毛玻璃质感的文件夹图标，正面印着内容类型，底下标出项目数与大小。悬停时文件夹上浮、里面的纸张探出头；空闲时三个文件夹轮流“呼吸”。
拆自整页模板 Nook Mac 应用官网，可以单独使用，也能和同一模板拆出的其他组件拼回整页。
纯 HTML、CSS 与少量原生 JS，没有框架依赖。复制提示词交给 Claude Code、Cursor、Trae 或 Codex，模型会把 Glass Folder 加进你的项目并换成你的配色。
适用场景
功能介绍、案例与作品、团队成员、文章列表等需要把信息成组展示的区块。
安装
订阅 Builder 后，用 8pt CLI 装进项目，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt add glass-folder
mcp › 使用 8pt MCP 调用 get_component("glass-folder")
代码
Glass Folder 的源码，动效只用 transform 与 opacity，并尊重减少动态效果设置。
<div class="x-gfo"><div class="x-gfo__in" style="width:420px;height:170px">
<div class="x-gfo__f" tabindex="0" style="--h:#3D5BF0">
<div class="x-gfo__i"><svg class="x-gfo__bk" viewBox="0 0 100 80" aria-hidden="true"><path d="M4 10a7 7 0 0 1 7-7h25l8 8h45a7 7 0 0 1 7 7v54a7 7 0 0 1-7 7H11a7 7 0 0 1-7-7z"/></svg><i class="x-gfo__pp"></i><i class="x-gfo__pp"></i>
<span class="x-gfo__gl"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M8 8l-4 4 4 4M16 8l4 4-4 4M13.5 5l-3 14"/></svg></span></div>
<b>mobile_dev</b><small>1,318 项 · 2.1 GB</small>
</div>
<div class="x-gfo__f" tabindex="0" style="--h:#CC528A">
<div class="x-gfo__i"><svg class="x-gfo__bk" viewBox="0 0 100 80" aria-hidden="true"><path d="M4 10a7 7 0 0 1 7-7h25l8 8h45a7 7 0 0 1 7 7v54a7 7 0 0 1-7 7H11a7 7 0 0 1-7-7z"/></svg><i class="x-gfo__pp"></i><i class="x-gfo__pp"></i>
<span class="x-gfo__gl"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 20l4-1 11-11-3-3L5 16z"/></svg></span></div>
<b>设计稿</b><small>92 项 · 712 MB</small>
</div>
<div class="x-gfo__f" tabindex="0" style="--h:#E08A1E">
….x-gfo{position:relative;flex:none}
.x-gfo__in{position:absolute;left:0;top:0;transform-origin:0 0;display:flex;justify-content:center;align-items:flex-end;gap:24px;color:var(--d-fg,#fff);font-family:var(--d-font,system-ui,sans-serif)}
.x-gfo__f{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;padding:8px;border-radius:14px;text-align:center;cursor:default;outline:0}
.x-gfo__f:focus-visible{box-shadow:0 0 0 2px var(--d-accent,#4D74FF)}
.x-gfo__f b{margin-top:6px;font-size:13.5px;font-weight:600;white-space:nowrap}
.x-gfo__f small{font-size:11.5px;color:var(--d-muted,#9b9ba8);white-space:nowrap}
.x-gfo__i{position:relative;width:96px;height:80px;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.x-gfo__bk{position:absolute;inset:0;width:100%;height:100%}
.x-gfo__bk path{fill:color-mix(in srgb,var(--h) 78%,#000)}
.x-gfo__pp{position:absolute;left:16px;right:16px;top:16px;height:44px;border-radius:5px;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.15);transition:transform .45s cubic-bezier(.16,1,.3,1)}
.x-gfo__pp::before{content:"";position:absolute;left:9px;right:16px;top:9px;height:4px;border-radius:2px;background:#E3E5F0;box-shadow:0 9px 0 #E9EBF4,0 18px 0 #EEF0F7}
.x-gfo__pp+.x-gfo__pp{left:20px;right:12px;top:20px}
…const init = (root) => {
const fit = (box, W, H) => {
const inner = box.firstElementChild;
const run = () => {
const cs = getComputedStyle(root);
const aw = root.clientWidth - parseFloat(cs.paddingLeft) - parseFloat(cs.paddingRight);
const ah = root.clientHeight - parseFloat(cs.paddingTop) - parseFloat(cs.paddingBottom);
if (aw <= 0 || ah <= 0) return;
const s = Math.max(0.2, Math.min(aw / W, ah / H, 1));
box.style.width = W * s + 'px'; box.style.height = H * s + 'px'; inner.style.transform = `scale(${s})`;
};
const ro = new ResizeObserver(run); ro.observe(root); run();
…订阅 Builder 查看完整源码。查看价格