{"allowContribute":false,"item":{"aiFolderID":null,"artifactHtml":"\u003cstyle\u003e\n:root{\n --paper:#f7fbfc;\n --paper-2:#eef6f8;\n --ink:#0b1e2a;\n --ink-2:#5a7586;\n --accent:#00a9c8;\n --accent-strong:#00d0ff;\n --soft:#e6f4f8;\n --hair:#d2e6ec;\n --card:#ffffff;\n --ok:#0a7a5c;\n --warn:#8a6d00;\n --shadow:0 10px 30px rgba(11,30,42,.07), 0 1px 0 rgba(11,30,42,.06);\n --radius-card:16px;\n --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, \"Cascadia Mono\", monospace;\n --sans: \"Inter\", system-ui, -apple-system, Segoe UI, Roboto, \"Helvetica Neue\", Arial, sans-serif;\n --display: \"Orbitron\", ui-monospace, SFMono-Regular, Menlo, monospace;\n}\n:root[data-theme=\"dark\"]{\n --paper:#050c14;\n --paper-2:#081a26;\n --ink:#e6faff;\n --ink-2:#8ab6c6;\n --accent:#00eaff;\n --accent-strong:#00eaff;\n --soft:#0a1e2e;\n --hair:#143040;\n --card:#0d2133;\n --shadow:0 16px 40px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.06);\n}\n*{box-sizing:border-box}\n.wrap{\n background:var(--paper);\n color:var(--ink);\n font-family:var(--sans);\n line-height:1.6;\n padding:28px 18px 40px;\n border:1px solid var(--hair);\n border-radius:20px;\n max-width:980px;\n margin:0 auto;\n}\na{color:var(--accent);text-decoration:none;word-break:break-all}\na:hover{text-decoration:underline}\nheader{\n padding:18px 20px 18px;\n background:linear-gradient(180deg, var(--card) 0%, var(--paper-2) 100%);\n border:1px solid var(--hair);\n border-radius:var(--radius-card);\n box-shadow:var(--shadow);\n position:relative;\n overflow:hidden;\n}\nheader::before{\n content:\"\";\n position:absolute;inset:0 0 auto 0;height:3px;\n background:linear-gradient(90deg, var(--accent) 0%, #7af0ff 50%, transparent 100%);\n opacity:.9;\n}\n.eyebrow{\n font-family:var(--mono);\n font-size:11px;\n letter-spacing:.22em;\n text-transform:uppercase;\n color:var(--accent);\n font-weight:700;\n display:flex;align-items:center;gap:8px;\n}\n.eyebrow::before{\n content:\"\";width:8px;height:8px;border-radius:50%;\n background:var(--accent);box-shadow:0 0 10px var(--accent);\n display:inline-block;\n}\nh1{\n font-family:var(--display);\n font-weight:900;\n letter-spacing:.12em;\n font-size:clamp(28px,5vw,42px);\n margin:10px 0 8px;\n line-height:1.1;\n color:var(--ink);\n}\n.lede{\n font-size:14px;\n color:var(--ink-2);\n max-width:72ch;\n margin:0;\n letter-spacing:.02em;\n}\n.lede strong{color:var(--ink);font-weight:600}\nsection[data-cube=\"stats\"]{\n display:grid;\n grid-template-columns:repeat(4,1fr);\n gap:12px;\n margin:16px 0 18px;\n}\n.stat{\n background:var(--card);\n border:1px solid var(--hair);\n border-radius:14px;\n padding:14px 14px 12px;\n box-shadow:var(--shadow);\n position:relative;\n overflow:hidden;\n}\n.stat::after{\n content:\"\";position:absolute;left:0;right:0;bottom:0;height:2px;\n background:linear-gradient(90deg, var(--accent), transparent);\n opacity:.6;\n}\n.stat .label{\n font-family:var(--mono);\n font-size:10px;\n letter-spacing:.18em;\n text-transform:uppercase;\n color:var(--ink-2);\n margin-bottom:6px;\n}\n.stat .value{\n font-family:var(--display);\n font-size:22px;\n font-weight:800;\n letter-spacing:.06em;\n color:var(--ink);\n line-height:1;\n}\n.stat .note{\n font-size:11px;\n color:var(--ink-2);\n margin-top:6px;\n letter-spacing:.02em;\n}\n.card{\n background:var(--card);\n border:1px solid var(--hair);\n border-radius:var(--radius-card);\n box-shadow:var(--shadow);\n padding:18px 18px 16px;\n margin-bottom:14px;\n}\n.card h2{\n font-family:var(--display);\n font-size:14px;\n letter-spacing:.14em;\n text-transform:uppercase;\n margin:0 0 12px;\n display:flex;align-items:center;gap:10px;\n}\n.card h2 svg{flex:0 0 auto}\n.card h3{\n font-family:var(--mono);\n font-size:12px;\n letter-spacing:.14em;\n text-transform:uppercase;\n color:var(--accent);\n margin:18px 0 8px;\n border-top:1px dashed var(--hair);\n padding-top:14px;\n}\n.card h3:first-of-type{border-top:none;padding-top:0;margin-top:4px}\n.grid2{\n display:grid;\n grid-template-columns:1fr 1fr;\n gap:12px;\n}\n@media(max-width:760px){\n section[data-cube=\"stats\"]{grid-template-columns:1fr 1fr}\n .grid2{grid-template-columns:1fr}\n}\n.table-wrap{overflow-x:auto;margin:8px 0 10px;border:1px solid var(--hair);border-radius:12px}\ntable{width:100%;border-collapse:collapse;min-width:560px;font-size:13px}\nth,td{padding:10px 10px;text-align:left;border-bottom:1px solid var(--hair);vertical-align:top}\nth{\n font-family:var(--mono);\n font-size:11px;\n letter-spacing:.12em;\n text-transform:uppercase;\n color:var(--ink-2);\n background:var(--soft);\n white-space:nowrap;\n}\ntd{color:var(--ink)}\ntd.mono{font-family:var(--mono);font-size:12px;word-break:break-all}\n.tag{\n display:inline-flex;align-items:center;gap:6px;\n font-family:var(--mono);font-size:11px;letter-spacing:.08em;\n text-transform:uppercase;\n padding:4px 8px;border-radius:999px;\n border:1px solid var(--hair);\n background:var(--soft);\n color:var(--ink-2);\n white-space:nowrap;\n}\n.tag.live{color:#0a5c4a;border-color:rgba(0,200,180,.3);background:rgba(0,200,180,.12)}\n.tag.muted{opacity:.9}\n.kv{\n display:grid;grid-template-columns:140px 1fr;\n gap:6px 12px;\n font-size:13px;\n padding:8px 10px;\n background:var(--soft);\n border:1px solid var(--hair);\n border-radius:12px;\n}\n.kv dt{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}\n.kv dd{margin:0;color:var(--ink);font-family:var(--mono);font-size:12px;word-break:break-all}\n.code{\n font-family:var(--mono);\n font-size:12px;\n line-height:1.6;\n background:var(--paper-2);\n border:1px solid var(--hair);\n border-radius:12px;\n padding:12px 14px;\n overflow-x:auto;\n white-space:pre-wrap;\n word-break:break-all;\n color:var(--ink);\n}\n.steps{counter-reset:step;margin:8px 0 0;padding:0;list-style:none;display:grid;gap:10px}\n.steps li{\n counter-increment:step;\n display:grid;grid-template-columns:32px 1fr;gap:10px;\n align-items:start;\n background:var(--soft);\n border:1px solid var(--hair);\n border-radius:12px;\n padding:12px;\n}\n.steps li::before{\n content:counter(step);\n width:28px;height:28px;border-radius:50%;\n display:grid;place-items:center;\n background:var(--ink);color:var(--paper);\n font-family:var(--mono);font-size:12px;font-weight:700;\n}\n:root[data-theme=\"dark\"] .steps li::before{background:var(--accent);color:#00131a}\n.portal-grid{\n display:grid;\n grid-template-columns:repeat(3,1fr);\n gap:12px;\n}\n@media(max-width:760px){.portal-grid{grid-template-columns:1fr 1fr}}\n@media(max-width:520px){.portal-grid{grid-template-columns:1fr}}\n.portal{\n border:1px solid var(--hair);\n border-radius:14px;\n overflow:hidden;\n background:var(--paper-2);\n display:flex;flex-direction:column;\n}\n.portal .thumb{\n aspect-ratio:16/9;\n background:#020a12;\n position:relative;\n overflow:hidden;\n border-bottom:1px solid var(--hair);\n}\n.portal .thumb img{width:100%;height:100%;object-fit:cover;display:block}\n.portal .thumb::after{\n content:\"\";position:absolute;inset:0;\n background:linear-gradient(to top, rgba(0,10,20,.7) 0%, transparent 40%);\n mix-blend-mode:screen;opacity:.7;\n}\n.scan{\n position:absolute;inset:0;\n background:repeating-linear-gradient(to bottom, transparent 0px, transparent 2px, rgba(0,234,255,.06) 3px);\n opacity:.4;pointer-events:none;\n}\n.portal .meta{padding:10px 12px 12px}\n.portal .idx{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:700}\n.portal .label{font-family:var(--display);font-size:12px;letter-spacing:.12em;text-transform:uppercase;margin:4px 0 6px}\n.portal .link{font-family:var(--mono);font-size:11px}\n.badge{\n display:inline-flex;\n font-family:var(--mono);font-size:10px;letter-spacing:.12em;\n text-transform:uppercase;\n padding:3px 7px;border-radius:999px;\n background:var(--ink);color:var(--paper);\n}\n:root[data-theme=\"dark\"] .badge{background:var(--accent);color:#00131a}\n.note{font-size:12px;color:var(--ink-2);margin:6px 0 0}\n.divider{height:1px;background:var(--hair);margin:14px 0}\n.pill{\n display:inline-flex;align-items:center;\n font-family:var(--mono);font-size:11px;\n padding:4px 8px;border-radius:999px;\n border:1px solid var(--hair);background:var(--soft);color:var(--ink-2)\n}\n\u003c/style\u003e\n\u003cdiv class=\"wrap\"\u003e\n \u003cheader\u003e\n \u003cdiv class=\"eyebrow\"\u003eSHAKEWE // Rotating Portal Grid — Transparent Fixed\u003c/div\u003e\n \u003ch1\u003e導覽模塊\u003c/h1\u003e\n \u003cp class=\"lede\"\u003e\u003cstrong\u003e旋轉傳送門陣列 // 6幀 — 拖曳旋轉 · 懸停聚焦 · 點擊打開。\u003c/strong\u003e 透明背景、環形 3D 透視、自動旋轉與慣性拖曳的導覽模塊。原始文件為 \u003cspan class=\"mono\" style=\"font-family:var(--mono)\"\u003een\u003c/span\u003e、\u003cspan class=\"mono\" style=\"font-family:var(--mono)\"\u003eUTF-8\u003c/span\u003e、不可縮放視口，標題為 SHAKEWE // Rotating Portal Grid - Transparent Fixed。\u003c/p\u003e\n \u003c/header\u003e\n\n \u003csection data-cube=\"stats\"\u003e\n \u003cdiv class=\"stat\"\u003e\n \u003cdiv class=\"label\"\u003e幀數\u003c/div\u003e\n \u003cdiv class=\"value\"\u003e6 幀\u003c/div\u003e\n \u003cdiv class=\"note\"\u003e60° 等分 · --i 0–5\u003c/div\u003e\n \u003c/div\u003e\n \u003cdiv class=\"stat\"\u003e\n \u003cdiv class=\"label\"\u003e半徑\u003c/div\u003e\n \u003cdiv class=\"value\"\u003e520 px\u003c/div\u003e\n \u003cdiv class=\"note\"\u003e預設 --radius，響應式遞減\u003c/div\u003e\n \u003c/div\u003e\n \u003cdiv class=\"stat\"\u003e\n \u003cdiv class=\"label\"\u003e透視\u003c/div\u003e\n \u003cdiv class=\"value\"\u003e2000 px\u003c/div\u003e\n \u003cdiv class=\"note\"\u003eperspective-origin 50% 40%\u003c/div\u003e\n \u003c/div\u003e\n \u003cdiv class=\"stat\"\u003e\n \u003cdiv class=\"label\"\u003e自動轉速\u003c/div\u003e\n \u003cdiv class=\"value\"\u003e0.15\u003c/div\u003e\n \u003cdiv class=\"note\"\u003e懸停降至 0.03 · 慣性衰減\u003c/div\u003e\n \u003c/div\u003e\n \u003c/section\u003e\n\n \u003csection class=\"card\"\u003e\n \u003ch2\u003e\n \u003csvg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\"\u003e\u003crect x=\"1.5\" y=\"1.5\" width=\"13\" height=\"13\" rx=\"3\" stroke=\"currentColor\" opacity=\".9\"/\u003e\u003ccircle cx=\"8\" cy=\"8\" r=\"3.2\" stroke=\"currentColor\"/\u003e\u003cpath d=\"M8 1.5v2M8 12.5v2M1.5 8h2M12.5 8h2\" stroke=\"currentColor\" stroke-linecap=\"round\"/\u003e\u003c/svg\u003e\n 模塊概覽 · 文件頭\n \u003c/h2\u003e\n \u003cdiv class=\"grid2\"\u003e\n \u003cdiv class=\"kv\"\u003e\n \u003cdt\u003eDOCTYPE / lang\u003c/dt\u003e\u003cdd\u003e\u0026lt;!DOCTYPE html\u0026gt; · \u0026lt;html lang=\"en\"\u0026gt;\u003c/dd\u003e\n \u003cdt\u003echarset\u003c/dt\u003e\u003cdd\u003eUTF-8\u003c/dd\u003e\n \u003cdt\u003eviewport\u003c/dt\u003e\u003cdd\u003ewidth=device-width, initial-scale=1.0, user-scalable=no\u003c/dd\u003e\n \u003cdt\u003etitle\u003c/dt\u003e\u003cdd\u003eSHAKEWE // Rotating Portal Grid - Transparent Fixed\u003c/dd\u003e\n \u003cdt\u003efonts\u003c/dt\u003e\u003cdd\u003eOrbitron 500/700/900 · Inter 300/400/500\u003cbr\u003e\u003cspan style=\"word-break:break-all\"\u003ehttps://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;900\u0026amp;family=Inter:wght@300;400;500\u0026amp;display=swap\u003c/span\u003e\u003c/dd\u003e\n \u003c/div\u003e\n \u003cdiv\u003e\n \u003cdiv class=\"code\"\u003e\u0026lt;meta charset=\"UTF-8\"\u0026gt;\n\u0026lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\"\u0026gt;\n\u0026lt;title\u0026gt;SHAKEWE // Rotating Portal Grid - Transparent Fixed\u0026lt;/title\u0026gt;\u003c/div\u003e\n \u003cp class=\"note\"\u003e背景強制透明：\u003cspan style=\"font-family:var(--mono)\"\u003ebackground: transparent !important; background-color: transparent !important;\u003c/span\u003e · 全局 \u003cspan style=\"font-family:var(--mono)\"\u003etouch-action:none; user-select:none;\u003c/span\u003e\u003c/p\u003e\n \u003cdiv style=\"margin-top:10px;display:flex;gap:8px;flex-wrap:wrap\"\u003e\n \u003cspan class=\"tag live\"\u003e● 透明固定\u003c/span\u003e\n \u003cspan class=\"tag\"\u003eOrbitron 標題\u003c/span\u003e\n \u003cspan class=\"tag\"\u003eInter 內文\u003c/span\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n\n \u003ch3\u003e基礎重置與隱藏層\u003c/h3\u003e\n \u003cdiv class=\"table-wrap\"\u003e\n \u003ctable\u003e\n \u003cthead\u003e\u003ctr\u003e\u003cth\u003e選擇器\u003c/th\u003e\u003cth\u003e規則\u003c/th\u003e\u003cth\u003e說明\u003c/th\u003e\u003c/tr\u003e\u003c/thead\u003e\n \u003ctbody\u003e\n \u003ctr\u003e\u003ctd class=\"mono\"\u003e:root\u003c/td\u003e\u003ctd class=\"mono\"\u003e--radius: 520px;\u003c/td\u003e\u003ctd\u003e環形半徑基準\u003c/td\u003e\u003c/tr\u003e\n \u003ctr\u003e\u003ctd class=\"mono\"\u003e*\u003c/td\u003e\u003ctd class=\"mono\"\u003emargin:0; padding:0; box-sizing:border-box;\u003c/td\u003e\u003ctd\u003e重置\u003c/td\u003e\u003c/tr\u003e\n \u003ctr\u003e\u003ctd class=\"mono\"\u003ehtml, body\u003c/td\u003e\u003ctd class=\"mono\"\u003eheight:100%; overflow:hidden; background:transparent !important; color:#e6faff; font-family:'Inter',system-ui,sans-serif; touch-action:none; user-select:none;\u003c/td\u003e\u003ctd\u003e滿高、禁滾動、透明底、淺青文字\u003c/td\u003e\u003c/tr\u003e\n \u003ctr\u003e\u003ctd class=\"mono\"\u003e.universe, .horizon-glow, .grid-wrapper, .grid, .vignette\u003c/td\u003e\u003ctd class=\"mono\"\u003edisplay:none !important;\u003c/td\u003e\u003ctd\u003e裝飾層全部隱藏\u003c/td\u003e\u003c/tr\u003e\n \u003c/tbody\u003e\n \u003c/table\u003e\n \u003c/div\u003e\n \u003c/section\u003e\n\n \u003csection class=\"card\"\u003e\n \u003ch2\u003e\n \u003csvg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\"\u003e\u003cpath d=\"M2 5.5L8 2l6 3.5v7L8 16 2 12.5v-7Z\" stroke=\"currentColor\"/\u003e\u003cpath d=\"M2 5.5L8 9l6-3.5M8 16V9\" stroke=\"currentColor\"/\u003e\u003c/svg\u003e\n 視口與標頭 · Stage 結構\n \u003c/h2\u003e\n \u003cdiv class=\"table-wrap\"\u003e\n \u003ctable\u003e\n \u003cthead\u003e\u003ctr\u003e\u003cth\u003e元素\u003c/th\u003e\u003cth\u003e樣式\u003c/th\u003e\u003cth\u003e數值\u003c/th\u003e\u003c/tr\u003e\u003c/thead\u003e\n \u003ctbody\u003e\n \u003ctr\u003e\u003ctd class=\"mono\"\u003e.viewport\u003c/td\u003e\u003ctd\u003eposition:relative; z-index:2; height:100vh; width:100vw; display:flex; flex-direction:column; align-items:center;\u003c/td\u003e\u003ctd\u003e全視口容器\u003c/td\u003e\u003c/tr\u003e\n \u003ctr\u003e\u003ctd class=\"mono\"\u003e.header\u003c/td\u003e\u003ctd class=\"mono\"\u003emargin-top:clamp(24px,5vh,60px); text-align:center; z-index:10;\u003c/td\u003e\u003ctd\u003e置頂標頭\u003c/td\u003e\u003c/tr\u003e\n \u003ctr\u003e\u003ctd class=\"mono\"\u003e.header h1\u003c/td\u003e\u003ctd class=\"mono\"\u003efont-family:'Orbitron',monospace; font-weight:900; font-size:clamp(28px,5vw,54px); letter-spacing:0.18em; color:#fff; text-shadow:0 0 10px rgba(0,234,255,0.8),0 0 30px rgba(0,234,255,0.5); margin-bottom:8px;\u003c/td\u003e\u003ctd\u003e內容：導覽\u003c/td\u003e\u003c/tr\u003e\n \u003ctr\u003e\u003ctd class=\"mono\"\u003e.header p\u003c/td\u003e\u003ctd class=\"mono\"\u003efont-size:13px; letter-spacing:0.3em; text-transform:uppercase; color:rgba(180,240,255,0.7); font-weight:300;\u003c/td\u003e\u003ctd\u003e內容：旋轉傳送門陣列 // 6幀 - 拖曳旋轉·懸停聚焦·點擊打開\u003c/td\u003e\u003c/tr\u003e\n \u003ctr\u003e\u003ctd class=\"mono\"\u003e.stage#stage\u003c/td\u003e\u003ctd class=\"mono\"\u003eflex:1; width:100%; position:relative; display:flex; align-items:center; justify-content:center; perspective:2000px; perspective-origin:50% 40%; cursor:grab;\u003c/td\u003e\u003ctd\u003e:active → grabbing\u003c/td\u003e\u003c/tr\u003e\n \u003ctr\u003e\u003ctd class=\"mono\"\u003e.ring#ring\u003c/td\u003e\u003ctd class=\"mono\"\u003eposition:relative; width:1px; height:1px; transform-style:preserve-3d; will-change:transform;\u003c/td\u003e\u003ctd\u003etransform: rotateY(-rotation deg)\u003c/td\u003e\u003c/tr\u003e\n \u003ctr\u003e\u003ctd class=\"mono\"\u003e.hint\u003c/td\u003e\u003ctd class=\"mono\"\u003eposition:absolute; bottom:clamp(20px,4vh,40px); left:50%; transform:translateX(-50%); font-size:11px; letter-spacing:0.25em; text-transform:uppercase; color:rgba(140,220,255,0.5); font-weight:300; animation:pulse 3s ease-in-out infinite;\u003c/td\u003e\u003ctd\u003e文案：ROTATING PORTAL ARRAY // DRAG TO ROTATE\u003c/td\u003e\u003c/tr\u003e\n \u003c/tbody\u003e\n \u003c/table\u003e\n \u003c/div\u003e\n \u003cdiv class=\"code\"\u003e@keyframes pulse { 0%,100% {opacity:0.5} 50% {opacity:0.9} }\u003c/div\u003e\n \u003c/section\u003e\n\n \u003csection class=\"card\"\u003e\n \u003ch2\u003e\n \u003csvg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\"\u003e\u003crect x=\"2\" y=\"3\" width=\"12\" height=\"8\" rx=\"2\" stroke=\"currentColor\"/\u003e\u003cpath d=\"M5 13l3-2 3 2\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/\u003e\u003ccircle cx=\"8\" cy=\"7\" r=\"1.6\" stroke=\"currentColor\"/\u003e\u003c/svg\u003e\n 幀 · Frame 規格\n \u003c/h2\u003e\n \u003cdiv class=\"table-wrap\"\u003e\n \u003ctable\u003e\n \u003cthead\u003e\u003ctr\u003e\u003cth\u003e選擇器\u003c/th\u003e\u003cth\u003e關鍵樣式\u003c/th\u003e\u003c/tr\u003e\u003c/thead\u003e\n \u003ctbody\u003e\n \u003ctr\u003e\u003ctd class=\"mono\"\u003e.frame\u003c/td\u003e\u003ctd class=\"mono\"\u003eposition:absolute; top:0; left:0; width:320px; height:180px; margin:-90px 0 0 -160px; transform:rotateY(calc(var(--i) * 60deg)) translateZ(var(--radius)); transform-style:preserve-3d; text-decoration:none; transition:filter 0.3s ease;\u003c/td\u003e\u003c/tr\u003e\n \u003ctr\u003e\u003ctd class=\"mono\"\u003e.frame-inner\u003c/td\u003e\u003ctd class=\"mono\"\u003ewidth:100%; height:100%; border-radius:14px; overflow:hidden; background:#020a12; border:1.5px solid rgba(0,234,255,0.7); box-shadow:0 0 8px rgba(0,234,255,0.6),0 0 20px rgba(0,234,255,0.4),0 0 40px rgba(0,234,255,0.2); transition:all 0.4s cubic-bezier(0.2,0.8,0.2,1); transform:scale(1) translateZ(0); backface-visibility:hidden;\u003c/td\u003e\u003c/tr\u003e\n \u003ctr\u003e\u003ctd class=\"mono\"\u003e.frame-inner img\u003c/td\u003e\u003ctd class=\"mono\"\u003ewidth:100%; height:100%; object-fit:cover; display:block; filter:contrast(1.05) brightness(0.95) saturate(1.1); transition:transform 0.6s ease,filter 0.4s ease;\u003c/td\u003e\u003c/tr\u003e\n \u003ctr\u003e\u003ctd class=\"mono\"\u003e.frame-inner::after\u003c/td\u003e\u003ctd class=\"mono\"\u003econtent:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,10,20,0.7) 0%, transparent 40%); mix-blend-mode:screen; opacity:0.7; transition:opacity 0.3s;\u003c/td\u003e\u003c/tr\u003e\n \u003ctr\u003e\u003ctd class=\"mono\"\u003e.scanline\u003c/td\u003e\u003ctd class=\"mono\"\u003eposition:absolute; inset:0; background:repeating-linear-gradient(to bottom,transparent 0px,transparent 2px,rgba(0,234,255,0.06) 3px); opacity:0.4; pointer-events:none;\u003c/td\u003e\u003c/tr\u003e\n \u003ctr\u003e\u003ctd class=\"mono\"\u003e.frame-label\u003c/td\u003e\u003ctd class=\"mono\"\u003eposition:absolute; bottom:8px; left:10px; right:10px; font-family:'Orbitron',monospace; font-size:10px; letter-spacing:0.2em; color:rgba(180,250,255,0.9); text-shadow:0 0 10px rgba(0,234,255,0.8); text-transform:uppercase; opacity:0; transform:translateY(5px); transition:all 0.3s ease; pointer-events:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;\u003c/td\u003e\u003c/tr\u003e\n \u003ctr\u003e\u003ctd class=\"mono\"\u003e.reflection\u003c/td\u003e\u003ctd class=\"mono\"\u003eposition:absolute; top:100%; left:0; width:100%; height:100%; transform:scaleY(-1) translateY(-12px); opacity:0.25; filter:blur(2px) brightness(0.7); mask-image:linear-gradient(to bottom, rgba(0,0,0,0.5), transparent 70%); -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,0.5), transparent 70%); pointer-events:none;\u003c/td\u003e\u003c/tr\u003e\n \u003c/tbody\u003e\n \u003c/table\u003e\n \u003c/div\u003e\n\n \u003ch3\u003e懸停聚焦 · Hover\u003c/h3\u003e\n \u003cdiv class=\"grid2\"\u003e\n \u003cdiv class=\"code\"\u003e.frame:hover { z-index:100; filter:brightness(1.1); }\n.frame:hover .frame-inner {\n transform:scale(1.12) translateZ(30px);\n border-color:rgba(0,234,255,1);\n box-shadow:0 0 15px rgba(0,234,255,0.9),\n 0 0 35px rgba(0,234,255,0.7),\n 0 0 70px rgba(0,234,255,0.4);\n}\n.frame:hover .frame-inner img {\n transform:scale(1.05);\n filter:contrast(1.1) brightness(1.05) saturate(1.2);\n}\n.frame:hover .frame-inner::after { opacity:0.3; }\n.frame:hover .frame-label { opacity:1; transform:translateY(0); }\u003c/div\u003e\n \u003cdiv\u003e\n \u003cdiv style=\"display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px\"\u003e\n \u003cspan class=\"badge\"\u003ehover 放大 1.12\u003c/span\u003e\n \u003cspan class=\"pill\"\u003eZ 30px\u003c/span\u003e\n \u003cspan class=\"pill\"\u003e邊框 #00eaff\u003c/span\u003e\n \u003c/div\u003e\n \u003cp class=\"note\"\u003e懸停時自動轉速由 0.15 降至 0.03（JS 控制），離開恢復 0.15，便於聚焦閱讀標籤。\u003c/p\u003e\n \u003cdiv class=\"kv\" style=\"margin-top:10px\"\u003e\n \u003cdt\u003e標籤顯隱\u003c/dt\u003e\u003cdd\u003eopacity 0 → 1 · translateY(5px) → 0\u003c/dd\u003e\n \u003cdt\u003e掃描線\u003c/dt\u003e\u003cdd\u003e常駐 0.4 透明度，不攔截點擊\u003c/dd\u003e\n \u003cdt\u003e倒影\u003c/dt\u003e\u003cdd\u003escaleY(-1) · blur 2px · 遮罩淡出 70%\u003c/dd\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n \u003c/section\u003e\n\n \u003csection class=\"card\"\u003e\n \u003ch2\u003e\n \u003csvg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\"\u003e\u003cpath d=\"M8 3v10M3 8h10\" stroke=\"currentColor\" stroke-linecap=\"round\"/\u003e\u003ccircle cx=\"8\" cy=\"8\" r=\"6.2\" stroke=\"currentColor\" opacity=\".5\"/\u003e\u003c/svg\u003e\n 六幀陣列 · 6 Frames\n \u003c/h2\u003e\n \u003cp class=\"note\" style=\"margin-bottom:12px\"\u003e每幀為 \u003cspan style=\"font-family:var(--mono)\"\u003e\u0026lt;a class=\"frame\" style=\"--i:n\"\u0026gt;\u003c/span\u003e，內含 \u003cspan style=\"font-family:var(--mono)\"\u003e.frame-inner \u0026gt; img + .scanline + .frame-label + .reflection \u0026gt; img\u003c/span\u003e。點擊新分頁打開。\u003c/p\u003e\n \u003cdiv class=\"portal-grid\"\u003e\n \u003cdiv class=\"portal\"\u003e\n \u003cdiv class=\"thumb\"\u003e\u003cimg src=\"https://i.meee.com.tw/H4GSL7Z.jpg\" alt=\"主機區\"\u003e\u003cdiv class=\"scan\"\u003e\u003c/div\u003e\u003c/div\u003e\n \u003cdiv class=\"meta\"\u003e\u003cdiv class=\"idx\"\u003e--i: 0 · 主機區 // 01\u003c/div\u003e\u003cdiv class=\"label\"\u003eFrame 01\u003c/div\u003e\u003cdiv class=\"link\"\u003e\u003ca href=\"https://sites.google.com/view/shakewww1/1\" target=\"_blank\"\u003esites.google.com/view/shakewww1/1\u003c/a\u003e\u003c/div\u003e\u003cdiv class=\"note\"\u003e封面 H4GSL7Z.jpg · 倒影 EFZinBU.jpg\u003c/div\u003e\u003c/div\u003e\n \u003c/div\u003e\n \u003cdiv class=\"portal\"\u003e\n \u003cdiv class=\"thumb\"\u003e\u003cimg src=\"https://i.meee.com.tw/oHkDvXE.png\" alt=\"遊戲區\"\u003e\u003cdiv class=\"scan\"\u003e\u003c/div\u003e\u003c/div\u003e\n \u003cdiv class=\"meta\"\u003e\u003cdiv class=\"idx\"\u003e--i: 1 · 遊戲區 // 02\u003c/div\u003e\u003cdiv class=\"label\"\u003eFrame 02\u003c/div\u003e\u003cdiv class=\"link\"\u003e\u003ca href=\"https://sites.google.com/view/shakewww1/2/3/1\" target=\"_blank\"\u003esites.google.com/view/shakewww1/2/3/1\u003c/a\u003e\u003c/div\u003e\u003cdiv class=\"note\"\u003e封面 oHkDvXE.png · 倒影同圖\u003c/div\u003e\u003c/div\u003e\n \u003c/div\u003e\n \u003cdiv class=\"portal\"\u003e\n \u003cdiv class=\"thumb\"\u003e\u003cimg src=\"https://i.meee.com.tw/5cJdTEG.png\" alt=\"設計區\"\u003e\u003cdiv class=\"scan\"\u003e\u003c/div\u003e\u003c/div\u003e\n \u003cdiv class=\"meta\"\u003e\u003cdiv class=\"idx\"\u003e--i: 2 · 設計區 // 03\u003c/div\u003e\u003cdiv class=\"label\"\u003eFrame 03\u003c/div\u003e\u003cdiv class=\"link\"\u003e\u003ca href=\"https://sites.google.com/view/shakewww1/2/4/5\" target=\"_blank\"\u003esites.google.com/view/shakewww1/2/4/5\u003c/a\u003e\u003c/div\u003e\u003cdiv class=\"note\"\u003e封面 5cJdTEG.png\u003c/div\u003e\u003c/div\u003e\n \u003c/div\u003e\n \u003cdiv class=\"portal\"\u003e\n \u003cdiv class=\"thumb\"\u003e\u003cimg src=\"https://i.meee.com.tw/k0X2UVV.png\" alt=\"影音區\"\u003e\u003cdiv class=\"scan\"\u003e\u003c/div\u003e\u003c/div\u003e\n \u003cdiv class=\"meta\"\u003e\u003cdiv class=\"idx\"\u003e--i: 3 · 影音區 // 04\u003c/div\u003e\u003cdiv class=\"label\"\u003eFrame 04\u003c/div\u003e\u003cdiv class=\"link\"\u003e\u003ca href=\"https://sites.google.com/view/shakewww1/2/5/2\" target=\"_blank\"\u003esites.google.com/view/shakewww1/2/5/2\u003c/a\u003e\u003c/div\u003e\u003cdiv class=\"note\"\u003e封面 k0X2UVV.png\u003c/div\u003e\u003c/div\u003e\n \u003c/div\u003e\n \u003cdiv class=\"portal\"\u003e\n \u003cdiv class=\"thumb\"\u003e\u003cimg src=\"https://i.meee.com.tw/BmJHEDg.png\" alt=\"閱讀區\"\u003e\u003cdiv class=\"scan\"\u003e\u003c/div\u003e\u003c/div\u003e\n \u003cdiv class=\"meta\"\u003e\u003cdiv class=\"idx\"\u003e--i: 4 · 閱讀區 // 05\u003c/div\u003e\u003cdiv class=\"label\"\u003eFrame 05\u003c/div\u003e\u003cdiv class=\"link\"\u003e\u003ca href=\"https://sites.google.com/view/shakewww1/2\" target=\"_blank\"\u003esites.google.com/view/shakewww1/2\u003c/a\u003e\u003c/div\u003e\u003cdiv class=\"note\"\u003e封面 BmJHEDg.png\u003c/div\u003e\u003c/div\u003e\n \u003c/div\u003e\n \u003cdiv class=\"portal\"\u003e\n \u003cdiv class=\"thumb\"\u003e\u003cimg src=\"https://i.meee.com.tw/Afl914d.png\" alt=\"導覽區\"\u003e\u003cdiv class=\"scan\"\u003e\u003c/div\u003e\u003c/div\u003e\n \u003cdiv class=\"meta\"\u003e\u003cdiv class=\"idx\"\u003e--i: 5 · 導覽區 // 06\u003c/div\u003e\u003cdiv class=\"label\"\u003eFrame 06\u003c/div\u003e\u003cdiv class=\"link\"\u003e\u003ca href=\"https://sites.google.com/view/shakewww1/2/7/3\" target=\"_blank\"\u003esites.google.com/view/shakewww1/2/7/3\u003c/a\u003e\u003c/div\u003e\u003cdiv class=\"note\"\u003e封面 Afl914d.png\u003c/div\u003e\u003c/div\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n \u003cdiv class=\"divider\"\u003e\u003c/div\u003e\n \u003cdiv class=\"table-wrap\"\u003e\n \u003ctable\u003e\n \u003cthead\u003e\u003ctr\u003e\u003cth\u003e#\u003c/th\u003e\u003cth\u003e標籤\u003c/th\u003e\u003cth\u003ehref\u003c/th\u003e\u003cth\u003eimg\u003c/th\u003e\u003cth\u003ereflection img\u003c/th\u003e\u003c/tr\u003e\u003c/thead\u003e\n \u003ctbody\u003e\n \u003ctr\u003e\u003ctd\u003e0\u003c/td\u003e\u003ctd\u003e主機區 // 01\u003c/td\u003e\u003ctd class=\"mono\"\u003ehttps://sites.google.com/view/shakewww1/1\u003c/td\u003e\u003ctd class=\"mono\"\u003ehttps://i.meee.com.tw/H4GSL7Z.jpg\u003c/td\u003e\u003ctd class=\"mono\"\u003ehttps://i.meee.com.tw/EFZinBU.jpg\u003c/td\u003e\u003c/tr\u003e\n \u003ctr\u003e\u003ctd\u003e1\u003c/td\u003e\u003ctd\u003e遊戲區 // 02\u003c/td\u003e\u003ctd class=\"mono\"\u003ehttps://sites.google.com/view/shakewww1/2/3/1\u003c/td\u003e\u003ctd class=\"mono\"\u003ehttps://i.meee.com.tw/oHkDvXE.png\u003c/td\u003e\u003ctd class=\"mono\"\u003ehttps://i.meee.com.tw/oHkDvXE.png\u003c/td\u003e\u003c/tr\u003e\n \u003ctr\u003e\u003ctd\u003e2\u003c/td\u003e\u003ctd\u003e設計區 // 03\u003c/td\u003e\u003ctd class=\"mono\"\u003ehttps://sites.google.com/view/shakewww1/2/4/5\u003c/td\u003e\u003ctd class=\"mono\"\u003ehttps://i.meee.com.tw/5cJdTEG.png\u003c/td\u003e\u003ctd class=\"mono\"\u003ehttps://i.meee.com.tw/5cJdTEG.png\u003c/td\u003e\u003c/tr\u003e\n \u003ctr\u003e\u003ctd\u003e3\u003c/td\u003e\u003ctd\u003e影音區 // 04\u003c/td\u003e\u003ctd class=\"mono\"\u003ehttps://sites.google.com/view/shakewww1/2/5/2\u003c/td\u003e\u003ctd class=\"mono\"\u003ehttps://i.meee.com.tw/k0X2UVV.png\u003c/td\u003e\u003ctd class=\"mono\"\u003ehttps://i.meee.com.tw/k0X2UVV.png\u003c/td\u003e\u003c/tr\u003e\n \u003ctr\u003e\u003ctd\u003e4\u003c/td\u003e\u003ctd\u003e閱讀區 // 05\u003c/td\u003e\u003ctd class=\"mono\"\u003ehttps://sites.google.com/view/shakewww1/2\u003c/td\u003e\u003ctd class=\"mono\"\u003ehttps://i.meee.com.tw/BmJHEDg.png\u003c/td\u003e\u003ctd class=\"mono\"\u003ehttps://i.meee.com.tw/BmJHEDg.png\u003c/td\u003e\u003c/tr\u003e\n \u003ctr\u003e\u003ctd\u003e5\u003c/td\u003e\u003ctd\u003e導覽區 // 06\u003c/td\u003e\u003ctd class=\"mono\"\u003ehttps://sites.google.com/view/shakewww1/2/7/3\u003c/td\u003e\u003ctd class=\"mono\"\u003ehttps://i.meee.com.tw/Afl914d.png\u003c/td\u003e\u003ctd class=\"mono\"\u003ehttps://i.meee.com.tw/Afl914d.png\u003c/td\u003e\u003c/tr\u003e\n \u003c/tbody\u003e\n \u003c/table\u003e\n \u003c/div\u003e\n \u003c/section\u003e\n\n \u003csection class=\"card\"\u003e\n \u003ch2\u003e\n \u003csvg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\"\u003e\u003cpath d=\"M3 8h10M8 3l5 5-5 5\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/\u003e\u003c/svg\u003e\n 互動腳本 · 拖曳與慣性\n \u003c/h2\u003e\n \u003col class=\"steps\"\u003e\n \u003cli\u003e\u003cdiv\u003e\u003cstrong\u003e自動旋轉\u003c/strong\u003e\u003cbr\u003e\u003cspan style=\"font-family:var(--mono);font-size:12px\"\u003erotation += (targetRotation - rotation)*0.08 · targetRotation += autoSpeed (0.15) · ring.style.transform = rotateY(-rotation deg)\u003c/span\u003e\u003cbr\u003e\u003cspan class=\"note\"\u003erequestAnimationFrame 循環；非拖曳時 velocity*=0.96 並疊加到 targetRotation\u003c/span\u003e\u003c/div\u003e\u003c/li\u003e\n \u003cli\u003e\u003cdiv\u003e\u003cstrong\u003e拖曳\u003c/strong\u003e\u003cbr\u003e\u003cspan style=\"font-family:var(--mono);font-size:12px\"\u003emousedown/touchstart → startDrag(x): isDragging=true, lastX=x, velocity=0, cursor=grabbing\u003cbr\u003emousemove/touchmove → moveDrag(x): dx=x-lastX, targetRotation-=dx*0.3, velocity=-dx*0.15\u003cbr\u003emouseup/touchend → endDrag(): isDragging=false, cursor=grab\u003c/span\u003e\u003c/div\u003e\u003c/li\u003e\n \u003cli\u003e\u003cdiv\u003e\u003cstrong\u003e懸停減速\u003c/strong\u003e\u003cbr\u003e\u003cspan style=\"font-family:var(--mono);font-size:12px\"\u003eframe mouseenter → autoSpeed=0.03 · mouseleave → autoSpeed=0.15\u003c/span\u003e\u003cbr\u003e\u003cspan class=\"note\"\u003e拖曳中 velocity*=0.9 衰減\u003c/span\u003e\u003c/div\u003e\u003c/li\u003e\n \u003c/ol\u003e\n \u003cdiv class=\"code\" style=\"margin-top:12px\"\u003econst stage=document.getElementById('stage');\nconst ring=document.getElementById('ring');\nlet rotation=0,targetRotation=0,isDragging=false,lastX=0,velocity=0,lastTime=0,autoSpeed=0.15;\nfunction animate(){\n const now=performance.now(); lastTime=now;\n if(!isDragging){ targetRotation+=autoSpeed; velocity*=0.96; targetRotation+=velocity; } else { velocity*=0.9; }\n rotation+=(targetRotation-rotation)*0.08;\n ring.style.transform=`rotateY(${-rotation}deg)`;\n requestAnimationFrame(animate);\n}\nanimate();\nstage.addEventListener('mousedown',e=\u003e{startDrag(e.clientX); e.preventDefault();});\nwindow.addEventListener('mousemove',e=\u003emoveDrag(e.clientX));\nwindow.addEventListener('mouseup',endDrag);\nstage.addEventListener('touchstart',e=\u003e{ if(e.touches.length===1) startDrag(e.touches[0].clientX); },{passive:true});\nwindow.addEventListener('touchmove',e=\u003e{ if(e.touches.length===1) moveDrag(e.touches[0].clientX); },{passive:true});\nwindow.addEventListener('touchend',endDrag);\u003c/div\u003e\n \u003cdiv class=\"kv\" style=\"margin-top:10px\"\u003e\n \u003cdt\u003e容器\u003c/dt\u003e\u003cdd\u003estage#stage 監聽 mousedown/touchstart；window 監聽 move/up\u003c/dd\u003e\n \u003cdt\u003e靈敏度\u003c/dt\u003e\u003cdd\u003edx*0.3 轉角度 · velocity -dx*0.15 慣性\u003c/dd\u003e\n \u003cdt\u003e阻尼\u003c/dt\u003e\u003cdd\u003e非拖曳 0.96 · 拖曳 0.9 · 插值 0.08\u003c/dd\u003e\n \u003c/div\u003e\n \u003c/section\u003e\n\n \u003csection class=\"card\"\u003e\n \u003ch2\u003e\n \u003csvg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\"\u003e\u003crect x=\"2.5\" y=\"2.5\" width=\"11\" height=\"11\" rx=\"1.5\" stroke=\"currentColor\"/\u003e\u003cpath d=\"M2.5 6h11M6 2.5v11\" stroke=\"currentColor\" opacity=\".6\"/\u003e\u003c/svg\u003e\n 響應式 · 半徑與尺寸\n \u003c/h2\u003e\n \u003cdiv class=\"table-wrap\"\u003e\n \u003ctable\u003e\n \u003cthead\u003e\u003ctr\u003e\u003cth\u003e斷點\u003c/th\u003e\u003cth\u003e:root --radius\u003c/th\u003e\u003cth\u003e.frame 尺寸\u003c/th\u003e\u003cth\u003e.frame margin\u003c/th\u003e\u003cth\u003e備註\u003c/th\u003e\u003c/tr\u003e\u003c/thead\u003e\n \u003ctbody\u003e\n \u003ctr\u003e\u003ctd\u003e預設 \u0026gt;900px\u003c/td\u003e\u003ctd class=\"mono\"\u003e520px\u003c/td\u003e\u003ctd class=\"mono\"\u003e320 × 180\u003c/td\u003e\u003ctd class=\"mono\"\u003e-90px 0 0 -160px\u003c/td\u003e\u003ctd\u003e基準\u003c/td\u003e\u003c/tr\u003e\n \u003ctr\u003e\u003ctd\u003e≤900px\u003c/td\u003e\u003ctd class=\"mono\"\u003e380px\u003c/td\u003e\u003ctd class=\"mono\"\u003e260 × 146\u003c/td\u003e\u003ctd class=\"mono\"\u003e-73px 0 0 -130px\u003c/td\u003e\u003ctd\u003e\u003c/td\u003e\u003c/tr\u003e\n \u003ctr\u003e\u003ctd\u003e≤640px\u003c/td\u003e\u003ctd class=\"mono\"\u003e300px\u003c/td\u003e\u003ctd class=\"mono\"\u003e220 × 124\u003c/td\u003e\u003ctd class=\"mono\"\u003e-62px 0 0 -110px\u003c/td\u003e\u003ctd\u003e.header h1 → 32px\u003c/td\u003e\u003c/tr\u003e\n \u003ctr\u003e\u003ctd\u003e≤420px\u003c/td\u003e\u003ctd class=\"mono\"\u003e240px\u003c/td\u003e\u003ctd class=\"mono\"\u003e180 × 101\u003c/td\u003e\u003ctd class=\"mono\"\u003e-50px 0 0 -90px\u003c/td\u003e\u003ctd\u003e\u003c/td\u003e\u003c/tr\u003e\n \u003c/tbody\u003e\n \u003c/table\u003e\n \u003c/div\u003e\n \u003cdiv class=\"code\"\u003efunction setRadius(){\n const w=window.innerWidth;\n let r=520; if(w\u0026lt;420) r=240; else if(w\u0026lt;640) r=300; else if(w\u0026lt;900) r=380;\n document.documentElement.style.setProperty('--radius', r+'px');\n}\nsetRadius(); window.addEventListener('resize', setRadius);\u003c/div\u003e\n \u003cp class=\"note\"\u003eJS 與 CSS 媒體查詢同步控制半徑，確保環形在窄視口不溢出。\u003c/p\u003e\n \u003c/section\u003e\n\n \u003csection class=\"card\" style=\"border-style:dashed\"\u003e\n \u003ch2\u003e\n \u003csvg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\"\u003e\u003cpath d=\"M8 2.5l6 3.5v7L8 16 2 12.5v-7L8 2.5Z\" stroke=\"currentColor\"/\u003e\u003cpath d=\"M8 8.5v4\" stroke=\"currentColor\" stroke-linecap=\"round\"/\u003e\u003c/svg\u003e\n 結構快照\n \u003c/h2\u003e\n \u003cdiv class=\"code\"\u003e\u0026lt;div class=\"viewport\"\u0026gt;\n \u0026lt;header class=\"header\"\u0026gt;\n \u0026lt;h1\u0026gt;導覽\u0026lt;/h1\u0026gt;\n \u0026lt;p\u0026gt;旋轉傳送門陣列 // 6幀 - 拖曳旋轉·懸停聚焦·點擊打開\u0026lt;/p\u0026gt;\n \u0026lt;/header\u0026gt;\n \u0026lt;div class=\"stage\" id=\"stage\"\u0026gt;\n \u0026lt;div class=\"ring\" id=\"ring\"\u0026gt;\n \u0026lt;a class=\"frame\" href=\"...\" style=\"--i:0\"\u0026gt;\u0026lt;div class=\"frame-inner\"\u0026gt;...\u0026lt;/div\u0026gt;\u0026lt;/a\u0026gt; ×6\n \u0026lt;/div\u0026gt;\n \u0026lt;/div\u0026gt;\n \u0026lt;div class=\"hint\"\u0026gt;ROTATING PORTAL ARRAY // DRAG TO ROTATE\u0026lt;/div\u0026gt;\n\u0026lt;/div\u0026gt;\u003c/div\u003e\n \u003cdiv style=\"margin-top:10px;display:flex;gap:8px;flex-wrap:wrap\"\u003e\n \u003cspan class=\"tag\"\u003epreserve-3d\u003c/span\u003e\n \u003cspan class=\"tag\"\u003ewill-change: transform\u003c/span\u003e\n \u003cspan class=\"tag\"\u003ebackface-visibility:hidden\u003c/span\u003e\n \u003cspan class=\"tag\"\u003emix-blend-mode: screen\u003c/span\u003e\n \u003c/div\u003e\n \u003c/section\u003e\n\n \u003cdiv style=\"text-align:center;margin-top:10px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)\"\u003eSHAKEWE · 透明固定 · 拖曳旋轉 · 懸停聚焦 · 點擊打開\u003c/div\u003e\n\u003c/div\u003e","artifactSourceHash":"yrc1e9cq5vhy","classificationStatus":"TODO","content":"\u003cdiv class=\"wrap\"\u003e \u003ctable\u003e\u003ctbody\u003e\u003ctr\u003e\u003ctd\u003e\u003cp\u003e幀數\u003c/p\u003e\u003c/td\u003e\u003ctd\u003e\u003cp\u003e6 幀\u003c/p\u003e\u003c/td\u003e\u003ctd\u003e\u003cp\u003e60° 等分 · --i 0–5\u003c/p\u003e\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e\u003cp\u003e半徑\u003c/p\u003e\u003c/td\u003e\u003ctd\u003e\u003cp\u003e520 px\u003c/p\u003e\u003c/td\u003e\u003ctd\u003e\u003cp\u003e預設 --radius，響應式遞減\u003c/p\u003e\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e\u003cp\u003e透視\u003c/p\u003e\u003c/td\u003e\u003ctd\u003e\u003cp\u003e2000 px\u003c/p\u003e\u003c/td\u003e\u003ctd\u003e\u003cp\u003eperspective-origin 50% 40%\u003c/p\u003e\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e\u003cp\u003e自動轉速\u003c/p\u003e\u003c/td\u003e\u003ctd\u003e\u003cp\u003e0.15\u003c/p\u003e\u003c/td\u003e\u003ctd\u003e\u003cp\u003e懸停降至 0.03 · 慣性衰減\u003c/p\u003e\u003c/td\u003e\u003c/tr\u003e\u003c/tbody\u003e\u003c/table\u003e \u003csection class=\"card\"\u003e \u003ch2\u003e \u003csvg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\"\u003e\u003crect x=\"1.5\" y=\"1.5\" width=\"13\" height=\"13\" rx=\"3\" stroke=\"currentColor\" opacity=\".9\"\u003e\u003c/rect\u003e\u003ccircle cx=\"8\" cy=\"8\" r=\"3.2\" stroke=\"currentColor\"\u003e\u003c/circle\u003e\u003cpath d=\"M8 1.5v2M8 12.5v2M1.5 8h2M12.5 8h2\" stroke=\"currentColor\" stroke-linecap=\"round\"\u003e\u003c/path\u003e\u003c/svg\u003e 模塊概覽 · 文件頭 \u003c/h2\u003e \u003cdiv class=\"grid2\"\u003e \u003cdiv class=\"kv\"\u003e \u003cdt\u003eDOCTYPE / lang\u003c/dt\u003e\u003cdd\u003e\u0026lt;!DOCTYPE html\u0026gt; · \u0026lt;html lang=\"en\"\u0026gt;\u003c/dd\u003e \u003cdt\u003echarset\u003c/dt\u003e\u003cdd\u003eUTF-8\u003c/dd\u003e \u003cdt\u003eviewport\u003c/dt\u003e\u003cdd\u003ewidth=device-width, initial-scale=1.0, user-scalable=no\u003c/dd\u003e \u003cdt\u003etitle\u003c/dt\u003e\u003cdd\u003eSHAKEWE // Rotating Portal Grid - Transparent Fixed\u003c/dd\u003e \u003cdt\u003efonts\u003c/dt\u003e\u003cdd\u003eOrbitron 500/700/900 · Inter 300/400/500\u003cbr\u003e\u003cspan style=\"word-break:break-all\"\u003ehttps://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;900\u0026amp;family=Inter:wght@300;400;500\u0026amp;display=swap\u003c/span\u003e\u003c/dd\u003e \u003c/div\u003e \u003cdiv\u003e \u003cdiv class=\"code\"\u003e\u0026lt;meta charset=\"UTF-8\"\u0026gt; \u0026lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\"\u0026gt; \u0026lt;title\u0026gt;SHAKEWE // Rotating Portal Grid - Transparent Fixed\u0026lt;/title\u0026gt;\u003c/div\u003e \u003cp class=\"note\"\u003e背景強制透明：\u003cspan style=\"font-family:var(--mono)\"\u003ebackground: transparent !important; background-color: transparent !important;\u003c/span\u003e · 全局 \u003cspan style=\"font-family:var(--mono)\"\u003etouch-action:none; user-select:none;\u003c/span\u003e\u003c/p\u003e \u003cdiv style=\"margin-top:10px;display:flex;gap:8px;flex-wrap:wrap\"\u003e \u003cspan class=\"tag live\"\u003e● 透明固定\u003c/span\u003e \u003cspan class=\"tag\"\u003eOrbitron 標題\u003c/span\u003e \u003cspan class=\"tag\"\u003eInter 內文\u003c/span\u003e \u003c/div\u003e \u003c/div\u003e \u003c/div\u003e \u003ch3\u003e基礎重置與隱藏層\u003c/h3\u003e \u003cdiv class=\"table-wrap\"\u003e \u003ctable\u003e \u003cthead\u003e\u003ctr\u003e\u003cth\u003e選擇器\u003c/th\u003e\u003cth\u003e規則\u003c/th\u003e\u003cth\u003e說明\u003c/th\u003e\u003c/tr\u003e\u003c/thead\u003e \u003ctbody\u003e \u003ctr\u003e\u003ctd class=\"mono\"\u003e:root\u003c/td\u003e\u003ctd class=\"mono\"\u003e--radius: 520px;\u003c/td\u003e\u003ctd\u003e環形半徑基準\u003c/td\u003e\u003c/tr\u003e \u003ctr\u003e\u003ctd class=\"mono\"\u003e*\u003c/td\u003e\u003ctd class=\"mono\"\u003emargin:0; padding:0; box-sizing:border-box;\u003c/td\u003e\u003ctd\u003e重置\u003c/td\u003e\u003c/tr\u003e \u003ctr\u003e\u003ctd class=\"mono\"\u003ehtml, body\u003c/td\u003e\u003ctd class=\"mono\"\u003eheight:100%; overflow:hidden; background:transparent !important; color:#e6faff; font-family:'Inter',system-ui,sans-serif; touch-action:none; user-select:none;\u003c/td\u003e\u003ctd\u003e滿高、禁滾動、透明底、淺青文字\u003c/td\u003e\u003c/tr\u003e \u003ctr\u003e\u003ctd class=\"mono\"\u003e.universe, .horizon-glow, .grid-wrapper, .grid, .vignette\u003c/td\u003e\u003ctd class=\"mono\"\u003edisplay:none !important;\u003c/td\u003e\u003ctd\u003e裝飾層全部隱藏\u003c/td\u003e\u003c/tr\u003e \u003c/tbody\u003e \u003c/table\u003e \u003c/div\u003e \u003c/section\u003e \u003csection class=\"card\"\u003e \u003ch2\u003e \u003csvg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\"\u003e\u003cpath d=\"M2 5.5L8 2l6 3.5v7L8 16 2 12.5v-7Z\" stroke=\"currentColor\"\u003e\u003c/path\u003e\u003cpath d=\"M2 5.5L8 9l6-3.5M8 16V9\" stroke=\"currentColor\"\u003e\u003c/path\u003e\u003c/svg\u003e 視口與標頭 · Stage 結構 \u003c/h2\u003e \u003cdiv class=\"table-wrap\"\u003e \u003ctable\u003e \u003cthead\u003e\u003ctr\u003e\u003cth\u003e元素\u003c/th\u003e\u003cth\u003e樣式\u003c/th\u003e\u003cth\u003e數值\u003c/th\u003e\u003c/tr\u003e\u003c/thead\u003e \u003ctbody\u003e \u003ctr\u003e\u003ctd class=\"mono\"\u003e.viewport\u003c/td\u003e\u003ctd\u003eposition:relative; z-index:2; height:100vh; width:100vw; display:flex; flex-direction:column; align-items:center;\u003c/td\u003e\u003ctd\u003e全視口容器\u003c/td\u003e\u003c/tr\u003e \u003ctr\u003e\u003ctd class=\"mono\"\u003e.header\u003c/td\u003e\u003ctd class=\"mono\"\u003emargin-top:clamp(24px,5vh,60px); text-align:center; z-index:10;\u003c/td\u003e\u003ctd\u003e置頂標頭\u003c/td\u003e\u003c/tr\u003e \u003ctr\u003e\u003ctd class=\"mono\"\u003e.header h1\u003c/td\u003e\u003ctd class=\"mono\"\u003efont-family:'Orbitron',monospace; font-weight:900; font-size:clamp(28px,5vw,54px); letter-spacing:0.18em; color:#fff; text-shadow:0 0 10px rgba(0,234,255,0.8),0 0 30px rgba(0,234,255,0.5); margin-bottom:8px;\u003c/td\u003e\u003ctd\u003e內容：導覽\u003c/td\u003e\u003c/tr\u003e \u003ctr\u003e\u003ctd class=\"mono\"\u003e.header p\u003c/td\u003e\u003ctd class=\"mono\"\u003efont-size:13px; letter-spacing:0.3em; text-transform:uppercase; color:rgba(180,240,255,0.7); font-weight:300;\u003c/td\u003e\u003ctd\u003e內容：旋轉傳送門陣列 // 6幀 - 拖曳旋轉·懸停聚焦·點擊打開\u003c/td\u003e\u003c/tr\u003e \u003ctr\u003e\u003ctd class=\"mono\"\u003e.stage#stage\u003c/td\u003e\u003ctd class=\"mono\"\u003eflex:1; width:100%; position:relative; display:flex; align-items:center; justify-content:center; perspective:2000px; perspective-origin:50% 40%; cursor:grab;\u003c/td\u003e\u003ctd\u003e:active → grabbing\u003c/td\u003e\u003c/tr\u003e \u003ctr\u003e\u003ctd class=\"mono\"\u003e.ring#ring\u003c/td\u003e\u003ctd class=\"mono\"\u003eposition:relative; width:1px; height:1px; transform-style:preserve-3d; will-change:transform;\u003c/td\u003e\u003ctd\u003etransform: rotateY(-rotation deg)\u003c/td\u003e\u003c/tr\u003e \u003ctr\u003e\u003ctd class=\"mono\"\u003e.hint\u003c/td\u003e\u003ctd class=\"mono\"\u003eposition:absolute; bottom:clamp(20px,4vh,40px); left:50%; transform:translateX(-50%); font-size:11px; letter-spacing:0.25em; text-transform:uppercase; color:rgba(140,220,255,0.5); font-weight:300; animation:pulse 3s ease-in-out infinite;\u003c/td\u003e\u003ctd\u003e文案：ROTATING PORTAL ARRAY // DRAG TO ROTATE\u003c/td\u003e\u003c/tr\u003e \u003c/tbody\u003e \u003c/table\u003e \u003c/div\u003e \u003cdiv class=\"code\"\u003e@keyframes pulse { 0%,100% {opacity:0.5} 50% {opacity:0.9} }\u003c/div\u003e \u003c/section\u003e \u003csection class=\"card\"\u003e \u003ch2\u003e \u003csvg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\"\u003e\u003crect x=\"2\" y=\"3\" width=\"12\" height=\"8\" rx=\"2\" stroke=\"currentColor\"\u003e\u003c/rect\u003e\u003cpath d=\"M5 13l3-2 3 2\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\u003c/path\u003e\u003ccircle cx=\"8\" cy=\"7\" r=\"1.6\" stroke=\"currentColor\"\u003e\u003c/circle\u003e\u003c/svg\u003e 幀 · Frame 規格 \u003c/h2\u003e \u003cdiv class=\"table-wrap\"\u003e \u003ctable\u003e \u003cthead\u003e\u003ctr\u003e\u003cth\u003e選擇器\u003c/th\u003e\u003cth\u003e關鍵樣式\u003c/th\u003e\u003c/tr\u003e\u003c/thead\u003e \u003ctbody\u003e \u003ctr\u003e\u003ctd class=\"mono\"\u003e.frame\u003c/td\u003e\u003ctd class=\"mono\"\u003eposition:absolute; top:0; left:0; width:320px; height:180px; margin:-90px 0 0 -160px; transform:rotateY(calc(var(--i) * 60deg)) translateZ(var(--radius)); transform-style:preserve-3d; text-decoration:none; transition:filter 0.3s ease;\u003c/td\u003e\u003c/tr\u003e \u003ctr\u003e\u003ctd class=\"mono\"\u003e.frame-inner\u003c/td\u003e\u003ctd class=\"mono\"\u003ewidth:100%; height:100%; border-radius:14px; overflow:hidden; background:#020a12; border:1.5px solid rgba(0,234,255,0.7); box-shadow:0 0 8px rgba(0,234,255,0.6),0 0 20px rgba(0,234,255,0.4),0 0 40px rgba(0,234,255,0.2); transition:all 0.4s cubic-bezier(0.2,0.8,0.2,1); transform:scale(1) translateZ(0); backface-visibility:hidden;\u003c/td\u003e\u003c/tr\u003e \u003ctr\u003e\u003ctd class=\"mono\"\u003e.frame-inner img\u003c/td\u003e\u003ctd class=\"mono\"\u003ewidth:100%; height:100%; object-fit:cover; display:block; filter:contrast(1.05) brightness(0.95) saturate(1.1); transition:transform 0.6s ease,filter 0.4s ease;\u003c/td\u003e\u003c/tr\u003e \u003ctr\u003e\u003ctd class=\"mono\"\u003e.frame-inner::after\u003c/td\u003e\u003ctd class=\"mono\"\u003econtent:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,10,20,0.7) 0%, transparent 40%); mix-blend-mode:screen; opacity:0.7; transition:opacity 0.3s;\u003c/td\u003e\u003c/tr\u003e \u003ctr\u003e\u003ctd class=\"mono\"\u003e.scanline\u003c/td\u003e\u003ctd class=\"mono\"\u003eposition:absolute; inset:0; background:repeating-linear-gradient(to bottom,transparent 0px,transparent 2px,rgba(0,234,255,0.06) 3px); opacity:0.4; pointer-events:none;\u003c/td\u003e\u003c/tr\u003e \u003ctr\u003e\u003ctd class=\"mono\"\u003e.frame-label\u003c/td\u003e\u003ctd class=\"mono\"\u003eposition:absolute; bottom:8px; left:10px; right:10px; font-family:'Orbitron',monospace; font-size:10px; letter-spacing:0.2em; color:rgba(180,250,255,0.9); text-shadow:0 0 10px rgba(0,234,255,0.8); text-transform:uppercase; opacity:0; transform:translateY(5px); transition:all 0.3s ease; pointer-events:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;\u003c/td\u003e\u003c/tr\u003e \u003ctr\u003e\u003ctd class=\"mono\"\u003e.reflection\u003c/td\u003e\u003ctd class=\"mono\"\u003eposition:absolute; top:100%; left:0; width:100%; height:100%; transform:scaleY(-1) translateY(-12px); opacity:0.25; filter:blur(2px) brightness(0.7); mask-image:linear-gradient(to bottom, rgba(0,0,0,0.5), transparent 70%); -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,0.5), transparent 70%); pointer-events:none;\u003c/td\u003e\u003c/tr\u003e \u003c/tbody\u003e \u003c/table\u003e \u003c/div\u003e \u003ch3\u003e懸停聚焦 · Hover\u003c/h3\u003e \u003cdiv class=\"grid2\"\u003e \u003cdiv class=\"code\"\u003e.frame:hover { z-index:100; filter:brightness(1.1); } .frame:hover .frame-inner { transform:scale(1.12) translateZ(30px); border-color:rgba(0,234,255,1); box-shadow:0 0 15px rgba(0,234,255,0.9), 0 0 35px rgba(0,234,255,0.7), 0 0 70px rgba(0,234,255,0.4); } .frame:hover .frame-inner img { transform:scale(1.05); filter:contrast(1.1) brightness(1.05) saturate(1.2); } .frame:hover .frame-inner::after { opacity:0.3; } .frame:hover .frame-label { opacity:1; transform:translateY(0); }\u003c/div\u003e \u003cdiv\u003e \u003cdiv style=\"display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px\"\u003e \u003cspan class=\"badge\"\u003ehover 放大 1.12\u003c/span\u003e \u003cspan class=\"pill\"\u003eZ 30px\u003c/span\u003e \u003cspan class=\"pill\"\u003e邊框 #00eaff\u003c/span\u003e \u003c/div\u003e \u003cp class=\"note\"\u003e懸停時自動轉速由 0.15 降至 0.03（JS 控制），離開恢復 0.15，便於聚焦閱讀標籤。\u003c/p\u003e \u003cdiv class=\"kv\" style=\"margin-top:10px\"\u003e \u003cdt\u003e標籤顯隱\u003c/dt\u003e\u003cdd\u003eopacity 0 → 1 · translateY(5px) → 0\u003c/dd\u003e \u003cdt\u003e掃描線\u003c/dt\u003e\u003cdd\u003e常駐 0.4 透明度，不攔截點擊\u003c/dd\u003e \u003cdt\u003e倒影\u003c/dt\u003e\u003cdd\u003escaleY(-1) · blur 2px · 遮罩淡出 70%\u003c/dd\u003e \u003c/div\u003e \u003c/div\u003e \u003c/div\u003e \u003c/section\u003e \u003csection class=\"card\"\u003e \u003ch2\u003e \u003csvg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\"\u003e\u003cpath d=\"M8 3v10M3 8h10\" stroke=\"currentColor\" stroke-linecap=\"round\"\u003e\u003c/path\u003e\u003ccircle cx=\"8\" cy=\"8\" r=\"6.2\" stroke=\"currentColor\" opacity=\".5\"\u003e\u003c/circle\u003e\u003c/svg\u003e 六幀陣列 · 6 Frames \u003c/h2\u003e \u003cp class=\"note\" style=\"margin-bottom:12px\"\u003e每幀為 \u003cspan style=\"font-family:var(--mono)\"\u003e\u0026lt;a class=\"frame\" style=\"--i:n\"\u0026gt;\u003c/span\u003e，內含 \u003cspan style=\"font-family:var(--mono)\"\u003e.frame-inner \u0026gt; img + .scanline + .frame-label + .reflection \u0026gt; img\u003c/span\u003e。點擊新分頁打開。\u003c/p\u003e \u003cdiv class=\"portal-grid\"\u003e \u003cdiv class=\"portal\"\u003e \u003cdiv class=\"thumb\"\u003e\u003cimg src=\"https://i.meee.com.tw/H4GSL7Z.jpg\" alt=\"主機區\"\u003e\u003cdiv class=\"scan\"\u003e\u003c/div\u003e\u003c/div\u003e \u003cdiv class=\"meta\"\u003e\u003cdiv class=\"idx\"\u003e--i: 0 · 主機區 // 01\u003c/div\u003e\u003cdiv class=\"label\"\u003eFrame 01\u003c/div\u003e\u003cdiv class=\"link\"\u003e\u003ca href=\"https://sites.google.com/view/shakewww1/1\" target=\"_blank\"\u003esites.google.com/view/shakewww1/1\u003c/a\u003e\u003c/div\u003e\u003cdiv class=\"note\"\u003e封面 H4GSL7Z.jpg · 倒影 EFZinBU.jpg\u003c/div\u003e\u003c/div\u003e \u003c/div\u003e \u003cdiv class=\"portal\"\u003e \u003cdiv class=\"thumb\"\u003e\u003cimg src=\"https://i.meee.com.tw/oHkDvXE.png\" alt=\"遊戲區\"\u003e\u003cdiv class=\"scan\"\u003e\u003c/div\u003e\u003c/div\u003e \u003cdiv class=\"meta\"\u003e\u003cdiv class=\"idx\"\u003e--i: 1 · 遊戲區 // 02\u003c/div\u003e\u003cdiv class=\"label\"\u003eFrame 02\u003c/div\u003e\u003cdiv class=\"link\"\u003e\u003ca href=\"https://sites.google.com/view/shakewww1/2/3/1\" target=\"_blank\"\u003esites.google.com/view/shakewww1/2/3/1\u003c/a\u003e\u003c/div\u003e\u003cdiv class=\"note\"\u003e封面 oHkDvXE.png · 倒影同圖\u003c/div\u003e\u003c/div\u003e \u003c/div\u003e \u003cdiv class=\"portal\"\u003e \u003cdiv class=\"thumb\"\u003e\u003cimg src=\"https://i.meee.com.tw/5cJdTEG.png\" alt=\"設計區\"\u003e\u003cdiv class=\"scan\"\u003e\u003c/div\u003e\u003c/div\u003e \u003cdiv class=\"meta\"\u003e\u003cdiv class=\"idx\"\u003e--i: 2 · 設計區 // 03\u003c/div\u003e\u003cdiv class=\"label\"\u003eFrame 03\u003c/div\u003e\u003cdiv class=\"link\"\u003e\u003ca href=\"https://sites.google.com/view/shakewww1/2/4/5\" target=\"_blank\"\u003esites.google.com/view/shakewww1/2/4/5\u003c/a\u003e\u003c/div\u003e\u003cdiv class=\"note\"\u003e封面 5cJdTEG.png\u003c/div\u003e\u003c/div\u003e \u003c/div\u003e \u003cdiv class=\"portal\"\u003e \u003cdiv class=\"thumb\"\u003e\u003cimg src=\"https://i.meee.com.tw/k0X2UVV.png\" alt=\"影音區\"\u003e\u003cdiv class=\"scan\"\u003e\u003c/div\u003e\u003c/div\u003e \u003cdiv class=\"meta\"\u003e\u003cdiv class=\"idx\"\u003e--i: 3 · 影音區 // 04\u003c/div\u003e\u003cdiv class=\"label\"\u003eFrame 04\u003c/div\u003e\u003cdiv class=\"link\"\u003e\u003ca href=\"https://sites.google.com/view/shakewww1/2/5/2\" target=\"_blank\"\u003esites.google.com/view/shakewww1/2/5/2\u003c/a\u003e\u003c/div\u003e\u003cdiv class=\"note\"\u003e封面 k0X2UVV.png\u003c/div\u003e\u003c/div\u003e \u003c/div\u003e \u003cdiv class=\"portal\"\u003e \u003cdiv class=\"thumb\"\u003e\u003cimg src=\"https://i.meee.com.tw/BmJHEDg.png\" alt=\"閱讀區\"\u003e\u003cdiv class=\"scan\"\u003e\u003c/div\u003e\u003c/div\u003e \u003cdiv class=\"meta\"\u003e\u003cdiv class=\"idx\"\u003e--i: 4 · 閱讀區 // 05\u003c/div\u003e\u003cdiv class=\"label\"\u003eFrame 05\u003c/div\u003e\u003cdiv class=\"link\"\u003e\u003ca href=\"https://sites.google.com/view/shakewww1/2\" target=\"_blank\"\u003esites.google.com/view/shakewww1/2\u003c/a\u003e\u003c/div\u003e\u003cdiv class=\"note\"\u003e封面 BmJHEDg.png\u003c/div\u003e\u003c/div\u003e \u003c/div\u003e \u003cdiv class=\"portal\"\u003e \u003cdiv class=\"thumb\"\u003e\u003cimg src=\"https://i.meee.com.tw/Afl914d.png\" alt=\"導覽區\"\u003e\u003cdiv class=\"scan\"\u003e\u003c/div\u003e\u003c/div\u003e \u003cdiv class=\"meta\"\u003e\u003cdiv class=\"idx\"\u003e--i: 5 · 導覽區 // 06\u003c/div\u003e\u003cdiv class=\"label\"\u003eFrame 06\u003c/div\u003e\u003cdiv class=\"link\"\u003e\u003ca href=\"https://sites.google.com/view/shakewww1/2/7/3\" target=\"_blank\"\u003esites.google.com/view/shakewww1/2/7/3\u003c/a\u003e\u003c/div\u003e\u003cdiv class=\"note\"\u003e封面 Afl914d.png\u003c/div\u003e\u003c/div\u003e \u003c/div\u003e \u003c/div\u003e \u003cdiv class=\"divider\"\u003e\u003c/div\u003e \u003cdiv class=\"table-wrap\"\u003e \u003ctable\u003e \u003cthead\u003e\u003ctr\u003e\u003cth\u003e#\u003c/th\u003e\u003cth\u003e標籤\u003c/th\u003e\u003cth\u003ehref\u003c/th\u003e\u003cth\u003eimg\u003c/th\u003e\u003cth\u003ereflection img\u003c/th\u003e\u003c/tr\u003e\u003c/thead\u003e \u003ctbody\u003e \u003ctr\u003e\u003ctd\u003e0\u003c/td\u003e\u003ctd\u003e主機區 // 01\u003c/td\u003e\u003ctd class=\"mono\"\u003ehttps://sites.google.com/view/shakewww1/1\u003c/td\u003e\u003ctd class=\"mono\"\u003ehttps://i.meee.com.tw/H4GSL7Z.jpg\u003c/td\u003e\u003ctd class=\"mono\"\u003ehttps://i.meee.com.tw/EFZinBU.jpg\u003c/td\u003e\u003c/tr\u003e \u003ctr\u003e\u003ctd\u003e1\u003c/td\u003e\u003ctd\u003e遊戲區 // 02\u003c/td\u003e\u003ctd class=\"mono\"\u003ehttps://sites.google.com/view/shakewww1/2/3/1\u003c/td\u003e\u003ctd class=\"mono\"\u003ehttps://i.meee.com.tw/oHkDvXE.png\u003c/td\u003e\u003ctd class=\"mono\"\u003ehttps://i.meee.com.tw/oHkDvXE.png\u003c/td\u003e\u003c/tr\u003e \u003ctr\u003e\u003ctd\u003e2\u003c/td\u003e\u003ctd\u003e設計區 // 03\u003c/td\u003e\u003ctd class=\"mono\"\u003ehttps://sites.google.com/view/shakewww1/2/4/5\u003c/td\u003e\u003ctd class=\"mono\"\u003ehttps://i.meee.com.tw/5cJdTEG.png\u003c/td\u003e\u003ctd class=\"mono\"\u003ehttps://i.meee.com.tw/5cJdTEG.png\u003c/td\u003e\u003c/tr\u003e \u003ctr\u003e\u003ctd\u003e3\u003c/td\u003e\u003ctd\u003e影音區 // 04\u003c/td\u003e\u003ctd class=\"mono\"\u003ehttps://sites.google.com/view/shakewww1/2/5/2\u003c/td\u003e\u003ctd class=\"mono\"\u003ehttps://i.meee.com.tw/k0X2UVV.png\u003c/td\u003e\u003ctd class=\"mono\"\u003ehttps://i.meee.com.tw/k0X2UVV.png\u003c/td\u003e\u003c/tr\u003e \u003ctr\u003e\u003ctd\u003e4\u003c/td\u003e\u003ctd\u003e閱讀區 // 05\u003c/td\u003e\u003ctd class=\"mono\"\u003ehttps://sites.google.com/view/shakewww1/2\u003c/td\u003e\u003ctd class=\"mono\"\u003ehttps://i.meee.com.tw/BmJHEDg.png\u003c/td\u003e\u003ctd class=\"mono\"\u003ehttps://i.meee.com.tw/BmJHEDg.png\u003c/td\u003e\u003c/tr\u003e \u003ctr\u003e\u003ctd\u003e5\u003c/td\u003e\u003ctd\u003e導覽區 // 06\u003c/td\u003e\u003ctd class=\"mono\"\u003ehttps://sites.google.com/view/shakewww1/2/7/3\u003c/td\u003e\u003ctd class=\"mono\"\u003ehttps://i.meee.com.tw/Afl914d.png\u003c/td\u003e\u003ctd class=\"mono\"\u003ehttps://i.meee.com.tw/Afl914d.png\u003c/td\u003e\u003c/tr\u003e \u003c/tbody\u003e \u003c/table\u003e \u003c/div\u003e \u003c/section\u003e \u003csection class=\"card\"\u003e \u003ch2\u003e \u003csvg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\"\u003e\u003cpath d=\"M3 8h10M8 3l5 5-5 5\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\u003c/path\u003e\u003c/svg\u003e 互動腳本 · 拖曳與慣性 \u003c/h2\u003e \u003col class=\"steps\"\u003e \u003cli\u003e\u003cdiv\u003e\u003cstrong\u003e自動旋轉\u003c/strong\u003e\u003cbr\u003e\u003cspan style=\"font-family:var(--mono);font-size:12px\"\u003erotation += (targetRotation - rotation)*0.08 · targetRotation += autoSpeed (0.15) · ring.style.transform = rotateY(-rotation deg)\u003c/span\u003e\u003cbr\u003e\u003cspan class=\"note\"\u003erequestAnimationFrame 循環；非拖曳時 velocity*=0.96 並疊加到 targetRotation\u003c/span\u003e\u003c/div\u003e\u003c/li\u003e \u003cli\u003e\u003cdiv\u003e\u003cstrong\u003e拖曳\u003c/strong\u003e\u003cbr\u003e\u003cspan style=\"font-family:var(--mono);font-size:12px\"\u003emousedown/touchstart → startDrag(x): isDragging=true, lastX=x, velocity=0, cursor=grabbing\u003cbr\u003emousemove/touchmove → moveDrag(x): dx=x-lastX, targetRotation-=dx*0.3, velocity=-dx*0.15\u003cbr\u003emouseup/touchend → endDrag(): isDragging=false, cursor=grab\u003c/span\u003e\u003c/div\u003e\u003c/li\u003e \u003cli\u003e\u003cdiv\u003e\u003cstrong\u003e懸停減速\u003c/strong\u003e\u003cbr\u003e\u003cspan style=\"font-family:var(--mono);font-size:12px\"\u003eframe mouseenter → autoSpeed=0.03 · mouseleave → autoSpeed=0.15\u003c/span\u003e\u003cbr\u003e\u003cspan class=\"note\"\u003e拖曳中 velocity*=0.9 衰減\u003c/span\u003e\u003c/div\u003e\u003c/li\u003e \u003c/ol\u003e \u003cdiv class=\"code\" style=\"margin-top:12px\"\u003econst stage=document.getElementById('stage'); const ring=document.getElementById('ring'); let rotation=0,targetRotation=0,isDragging=false,lastX=0,velocity=0,lastTime=0,autoSpeed=0.15; function animate(){ const now=performance.now(); lastTime=now; if(!isDragging){ targetRotation+=autoSpeed; velocity*=0.96; targetRotation+=velocity; } else { velocity*=0.9; } rotation+=(targetRotation-rotation)*0.08; ring.style.transform=`rotateY(${-rotation}deg)`; requestAnimationFrame(animate); } animate(); stage.addEventListener('mousedown',e=\u0026gt;{startDrag(e.clientX); e.preventDefault();}); window.addEventListener('mousemove',e=\u0026gt;moveDrag(e.clientX)); window.addEventListener('mouseup',endDrag); stage.addEventListener('touchstart',e=\u0026gt;{ if(e.touches.length===1) startDrag(e.touches[0].clientX); },{passive:true}); window.addEventListener('touchmove',e=\u0026gt;{ if(e.touches.length===1) moveDrag(e.touches[0].clientX); },{passive:true}); window.addEventListener('touchend',endDrag);\u003c/div\u003e \u003cdiv class=\"kv\" style=\"margin-top:10px\"\u003e \u003cdt\u003e容器\u003c/dt\u003e\u003cdd\u003estage#stage 監聽 mousedown/touchstart；window 監聽 move/up\u003c/dd\u003e \u003cdt\u003e靈敏度\u003c/dt\u003e\u003cdd\u003edx*0.3 轉角度 · velocity -dx*0.15 慣性\u003c/dd\u003e \u003cdt\u003e阻尼\u003c/dt\u003e\u003cdd\u003e非拖曳 0.96 · 拖曳 0.9 · 插值 0.08\u003c/dd\u003e \u003c/div\u003e \u003c/section\u003e \u003csection class=\"card\"\u003e \u003ch2\u003e \u003csvg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\"\u003e\u003crect x=\"2.5\" y=\"2.5\" width=\"11\" height=\"11\" rx=\"1.5\" stroke=\"currentColor\"\u003e\u003c/rect\u003e\u003cpath d=\"M2.5 6h11M6 2.5v11\" stroke=\"currentColor\" opacity=\".6\"\u003e\u003c/path\u003e\u003c/svg\u003e 響應式 · 半徑與尺寸 \u003c/h2\u003e \u003cdiv class=\"table-wrap\"\u003e \u003ctable\u003e \u003cthead\u003e\u003ctr\u003e\u003cth\u003e斷點\u003c/th\u003e\u003cth\u003e:root --radius\u003c/th\u003e\u003cth\u003e.frame 尺寸\u003c/th\u003e\u003cth\u003e.frame margin\u003c/th\u003e\u003cth\u003e備註\u003c/th\u003e\u003c/tr\u003e\u003c/thead\u003e \u003ctbody\u003e \u003ctr\u003e\u003ctd\u003e預設 \u0026gt;900px\u003c/td\u003e\u003ctd class=\"mono\"\u003e520px\u003c/td\u003e\u003ctd class=\"mono\"\u003e320 × 180\u003c/td\u003e\u003ctd class=\"mono\"\u003e-90px 0 0 -160px\u003c/td\u003e\u003ctd\u003e基準\u003c/td\u003e\u003c/tr\u003e \u003ctr\u003e\u003ctd\u003e≤900px\u003c/td\u003e\u003ctd class=\"mono\"\u003e380px\u003c/td\u003e\u003ctd class=\"mono\"\u003e260 × 146\u003c/td\u003e\u003ctd class=\"mono\"\u003e-73px 0 0 -130px\u003c/td\u003e\u003ctd\u003e\u003c/td\u003e\u003c/tr\u003e \u003ctr\u003e\u003ctd\u003e≤640px\u003c/td\u003e\u003ctd class=\"mono\"\u003e300px\u003c/td\u003e\u003ctd class=\"mono\"\u003e220 × 124\u003c/td\u003e\u003ctd class=\"mono\"\u003e-62px 0 0 -110px\u003c/td\u003e\u003ctd\u003e.header h1 → 32px\u003c/td\u003e\u003c/tr\u003e \u003ctr\u003e\u003ctd\u003e≤420px\u003c/td\u003e\u003ctd class=\"mono\"\u003e240px\u003c/td\u003e\u003ctd class=\"mono\"\u003e180 × 101\u003c/td\u003e\u003ctd class=\"mono\"\u003e-50px 0 0 -90px\u003c/td\u003e\u003ctd\u003e\u003c/td\u003e\u003c/tr\u003e \u003c/tbody\u003e \u003c/table\u003e \u003c/div\u003e \u003cdiv class=\"code\"\u003efunction setRadius(){ const w=window.innerWidth; let r=520; if(w\u0026lt;420) r=240; else if(w\u0026lt;640) r=300; else if(w\u0026lt;900) r=380; document.documentElement.style.setProperty('--radius', r+'px'); } setRadius(); window.addEventListener('resize', setRadius);\u003c/div\u003e \u003cp class=\"note\"\u003eJS 與 CSS 媒體查詢同步控制半徑，確保環形在窄視口不溢出。\u003c/p\u003e \u003c/section\u003e \u003csection class=\"card\" style=\"border-style:dashed\"\u003e \u003ch2\u003e \u003csvg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\"\u003e\u003cpath d=\"M8 2.5l6 3.5v7L8 16 2 12.5v-7L8 2.5Z\" stroke=\"currentColor\"\u003e\u003c/path\u003e\u003cpath d=\"M8 8.5v4\" stroke=\"currentColor\" stroke-linecap=\"round\"\u003e\u003c/path\u003e\u003c/svg\u003e 結構快照 \u003c/h2\u003e \u003cdiv class=\"code\"\u003e\u0026lt;div class=\"viewport\"\u0026gt; \u0026lt;header class=\"header\"\u0026gt; \u0026lt;h1\u0026gt;導覽\u0026lt;/h1\u0026gt; \u0026lt;p\u0026gt;旋轉傳送門陣列 // 6幀 - 拖曳旋轉·懸停聚焦·點擊打開\u0026lt;/p\u0026gt; \u0026lt;/header\u0026gt; \u0026lt;div class=\"stage\" id=\"stage\"\u0026gt; \u0026lt;div class=\"ring\" id=\"ring\"\u0026gt; \u0026lt;a class=\"frame\" href=\"...\" style=\"--i:0\"\u0026gt;\u0026lt;div class=\"frame-inner\"\u0026gt;...\u0026lt;/div\u0026gt;\u0026lt;/a\u0026gt; ×6 \u0026lt;/div\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;div class=\"hint\"\u0026gt;ROTATING PORTAL ARRAY // DRAG TO ROTATE\u0026lt;/div\u0026gt; \u0026lt;/div\u0026gt;\u003c/div\u003e \u003cdiv style=\"margin-top:10px;display:flex;gap:8px;flex-wrap:wrap\"\u003e \u003cspan class=\"tag\"\u003epreserve-3d\u003c/span\u003e \u003cspan class=\"tag\"\u003ewill-change: transform\u003c/span\u003e \u003cspan class=\"tag\"\u003ebackface-visibility:hidden\u003c/span\u003e \u003cspan class=\"tag\"\u003emix-blend-mode: screen\u003c/span\u003e \u003c/div\u003e \u003c/section\u003e \u003cdiv style=\"text-align:center;margin-top:10px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)\"\u003eSHAKEWE · 透明固定 · 拖曳旋轉 · 懸停聚焦 · 點擊打開\u003c/div\u003e \u003c/div\u003e","createdAt":1788152771472,"deletedAt":null,"displayMode":"artifact","embedRenders":{},"embedRendersDark":{},"id":"6a950bc3b00f3fa2d9689e34","isPublic":true,"itemType":"NOTE","name":"導覽模塊","parents":{"6a952a78b00f3fa2d9689e36":1788160651134},"pinnedAt":null,"preParentID":null,"updatedAt":1789231433800,"updatedBy":{"userId":"6a91ded101b34b802c0c3c","userName":"林"},"version":22,"websiteContent":"[{\"originUrl\":\"https://app.cubelv.com/share/70dc79762ebd26444f9229f0\",\"title\":null,\"content\":null,\"imageUrl\":null},{\"originUrl\":\"https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;900\u0026amp;family=Inter:wght@300;400;500\u0026amp;display=swap\",\"title\":null,\"content\":null,\"imageUrl\":null},{\"originUrl\":\"https://sites.google.com/view/shakewww1/1\",\"title\":null,\"content\":null,\"imageUrl\":null},{\"originUrl\":\"https://i.meee.com.tw/H4GSL7Z.jpg\",\"title\":null,\"content\":null,\"imageUrl\":null},{\"originUrl\":\"https://i.meee.com.tw/EFZinBU.jpg\",\"title\":null,\"content\":null,\"imageUrl\":null},{\"originUrl\":\"https://sites.google.com/view/shakewww1/2/3/1\",\"title\":null,\"content\":null,\"imageUrl\":null},{\"originUrl\":\"https://i.meee.com.tw/oHkDvXE.png\",\"title\":null,\"content\":null,\"imageUrl\":null},{\"originUrl\":\"https://sites.google.com/view/shakewww1/2/4/5\",\"title\":null,\"content\":null,\"imageUrl\":null},{\"originUrl\":\"https://i.meee.com.tw/5cJdTEG.png\",\"title\":null,\"content\":null,\"imageUrl\":null},{\"originUrl\":\"https://sites.google.com/view/shakewww1/2/5/2\",\"title\":null,\"content\":null,\"imageUrl\":null},{\"originUrl\":\"https://i.meee.com.tw/k0X2UVV.png\",\"title\":null,\"content\":null,\"imageUrl\":null},{\"originUrl\":\"https://sites.google.com/view/shakewww1/2\",\"title\":null,\"content\":null,\"imageUrl\":null},{\"originUrl\":\"https://i.meee.com.tw/BmJHEDg.png\",\"title\":null,\"content\":null,\"imageUrl\":null},{\"originUrl\":\"https://sites.google.com/view/shakewww1/2/7/3\",\"title\":null,\"content\":null,\"imageUrl\":null},{\"originUrl\":\"https://i.meee.com.tw/Afl914d.png\",\"title\":null,\"content\":null,\"imageUrl\":null}]"},"ownerName":"林","subtree":[{"aiFolderID":null,"artifactHtml":"\u003cstyle\u003e\n:root{\n --paper:#f7fbfc;\n --paper-2:#eef6f8;\n --ink:#0b1e2a;\n --ink-2:#5a7586;\n --accent:#00a9c8;\n --accent-strong:#00d0ff;\n --soft:#e6f4f8;\n --hair:#d2e6ec;\n --card:#ffffff;\n --ok:#0a7a5c;\n --warn:#8a6d00;\n --shadow:0 10px 30px rgba(11,30,42,.07), 0 1px 0 rgba(11,30,42,.06);\n --radius-card:16px;\n --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, \"Cascadia Mono\", monospace;\n --sans: \"Inter\", system-ui, -apple-system, Segoe UI, Roboto, \"Helvetica Neue\", Arial, sans-serif;\n --display: \"Orbitron\", ui-monospace, SFMono-Regular, Menlo, monospace;\n}\n:root[data-theme=\"dark\"]{\n --paper:#050c14;\n --paper-2:#081a26;\n --ink:#e6faff;\n --ink-2:#8ab6c6;\n --accent:#00eaff;\n --accent-strong:#00eaff;\n --soft:#0a1e2e;\n --hair:#143040;\n --card:#0d2133;\n --shadow:0 16px 40px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.06);\n}\n*{box-sizing:border-box}\n.wrap{\n background:var(--paper);\n color:var(--ink);\n font-family:var(--sans);\n line-height:1.6;\n padding:28px 18px 40px;\n border:1px solid var(--hair);\n border-radius:20px;\n max-width:980px;\n margin:0 auto;\n}\na{color:var(--accent);text-decoration:none;word-break:break-all}\na:hover{text-decoration:underline}\nheader{\n padding:18px 20px 18px;\n background:linear-gradient(180deg, var(--card) 0%, var(--paper-2) 100%);\n border:1px solid var(--hair);\n border-radius:var(--radius-card);\n box-shadow:var(--shadow);\n position:relative;\n overflow:hidden;\n}\nheader::before{\n content:\"\";\n position:absolute;inset:0 0 auto 0;height:3px;\n background:linear-gradient(90deg, var(--accent) 0%, #7af0ff 50%, transparent 100%);\n opacity:.9;\n}\n.eyebrow{\n font-family:var(--mono);\n font-size:11px;\n letter-spacing:.22em;\n text-transform:uppercase;\n color:var(--accent);\n font-weight:700;\n display:flex;align-items:center;gap:8px;\n}\n.eyebrow::before{\n content:\"\";width:8px;height:8px;border-radius:50%;\n background:var(--accent);box-shadow:0 0 10px var(--accent);\n display:inline-block;\n}\nh1{\n font-family:var(--display);\n font-weight:900;\n letter-spacing:.12em;\n font-size:clamp(28px,5vw,42px);\n margin:10px 0 8px;\n line-height:1.1;\n color:var(--ink);\n}\n.lede{\n font-size:14px;\n color:var(--ink-2);\n max-width:72ch;\n margin:0;\n letter-spacing:.02em;\n}\n.lede strong{color:var(--ink);font-weight:600}\nsection[data-cube=\"stats\"]{\n display:grid;\n grid-template-columns:repeat(4,1fr);\n gap:12px;\n margin:16px 0 18px;\n}\n.stat{\n background:var(--card);\n border:1px solid var(--hair);\n border-radius:14px;\n padding:14px 14px 12px;\n box-shadow:var(--shadow);\n position:relative;\n overflow:hidden;\n}\n.stat::after{\n content:\"\";position:absolute;left:0;right:0;bottom:0;height:2px;\n background:linear-gradient(90deg, var(--accent), transparent);\n opacity:.6;\n}\n.stat .label{\n font-family:var(--mono);\n font-size:10px;\n letter-spacing:.18em;\n text-transform:uppercase;\n color:var(--ink-2);\n margin-bottom:6px;\n}\n.stat .value{\n font-family:var(--display);\n font-size:22px;\n font-weight:800;\n letter-spacing:.06em;\n color:var(--ink);\n line-height:1;\n}\n.stat .note{\n font-size:11px;\n color:var(--ink-2);\n margin-top:6px;\n letter-spacing:.02em;\n}\n.card{\n background:var(--card);\n border:1px solid var(--hair);\n border-radius:var(--radius-card);\n box-shadow:var(--shadow);\n padding:18px 18px 16px;\n margin-bottom:14px;\n}\n.card h2{\n font-family:var(--display);\n font-size:14px;\n letter-spacing:.14em;\n text-transform:uppercase;\n margin:0 0 12px;\n display:flex;align-items:center;gap:10px;\n}\n.card h2 svg{flex:0 0 auto}\n.card h3{\n font-family:var(--mono);\n font-size:12px;\n letter-spacing:.14em;\n text-transform:uppercase;\n color:var(--accent);\n margin:18px 0 8px;\n border-top:1px dashed var(--hair);\n padding-top:14px;\n}\n.card h3:first-of-type{border-top:none;padding-top:0;margin-top:4px}\n.grid2{\n display:grid;\n grid-template-columns:1fr 1fr;\n gap:12px;\n}\n@media(max-width:760px){\n section[data-cube=\"stats\"]{grid-template-columns:1fr 1fr}\n .grid2{grid-template-columns:1fr}\n}\n.table-wrap{overflow-x:auto;margin:8px 0 10px;border:1px solid var(--hair);border-radius:12px}\ntable{width:100%;border-collapse:collapse;min-width:560px;font-size:13px}\nth,td{padding:10px 10px;text-align:left;border-bottom:1px solid var(--hair);vertical-align:top}\nth{\n font-family:var(--mono);\n font-size:11px;\n letter-spacing:.12em;\n text-transform:uppercase;\n color:var(--ink-2);\n background:var(--soft);\n white-space:nowrap;\n}\ntd{color:var(--ink)}\ntd.mono{font-family:var(--mono);font-size:12px;word-break:break-all}\n.tag{\n display:inline-flex;align-items:center;gap:6px;\n font-family:var(--mono);font-size:11px;letter-spacing:.08em;\n text-transform:uppercase;\n padding:4px 8px;border-radius:999px;\n border:1px solid var(--hair);\n background:var(--soft);\n color:var(--ink-2);\n white-space:nowrap;\n}\n.tag.live{color:#0a5c4a;border-color:rgba(0,200,180,.3);background:rgba(0,200,180,.12)}\n.tag.muted{opacity:.9}\n.kv{\n display:grid;grid-template-columns:140px 1fr;\n gap:6px 12px;\n font-size:13px;\n padding:8px 10px;\n background:var(--soft);\n border:1px solid var(--hair);\n border-radius:12px;\n}\n.kv dt{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}\n.kv dd{margin:0;color:var(--ink);font-family:var(--mono);font-size:12px;word-break:break-all}\n.code{\n font-family:var(--mono);\n font-size:12px;\n line-height:1.6;\n background:var(--paper-2);\n border:1px solid var(--hair);\n border-radius:12px;\n padding:12px 14px;\n overflow-x:auto;\n white-space:pre-wrap;\n word-break:break-all;\n color:var(--ink);\n}\n.steps{counter-reset:step;margin:8px 0 0;padding:0;list-style:none;display:grid;gap:10px}\n.steps li{\n counter-increment:step;\n display:grid;grid-template-columns:32px 1fr;gap:10px;\n align-items:start;\n background:var(--soft);\n border:1px solid var(--hair);\n border-radius:12px;\n padding:12px;\n}\n.steps li::before{\n content:counter(step);\n width:28px;height:28px;border-radius:50%;\n display:grid;place-items:center;\n background:var(--ink);color:var(--paper);\n font-family:var(--mono);font-size:12px;font-weight:700;\n}\n:root[data-theme=\"dark\"] .steps li::before{background:var(--accent);color:#00131a}\n.portal-grid{\n display:grid;\n grid-template-columns:repeat(3,1fr);\n gap:12px;\n}\n@media(max-width:760px){.portal-grid{grid-template-columns:1fr 1fr}}\n@media(max-width:520px){.portal-grid{grid-template-columns:1fr}}\n.portal{\n border:1px solid var(--hair);\n border-radius:14px;\n overflow:hidden;\n background:var(--paper-2);\n display:flex;flex-direction:column;\n}\n.portal .thumb{\n aspect-ratio:16/9;\n background:#020a12;\n position:relative;\n overflow:hidden;\n border-bottom:1px solid var(--hair);\n}\n.portal .thumb img{width:100%;height:100%;object-fit:cover;display:block}\n.portal .thumb::after{\n content:\"\";position:absolute;inset:0;\n background:linear-gradient(to top, rgba(0,10,20,.7) 0%, transparent 40%);\n mix-blend-mode:screen;opacity:.7;\n}\n.scan{\n position:absolute;inset:0;\n background:repeating-linear-gradient(to bottom, transparent 0px, transparent 2px, rgba(0,234,255,.06) 3px);\n opacity:.4;pointer-events:none;\n}\n.portal .meta{padding:10px 12px 12px}\n.portal .idx{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:700}\n.portal .label{font-family:var(--display);font-size:12px;letter-spacing:.12em;text-transform:uppercase;margin:4px 0 6px}\n.portal .link{font-family:var(--mono);font-size:11px}\n.badge{\n display:inline-flex;\n font-family:var(--mono);font-size:10px;letter-spacing:.12em;\n text-transform:uppercase;\n padding:3px 7px;border-radius:999px;\n background:var(--ink);color:var(--paper);\n}\n:root[data-theme=\"dark\"] .badge{background:var(--accent);color:#00131a}\n.note{font-size:12px;color:var(--ink-2);margin:6px 0 0}\n.divider{height:1px;background:var(--hair);margin:14px 0}\n.pill{\n display:inline-flex;align-items:center;\n font-family:var(--mono);font-size:11px;\n padding:4px 8px;border-radius:999px;\n border:1px solid var(--hair);background:var(--soft);color:var(--ink-2)\n}\n\u003c/style\u003e\n\u003cdiv class=\"wrap\"\u003e\n \u003cheader\u003e\n \u003cdiv class=\"eyebrow\"\u003eSHAKEWE // Rotating Portal Grid — Transparent Fixed\u003c/div\u003e\n \u003ch1\u003e導覽模塊\u003c/h1\u003e\n \u003cp class=\"lede\"\u003e\u003cstrong\u003e旋轉傳送門陣列 // 6幀 — 拖曳旋轉 · 懸停聚焦 · 點擊打開。\u003c/strong\u003e 透明背景、環形 3D 透視、自動旋轉與慣性拖曳的導覽模塊。原始文件為 \u003cspan class=\"mono\" style=\"font-family:var(--mono)\"\u003een\u003c/span\u003e、\u003cspan class=\"mono\" style=\"font-family:var(--mono)\"\u003eUTF-8\u003c/span\u003e、不可縮放視口，標題為 SHAKEWE // Rotating Portal Grid - Transparent Fixed。\u003c/p\u003e\n \u003c/header\u003e\n\n \u003csection data-cube=\"stats\"\u003e\n \u003cdiv class=\"stat\"\u003e\n \u003cdiv class=\"label\"\u003e幀數\u003c/div\u003e\n \u003cdiv class=\"value\"\u003e6 幀\u003c/div\u003e\n \u003cdiv class=\"note\"\u003e60° 等分 · --i 0–5\u003c/div\u003e\n \u003c/div\u003e\n \u003cdiv class=\"stat\"\u003e\n \u003cdiv class=\"label\"\u003e半徑\u003c/div\u003e\n \u003cdiv class=\"value\"\u003e520 px\u003c/div\u003e\n \u003cdiv class=\"note\"\u003e預設 --radius，響應式遞減\u003c/div\u003e\n \u003c/div\u003e\n \u003cdiv class=\"stat\"\u003e\n \u003cdiv class=\"label\"\u003e透視\u003c/div\u003e\n \u003cdiv class=\"value\"\u003e2000 px\u003c/div\u003e\n \u003cdiv class=\"note\"\u003eperspective-origin 50% 40%\u003c/div\u003e\n \u003c/div\u003e\n \u003cdiv class=\"stat\"\u003e\n \u003cdiv class=\"label\"\u003e自動轉速\u003c/div\u003e\n \u003cdiv class=\"value\"\u003e0.15\u003c/div\u003e\n \u003cdiv class=\"note\"\u003e懸停降至 0.03 · 慣性衰減\u003c/div\u003e\n \u003c/div\u003e\n \u003c/section\u003e\n\n \u003csection class=\"card\"\u003e\n \u003ch2\u003e\n \u003csvg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\"\u003e\u003crect x=\"1.5\" y=\"1.5\" width=\"13\" height=\"13\" rx=\"3\" stroke=\"currentColor\" opacity=\".9\"/\u003e\u003ccircle cx=\"8\" cy=\"8\" r=\"3.2\" stroke=\"currentColor\"/\u003e\u003cpath d=\"M8 1.5v2M8 12.5v2M1.5 8h2M12.5 8h2\" stroke=\"currentColor\" stroke-linecap=\"round\"/\u003e\u003c/svg\u003e\n 模塊概覽 · 文件頭\n \u003c/h2\u003e\n \u003cdiv class=\"grid2\"\u003e\n \u003cdiv class=\"kv\"\u003e\n \u003cdt\u003eDOCTYPE / lang\u003c/dt\u003e\u003cdd\u003e\u0026lt;!DOCTYPE html\u0026gt; · \u0026lt;html lang=\"en\"\u0026gt;\u003c/dd\u003e\n \u003cdt\u003echarset\u003c/dt\u003e\u003cdd\u003eUTF-8\u003c/dd\u003e\n \u003cdt\u003eviewport\u003c/dt\u003e\u003cdd\u003ewidth=device-width, initial-scale=1.0, user-scalable=no\u003c/dd\u003e\n \u003cdt\u003etitle\u003c/dt\u003e\u003cdd\u003eSHAKEWE // Rotating Portal Grid - Transparent Fixed\u003c/dd\u003e\n \u003cdt\u003efonts\u003c/dt\u003e\u003cdd\u003eOrbitron 500/700/900 · Inter 300/400/500\u003cbr\u003e\u003cspan style=\"word-break:break-all\"\u003ehttps://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;900\u0026amp;family=Inter:wght@300;400;500\u0026amp;display=swap\u003c/span\u003e\u003c/dd\u003e\n \u003c/div\u003e\n \u003cdiv\u003e\n \u003cdiv class=\"code\"\u003e\u0026lt;meta charset=\"UTF-8\"\u0026gt;\n\u0026lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\"\u0026gt;\n\u0026lt;title\u0026gt;SHAKEWE // Rotating Portal Grid - Transparent Fixed\u0026lt;/title\u0026gt;\u003c/div\u003e\n \u003cp class=\"note\"\u003e背景強制透明：\u003cspan style=\"font-family:var(--mono)\"\u003ebackground: transparent !important; background-color: transparent !important;\u003c/span\u003e · 全局 \u003cspan style=\"font-family:var(--mono)\"\u003etouch-action:none; user-select:none;\u003c/span\u003e\u003c/p\u003e\n \u003cdiv style=\"margin-top:10px;display:flex;gap:8px;flex-wrap:wrap\"\u003e\n \u003cspan class=\"tag live\"\u003e● 透明固定\u003c/span\u003e\n \u003cspan class=\"tag\"\u003eOrbitron 標題\u003c/span\u003e\n \u003cspan class=\"tag\"\u003eInter 內文\u003c/span\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n\n \u003ch3\u003e基礎重置與隱藏層\u003c/h3\u003e\n \u003cdiv class=\"table-wrap\"\u003e\n \u003ctable\u003e\n \u003cthead\u003e\u003ctr\u003e\u003cth\u003e選擇器\u003c/th\u003e\u003cth\u003e規則\u003c/th\u003e\u003cth\u003e說明\u003c/th\u003e\u003c/tr\u003e\u003c/thead\u003e\n \u003ctbody\u003e\n \u003ctr\u003e\u003ctd class=\"mono\"\u003e:root\u003c/td\u003e\u003ctd class=\"mono\"\u003e--radius: 520px;\u003c/td\u003e\u003ctd\u003e環形半徑基準\u003c/td\u003e\u003c/tr\u003e\n \u003ctr\u003e\u003ctd class=\"mono\"\u003e*\u003c/td\u003e\u003ctd class=\"mono\"\u003emargin:0; padding:0; box-sizing:border-box;\u003c/td\u003e\u003ctd\u003e重置\u003c/td\u003e\u003c/tr\u003e\n \u003ctr\u003e\u003ctd class=\"mono\"\u003ehtml, body\u003c/td\u003e\u003ctd class=\"mono\"\u003eheight:100%; overflow:hidden; background:transparent !important; color:#e6faff; font-family:'Inter',system-ui,sans-serif; touch-action:none; user-select:none;\u003c/td\u003e\u003ctd\u003e滿高、禁滾動、透明底、淺青文字\u003c/td\u003e\u003c/tr\u003e\n \u003ctr\u003e\u003ctd class=\"mono\"\u003e.universe, .horizon-glow, .grid-wrapper, .grid, .vignette\u003c/td\u003e\u003ctd class=\"mono\"\u003edisplay:none !important;\u003c/td\u003e\u003ctd\u003e裝飾層全部隱藏\u003c/td\u003e\u003c/tr\u003e\n \u003c/tbody\u003e\n \u003c/table\u003e\n \u003c/div\u003e\n \u003c/section\u003e\n\n \u003csection class=\"card\"\u003e\n \u003ch2\u003e\n \u003csvg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\"\u003e\u003cpath d=\"M2 5.5L8 2l6 3.5v7L8 16 2 12.5v-7Z\" stroke=\"currentColor\"/\u003e\u003cpath d=\"M2 5.5L8 9l6-3.5M8 16V9\" stroke=\"currentColor\"/\u003e\u003c/svg\u003e\n 視口與標頭 · Stage 結構\n \u003c/h2\u003e\n \u003cdiv class=\"table-wrap\"\u003e\n \u003ctable\u003e\n \u003cthead\u003e\u003ctr\u003e\u003cth\u003e元素\u003c/th\u003e\u003cth\u003e樣式\u003c/th\u003e\u003cth\u003e數值\u003c/th\u003e\u003c/tr\u003e\u003c/thead\u003e\n \u003ctbody\u003e\n \u003ctr\u003e\u003ctd class=\"mono\"\u003e.viewport\u003c/td\u003e\u003ctd\u003eposition:relative; z-index:2; height:100vh; width:100vw; display:flex; flex-direction:column; align-items:center;\u003c/td\u003e\u003ctd\u003e全視口容器\u003c/td\u003e\u003c/tr\u003e\n \u003ctr\u003e\u003ctd class=\"mono\"\u003e.header\u003c/td\u003e\u003ctd class=\"mono\"\u003emargin-top:clamp(24px,5vh,60px); text-align:center; z-index:10;\u003c/td\u003e\u003ctd\u003e置頂標頭\u003c/td\u003e\u003c/tr\u003e\n \u003ctr\u003e\u003ctd class=\"mono\"\u003e.header h1\u003c/td\u003e\u003ctd class=\"mono\"\u003efont-family:'Orbitron',monospace; font-weight:900; font-size:clamp(28px,5vw,54px); letter-spacing:0.18em; color:#fff; text-shadow:0 0 10px rgba(0,234,255,0.8),0 0 30px rgba(0,234,255,0.5); margin-bottom:8px;\u003c/td\u003e\u003ctd\u003e內容：導覽\u003c/td\u003e\u003c/tr\u003e\n \u003ctr\u003e\u003ctd class=\"mono\"\u003e.header p\u003c/td\u003e\u003ctd class=\"mono\"\u003efont-size:13px; letter-spacing:0.3em; text-transform:uppercase; color:rgba(180,240,255,0.7); font-weight:300;\u003c/td\u003e\u003ctd\u003e內容：旋轉傳送門陣列 // 6幀 - 拖曳旋轉·懸停聚焦·點擊打開\u003c/td\u003e\u003c/tr\u003e\n \u003ctr\u003e\u003ctd class=\"mono\"\u003e.stage#stage\u003c/td\u003e\u003ctd class=\"mono\"\u003eflex:1; width:100%; position:relative; display:flex; align-items:center; justify-content:center; perspective:2000px; perspective-origin:50% 40%; cursor:grab;\u003c/td\u003e\u003ctd\u003e:active → grabbing\u003c/td\u003e\u003c/tr\u003e\n \u003ctr\u003e\u003ctd class=\"mono\"\u003e.ring#ring\u003c/td\u003e\u003ctd class=\"mono\"\u003eposition:relative; width:1px; height:1px; transform-style:preserve-3d; will-change:transform;\u003c/td\u003e\u003ctd\u003etransform: rotateY(-rotation deg)\u003c/td\u003e\u003c/tr\u003e\n \u003ctr\u003e\u003ctd class=\"mono\"\u003e.hint\u003c/td\u003e\u003ctd class=\"mono\"\u003eposition:absolute; bottom:clamp(20px,4vh,40px); left:50%; transform:translateX(-50%); font-size:11px; letter-spacing:0.25em; text-transform:uppercase; color:rgba(140,220,255,0.5); font-weight:300; animation:pulse 3s ease-in-out infinite;\u003c/td\u003e\u003ctd\u003e文案：ROTATING PORTAL ARRAY // DRAG TO ROTATE\u003c/td\u003e\u003c/tr\u003e\n \u003c/tbody\u003e\n \u003c/table\u003e\n \u003c/div\u003e\n \u003cdiv class=\"code\"\u003e@keyframes pulse { 0%,100% {opacity:0.5} 50% {opacity:0.9} }\u003c/div\u003e\n \u003c/section\u003e\n\n \u003csection class=\"card\"\u003e\n \u003ch2\u003e\n \u003csvg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\"\u003e\u003crect x=\"2\" y=\"3\" width=\"12\" height=\"8\" rx=\"2\" stroke=\"currentColor\"/\u003e\u003cpath d=\"M5 13l3-2 3 2\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/\u003e\u003ccircle cx=\"8\" cy=\"7\" r=\"1.6\" stroke=\"currentColor\"/\u003e\u003c/svg\u003e\n 幀 · Frame 規格\n \u003c/h2\u003e\n \u003cdiv class=\"table-wrap\"\u003e\n \u003ctable\u003e\n \u003cthead\u003e\u003ctr\u003e\u003cth\u003e選擇器\u003c/th\u003e\u003cth\u003e關鍵樣式\u003c/th\u003e\u003c/tr\u003e\u003c/thead\u003e\n \u003ctbody\u003e\n \u003ctr\u003e\u003ctd class=\"mono\"\u003e.frame\u003c/td\u003e\u003ctd class=\"mono\"\u003eposition:absolute; top:0; left:0; width:320px; height:180px; margin:-90px 0 0 -160px; transform:rotateY(calc(var(--i) * 60deg)) translateZ(var(--radius)); transform-style:preserve-3d; text-decoration:none; transition:filter 0.3s ease;\u003c/td\u003e\u003c/tr\u003e\n \u003ctr\u003e\u003ctd class=\"mono\"\u003e.frame-inner\u003c/td\u003e\u003ctd class=\"mono\"\u003ewidth:100%; height:100%; border-radius:14px; overflow:hidden; background:#020a12; border:1.5px solid rgba(0,234,255,0.7); box-shadow:0 0 8px rgba(0,234,255,0.6),0 0 20px rgba(0,234,255,0.4),0 0 40px rgba(0,234,255,0.2); transition:all 0.4s cubic-bezier(0.2,0.8,0.2,1); transform:scale(1) translateZ(0); backface-visibility:hidden;\u003c/td\u003e\u003c/tr\u003e\n \u003ctr\u003e\u003ctd class=\"mono\"\u003e.frame-inner img\u003c/td\u003e\u003ctd class=\"mono\"\u003ewidth:100%; height:100%; object-fit:cover; display:block; filter:contrast(1.05) brightness(0.95) saturate(1.1); transition:transform 0.6s ease,filter 0.4s ease;\u003c/td\u003e\u003c/tr\u003e\n \u003ctr\u003e\u003ctd class=\"mono\"\u003e.frame-inner::after\u003c/td\u003e\u003ctd class=\"mono\"\u003econtent:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,10,20,0.7) 0%, transparent 40%); mix-blend-mode:screen; opacity:0.7; transition:opacity 0.3s;\u003c/td\u003e\u003c/tr\u003e\n \u003ctr\u003e\u003ctd class=\"mono\"\u003e.scanline\u003c/td\u003e\u003ctd class=\"mono\"\u003eposition:absolute; inset:0; background:repeating-linear-gradient(to bottom,transparent 0px,transparent 2px,rgba(0,234,255,0.06) 3px); opacity:0.4; pointer-events:none;\u003c/td\u003e\u003c/tr\u003e\n \u003ctr\u003e\u003ctd class=\"mono\"\u003e.frame-label\u003c/td\u003e\u003ctd class=\"mono\"\u003eposition:absolute; bottom:8px; left:10px; right:10px; font-family:'Orbitron',monospace; font-size:10px; letter-spacing:0.2em; color:rgba(180,250,255,0.9); text-shadow:0 0 10px rgba(0,234,255,0.8); text-transform:uppercase; opacity:0; transform:translateY(5px); transition:all 0.3s ease; pointer-events:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;\u003c/td\u003e\u003c/tr\u003e\n \u003ctr\u003e\u003ctd class=\"mono\"\u003e.reflection\u003c/td\u003e\u003ctd class=\"mono\"\u003eposition:absolute; top:100%; left:0; width:100%; height:100%; transform:scaleY(-1) translateY(-12px); opacity:0.25; filter:blur(2px) brightness(0.7); mask-image:linear-gradient(to bottom, rgba(0,0,0,0.5), transparent 70%); -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,0.5), transparent 70%); pointer-events:none;\u003c/td\u003e\u003c/tr\u003e\n \u003c/tbody\u003e\n \u003c/table\u003e\n \u003c/div\u003e\n\n \u003ch3\u003e懸停聚焦 · Hover\u003c/h3\u003e\n \u003cdiv class=\"grid2\"\u003e\n \u003cdiv class=\"code\"\u003e.frame:hover { z-index:100; filter:brightness(1.1); }\n.frame:hover .frame-inner {\n transform:scale(1.12) translateZ(30px);\n border-color:rgba(0,234,255,1);\n box-shadow:0 0 15px rgba(0,234,255,0.9),\n 0 0 35px rgba(0,234,255,0.7),\n 0 0 70px rgba(0,234,255,0.4);\n}\n.frame:hover .frame-inner img {\n transform:scale(1.05);\n filter:contrast(1.1) brightness(1.05) saturate(1.2);\n}\n.frame:hover .frame-inner::after { opacity:0.3; }\n.frame:hover .frame-label { opacity:1; transform:translateY(0); }\u003c/div\u003e\n \u003cdiv\u003e\n \u003cdiv style=\"display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px\"\u003e\n \u003cspan class=\"badge\"\u003ehover 放大 1.12\u003c/span\u003e\n \u003cspan class=\"pill\"\u003eZ 30px\u003c/span\u003e\n \u003cspan class=\"pill\"\u003e邊框 #00eaff\u003c/span\u003e\n \u003c/div\u003e\n \u003cp class=\"note\"\u003e懸停時自動轉速由 0.15 降至 0.03（JS 控制），離開恢復 0.15，便於聚焦閱讀標籤。\u003c/p\u003e\n \u003cdiv class=\"kv\" style=\"margin-top:10px\"\u003e\n \u003cdt\u003e標籤顯隱\u003c/dt\u003e\u003cdd\u003eopacity 0 → 1 · translateY(5px) → 0\u003c/dd\u003e\n \u003cdt\u003e掃描線\u003c/dt\u003e\u003cdd\u003e常駐 0.4 透明度，不攔截點擊\u003c/dd\u003e\n \u003cdt\u003e倒影\u003c/dt\u003e\u003cdd\u003escaleY(-1) · blur 2px · 遮罩淡出 70%\u003c/dd\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n \u003c/section\u003e\n\n \u003csection class=\"card\"\u003e\n \u003ch2\u003e\n \u003csvg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\"\u003e\u003cpath d=\"M8 3v10M3 8h10\" stroke=\"currentColor\" stroke-linecap=\"round\"/\u003e\u003ccircle cx=\"8\" cy=\"8\" r=\"6.2\" stroke=\"currentColor\" opacity=\".5\"/\u003e\u003c/svg\u003e\n 六幀陣列 · 6 Frames\n \u003c/h2\u003e\n \u003cp class=\"note\" style=\"margin-bottom:12px\"\u003e每幀為 \u003cspan style=\"font-family:var(--mono)\"\u003e\u0026lt;a class=\"frame\" style=\"--i:n\"\u0026gt;\u003c/span\u003e，內含 \u003cspan style=\"font-family:var(--mono)\"\u003e.frame-inner \u0026gt; img + .scanline + .frame-label + .reflection \u0026gt; img\u003c/span\u003e。點擊新分頁打開。\u003c/p\u003e\n \u003cdiv class=\"portal-grid\"\u003e\n \u003cdiv class=\"portal\"\u003e\n \u003cdiv class=\"thumb\"\u003e\u003cimg src=\"https://i.meee.com.tw/H4GSL7Z.jpg\" alt=\"主機區\"\u003e\u003cdiv class=\"scan\"\u003e\u003c/div\u003e\u003c/div\u003e\n \u003cdiv class=\"meta\"\u003e\u003cdiv class=\"idx\"\u003e--i: 0 · 主機區 // 01\u003c/div\u003e\u003cdiv class=\"label\"\u003eFrame 01\u003c/div\u003e\u003cdiv class=\"link\"\u003e\u003ca href=\"https://sites.google.com/view/shakewww1/1\" target=\"_blank\"\u003esites.google.com/view/shakewww1/1\u003c/a\u003e\u003c/div\u003e\u003cdiv class=\"note\"\u003e封面 H4GSL7Z.jpg · 倒影 EFZinBU.jpg\u003c/div\u003e\u003c/div\u003e\n \u003c/div\u003e\n \u003cdiv class=\"portal\"\u003e\n \u003cdiv class=\"thumb\"\u003e\u003cimg src=\"https://i.meee.com.tw/oHkDvXE.png\" alt=\"遊戲區\"\u003e\u003cdiv class=\"scan\"\u003e\u003c/div\u003e\u003c/div\u003e\n \u003cdiv class=\"meta\"\u003e\u003cdiv class=\"idx\"\u003e--i: 1 · 遊戲區 // 02\u003c/div\u003e\u003cdiv class=\"label\"\u003eFrame 02\u003c/div\u003e\u003cdiv class=\"link\"\u003e\u003ca href=\"https://sites.google.com/view/shakewww1/2/3/1\" target=\"_blank\"\u003esites.google.com/view/shakewww1/2/3/1\u003c/a\u003e\u003c/div\u003e\u003cdiv class=\"note\"\u003e封面 oHkDvXE.png · 倒影同圖\u003c/div\u003e\u003c/div\u003e\n \u003c/div\u003e\n \u003cdiv class=\"portal\"\u003e\n \u003cdiv class=\"thumb\"\u003e\u003cimg src=\"https://i.meee.com.tw/5cJdTEG.png\" alt=\"設計區\"\u003e\u003cdiv class=\"scan\"\u003e\u003c/div\u003e\u003c/div\u003e\n \u003cdiv class=\"meta\"\u003e\u003cdiv class=\"idx\"\u003e--i: 2 · 設計區 // 03\u003c/div\u003e\u003cdiv class=\"label\"\u003eFrame 03\u003c/div\u003e\u003cdiv class=\"link\"\u003e\u003ca href=\"https://sites.google.com/view/shakewww1/2/4/5\" target=\"_blank\"\u003esites.google.com/view/shakewww1/2/4/5\u003c/a\u003e\u003c/div\u003e\u003cdiv class=\"note\"\u003e封面 5cJdTEG.png\u003c/div\u003e\u003c/div\u003e\n \u003c/div\u003e\n \u003cdiv class=\"portal\"\u003e\n \u003cdiv class=\"thumb\"\u003e\u003cimg src=\"https://i.meee.com.tw/k0X2UVV.png\" alt=\"影音區\"\u003e\u003cdiv class=\"scan\"\u003e\u003c/div\u003e\u003c/div\u003e\n \u003cdiv class=\"meta\"\u003e\u003cdiv class=\"idx\"\u003e--i: 3 · 影音區 // 04\u003c/div\u003e\u003cdiv class=\"label\"\u003eFrame 04\u003c/div\u003e\u003cdiv class=\"link\"\u003e\u003ca href=\"https://sites.google.com/view/shakewww1/2/5/2\" target=\"_blank\"\u003esites.google.com/view/shakewww1/2/5/2\u003c/a\u003e\u003c/div\u003e\u003cdiv class=\"note\"\u003e封面 k0X2UVV.png\u003c/div\u003e\u003c/div\u003e\n \u003c/div\u003e\n \u003cdiv class=\"portal\"\u003e\n \u003cdiv class=\"thumb\"\u003e\u003cimg src=\"https://i.meee.com.tw/BmJHEDg.png\" alt=\"閱讀區\"\u003e\u003cdiv class=\"scan\"\u003e\u003c/div\u003e\u003c/div\u003e\n \u003cdiv class=\"meta\"\u003e\u003cdiv class=\"idx\"\u003e--i: 4 · 閱讀區 // 05\u003c/div\u003e\u003cdiv class=\"label\"\u003eFrame 05\u003c/div\u003e\u003cdiv class=\"link\"\u003e\u003ca href=\"https://sites.google.com/view/shakewww1/2\" target=\"_blank\"\u003esites.google.com/view/shakewww1/2\u003c/a\u003e\u003c/div\u003e\u003cdiv class=\"note\"\u003e封面 BmJHEDg.png\u003c/div\u003e\u003c/div\u003e\n \u003c/div\u003e\n \u003cdiv class=\"portal\"\u003e\n \u003cdiv class=\"thumb\"\u003e\u003cimg src=\"https://i.meee.com.tw/Afl914d.png\" alt=\"導覽區\"\u003e\u003cdiv class=\"scan\"\u003e\u003c/div\u003e\u003c/div\u003e\n \u003cdiv class=\"meta\"\u003e\u003cdiv class=\"idx\"\u003e--i: 5 · 導覽區 // 06\u003c/div\u003e\u003cdiv class=\"label\"\u003eFrame 06\u003c/div\u003e\u003cdiv class=\"link\"\u003e\u003ca href=\"https://sites.google.com/view/shakewww1/2/7/3\" target=\"_blank\"\u003esites.google.com/view/shakewww1/2/7/3\u003c/a\u003e\u003c/div\u003e\u003cdiv class=\"note\"\u003e封面 Afl914d.png\u003c/div\u003e\u003c/div\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n \u003cdiv class=\"divider\"\u003e\u003c/div\u003e\n \u003cdiv class=\"table-wrap\"\u003e\n \u003ctable\u003e\n \u003cthead\u003e\u003ctr\u003e\u003cth\u003e#\u003c/th\u003e\u003cth\u003e標籤\u003c/th\u003e\u003cth\u003ehref\u003c/th\u003e\u003cth\u003eimg\u003c/th\u003e\u003cth\u003ereflection img\u003c/th\u003e\u003c/tr\u003e\u003c/thead\u003e\n \u003ctbody\u003e\n \u003ctr\u003e\u003ctd\u003e0\u003c/td\u003e\u003ctd\u003e主機區 // 01\u003c/td\u003e\u003ctd class=\"mono\"\u003ehttps://sites.google.com/view/shakewww1/1\u003c/td\u003e\u003ctd class=\"mono\"\u003ehttps://i.meee.com.tw/H4GSL7Z.jpg\u003c/td\u003e\u003ctd class=\"mono\"\u003ehttps://i.meee.com.tw/EFZinBU.jpg\u003c/td\u003e\u003c/tr\u003e\n \u003ctr\u003e\u003ctd\u003e1\u003c/td\u003e\u003ctd\u003e遊戲區 // 02\u003c/td\u003e\u003ctd class=\"mono\"\u003ehttps://sites.google.com/view/shakewww1/2/3/1\u003c/td\u003e\u003ctd class=\"mono\"\u003ehttps://i.meee.com.tw/oHkDvXE.png\u003c/td\u003e\u003ctd class=\"mono\"\u003ehttps://i.meee.com.tw/oHkDvXE.png\u003c/td\u003e\u003c/tr\u003e\n \u003ctr\u003e\u003ctd\u003e2\u003c/td\u003e\u003ctd\u003e設計區 // 03\u003c/td\u003e\u003ctd class=\"mono\"\u003ehttps://sites.google.com/view/shakewww1/2/4/5\u003c/td\u003e\u003ctd class=\"mono\"\u003ehttps://i.meee.com.tw/5cJdTEG.png\u003c/td\u003e\u003ctd class=\"mono\"\u003ehttps://i.meee.com.tw/5cJdTEG.png\u003c/td\u003e\u003c/tr\u003e\n \u003ctr\u003e\u003ctd\u003e3\u003c/td\u003e\u003ctd\u003e影音區 // 04\u003c/td\u003e\u003ctd class=\"mono\"\u003ehttps://sites.google.com/view/shakewww1/2/5/2\u003c/td\u003e\u003ctd class=\"mono\"\u003ehttps://i.meee.com.tw/k0X2UVV.png\u003c/td\u003e\u003ctd class=\"mono\"\u003ehttps://i.meee.com.tw/k0X2UVV.png\u003c/td\u003e\u003c/tr\u003e\n \u003ctr\u003e\u003ctd\u003e4\u003c/td\u003e\u003ctd\u003e閱讀區 // 05\u003c/td\u003e\u003ctd class=\"mono\"\u003ehttps://sites.google.com/view/shakewww1/2\u003c/td\u003e\u003ctd class=\"mono\"\u003ehttps://i.meee.com.tw/BmJHEDg.png\u003c/td\u003e\u003ctd class=\"mono\"\u003ehttps://i.meee.com.tw/BmJHEDg.png\u003c/td\u003e\u003c/tr\u003e\n \u003ctr\u003e\u003ctd\u003e5\u003c/td\u003e\u003ctd\u003e導覽區 // 06\u003c/td\u003e\u003ctd class=\"mono\"\u003ehttps://sites.google.com/view/shakewww1/2/7/3\u003c/td\u003e\u003ctd class=\"mono\"\u003ehttps://i.meee.com.tw/Afl914d.png\u003c/td\u003e\u003ctd class=\"mono\"\u003ehttps://i.meee.com.tw/Afl914d.png\u003c/td\u003e\u003c/tr\u003e\n \u003c/tbody\u003e\n \u003c/table\u003e\n \u003c/div\u003e\n \u003c/section\u003e\n\n \u003csection class=\"card\"\u003e\n \u003ch2\u003e\n \u003csvg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\"\u003e\u003cpath d=\"M3 8h10M8 3l5 5-5 5\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/\u003e\u003c/svg\u003e\n 互動腳本 · 拖曳與慣性\n \u003c/h2\u003e\n \u003col class=\"steps\"\u003e\n \u003cli\u003e\u003cdiv\u003e\u003cstrong\u003e自動旋轉\u003c/strong\u003e\u003cbr\u003e\u003cspan style=\"font-family:var(--mono);font-size:12px\"\u003erotation += (targetRotation - rotation)*0.08 · targetRotation += autoSpeed (0.15) · ring.style.transform = rotateY(-rotation deg)\u003c/span\u003e\u003cbr\u003e\u003cspan class=\"note\"\u003erequestAnimationFrame 循環；非拖曳時 velocity*=0.96 並疊加到 targetRotation\u003c/span\u003e\u003c/div\u003e\u003c/li\u003e\n \u003cli\u003e\u003cdiv\u003e\u003cstrong\u003e拖曳\u003c/strong\u003e\u003cbr\u003e\u003cspan style=\"font-family:var(--mono);font-size:12px\"\u003emousedown/touchstart → startDrag(x): isDragging=true, lastX=x, velocity=0, cursor=grabbing\u003cbr\u003emousemove/touchmove → moveDrag(x): dx=x-lastX, targetRotation-=dx*0.3, velocity=-dx*0.15\u003cbr\u003emouseup/touchend → endDrag(): isDragging=false, cursor=grab\u003c/span\u003e\u003c/div\u003e\u003c/li\u003e\n \u003cli\u003e\u003cdiv\u003e\u003cstrong\u003e懸停減速\u003c/strong\u003e\u003cbr\u003e\u003cspan style=\"font-family:var(--mono);font-size:12px\"\u003eframe mouseenter → autoSpeed=0.03 · mouseleave → autoSpeed=0.15\u003c/span\u003e\u003cbr\u003e\u003cspan class=\"note\"\u003e拖曳中 velocity*=0.9 衰減\u003c/span\u003e\u003c/div\u003e\u003c/li\u003e\n \u003c/ol\u003e\n \u003cdiv class=\"code\" style=\"margin-top:12px\"\u003econst stage=document.getElementById('stage');\nconst ring=document.getElementById('ring');\nlet rotation=0,targetRotation=0,isDragging=false,lastX=0,velocity=0,lastTime=0,autoSpeed=0.15;\nfunction animate(){\n const now=performance.now(); lastTime=now;\n if(!isDragging){ targetRotation+=autoSpeed; velocity*=0.96; targetRotation+=velocity; } else { velocity*=0.9; }\n rotation+=(targetRotation-rotation)*0.08;\n ring.style.transform=`rotateY(${-rotation}deg)`;\n requestAnimationFrame(animate);\n}\nanimate();\nstage.addEventListener('mousedown',e=\u003e{startDrag(e.clientX); e.preventDefault();});\nwindow.addEventListener('mousemove',e=\u003emoveDrag(e.clientX));\nwindow.addEventListener('mouseup',endDrag);\nstage.addEventListener('touchstart',e=\u003e{ if(e.touches.length===1) startDrag(e.touches[0].clientX); },{passive:true});\nwindow.addEventListener('touchmove',e=\u003e{ if(e.touches.length===1) moveDrag(e.touches[0].clientX); },{passive:true});\nwindow.addEventListener('touchend',endDrag);\u003c/div\u003e\n \u003cdiv class=\"kv\" style=\"margin-top:10px\"\u003e\n \u003cdt\u003e容器\u003c/dt\u003e\u003cdd\u003estage#stage 監聽 mousedown/touchstart；window 監聽 move/up\u003c/dd\u003e\n \u003cdt\u003e靈敏度\u003c/dt\u003e\u003cdd\u003edx*0.3 轉角度 · velocity -dx*0.15 慣性\u003c/dd\u003e\n \u003cdt\u003e阻尼\u003c/dt\u003e\u003cdd\u003e非拖曳 0.96 · 拖曳 0.9 · 插值 0.08\u003c/dd\u003e\n \u003c/div\u003e\n \u003c/section\u003e\n\n \u003csection class=\"card\"\u003e\n \u003ch2\u003e\n \u003csvg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\"\u003e\u003crect x=\"2.5\" y=\"2.5\" width=\"11\" height=\"11\" rx=\"1.5\" stroke=\"currentColor\"/\u003e\u003cpath d=\"M2.5 6h11M6 2.5v11\" stroke=\"currentColor\" opacity=\".6\"/\u003e\u003c/svg\u003e\n 響應式 · 半徑與尺寸\n \u003c/h2\u003e\n \u003cdiv class=\"table-wrap\"\u003e\n \u003ctable\u003e\n \u003cthead\u003e\u003ctr\u003e\u003cth\u003e斷點\u003c/th\u003e\u003cth\u003e:root --radius\u003c/th\u003e\u003cth\u003e.frame 尺寸\u003c/th\u003e\u003cth\u003e.frame margin\u003c/th\u003e\u003cth\u003e備註\u003c/th\u003e\u003c/tr\u003e\u003c/thead\u003e\n \u003ctbody\u003e\n \u003ctr\u003e\u003ctd\u003e預設 \u0026gt;900px\u003c/td\u003e\u003ctd class=\"mono\"\u003e520px\u003c/td\u003e\u003ctd class=\"mono\"\u003e320 × 180\u003c/td\u003e\u003ctd class=\"mono\"\u003e-90px 0 0 -160px\u003c/td\u003e\u003ctd\u003e基準\u003c/td\u003e\u003c/tr\u003e\n \u003ctr\u003e\u003ctd\u003e≤900px\u003c/td\u003e\u003ctd class=\"mono\"\u003e380px\u003c/td\u003e\u003ctd class=\"mono\"\u003e260 × 146\u003c/td\u003e\u003ctd class=\"mono\"\u003e-73px 0 0 -130px\u003c/td\u003e\u003ctd\u003e\u003c/td\u003e\u003c/tr\u003e\n \u003ctr\u003e\u003ctd\u003e≤640px\u003c/td\u003e\u003ctd class=\"mono\"\u003e300px\u003c/td\u003e\u003ctd class=\"mono\"\u003e220 × 124\u003c/td\u003e\u003ctd class=\"mono\"\u003e-62px 0 0 -110px\u003c/td\u003e\u003ctd\u003e.header h1 → 32px\u003c/td\u003e\u003c/tr\u003e\n \u003ctr\u003e\u003ctd\u003e≤420px\u003c/td\u003e\u003ctd class=\"mono\"\u003e240px\u003c/td\u003e\u003ctd class=\"mono\"\u003e180 × 101\u003c/td\u003e\u003ctd class=\"mono\"\u003e-50px 0 0 -90px\u003c/td\u003e\u003ctd\u003e\u003c/td\u003e\u003c/tr\u003e\n \u003c/tbody\u003e\n \u003c/table\u003e\n \u003c/div\u003e\n \u003cdiv class=\"code\"\u003efunction setRadius(){\n const w=window.innerWidth;\n let r=520; if(w\u0026lt;420) r=240; else if(w\u0026lt;640) r=300; else if(w\u0026lt;900) r=380;\n document.documentElement.style.setProperty('--radius', r+'px');\n}\nsetRadius(); window.addEventListener('resize', setRadius);\u003c/div\u003e\n \u003cp class=\"note\"\u003eJS 與 CSS 媒體查詢同步控制半徑，確保環形在窄視口不溢出。\u003c/p\u003e\n \u003c/section\u003e\n\n \u003csection class=\"card\" style=\"border-style:dashed\"\u003e\n \u003ch2\u003e\n \u003csvg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\"\u003e\u003cpath d=\"M8 2.5l6 3.5v7L8 16 2 12.5v-7L8 2.5Z\" stroke=\"currentColor\"/\u003e\u003cpath d=\"M8 8.5v4\" stroke=\"currentColor\" stroke-linecap=\"round\"/\u003e\u003c/svg\u003e\n 結構快照\n \u003c/h2\u003e\n \u003cdiv class=\"code\"\u003e\u0026lt;div class=\"viewport\"\u0026gt;\n \u0026lt;header class=\"header\"\u0026gt;\n \u0026lt;h1\u0026gt;導覽\u0026lt;/h1\u0026gt;\n \u0026lt;p\u0026gt;旋轉傳送門陣列 // 6幀 - 拖曳旋轉·懸停聚焦·點擊打開\u0026lt;/p\u0026gt;\n \u0026lt;/header\u0026gt;\n \u0026lt;div class=\"stage\" id=\"stage\"\u0026gt;\n \u0026lt;div class=\"ring\" id=\"ring\"\u0026gt;\n \u0026lt;a class=\"frame\" href=\"...\" style=\"--i:0\"\u0026gt;\u0026lt;div class=\"frame-inner\"\u0026gt;...\u0026lt;/div\u0026gt;\u0026lt;/a\u0026gt; ×6\n \u0026lt;/div\u0026gt;\n \u0026lt;/div\u0026gt;\n \u0026lt;div class=\"hint\"\u0026gt;ROTATING PORTAL ARRAY // DRAG TO ROTATE\u0026lt;/div\u0026gt;\n\u0026lt;/div\u0026gt;\u003c/div\u003e\n \u003cdiv style=\"margin-top:10px;display:flex;gap:8px;flex-wrap:wrap\"\u003e\n \u003cspan class=\"tag\"\u003epreserve-3d\u003c/span\u003e\n \u003cspan class=\"tag\"\u003ewill-change: transform\u003c/span\u003e\n \u003cspan class=\"tag\"\u003ebackface-visibility:hidden\u003c/span\u003e\n \u003cspan class=\"tag\"\u003emix-blend-mode: screen\u003c/span\u003e\n \u003c/div\u003e\n \u003c/section\u003e\n\n \u003cdiv style=\"text-align:center;margin-top:10px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)\"\u003eSHAKEWE · 透明固定 · 拖曳旋轉 · 懸停聚焦 · 點擊打開\u003c/div\u003e\n\u003c/div\u003e","artifactSourceHash":"yrc1e9cq5vhy","classificationStatus":"TODO","content":"\u003cdiv class=\"wrap\"\u003e \u003ctable\u003e\u003ctbody\u003e\u003ctr\u003e\u003ctd\u003e\u003cp\u003e幀數\u003c/p\u003e\u003c/td\u003e\u003ctd\u003e\u003cp\u003e6 幀\u003c/p\u003e\u003c/td\u003e\u003ctd\u003e\u003cp\u003e60° 等分 · --i 0–5\u003c/p\u003e\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e\u003cp\u003e半徑\u003c/p\u003e\u003c/td\u003e\u003ctd\u003e\u003cp\u003e520 px\u003c/p\u003e\u003c/td\u003e\u003ctd\u003e\u003cp\u003e預設 --radius，響應式遞減\u003c/p\u003e\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e\u003cp\u003e透視\u003c/p\u003e\u003c/td\u003e\u003ctd\u003e\u003cp\u003e2000 px\u003c/p\u003e\u003c/td\u003e\u003ctd\u003e\u003cp\u003eperspective-origin 50% 40%\u003c/p\u003e\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e\u003cp\u003e自動轉速\u003c/p\u003e\u003c/td\u003e\u003ctd\u003e\u003cp\u003e0.15\u003c/p\u003e\u003c/td\u003e\u003ctd\u003e\u003cp\u003e懸停降至 0.03 · 慣性衰減\u003c/p\u003e\u003c/td\u003e\u003c/tr\u003e\u003c/tbody\u003e\u003c/table\u003e \u003csection class=\"card\"\u003e \u003ch2\u003e \u003csvg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\"\u003e\u003crect x=\"1.5\" y=\"1.5\" width=\"13\" height=\"13\" rx=\"3\" stroke=\"currentColor\" opacity=\".9\"\u003e\u003c/rect\u003e\u003ccircle cx=\"8\" cy=\"8\" r=\"3.2\" stroke=\"currentColor\"\u003e\u003c/circle\u003e\u003cpath d=\"M8 1.5v2M8 12.5v2M1.5 8h2M12.5 8h2\" stroke=\"currentColor\" stroke-linecap=\"round\"\u003e\u003c/path\u003e\u003c/svg\u003e 模塊概覽 · 文件頭 \u003c/h2\u003e \u003cdiv class=\"grid2\"\u003e \u003cdiv class=\"kv\"\u003e \u003cdt\u003eDOCTYPE / lang\u003c/dt\u003e\u003cdd\u003e\u0026lt;!DOCTYPE html\u0026gt; · \u0026lt;html lang=\"en\"\u0026gt;\u003c/dd\u003e \u003cdt\u003echarset\u003c/dt\u003e\u003cdd\u003eUTF-8\u003c/dd\u003e \u003cdt\u003eviewport\u003c/dt\u003e\u003cdd\u003ewidth=device-width, initial-scale=1.0, user-scalable=no\u003c/dd\u003e \u003cdt\u003etitle\u003c/dt\u003e\u003cdd\u003eSHAKEWE // Rotating Portal Grid - Transparent Fixed\u003c/dd\u003e \u003cdt\u003efonts\u003c/dt\u003e\u003cdd\u003eOrbitron 500/700/900 · Inter 300/400/500\u003cbr\u003e\u003cspan style=\"word-break:break-all\"\u003ehttps://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;900\u0026amp;family=Inter:wght@300;400;500\u0026amp;display=swap\u003c/span\u003e\u003c/dd\u003e \u003c/div\u003e \u003cdiv\u003e \u003cdiv class=\"code\"\u003e\u0026lt;meta charset=\"UTF-8\"\u0026gt; \u0026lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\"\u0026gt; \u0026lt;title\u0026gt;SHAKEWE // Rotating Portal Grid - Transparent Fixed\u0026lt;/title\u0026gt;\u003c/div\u003e \u003cp class=\"note\"\u003e背景強制透明：\u003cspan style=\"font-family:var(--mono)\"\u003ebackground: transparent !important; background-color: transparent !important;\u003c/span\u003e · 全局 \u003cspan style=\"font-family:var(--mono)\"\u003etouch-action:none; user-select:none;\u003c/span\u003e\u003c/p\u003e \u003cdiv style=\"margin-top:10px;display:flex;gap:8px;flex-wrap:wrap\"\u003e \u003cspan class=\"tag live\"\u003e● 透明固定\u003c/span\u003e \u003cspan class=\"tag\"\u003eOrbitron 標題\u003c/span\u003e \u003cspan class=\"tag\"\u003eInter 內文\u003c/span\u003e \u003c/div\u003e \u003c/div\u003e \u003c/div\u003e \u003ch3\u003e基礎重置與隱藏層\u003c/h3\u003e \u003cdiv class=\"table-wrap\"\u003e \u003ctable\u003e \u003cthead\u003e\u003ctr\u003e\u003cth\u003e選擇器\u003c/th\u003e\u003cth\u003e規則\u003c/th\u003e\u003cth\u003e說明\u003c/th\u003e\u003c/tr\u003e\u003c/thead\u003e \u003ctbody\u003e \u003ctr\u003e\u003ctd class=\"mono\"\u003e:root\u003c/td\u003e\u003ctd class=\"mono\"\u003e--radius: 520px;\u003c/td\u003e\u003ctd\u003e環形半徑基準\u003c/td\u003e\u003c/tr\u003e \u003ctr\u003e\u003ctd class=\"mono\"\u003e*\u003c/td\u003e\u003ctd class=\"mono\"\u003emargin:0; padding:0; box-sizing:border-box;\u003c/td\u003e\u003ctd\u003e重置\u003c/td\u003e\u003c/tr\u003e \u003ctr\u003e\u003ctd class=\"mono\"\u003ehtml, body\u003c/td\u003e\u003ctd class=\"mono\"\u003eheight:100%; overflow:hidden; background:transparent !important; color:#e6faff; font-family:'Inter',system-ui,sans-serif; touch-action:none; user-select:none;\u003c/td\u003e\u003ctd\u003e滿高、禁滾動、透明底、淺青文字\u003c/td\u003e\u003c/tr\u003e \u003ctr\u003e\u003ctd class=\"mono\"\u003e.universe, .horizon-glow, .grid-wrapper, .grid, .vignette\u003c/td\u003e\u003ctd class=\"mono\"\u003edisplay:none !important;\u003c/td\u003e\u003ctd\u003e裝飾層全部隱藏\u003c/td\u003e\u003c/tr\u003e \u003c/tbody\u003e \u003c/table\u003e \u003c/div\u003e \u003c/section\u003e \u003csection class=\"card\"\u003e \u003ch2\u003e \u003csvg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\"\u003e\u003cpath d=\"M2 5.5L8 2l6 3.5v7L8 16 2 12.5v-7Z\" stroke=\"currentColor\"\u003e\u003c/path\u003e\u003cpath d=\"M2 5.5L8 9l6-3.5M8 16V9\" stroke=\"currentColor\"\u003e\u003c/path\u003e\u003c/svg\u003e 視口與標頭 · Stage 結構 \u003c/h2\u003e \u003cdiv class=\"table-wrap\"\u003e \u003ctable\u003e \u003cthead\u003e\u003ctr\u003e\u003cth\u003e元素\u003c/th\u003e\u003cth\u003e樣式\u003c/th\u003e\u003cth\u003e數值\u003c/th\u003e\u003c/tr\u003e\u003c/thead\u003e \u003ctbody\u003e \u003ctr\u003e\u003ctd class=\"mono\"\u003e.viewport\u003c/td\u003e\u003ctd\u003eposition:relative; z-index:2; height:100vh; width:100vw; display:flex; flex-direction:column; align-items:center;\u003c/td\u003e\u003ctd\u003e全視口容器\u003c/td\u003e\u003c/tr\u003e \u003ctr\u003e\u003ctd class=\"mono\"\u003e.header\u003c/td\u003e\u003ctd class=\"mono\"\u003emargin-top:clamp(24px,5vh,60px); text-align:center; z-index:10;\u003c/td\u003e\u003ctd\u003e置頂標頭\u003c/td\u003e\u003c/tr\u003e \u003ctr\u003e\u003ctd class=\"mono\"\u003e.header h1\u003c/td\u003e\u003ctd class=\"mono\"\u003efont-family:'Orbitron',monospace; font-weight:900; font-size:clamp(28px,5vw,54px); letter-spacing:0.18em; color:#fff; text-shadow:0 0 10px rgba(0,234,255,0.8),0 0 30px rgba(0,234,255,0.5); margin-bottom:8px;\u003c/td\u003e\u003ctd\u003e內容：導覽\u003c/td\u003e\u003c/tr\u003e \u003ctr\u003e\u003ctd class=\"mono\"\u003e.header p\u003c/td\u003e\u003ctd class=\"mono\"\u003efont-size:13px; letter-spacing:0.3em; text-transform:uppercase; color:rgba(180,240,255,0.7); font-weight:300;\u003c/td\u003e\u003ctd\u003e內容：旋轉傳送門陣列 // 6幀 - 拖曳旋轉·懸停聚焦·點擊打開\u003c/td\u003e\u003c/tr\u003e \u003ctr\u003e\u003ctd class=\"mono\"\u003e.stage#stage\u003c/td\u003e\u003ctd class=\"mono\"\u003eflex:1; width:100%; position:relative; display:flex; align-items:center; justify-content:center; perspective:2000px; perspective-origin:50% 40%; cursor:grab;\u003c/td\u003e\u003ctd\u003e:active → grabbing\u003c/td\u003e\u003c/tr\u003e \u003ctr\u003e\u003ctd class=\"mono\"\u003e.ring#ring\u003c/td\u003e\u003ctd class=\"mono\"\u003eposition:relative; width:1px; height:1px; transform-style:preserve-3d; will-change:transform;\u003c/td\u003e\u003ctd\u003etransform: rotateY(-rotation deg)\u003c/td\u003e\u003c/tr\u003e \u003ctr\u003e\u003ctd class=\"mono\"\u003e.hint\u003c/td\u003e\u003ctd class=\"mono\"\u003eposition:absolute; bottom:clamp(20px,4vh,40px); left:50%; transform:translateX(-50%); font-size:11px; letter-spacing:0.25em; text-transform:uppercase; color:rgba(140,220,255,0.5); font-weight:300; animation:pulse 3s ease-in-out infinite;\u003c/td\u003e\u003ctd\u003e文案：ROTATING PORTAL ARRAY // DRAG TO ROTATE\u003c/td\u003e\u003c/tr\u003e \u003c/tbody\u003e \u003c/table\u003e \u003c/div\u003e \u003cdiv class=\"code\"\u003e@keyframes pulse { 0%,100% {opacity:0.5} 50% {opacity:0.9} }\u003c/div\u003e \u003c/section\u003e \u003csection class=\"card\"\u003e \u003ch2\u003e \u003csvg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\"\u003e\u003crect x=\"2\" y=\"3\" width=\"12\" height=\"8\" rx=\"2\" stroke=\"currentColor\"\u003e\u003c/rect\u003e\u003cpath d=\"M5 13l3-2 3 2\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\u003c/path\u003e\u003ccircle cx=\"8\" cy=\"7\" r=\"1.6\" stroke=\"currentColor\"\u003e\u003c/circle\u003e\u003c/svg\u003e 幀 · Frame 規格 \u003c/h2\u003e \u003cdiv class=\"table-wrap\"\u003e \u003ctable\u003e \u003cthead\u003e\u003ctr\u003e\u003cth\u003e選擇器\u003c/th\u003e\u003cth\u003e關鍵樣式\u003c/th\u003e\u003c/tr\u003e\u003c/thead\u003e \u003ctbody\u003e \u003ctr\u003e\u003ctd class=\"mono\"\u003e.frame\u003c/td\u003e\u003ctd class=\"mono\"\u003eposition:absolute; top:0; left:0; width:320px; height:180px; margin:-90px 0 0 -160px; transform:rotateY(calc(var(--i) * 60deg)) translateZ(var(--radius)); transform-style:preserve-3d; text-decoration:none; transition:filter 0.3s ease;\u003c/td\u003e\u003c/tr\u003e \u003ctr\u003e\u003ctd class=\"mono\"\u003e.frame-inner\u003c/td\u003e\u003ctd class=\"mono\"\u003ewidth:100%; height:100%; border-radius:14px; overflow:hidden; background:#020a12; border:1.5px solid rgba(0,234,255,0.7); box-shadow:0 0 8px rgba(0,234,255,0.6),0 0 20px rgba(0,234,255,0.4),0 0 40px rgba(0,234,255,0.2); transition:all 0.4s cubic-bezier(0.2,0.8,0.2,1); transform:scale(1) translateZ(0); backface-visibility:hidden;\u003c/td\u003e\u003c/tr\u003e \u003ctr\u003e\u003ctd class=\"mono\"\u003e.frame-inner img\u003c/td\u003e\u003ctd class=\"mono\"\u003ewidth:100%; height:100%; object-fit:cover; display:block; filter:contrast(1.05) brightness(0.95) saturate(1.1); transition:transform 0.6s ease,filter 0.4s ease;\u003c/td\u003e\u003c/tr\u003e \u003ctr\u003e\u003ctd class=\"mono\"\u003e.frame-inner::after\u003c/td\u003e\u003ctd class=\"mono\"\u003econtent:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,10,20,0.7) 0%, transparent 40%); mix-blend-mode:screen; opacity:0.7; transition:opacity 0.3s;\u003c/td\u003e\u003c/tr\u003e \u003ctr\u003e\u003ctd class=\"mono\"\u003e.scanline\u003c/td\u003e\u003ctd class=\"mono\"\u003eposition:absolute; inset:0; background:repeating-linear-gradient(to bottom,transparent 0px,transparent 2px,rgba(0,234,255,0.06) 3px); opacity:0.4; pointer-events:none;\u003c/td\u003e\u003c/tr\u003e \u003ctr\u003e\u003ctd class=\"mono\"\u003e.frame-label\u003c/td\u003e\u003ctd class=\"mono\"\u003eposition:absolute; bottom:8px; left:10px; right:10px; font-family:'Orbitron',monospace; font-size:10px; letter-spacing:0.2em; color:rgba(180,250,255,0.9); text-shadow:0 0 10px rgba(0,234,255,0.8); text-transform:uppercase; opacity:0; transform:translateY(5px); transition:all 0.3s ease; pointer-events:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;\u003c/td\u003e\u003c/tr\u003e \u003ctr\u003e\u003ctd class=\"mono\"\u003e.reflection\u003c/td\u003e\u003ctd class=\"mono\"\u003eposition:absolute; top:100%; left:0; width:100%; height:100%; transform:scaleY(-1) translateY(-12px); opacity:0.25; filter:blur(2px) brightness(0.7); mask-image:linear-gradient(to bottom, rgba(0,0,0,0.5), transparent 70%); -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,0.5), transparent 70%); pointer-events:none;\u003c/td\u003e\u003c/tr\u003e \u003c/tbody\u003e \u003c/table\u003e \u003c/div\u003e \u003ch3\u003e懸停聚焦 · Hover\u003c/h3\u003e \u003cdiv class=\"grid2\"\u003e \u003cdiv class=\"code\"\u003e.frame:hover { z-index:100; filter:brightness(1.1); } .frame:hover .frame-inner { transform:scale(1.12) translateZ(30px); border-color:rgba(0,234,255,1); box-shadow:0 0 15px rgba(0,234,255,0.9), 0 0 35px rgba(0,234,255,0.7), 0 0 70px rgba(0,234,255,0.4); } .frame:hover .frame-inner img { transform:scale(1.05); filter:contrast(1.1) brightness(1.05) saturate(1.2); } .frame:hover .frame-inner::after { opacity:0.3; } .frame:hover .frame-label { opacity:1; transform:translateY(0); }\u003c/div\u003e \u003cdiv\u003e \u003cdiv style=\"display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px\"\u003e \u003cspan class=\"badge\"\u003ehover 放大 1.12\u003c/span\u003e \u003cspan class=\"pill\"\u003eZ 30px\u003c/span\u003e \u003cspan class=\"pill\"\u003e邊框 #00eaff\u003c/span\u003e \u003c/div\u003e \u003cp class=\"note\"\u003e懸停時自動轉速由 0.15 降至 0.03（JS 控制），離開恢復 0.15，便於聚焦閱讀標籤。\u003c/p\u003e \u003cdiv class=\"kv\" style=\"margin-top:10px\"\u003e \u003cdt\u003e標籤顯隱\u003c/dt\u003e\u003cdd\u003eopacity 0 → 1 · translateY(5px) → 0\u003c/dd\u003e \u003cdt\u003e掃描線\u003c/dt\u003e\u003cdd\u003e常駐 0.4 透明度，不攔截點擊\u003c/dd\u003e \u003cdt\u003e倒影\u003c/dt\u003e\u003cdd\u003escaleY(-1) · blur 2px · 遮罩淡出 70%\u003c/dd\u003e \u003c/div\u003e \u003c/div\u003e \u003c/div\u003e \u003c/section\u003e \u003csection class=\"card\"\u003e \u003ch2\u003e \u003csvg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\"\u003e\u003cpath d=\"M8 3v10M3 8h10\" stroke=\"currentColor\" stroke-linecap=\"round\"\u003e\u003c/path\u003e\u003ccircle cx=\"8\" cy=\"8\" r=\"6.2\" stroke=\"currentColor\" opacity=\".5\"\u003e\u003c/circle\u003e\u003c/svg\u003e 六幀陣列 · 6 Frames \u003c/h2\u003e \u003cp class=\"note\" style=\"margin-bottom:12px\"\u003e每幀為 \u003cspan style=\"font-family:var(--mono)\"\u003e\u0026lt;a class=\"frame\" style=\"--i:n\"\u0026gt;\u003c/span\u003e，內含 \u003cspan style=\"font-family:var(--mono)\"\u003e.frame-inner \u0026gt; img + .scanline + .frame-label + .reflection \u0026gt; img\u003c/span\u003e。點擊新分頁打開。\u003c/p\u003e \u003cdiv class=\"portal-grid\"\u003e \u003cdiv class=\"portal\"\u003e \u003cdiv class=\"thumb\"\u003e\u003cimg src=\"https://i.meee.com.tw/H4GSL7Z.jpg\" alt=\"主機區\"\u003e\u003cdiv class=\"scan\"\u003e\u003c/div\u003e\u003c/div\u003e \u003cdiv class=\"meta\"\u003e\u003cdiv class=\"idx\"\u003e--i: 0 · 主機區 // 01\u003c/div\u003e\u003cdiv class=\"label\"\u003eFrame 01\u003c/div\u003e\u003cdiv class=\"link\"\u003e\u003ca href=\"https://sites.google.com/view/shakewww1/1\" target=\"_blank\"\u003esites.google.com/view/shakewww1/1\u003c/a\u003e\u003c/div\u003e\u003cdiv class=\"note\"\u003e封面 H4GSL7Z.jpg · 倒影 EFZinBU.jpg\u003c/div\u003e\u003c/div\u003e \u003c/div\u003e \u003cdiv class=\"portal\"\u003e \u003cdiv class=\"thumb\"\u003e\u003cimg src=\"https://i.meee.com.tw/oHkDvXE.png\" alt=\"遊戲區\"\u003e\u003cdiv class=\"scan\"\u003e\u003c/div\u003e\u003c/div\u003e \u003cdiv class=\"meta\"\u003e\u003cdiv class=\"idx\"\u003e--i: 1 · 遊戲區 // 02\u003c/div\u003e\u003cdiv class=\"label\"\u003eFrame 02\u003c/div\u003e\u003cdiv class=\"link\"\u003e\u003ca href=\"https://sites.google.com/view/shakewww1/2/3/1\" target=\"_blank\"\u003esites.google.com/view/shakewww1/2/3/1\u003c/a\u003e\u003c/div\u003e\u003cdiv class=\"note\"\u003e封面 oHkDvXE.png · 倒影同圖\u003c/div\u003e\u003c/div\u003e \u003c/div\u003e \u003cdiv class=\"portal\"\u003e \u003cdiv class=\"thumb\"\u003e\u003cimg src=\"https://i.meee.com.tw/5cJdTEG.png\" alt=\"設計區\"\u003e\u003cdiv class=\"scan\"\u003e\u003c/div\u003e\u003c/div\u003e \u003cdiv class=\"meta\"\u003e\u003cdiv class=\"idx\"\u003e--i: 2 · 設計區 // 03\u003c/div\u003e\u003cdiv class=\"label\"\u003eFrame 03\u003c/div\u003e\u003cdiv class=\"link\"\u003e\u003ca href=\"https://sites.google.com/view/shakewww1/2/4/5\" target=\"_blank\"\u003esites.google.com/view/shakewww1/2/4/5\u003c/a\u003e\u003c/div\u003e\u003cdiv class=\"note\"\u003e封面 5cJdTEG.png\u003c/div\u003e\u003c/div\u003e \u003c/div\u003e \u003cdiv class=\"portal\"\u003e \u003cdiv class=\"thumb\"\u003e\u003cimg src=\"https://i.meee.com.tw/k0X2UVV.png\" alt=\"影音區\"\u003e\u003cdiv class=\"scan\"\u003e\u003c/div\u003e\u003c/div\u003e \u003cdiv class=\"meta\"\u003e\u003cdiv class=\"idx\"\u003e--i: 3 · 影音區 // 04\u003c/div\u003e\u003cdiv class=\"label\"\u003eFrame 04\u003c/div\u003e\u003cdiv class=\"link\"\u003e\u003ca href=\"https://sites.google.com/view/shakewww1/2/5/2\" target=\"_blank\"\u003esites.google.com/view/shakewww1/2/5/2\u003c/a\u003e\u003c/div\u003e\u003cdiv class=\"note\"\u003e封面 k0X2UVV.png\u003c/div\u003e\u003c/div\u003e \u003c/div\u003e \u003cdiv class=\"portal\"\u003e \u003cdiv class=\"thumb\"\u003e\u003cimg src=\"https://i.meee.com.tw/BmJHEDg.png\" alt=\"閱讀區\"\u003e\u003cdiv class=\"scan\"\u003e\u003c/div\u003e\u003c/div\u003e \u003cdiv class=\"meta\"\u003e\u003cdiv class=\"idx\"\u003e--i: 4 · 閱讀區 // 05\u003c/div\u003e\u003cdiv class=\"label\"\u003eFrame 05\u003c/div\u003e\u003cdiv class=\"link\"\u003e\u003ca href=\"https://sites.google.com/view/shakewww1/2\" target=\"_blank\"\u003esites.google.com/view/shakewww1/2\u003c/a\u003e\u003c/div\u003e\u003cdiv class=\"note\"\u003e封面 BmJHEDg.png\u003c/div\u003e\u003c/div\u003e \u003c/div\u003e \u003cdiv class=\"portal\"\u003e \u003cdiv class=\"thumb\"\u003e\u003cimg src=\"https://i.meee.com.tw/Afl914d.png\" alt=\"導覽區\"\u003e\u003cdiv class=\"scan\"\u003e\u003c/div\u003e\u003c/div\u003e \u003cdiv class=\"meta\"\u003e\u003cdiv class=\"idx\"\u003e--i: 5 · 導覽區 // 06\u003c/div\u003e\u003cdiv class=\"label\"\u003eFrame 06\u003c/div\u003e\u003cdiv class=\"link\"\u003e\u003ca href=\"https://sites.google.com/view/shakewww1/2/7/3\" target=\"_blank\"\u003esites.google.com/view/shakewww1/2/7/3\u003c/a\u003e\u003c/div\u003e\u003cdiv class=\"note\"\u003e封面 Afl914d.png\u003c/div\u003e\u003c/div\u003e \u003c/div\u003e \u003c/div\u003e \u003cdiv class=\"divider\"\u003e\u003c/div\u003e \u003cdiv class=\"table-wrap\"\u003e \u003ctable\u003e \u003cthead\u003e\u003ctr\u003e\u003cth\u003e#\u003c/th\u003e\u003cth\u003e標籤\u003c/th\u003e\u003cth\u003ehref\u003c/th\u003e\u003cth\u003eimg\u003c/th\u003e\u003cth\u003ereflection img\u003c/th\u003e\u003c/tr\u003e\u003c/thead\u003e \u003ctbody\u003e \u003ctr\u003e\u003ctd\u003e0\u003c/td\u003e\u003ctd\u003e主機區 // 01\u003c/td\u003e\u003ctd class=\"mono\"\u003ehttps://sites.google.com/view/shakewww1/1\u003c/td\u003e\u003ctd class=\"mono\"\u003ehttps://i.meee.com.tw/H4GSL7Z.jpg\u003c/td\u003e\u003ctd class=\"mono\"\u003ehttps://i.meee.com.tw/EFZinBU.jpg\u003c/td\u003e\u003c/tr\u003e \u003ctr\u003e\u003ctd\u003e1\u003c/td\u003e\u003ctd\u003e遊戲區 // 02\u003c/td\u003e\u003ctd class=\"mono\"\u003ehttps://sites.google.com/view/shakewww1/2/3/1\u003c/td\u003e\u003ctd class=\"mono\"\u003ehttps://i.meee.com.tw/oHkDvXE.png\u003c/td\u003e\u003ctd class=\"mono\"\u003ehttps://i.meee.com.tw/oHkDvXE.png\u003c/td\u003e\u003c/tr\u003e \u003ctr\u003e\u003ctd\u003e2\u003c/td\u003e\u003ctd\u003e設計區 // 03\u003c/td\u003e\u003ctd class=\"mono\"\u003ehttps://sites.google.com/view/shakewww1/2/4/5\u003c/td\u003e\u003ctd class=\"mono\"\u003ehttps://i.meee.com.tw/5cJdTEG.png\u003c/td\u003e\u003ctd class=\"mono\"\u003ehttps://i.meee.com.tw/5cJdTEG.png\u003c/td\u003e\u003c/tr\u003e \u003ctr\u003e\u003ctd\u003e3\u003c/td\u003e\u003ctd\u003e影音區 // 04\u003c/td\u003e\u003ctd class=\"mono\"\u003ehttps://sites.google.com/view/shakewww1/2/5/2\u003c/td\u003e\u003ctd class=\"mono\"\u003ehttps://i.meee.com.tw/k0X2UVV.png\u003c/td\u003e\u003ctd class=\"mono\"\u003ehttps://i.meee.com.tw/k0X2UVV.png\u003c/td\u003e\u003c/tr\u003e \u003ctr\u003e\u003ctd\u003e4\u003c/td\u003e\u003ctd\u003e閱讀區 // 05\u003c/td\u003e\u003ctd class=\"mono\"\u003ehttps://sites.google.com/view/shakewww1/2\u003c/td\u003e\u003ctd class=\"mono\"\u003ehttps://i.meee.com.tw/BmJHEDg.png\u003c/td\u003e\u003ctd class=\"mono\"\u003ehttps://i.meee.com.tw/BmJHEDg.png\u003c/td\u003e\u003c/tr\u003e \u003ctr\u003e\u003ctd\u003e5\u003c/td\u003e\u003ctd\u003e導覽區 // 06\u003c/td\u003e\u003ctd class=\"mono\"\u003ehttps://sites.google.com/view/shakewww1/2/7/3\u003c/td\u003e\u003ctd class=\"mono\"\u003ehttps://i.meee.com.tw/Afl914d.png\u003c/td\u003e\u003ctd class=\"mono\"\u003ehttps://i.meee.com.tw/Afl914d.png\u003c/td\u003e\u003c/tr\u003e \u003c/tbody\u003e \u003c/table\u003e \u003c/div\u003e \u003c/section\u003e \u003csection class=\"card\"\u003e \u003ch2\u003e \u003csvg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\"\u003e\u003cpath d=\"M3 8h10M8 3l5 5-5 5\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\u003c/path\u003e\u003c/svg\u003e 互動腳本 · 拖曳與慣性 \u003c/h2\u003e \u003col class=\"steps\"\u003e \u003cli\u003e\u003cdiv\u003e\u003cstrong\u003e自動旋轉\u003c/strong\u003e\u003cbr\u003e\u003cspan style=\"font-family:var(--mono);font-size:12px\"\u003erotation += (targetRotation - rotation)*0.08 · targetRotation += autoSpeed (0.15) · ring.style.transform = rotateY(-rotation deg)\u003c/span\u003e\u003cbr\u003e\u003cspan class=\"note\"\u003erequestAnimationFrame 循環；非拖曳時 velocity*=0.96 並疊加到 targetRotation\u003c/span\u003e\u003c/div\u003e\u003c/li\u003e \u003cli\u003e\u003cdiv\u003e\u003cstrong\u003e拖曳\u003c/strong\u003e\u003cbr\u003e\u003cspan style=\"font-family:var(--mono);font-size:12px\"\u003emousedown/touchstart → startDrag(x): isDragging=true, lastX=x, velocity=0, cursor=grabbing\u003cbr\u003emousemove/touchmove → moveDrag(x): dx=x-lastX, targetRotation-=dx*0.3, velocity=-dx*0.15\u003cbr\u003emouseup/touchend → endDrag(): isDragging=false, cursor=grab\u003c/span\u003e\u003c/div\u003e\u003c/li\u003e \u003cli\u003e\u003cdiv\u003e\u003cstrong\u003e懸停減速\u003c/strong\u003e\u003cbr\u003e\u003cspan style=\"font-family:var(--mono);font-size:12px\"\u003eframe mouseenter → autoSpeed=0.03 · mouseleave → autoSpeed=0.15\u003c/span\u003e\u003cbr\u003e\u003cspan class=\"note\"\u003e拖曳中 velocity*=0.9 衰減\u003c/span\u003e\u003c/div\u003e\u003c/li\u003e \u003c/ol\u003e \u003cdiv class=\"code\" style=\"margin-top:12px\"\u003econst stage=document.getElementById('stage'); const ring=document.getElementById('ring'); let rotation=0,targetRotation=0,isDragging=false,lastX=0,velocity=0,lastTime=0,autoSpeed=0.15; function animate(){ const now=performance.now(); lastTime=now; if(!isDragging){ targetRotation+=autoSpeed; velocity*=0.96; targetRotation+=velocity; } else { velocity*=0.9; } rotation+=(targetRotation-rotation)*0.08; ring.style.transform=`rotateY(${-rotation}deg)`; requestAnimationFrame(animate); } animate(); stage.addEventListener('mousedown',e=\u0026gt;{startDrag(e.clientX); e.preventDefault();}); window.addEventListener('mousemove',e=\u0026gt;moveDrag(e.clientX)); window.addEventListener('mouseup',endDrag); stage.addEventListener('touchstart',e=\u0026gt;{ if(e.touches.length===1) startDrag(e.touches[0].clientX); },{passive:true}); window.addEventListener('touchmove',e=\u0026gt;{ if(e.touches.length===1) moveDrag(e.touches[0].clientX); },{passive:true}); window.addEventListener('touchend',endDrag);\u003c/div\u003e \u003cdiv class=\"kv\" style=\"margin-top:10px\"\u003e \u003cdt\u003e容器\u003c/dt\u003e\u003cdd\u003estage#stage 監聽 mousedown/touchstart；window 監聽 move/up\u003c/dd\u003e \u003cdt\u003e靈敏度\u003c/dt\u003e\u003cdd\u003edx*0.3 轉角度 · velocity -dx*0.15 慣性\u003c/dd\u003e \u003cdt\u003e阻尼\u003c/dt\u003e\u003cdd\u003e非拖曳 0.96 · 拖曳 0.9 · 插值 0.08\u003c/dd\u003e \u003c/div\u003e \u003c/section\u003e \u003csection class=\"card\"\u003e \u003ch2\u003e \u003csvg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\"\u003e\u003crect x=\"2.5\" y=\"2.5\" width=\"11\" height=\"11\" rx=\"1.5\" stroke=\"currentColor\"\u003e\u003c/rect\u003e\u003cpath d=\"M2.5 6h11M6 2.5v11\" stroke=\"currentColor\" opacity=\".6\"\u003e\u003c/path\u003e\u003c/svg\u003e 響應式 · 半徑與尺寸 \u003c/h2\u003e \u003cdiv class=\"table-wrap\"\u003e \u003ctable\u003e \u003cthead\u003e\u003ctr\u003e\u003cth\u003e斷點\u003c/th\u003e\u003cth\u003e:root --radius\u003c/th\u003e\u003cth\u003e.frame 尺寸\u003c/th\u003e\u003cth\u003e.frame margin\u003c/th\u003e\u003cth\u003e備註\u003c/th\u003e\u003c/tr\u003e\u003c/thead\u003e \u003ctbody\u003e \u003ctr\u003e\u003ctd\u003e預設 \u0026gt;900px\u003c/td\u003e\u003ctd class=\"mono\"\u003e520px\u003c/td\u003e\u003ctd class=\"mono\"\u003e320 × 180\u003c/td\u003e\u003ctd class=\"mono\"\u003e-90px 0 0 -160px\u003c/td\u003e\u003ctd\u003e基準\u003c/td\u003e\u003c/tr\u003e \u003ctr\u003e\u003ctd\u003e≤900px\u003c/td\u003e\u003ctd class=\"mono\"\u003e380px\u003c/td\u003e\u003ctd class=\"mono\"\u003e260 × 146\u003c/td\u003e\u003ctd class=\"mono\"\u003e-73px 0 0 -130px\u003c/td\u003e\u003ctd\u003e\u003c/td\u003e\u003c/tr\u003e \u003ctr\u003e\u003ctd\u003e≤640px\u003c/td\u003e\u003ctd class=\"mono\"\u003e300px\u003c/td\u003e\u003ctd class=\"mono\"\u003e220 × 124\u003c/td\u003e\u003ctd class=\"mono\"\u003e-62px 0 0 -110px\u003c/td\u003e\u003ctd\u003e.header h1 → 32px\u003c/td\u003e\u003c/tr\u003e \u003ctr\u003e\u003ctd\u003e≤420px\u003c/td\u003e\u003ctd class=\"mono\"\u003e240px\u003c/td\u003e\u003ctd class=\"mono\"\u003e180 × 101\u003c/td\u003e\u003ctd class=\"mono\"\u003e-50px 0 0 -90px\u003c/td\u003e\u003ctd\u003e\u003c/td\u003e\u003c/tr\u003e \u003c/tbody\u003e \u003c/table\u003e \u003c/div\u003e \u003cdiv class=\"code\"\u003efunction setRadius(){ const w=window.innerWidth; let r=520; if(w\u0026lt;420) r=240; else if(w\u0026lt;640) r=300; else if(w\u0026lt;900) r=380; document.documentElement.style.setProperty('--radius', r+'px'); } setRadius(); window.addEventListener('resize', setRadius);\u003c/div\u003e \u003cp class=\"note\"\u003eJS 與 CSS 媒體查詢同步控制半徑，確保環形在窄視口不溢出。\u003c/p\u003e \u003c/section\u003e \u003csection class=\"card\" style=\"border-style:dashed\"\u003e \u003ch2\u003e \u003csvg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\"\u003e\u003cpath d=\"M8 2.5l6 3.5v7L8 16 2 12.5v-7L8 2.5Z\" stroke=\"currentColor\"\u003e\u003c/path\u003e\u003cpath d=\"M8 8.5v4\" stroke=\"currentColor\" stroke-linecap=\"round\"\u003e\u003c/path\u003e\u003c/svg\u003e 結構快照 \u003c/h2\u003e \u003cdiv class=\"code\"\u003e\u0026lt;div class=\"viewport\"\u0026gt; \u0026lt;header class=\"header\"\u0026gt; \u0026lt;h1\u0026gt;導覽\u0026lt;/h1\u0026gt; \u0026lt;p\u0026gt;旋轉傳送門陣列 // 6幀 - 拖曳旋轉·懸停聚焦·點擊打開\u0026lt;/p\u0026gt; \u0026lt;/header\u0026gt; \u0026lt;div class=\"stage\" id=\"stage\"\u0026gt; \u0026lt;div class=\"ring\" id=\"ring\"\u0026gt; \u0026lt;a class=\"frame\" href=\"...\" style=\"--i:0\"\u0026gt;\u0026lt;div class=\"frame-inner\"\u0026gt;...\u0026lt;/div\u0026gt;\u0026lt;/a\u0026gt; ×6 \u0026lt;/div\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;div class=\"hint\"\u0026gt;ROTATING PORTAL ARRAY // DRAG TO ROTATE\u0026lt;/div\u0026gt; \u0026lt;/div\u0026gt;\u003c/div\u003e \u003cdiv style=\"margin-top:10px;display:flex;gap:8px;flex-wrap:wrap\"\u003e \u003cspan class=\"tag\"\u003epreserve-3d\u003c/span\u003e \u003cspan class=\"tag\"\u003ewill-change: transform\u003c/span\u003e \u003cspan class=\"tag\"\u003ebackface-visibility:hidden\u003c/span\u003e \u003cspan class=\"tag\"\u003emix-blend-mode: screen\u003c/span\u003e \u003c/div\u003e \u003c/section\u003e \u003cdiv style=\"text-align:center;margin-top:10px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)\"\u003eSHAKEWE · 透明固定 · 拖曳旋轉 · 懸停聚焦 · 點擊打開\u003c/div\u003e \u003c/div\u003e","createdAt":1788152771472,"deletedAt":null,"displayMode":"artifact","embedRenders":{},"embedRendersDark":{},"id":"6a950bc3b00f3fa2d9689e34","isPublic":true,"itemType":"NOTE","name":"導覽模塊","parents":{"6a952a78b00f3fa2d9689e36":1788160651134},"pinnedAt":null,"preParentID":null,"updatedAt":1789231433800,"updatedBy":{"userId":"6a91ded101b34b802c0c3c","userName":"林"},"version":22,"websiteContent":"[{\"originUrl\":\"https://app.cubelv.com/share/70dc79762ebd26444f9229f0\",\"title\":null,\"content\":null,\"imageUrl\":null},{\"originUrl\":\"https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;900\u0026amp;family=Inter:wght@300;400;500\u0026amp;display=swap\",\"title\":null,\"content\":null,\"imageUrl\":null},{\"originUrl\":\"https://sites.google.com/view/shakewww1/1\",\"title\":null,\"content\":null,\"imageUrl\":null},{\"originUrl\":\"https://i.meee.com.tw/H4GSL7Z.jpg\",\"title\":null,\"content\":null,\"imageUrl\":null},{\"originUrl\":\"https://i.meee.com.tw/EFZinBU.jpg\",\"title\":null,\"content\":null,\"imageUrl\":null},{\"originUrl\":\"https://sites.google.com/view/shakewww1/2/3/1\",\"title\":null,\"content\":null,\"imageUrl\":null},{\"originUrl\":\"https://i.meee.com.tw/oHkDvXE.png\",\"title\":null,\"content\":null,\"imageUrl\":null},{\"originUrl\":\"https://sites.google.com/view/shakewww1/2/4/5\",\"title\":null,\"content\":null,\"imageUrl\":null},{\"originUrl\":\"https://i.meee.com.tw/5cJdTEG.png\",\"title\":null,\"content\":null,\"imageUrl\":null},{\"originUrl\":\"https://sites.google.com/view/shakewww1/2/5/2\",\"title\":null,\"content\":null,\"imageUrl\":null},{\"originUrl\":\"https://i.meee.com.tw/k0X2UVV.png\",\"title\":null,\"content\":null,\"imageUrl\":null},{\"originUrl\":\"https://sites.google.com/view/shakewww1/2\",\"title\":null,\"content\":null,\"imageUrl\":null},{\"originUrl\":\"https://i.meee.com.tw/BmJHEDg.png\",\"title\":null,\"content\":null,\"imageUrl\":null},{\"originUrl\":\"https://sites.google.com/view/shakewww1/2/7/3\",\"title\":null,\"content\":null,\"imageUrl\":null},{\"originUrl\":\"https://i.meee.com.tw/Afl914d.png\",\"title\":null,\"content\":null,\"imageUrl\":null}]"}]}