Toast Stack
介绍
新通知压在最前，旧通知缩小后退；悬停展开成列表，4 秒自动消失。
纯 HTML、CSS 与少量原生 JS，没有框架依赖。复制提示词交给 Claude Code、Cursor、Trae 或 Codex，模型会把 Toast Stack 加进你的项目并换成你的配色。
适用场景
通知、提示、加载与状态反馈，让用户知道操作有没有成功。
安装
订阅 Builder 后，用 8pt CLI 装进项目，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt add toast-stack
mcp › 使用 8pt MCP 调用 get_component("toast-stack")
代码
Toast Stack 的源码，动效只用 transform 与 opacity，并尊重减少动态效果设置。
<div class="x-toast"> <button class="x-toast__btn" type="button">发送通知</button> <ol class="x-toast__stack" aria-live="polite"></ol> </div>
.x-toast{position:relative;width:100%;height:100%;min-height:220px;display:grid;place-items:center}
.x-toast__btn{border:1px solid var(--d-line,rgba(255,255,255,.12));background:var(--d-card,#101016);color:var(--d-fg,#fff);border-radius:10px;padding:10px 16px;font:600 13px/1 var(--d-font,system-ui,sans-serif);cursor:pointer;transition:transform .2s}
.x-toast__btn:active{transform:scale(.96)}
.x-toast__stack{position:absolute;right:16px;bottom:16px;width:min(280px,calc(100% - 32px));height:64px;margin:0;padding:0;list-style:none}
.x-toast__stack li{position:absolute;inset:auto 0 0 0;display:flex;gap:10px;align-items:center;padding:12px 14px;border-radius:12px;background:var(--d-card,#101016);border:1px solid var(--d-line,rgba(255,255,255,.12));box-shadow:0 12px 30px -12px rgba(0,0,0,.5);color:var(--d-fg,#fff);font:13px/1.35 var(--d-font,system-ui,sans-serif);transition:transform .45s cubic-bezier(.2,.9,.2,1),opacity .35s;will-change:transform}
.x-toast__stack li i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--d-accent,#4D74FF)}
.x-toast__stack li small{display:block;color:var(--d-muted,#a0a0ab);font-size:12px}const init = (root) => {
const stack = root.querySelector('.x-toast__stack');
const msgs = [['已复制提示词', '粘贴到你的编辑器即可'], ['组件已保存', '已加入列表「落地页」'], ['安装完成', 'spotlight-card 已写入项目'], ['主题已切换', '深色']];
let n = 0, hover = false;
const layout = () => {
const items = [...stack.children].reverse();
items.forEach((li, i) => {
const y = hover ? -i * 64 : -i * 10, s = hover ? 1 : 1 - i * 0.05;
li.style.transform = `translateY(${y}px) scale(${s})`; li.style.opacity = i > 2 && !hover ? 0 : 1; li.style.zIndex = 10 - i;
});
};
const push = () => {
…订阅 Builder 查看完整源码。查看价格