Glass Folder
Frosted-glass folder icons with the content type printed on the front and item count and size below. On hover the folder lifts and the papers inside peek out; when idle the three folders take turns breathing.
Taken from the page template Nook Mac App Website. Use it on its own, or combine it with the other components from the same template to rebuild the full page.
Plain HTML, CSS and a little vanilla JS, with no framework dependency. Copy the prompt into Claude Code, Cursor, Trae or Codex and the model adds Glass Folder to your project in your colors.
Where to use it
Sections that present information in groups: features, case studies and work, team members, article lists.
Install
With Builder, install it with the 8pt CLI or call it directly from an editor connected to 8pt MCP.
Code
Source for Glass Folder. Motion uses only transform and opacity and respects the Reduce motion setting.
<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 items · 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>Design file</b><small>92 items · 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();
…