Slick by default

Modern CSS & web tricks that uplevel any interface — mostly pure CSS, a little JS. Each tile names the feature it uses. Poke them.

\n\n

Magnetic buttonpointer → transform

\n \n\n

Spotlight

Cursor spotlight--mx/--my + mask

\n \n\n

3D tilt + glareperspective + rotate

\n \n\n

Beam

Animated border@property + conic

\n \n\n

Aurora

Aurora meshblurred radial keyframes

\n \n\n

DECRYPTED

Text scrambleJS glyph cycling

\n \n\n

Liquid gold

Shimmer textbackground-clip: text

\n \n\n

HOVER

REVEAL

Clip-path wipeclip-path transition

\n \n\n

SHIP IT·SLICK·FAST·SHIP IT·SLICK·FAST·

Edge-fade marqueemask-image + keyframes

\n \n\n

Shimmer skeletongradient sweep

\n \n\n

0click to count

Count-upJS eased ticker

\n \n\n

scroll ↓···↑ top

Scroll-linked baranimation-timeline: scroll()

\n \n

\n\n \n

\n \n\n\n",[130],"fb9af8a8-7bce-46d8-9b8f-4e05a5efa728","index.html","b4f4ccc8-6031-11f1-b54d-1607ee4eb77e",8,["D",1780590942509],2,"\n\n\n\n\nHyperdesigns — a garden of living surfaces\n\n\n\n\n\n\n\n

\n \n

Hyperdesigns

A garden of living surfaces

Bounded WebGL shaders that can't blow out to white — plus two that spray when you click. Hover to quicken, click to stir or splash.

\n\n

Tideteal liquid

Lavamolten embers

Auroranight curtains

Inkmono swirl

Plasmaelectric flow

Mercuryliquid chrome

Cellsvoronoi

Causticsunderwater light

Oiliridescent slick

CRTretro phosphor

Spritzclick to spray

Sparkclick to burst

\n\n \n

\n \n\n\n",[137],"470e758c-1f05-4d0a-a5ce-19fb23cff14c","frontend","f6d8a45c-5f79-4e35-ad20-9c7afb76db1c",3,["D",1780590225407],"directory",[145],"pulls","branches","forks","envVars",{"_158":40,"_160":40},"connections",{"_158":40,"_159":40},"count","unfilledCount","emptyCount",{"_18":144,"_20":145,"_113":146,"_115":-5,"_116":66,"_117":147,"_119":102,"_22":211,"_63":40,"_122":149,"_124":-5,"_126":26,"_127":-5,"_170":212,"_84":213},{"_18":203,"_20":204,"_113":205,"_115":146,"_116":66,"_117":206,"_119":102,"_22":207,"_63":141,"_122":191,"_124":208,"_126":26,"_127":-5,"_170":209,"_84":210},{"_18":195,"_20":196,"_113":197,"_115":146,"_116":66,"_117":198,"_119":102,"_22":199,"_63":40,"_122":95,"_124":200,"_126":26,"_127":-5,"_170":201,"_84":202},{"_18":187,"_20":188,"_113":189,"_115":146,"_116":66,"_117":64,"_119":102,"_22":190,"_63":40,"_122":191,"_124":192,"_126":26,"_127":-5,"_170":193,"_84":194},{"_18":179,"_20":180,"_113":181,"_115":146,"_116":66,"_117":182,"_119":102,"_22":183,"_63":121,"_122":95,"_124":184,"_126":26,"_127":-5,"_170":185,"_84":186},{"_18":136,"_20":137,"_113":138,"_115":-5,"_116":66,"_117":139,"_119":102,"_22":176,"_63":141,"_122":95,"_124":142,"_126":26,"_127":-5,"_170":177,"_84":178},{"_18":129,"_20":130,"_113":131,"_115":-5,"_116":66,"_117":132,"_119":102,"_22":173,"_63":40,"_122":95,"_124":134,"_126":26,"_127":-5,"_170":174,"_84":175},{"_18":111,"_20":112,"_113":114,"_115":-5,"_116":66,"_117":118,"_119":102,"_22":169,"_63":121,"_122":123,"_124":125,"_126":26,"_127":-5,"_170":171,"_84":172},["D",1780590961418],"children",[],[112],["D",1780591097693],[],[130],["D",1780590942509],[],[137],"d2fd0033-373f-47ec-b47a-cdb7fe40c7da","style.css","c2457508-6031-11f1-998a-1607ee4eb77e",9,["D",1780590955585],":root{\n --bg:#06090c;\n --bg2:#0a1015;\n --ink:#e9f1f0;\n --muted:#71857f;\n --faint:#4f615e;\n --accent:#7fe9dd;\n --glow:rgba(64,224,208,.18);\n --serif:\"Fraunces\", Georgia, serif;\n --mono:\"DM Mono\", ui-monospace, monospace;\n}\n*{ box-sizing:border-box; }\nhtml,body{ height:100%; }\nbody{\n margin:0;\n font-family:var(--mono);\n color:var(--ink);\n background:radial-gradient(130% 80% at 50% -10%, var(--bg2), var(--bg) 60%);\n -webkit-font-smoothing:antialiased;\n position:relative;\n}\nbody::after{\n content:\"\"; position:fixed; inset:0; z-index:0; pointer-events:none;\n opacity:.04; mix-blend-mode:overlay;\n background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E\");\n}\n\n.wrap{ position:relative; z-index:1; max-width:1080px; margin:0 auto; padding:clamp(28px,5vw,64px) clamp(18px,4vw,40px) 40px; }\n\n.topnav{ display:flex; align-items:center; justify-content:space-between; padding:2px 0 26px; }\n.np-brand{ font-family:var(--serif); font-weight:600; font-size:18px; color:var(--ink); text-decoration:none; letter-spacing:-.01em; }\n.np-links{ display:flex; gap:8px; }\n.np-links a{ font-size:12.5px; color:var(--muted); text-decoration:none; padding:6px 12px; border-radius:999px; border:1px solid transparent; transition:.2s; }\n.np-links a:hover{ color:var(--ink); }\n.np-links a.on{ color:var(--accent); border-color:rgba(127,233,221,.3); background:rgba(127,233,221,.06); }\n\n.head{ text-align:center; margin-bottom:clamp(34px,5vw,56px); }\n.kicker{ margin:0 0 14px; font-size:11px; letter-spacing:.34em; text-transform:uppercase; color:var(--accent); }\n.title{ margin:0; font-family:var(--serif); font-weight:600; font-size:clamp(34px,6vw,62px); line-height:1.0; letter-spacing:-.02em; color:#f3faf8; }\n.sub{ max-width:54ch; margin:18px auto 0; font-size:13.5px; line-height:1.55; color:var(--muted); }\n\n.grid{\n display:grid;\n grid-template-columns:repeat(auto-fill, minmax(248px, 1fr));\n gap:clamp(14px,2vw,22px);\n}\n\n.card{\n position:relative;\n aspect-ratio:4 / 3;\n border-radius:20px;\n overflow:hidden;\n cursor:pointer;\n border:1px solid rgba(255,255,255,.09);\n background:#0a1216;\n box-shadow:0 16px 34px -18px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.02) inset;\n transition:transform .16s cubic-bezier(.2,.85,.25,1), box-shadow .2s ease, border-color .2s ease;\n -webkit-tap-highlight-color:transparent; user-select:none;\n}\n.card canvas{ position:absolute; inset:0; z-index:0; width:100%; height:100%; display:block; }\n/* gloss + readability scrim for the caption */\n.card::before{\n content:\"\"; position:absolute; inset:0; z-index:1; pointer-events:none; border-radius:inherit;\n background:linear-gradient(180deg, rgba(255,255,255,.12), transparent 24%),\n linear-gradient(0deg, rgba(0,8,10,.62), transparent 42%);\n mix-blend-mode:normal;\n}\n.card figcaption{\n position:absolute; left:16px; bottom:13px; z-index:2;\n display:flex; flex-direction:column; gap:1px; pointer-events:none;\n text-shadow:0 1px 8px rgba(0,0,0,.6);\n}\n.card figcaption b{ font-family:var(--serif); font-weight:600; font-size:19px; color:#fff; letter-spacing:.01em; }\n.card figcaption span{ font-size:11px; color:rgba(233,241,240,.62); letter-spacing:.03em; }\n.card:hover{\n transform:translateY(-3px);\n border-color:rgba(127,233,221,.32);\n box-shadow:0 26px 46px -18px rgba(0,0,0,.85), 0 0 40px -14px var(--glow);\n}\n.card.pressed{ transform:translateY(0) scale(.988); }\n.card.spray{ background:radial-gradient(120% 100% at 50% 30%, #0c171b, #060b0e 70%); }\n\n.foot{\n margin-top:clamp(28px,4vw,46px);\n display:flex; gap:18px; align-items:center; justify-content:space-between;\n font-size:11px; color:var(--faint);\n}\n.foot a{ color:var(--faint); text-decoration:none; border-bottom:1px solid rgba(79,97,94,.4); padding-bottom:1px; transition:.2s; }\n.foot a:hover{ color:var(--accent); border-color:var(--accent); }\n\n@media (max-width:560px){\n .grid{ grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:12px; }\n .card figcaption b{ font-size:16px; }\n .foot{ flex-direction:column; gap:8px; }\n}\n",[],[145,180],"69427662-0e7e-4738-b7cd-f389f9167858","lab.js","f43e44a2-6033-11f1-8074-1607ee4eb77e",["D",1780591168244],"script","// Lab interactions — the JS half of a few tiles. Everything else is pure CSS.\n\n// 1 — magnetic button: drifts toward the cursor, springs back on leave\ndocument.querySelectorAll(\".js-magnetic\").forEach((tile) => {\n const btn = tile.querySelector(\".magnetic\");\n tile.addEventListener(\"pointermove\", (e) => {\n const r = tile.getBoundingClientRect();\n const x = e.clientX - (r.left + r.width / 2);\n const y = e.clientY - (r.top + r.height / 2);\n btn.style.transform = `translate(${x * 0.35}px, ${y * 0.4}px)`;\n });\n tile.addEventListener(\"pointerleave\", () => { btn.style.transform = \"\"; });\n});\n\n// 2 — spotlight: feed pointer position into CSS custom props\ndocument.querySelectorAll(\".js-spotlight\").forEach((el) => {\n el.addEventListener(\"pointermove\", (e) => {\n const r = el.getBoundingClientRect();\n el.style.setProperty(\"--mx\", ((e.clientX - r.left) / r.width * 100) + \"%\");\n el.style.setProperty(\"--my\", ((e.clientY - r.top) / r.height * 100) + \"%\");\n });\n});\n\n// 3 — 3D tilt + glare\ndocument.querySelectorAll(\".js-tilt\").forEach((tile) => {\n const card = tile.querySelector(\".tilt\");\n const glare = tile.querySelector(\".glare\");\n tile.addEventListener(\"pointermove\", (e) => {\n const r = tile.getBoundingClientRect();\n const px = (e.clientX - r.left) / r.width;\n const py = (e.clientY - r.top) / r.height;\n card.style.transform = `rotateX(${(0.5 - py) * 18}deg) rotateY(${(px - 0.5) * 22}deg)`;\n if (glare) { glare.style.setProperty(\"--gx\", px * 100 + \"%\"); glare.style.setProperty(\"--gy\", py * 100 + \"%\"); }\n });\n tile.addEventListener(\"pointerleave\", () => { card.style.transform = \"rotateX(0) rotateY(0)\"; });\n});\n\n// 6 — text scramble (re-runs on hover)\nconst GLYPHS = \"ABCDEFGHIJKLMNOPQRSTUVWXYZ#%&@$*<>/\\\\01\";\nfunction scramble(el) {\n const text = el.dataset.text || el.textContent;\n clearInterval(el._iv);\n let frame = 0;\n const settle = text.length * 2 + 16;\n el._iv = setInterval(() => {\n let out = \"\";\n for (let i = 0; i < text.length; i++) {\n out += (i < (frame - 8) / 2) ? text[i] : GLYPHS[Math.floor(Math.random() * GLYPHS.length)];\n }\n el.textContent = out;\n if (++frame > settle) { clearInterval(el._iv); el.textContent = text; }\n }, 40);\n}\ndocument.querySelectorAll(\".scramble\").forEach((el) => {\n scramble(el);\n el.closest(\".lab-tile\").addEventListener(\"pointerenter\", () => scramble(el));\n});\n\n// 11 — eased count-up odometer (re-runs on click)\nconst easeOut = (t) => 1 - Math.pow(1 - t, 3);\nfunction countUp(el) {\n const target = parseInt(el.dataset.target || \"0\", 10);\n const dur = 1200, start = performance.now();\n function step(now) {\n const t = Math.min((now - start) / dur, 1);\n el.textContent = Math.round(easeOut(t) * target).toLocaleString();\n if (t < 1) requestAnimationFrame(step);\n }\n requestAnimationFrame(step);\n}\ndocument.querySelectorAll(\".js-odo\").forEach((tile) => {\n const odo = tile.querySelector(\".odo\");\n countUp(odo);\n tile.addEventListener(\"click\", () => countUp(odo));\n});\n",[],[145,188],"5a53b93a-05f7-48c3-bdba-082f05a6da39","lab.css","ea1bc9cc-6033-11f1-9e4b-1607ee4eb77e",12,["D",1780591151205],":root{\n --bg:#06090c;\n --bg2:#0a1015;\n --ink:#e9f1f0;\n --muted:#71857f;\n --faint:#4f615e;\n --accent:#7fe9dd;\n --glow:rgba(64,224,208,.20);\n --serif:\"Fraunces\", Georgia, serif;\n --mono:\"DM Mono\", ui-monospace, monospace;\n}\n*{ box-sizing:border-box; }\nhtml,body{ height:100%; }\nbody{\n margin:0; font-family:var(--mono); color:var(--ink);\n background:radial-gradient(130% 80% at 50% -10%, var(--bg2), var(--bg) 60%);\n -webkit-font-smoothing:antialiased; position:relative;\n}\nbody::after{\n content:\"\"; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.04; mix-blend-mode:overlay;\n background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E\");\n}\n.wrap{ position:relative; z-index:1; max-width:1080px; margin:0 auto; padding:clamp(22px,4vw,40px) clamp(18px,4vw,40px) 40px; }\n\n.topnav{ display:flex; align-items:center; justify-content:space-between; padding:2px 0 26px; }\n.np-brand{ font-family:var(--serif); font-weight:600; font-size:18px; color:var(--ink); text-decoration:none; letter-spacing:-.01em; }\n.np-links{ display:flex; gap:8px; }\n.np-links a{ font-size:12.5px; color:var(--muted); text-decoration:none; padding:6px 12px; border-radius:999px; border:1px solid transparent; transition:.2s; }\n.np-links a:hover{ color:var(--ink); }\n.np-links a.on{ color:var(--accent); border-color:rgba(127,233,221,.3); background:rgba(127,233,221,.06); }\n\n.head{ text-align:center; margin-bottom:clamp(30px,5vw,52px); }\n.kicker{ margin:0 0 14px; font-size:11px; letter-spacing:.34em; text-transform:uppercase; color:var(--accent); }\n.title{ margin:0; font-family:var(--serif); font-weight:600; font-size:clamp(34px,6vw,62px); line-height:1.0; letter-spacing:-.02em; color:#f3faf8; }\n.sub{ max-width:56ch; margin:18px auto 0; font-size:13.5px; line-height:1.55; color:var(--muted); }\n\n.grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(250px,1fr)); gap:clamp(14px,2vw,20px); }\n.lab-tile{ display:flex; flex-direction:column; gap:10px; }\n.demo{\n position:relative; aspect-ratio:4/3; border-radius:18px; overflow:hidden;\n border:1px solid rgba(255,255,255,.09); background:#0a1216;\n display:flex; align-items:center; justify-content:center;\n box-shadow:0 16px 34px -20px rgba(0,0,0,.8);\n}\n.demo-word{ font-family:var(--serif); font-size:30px; color:#dfeeec; letter-spacing:.01em; }\n.lab-tile figcaption{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding:0 4px; }\n.lab-tile figcaption b{ font-family:var(--serif); font-weight:600; font-size:15px; color:#eef5f4; }\n.lab-tile figcaption code{ font-size:10.5px; color:var(--muted); white-space:nowrap; }\n\n/* 1 — magnetic */\n.magnetic{\n appearance:none; font:inherit; font-size:14px; cursor:pointer;\n color:#eafffb; padding:13px 26px; border-radius:999px;\n border:1px solid rgba(127,233,221,.4);\n background:linear-gradient(180deg, rgba(127,233,221,.16), rgba(127,233,221,.05));\n box-shadow:0 10px 26px -12px var(--glow);\n transition:transform .3s cubic-bezier(.18,.9,.2,1.3);\n will-change:transform;\n}\n\n/* 2 — spotlight */\n.js-spotlight{ --mx:50%; --my:50%; background:#0a141a; }\n.js-spotlight::before{\n content:\"\"; position:absolute; inset:0;\n background:radial-gradient(240px 240px at var(--mx) var(--my), rgba(127,233,221,.30), transparent 60%);\n}\n.js-spotlight::after{\n content:\"\"; position:absolute; inset:0; opacity:.6;\n background-image:linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),\n linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);\n background-size:22px 22px;\n -webkit-mask:radial-gradient(220px 220px at var(--mx) var(--my), #000, transparent 66%);\n mask:radial-gradient(220px 220px at var(--mx) var(--my), #000, transparent 66%);\n}\n.js-spotlight .demo-word{ position:relative; z-index:1; }\n\n/* 3 — 3D tilt */\n.js-tilt{ perspective:600px; }\n.tilt{\n width:62%; height:64%; border-radius:16px; position:relative; overflow:hidden;\n display:grid; place-items:center; transform-style:preserve-3d;\n background:linear-gradient(150deg,#11353a,#0a191f);\n border:1px solid rgba(255,255,255,.12);\n box-shadow:0 22px 44px -22px #000;\n transition:transform .12s ease;\n}\n.tilt span{ font-family:var(--serif); font-size:28px; color:#cfeae6; transform:translateZ(34px); }\n.tilt .glare{ position:absolute; inset:0; opacity:0; transition:opacity .2s;\n background:radial-gradient(circle at var(--gx,50%) var(--gy,0%), rgba(255,255,255,.4), transparent 50%); }\n.js-tilt:hover .glare{ opacity:1; }\n\n/* 4 — animated conic border via @property */\n@property --ang{ syntax:\"\"; inherits:false; initial-value:0deg; }\n.beam{\n position:relative; width:62%; height:64%; border-radius:16px;\n display:grid; place-items:center; background:#0a1418;\n color:#dffaf6; font-family:var(--serif); font-size:24px;\n}\n.beam::before{\n content:\"\"; position:absolute; inset:-2px; border-radius:18px; z-index:-1;\n background:conic-gradient(from var(--ang), transparent 0deg, var(--accent) 55deg, #5a7bff 120deg, transparent 210deg);\n animation:spin 4s linear infinite;\n}\n@keyframes spin{ to{ --ang:360deg; } }\n\n/* 5 — aurora mesh */\n.demo-aurora{ background:#070f12; }\n.demo-aurora::before, .demo-aurora::after{\n content:\"\"; position:absolute; inset:-30%; filter:blur(30px);\n background:\n radial-gradient(38% 38% at 30% 32%, rgba(127,233,221,.55), transparent 60%),\n radial-gradient(34% 34% at 70% 42%, rgba(80,120,255,.5), transparent 60%),\n radial-gradient(44% 44% at 52% 76%, rgba(180,90,255,.45), transparent 60%);\n animation:drift 13s ease-in-out infinite alternate;\n}\n.demo-aurora::after{ animation-duration:19s; animation-direction:alternate-reverse; mix-blend-mode:screen; opacity:.8; }\n@keyframes drift{ from{ transform:translate(-6%,-4%) rotate(0deg) scale(1.05);} to{ transform:translate(8%,6%) rotate(22deg) scale(1.22);} }\n.demo-aurora .demo-word{ position:relative; z-index:1; color:#fff; mix-blend-mode:overlay; }\n\n/* 6 — scramble */\n.scramble{ font-family:var(--mono); font-size:22px; letter-spacing:.12em; color:var(--accent); }\n\n/* 7 — shimmer text */\n.shimmer-text{\n font-family:var(--serif); font-weight:600; font-size:32px;\n background:linear-gradient(100deg,#7a6320,#e8c766 25%,#fff6d6 50%,#e8c766 75%,#7a6320);\n background-size:200% auto; -webkit-background-clip:text; background-clip:text; color:transparent;\n animation:shimmer 3s linear infinite;\n}\n@keyframes shimmer{ to{ background-position:200% center; } }\n\n/* 8 — clip-path reveal */\n.demo-reveal{ cursor:crosshair; }\n.demo-reveal .rv{ position:absolute; inset:0; display:grid; place-items:center; }\n.rv-a{ background:linear-gradient(135deg,#0c1c20,#0a1216); }\n.rv-a span{ font-family:var(--serif); font-size:26px; color:#5f7a76; }\n.rv-b{ background:linear-gradient(135deg,#0e3b39,#0a201e); clip-path:circle(0% at 50% 50%); transition:clip-path .55s cubic-bezier(.2,.8,.2,1); }\n.rv-b span{ font-family:var(--serif); font-size:26px; color:var(--accent); }\n.demo-reveal:hover .rv-b{ clip-path:circle(78% at 50% 50%); }\n\n/* 9 — marquee with edge fade */\n.demo-marquee{\n justify-content:flex-start;\n -webkit-mask:linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);\n mask:linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);\n}\n.demo-marquee .track{\n display:flex; gap:24px; align-items:center; white-space:nowrap; flex:none; padding-left:24px;\n font-family:var(--serif); font-size:26px; color:#cfeae6;\n animation:march 9s linear infinite;\n}\n.demo-marquee .track i{ color:var(--accent); font-style:normal; }\n.demo-marquee:hover .track{ animation-play-state:paused; }\n@keyframes march{ to{ transform:translateX(-50%); } }\n\n/* 10 — shimmer skeleton */\n.demo-skeleton{ flex-direction:column; align-items:flex-start; gap:13px; padding:24px; }\n.sk{ position:relative; overflow:hidden; background:#101b1f; border-radius:8px; }\n.sk::after{\n content:\"\"; position:absolute; inset:0; transform:translateX(-100%);\n background:linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);\n animation:sweep 1.4s linear infinite;\n}\n@keyframes sweep{ to{ transform:translateX(100%); } }\n.sk-avatar{ width:46px; height:46px; border-radius:50%; }\n.sk-line{ height:12px; }\n.w90{ width:90%; } .w70{ width:70%; } .w50{ width:50%; }\n\n/* 11 — odometer */\n.js-odo{ flex-direction:column; gap:6px; cursor:pointer; }\n.odo{ font-family:var(--serif); font-weight:600; font-size:42px; color:#eef5f4; font-variant-numeric:tabular-nums; }\n.odo-hint{ font-size:11px; color:var(--muted); font-style:normal; }\n\n/* 12 — scroll-linked progress */\n.demo-scroll{ padding:0; }\n.scroll-area{ position:absolute; inset:0; overflow-y:auto; scrollbar-width:none; }\n.scroll-area::-webkit-scrollbar{ display:none; }\n.bar{\n position:sticky; top:0; height:4px; width:100%; z-index:2; transform-origin:left; transform:scaleX(0);\n background:linear-gradient(90deg, var(--accent), #6a8cff);\n animation:grow linear both; animation-timeline:scroll(nearest);\n}\n@keyframes grow{ to{ transform:scaleX(1); } }\n.scroll-content{ display:flex; flex-direction:column; align-items:center; justify-content:space-between; min-height:280%; padding:18px; font-family:var(--serif); font-size:20px; color:#9fccc4; }\n.scroll-content span{ color:var(--accent); }\n.scroll-content i{ font-style:normal; opacity:.4; }\n\n.foot{\n margin-top:clamp(28px,4vw,46px);\n display:flex; gap:18px; align-items:center; justify-content:space-between; font-size:11px; color:var(--faint);\n}\n.foot a{ color:var(--faint); text-decoration:none; border-bottom:1px solid rgba(79,97,94,.4); padding-bottom:1px; transition:.2s; }\n.foot a:hover{ color:var(--accent); border-color:var(--accent); }\n\n@media (max-width:560px){\n .grid{ grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:12px; }\n .demo-word{ font-size:22px; }\n .foot{ flex-direction:column; gap:8px; }\n}\n@media (prefers-reduced-motion: reduce){\n *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; }\n}\n",[],[145,196],"adc7fc50-4c5c-48fd-ad08-431bd4053274","garden.js","0144553a-6032-11f1-9229-1607ee4eb77e",6,["D",1780590926903],"// Hyperdesigns garden — a grid of \"living surface\" takes.\n// 6 shader cards share ONE bounded fragment (mode-switched): tide, lava, aurora,\n// ink, plasma, mercury. Math is fbm + tonemap => always in [0,1], so no GPU\n// precision quirk can wash a card white. 2 cards spray particles on click.\n\n/* ---------------- shared shader ---------------- */\nconst VERT = `attribute vec2 aPos; void main(){ gl_Position = vec4(aPos,0.0,1.0); }`;\n\nconst FRAG = `\nprecision highp float;\nuniform vec2 iResolution;\nuniform float iTime;\nuniform int uMode;\n\nfloat hash21(vec2 p){ p=fract(p*vec2(123.34,345.45)); p+=dot(p,p+34.345); return fract(p.x*p.y); }\nfloat vnoise(vec2 p){\n vec2 i=floor(p), f=fract(p); vec2 u=f*f*(3.0-2.0*f);\n float a=hash21(i), b=hash21(i+vec2(1.0,0.0)), c=hash21(i+vec2(0.0,1.0)), d=hash21(i+vec2(1.0,1.0));\n return mix(mix(a,b,u.x), mix(c,d,u.x), u.y);\n}\nfloat fbm(vec2 p){ float s=0.0,a=0.5; for(int i=0;i<4;i++){ s+=a*vnoise(p); p*=2.0; a*=0.5; } return s; }\nvec3 pal(float t, vec3 a, vec3 b, vec3 c, vec3 d){ return a + b*cos(6.28318*(c*t+d)); }\nvec2 h22(vec2 p){ p = vec2(dot(p, vec2(127.1,311.7)), dot(p, vec2(269.5,183.3))); return fract(sin(p)*43758.5453); }\n\nvoid main(){\n vec2 uv = gl_FragCoord.xy / iResolution.xy;\n vec2 p = (gl_FragCoord.xy - 0.5*iResolution.xy) / iResolution.y * 3.5;\n float t = iTime * 0.15;\n vec3 col;\n\n vec2 q = vec2(fbm(p + vec2(0.0,t)), fbm(p + vec2(5.2,1.3) - t));\n vec2 r = vec2(fbm(p + 1.6*q + vec2(1.7,9.2) + t*0.7),\n fbm(p + 1.6*q + vec2(8.3,2.8) - t*0.6));\n float n = fbm(p + 2.0*r + vec2(t*0.5, 0.0));\n float ridge = pow(1.0 - abs(2.0*fbm(p*2.0 + 3.0*r + vec2(t,0.0)) - 1.0), 3.0);\n\n if (uMode == 0) { // Tide\n vec3 deep=vec3(.02,.09,.16), mid=vec3(.05,.45,.55), hi=vec3(.6,.93,.96);\n col = mix(deep, mid, smoothstep(.2,.7,n));\n col = mix(col, hi, smoothstep(.55,.95,n)*.7);\n col += hi * ridge * .5 * smoothstep(.3,.9,n);\n } else if (uMode == 1) { // Lava\n vec3 c1=vec3(.18,.02,.02), c2=vec3(.85,.18,.04), c3=vec3(1.0,.75,.2);\n col = mix(c1, c2, smoothstep(.25,.65,n));\n col = mix(col, c3, smoothstep(.6,.95,n)*.8);\n col += vec3(1.0,.6,.15) * ridge * .9 * smoothstep(.4,.95,n);\n } else if (uMode == 2) { // Aurora\n float aur = fbm(vec2(p.x*.8 + sin(p.y*1.5 + iTime*.6)*.5, p.y*.55 - iTime*.25));\n aur = pow(clamp(aur,0.0,1.0), 1.6);\n float hue = fbm(p*.6 + vec2(0.0, iTime*.1));\n col = mix(vec3(.1,.95,.55), vec3(.5,.2,.95), smoothstep(.3,.7,hue)) * aur * 1.6;\n col += vec3(.2,.5,.4) * pow(aur, 3.0);\n col += vec3(.01,.02,.05);\n } else if (uMode == 3) { // Ink\n float s = smoothstep(.42,.72,n);\n col = vec3(s) * vec3(.92,.96,1.04);\n col += vec3(.6,.75,.85) * ridge * .25;\n } else if (uMode == 4) { // Plasma\n float pv = ((.5+.5*sin(p.x*3.0+iTime))\n + (.5+.5*sin(p.y*3.2-iTime*1.2))\n + (.5+.5*sin((p.x+p.y)*2.4+iTime*.7))) / 3.0;\n pv = mix(pv, n, .4);\n col = pal(pv + iTime*.05, vec3(.5), vec3(.5), vec3(1.0), vec3(0.0,.33,.67));\n col = mix(vec3(.02,0.0,.05), col, .5+.5*pv);\n col += ridge * .3 * vec3(.6,.9,1.0);\n } else if (uMode == 5) { // Mercury\n float m = smoothstep(.15,.9,n);\n col = mix(vec3(.08,.10,.13), vec3(.95,.98,1.0), pow(m,.7));\n float spec = pow(max(sin(n*12.0 + r.x*6.0 + iTime), 0.0), 16.0);\n col += vec3(1.0) * spec * .5;\n } else if (uMode == 6) { // Voronoi cells\n vec2 gp = floor(p*2.0), fp = fract(p*2.0);\n float f1 = 8.0, f2 = 8.0; vec2 cid = vec2(0.0);\n for (int j=-1;j<=1;j++) for (int i=-1;i<=1;i++){\n vec2 o = vec2(float(i), float(j));\n vec2 rr = h22(gp+o);\n vec2 cp = o + (0.5 + 0.5*sin(iTime*0.6 + 6.2831*rr)) - fp;\n float dd = dot(cp,cp);\n if (dd < f1){ f2=f1; f1=dd; cid=gp+o; } else if (dd < f2){ f2=dd; }\n }\n float edge = sqrt(f2) - sqrt(f1);\n float cv = fract(sin(dot(cid, vec2(12.9,78.2))) * 43758.0);\n col = pal(cv, vec3(.5), vec3(.5), vec3(1.0), vec3(0.0,.33,.67)) * 0.55;\n col *= 0.45 + 0.55*smoothstep(0.0,0.25,edge);\n col += vec3(.6,.95,.9) * smoothstep(0.09,0.0,edge);\n } else if (uMode == 7) { // Caustics\n vec2 cc = p*1.5 + r;\n float ca = 0.0;\n for (int i=0;i<3;i++){\n cc = cc*1.7 + vec2(1.3,1.7);\n vec2 s = sin(cc + iTime*0.8);\n ca += pow(0.5 + 0.5*(s.x*s.y), 6.0);\n }\n ca = clamp(ca, 0.0, 1.0);\n col = mix(vec3(.0,.10,.18), vec3(.2,.7,.85), ca);\n col += vec3(.7,.95,1.0) * pow(ca,2.0) * 0.7;\n } else if (uMode == 8) { // Oil-slick iridescence\n float ph = n*3.0 + r.x*4.0 + length(p)*0.6;\n vec3 irid = pal(ph, vec3(.5), vec3(.5), vec3(1.0), vec3(0.0,.33,.67));\n float sheen = smoothstep(.2,.9,n);\n col = mix(vec3(.02,.02,.04), irid, 0.35 + 0.5*sheen);\n col += irid * ridge * 0.4;\n } else { // CRT\n vec3 base = mix(vec3(.02,.08,.06), vec3(.1,.7,.45), smoothstep(.3,.8,n));\n float scan = 0.85 + 0.15*sin(gl_FragCoord.y*3.14159);\n float flick = 0.96 + 0.04*sin(iTime*60.0);\n col = base * scan * flick;\n float fringe = smoothstep(.6,1.0,abs(uv.x-0.5)*2.0);\n col.r += 0.06*fringe; col.b += 0.06*fringe;\n col *= 1.0 - 0.2*smoothstep(.4,1.0,length(uv-0.5));\n }\n\n vec2 c2 = uv - 0.5;\n col *= 1.0 - 0.28*dot(c2,c2);\n col = col / (col + vec3(0.42));\n col = pow(clamp(col, 0.0, 1.0), vec3(0.85));\n gl_FragColor = vec4(col, 1.0);\n}\n`;\n\nfunction compile(gl, type, src){\n const s = gl.createShader(type);\n gl.shaderSource(s, src); gl.compileShader(s);\n if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) throw new Error(gl.getShaderInfoLog(s) || \"compile failed\");\n return s;\n}\n\nclass ShaderCard {\n constructor(canvas, mode){\n this.canvas = canvas; this.mode = mode|0; this.broken = false;\n this.gl = canvas.getContext(\"webgl\", { antialias:true, alpha:false });\n if (!this.gl) { this.broken = true; return; }\n try { this._init(); } catch (e) { console.error(\"shader\", mode, e); this.broken = true; }\n this.phase = Math.random()*30; // desync the cards\n this.speed = 1; this.hover = false;\n this.last = performance.now();\n requestAnimationFrame((t)=>this._frame(t));\n }\n _init(){\n const gl = this.gl;\n const prog = gl.createProgram();\n gl.attachShader(prog, compile(gl, gl.VERTEX_SHADER, VERT));\n gl.attachShader(prog, compile(gl, gl.FRAGMENT_SHADER, FRAG));\n gl.linkProgram(prog);\n if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) throw new Error(gl.getProgramInfoLog(prog) || \"link failed\");\n gl.useProgram(prog); this.prog = prog;\n const buf = gl.createBuffer();\n gl.bindBuffer(gl.ARRAY_BUFFER, buf);\n gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1,-1,1,-1,-1,1,1,1]), gl.STATIC_DRAW);\n const a = gl.getAttribLocation(prog, \"aPos\");\n gl.enableVertexAttribArray(a);\n gl.vertexAttribPointer(a, 2, gl.FLOAT, false, 0, 0);\n this.uRes = gl.getUniformLocation(prog, \"iResolution\");\n this.uTime = gl.getUniformLocation(prog, \"iTime\");\n gl.uniform1i(gl.getUniformLocation(prog, \"uMode\"), this.mode);\n }\n _resize(){\n const gl = this.gl, c = this.canvas;\n const dpr = Math.min(window.devicePixelRatio || 1, 1.5); // many canvases -> modest\n const w = Math.round(c.clientWidth*dpr), h = Math.round(c.clientHeight*dpr);\n if (w < 2 || h < 2) return false;\n if (c.width === w && c.height === h) return true;\n c.width = w; c.height = h; gl.viewport(0,0,w,h);\n return true;\n }\n stir(){ this.speed = Math.max(this.speed, 6.0); }\n _frame(t){\n if (!this._resize()) { requestAnimationFrame((tt)=>this._frame(tt)); return; }\n const gl = this.gl;\n gl.clearColor(0.04,0.07,0.08,1.0); gl.clear(gl.COLOR_BUFFER_BIT);\n if (!this.broken) {\n const dt = Math.min((t-this.last)/1000, 0.05); this.last = t;\n const base = this.hover ? 2.6 : 1.0;\n this.speed += (base - this.speed) * Math.min(dt*3.0, 1.0);\n this.phase += dt * this.speed;\n gl.useProgram(this.prog);\n gl.uniform2f(this.uRes, this.canvas.width, this.canvas.height);\n gl.uniform1f(this.uTime, this.phase);\n gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);\n }\n requestAnimationFrame((tt)=>this._frame(tt));\n }\n}\n\n/* ---------------- click-spray (2D canvas) ---------------- */\nclass SprayCard {\n constructor(canvas, variant){\n this.canvas = canvas; this.variant = variant;\n this.ctx = canvas.getContext(\"2d\");\n this.parts = []; this.ripples = [];\n this.last = performance.now(); this.dripT = 0; this.ready = false;\n this._resize(); window.addEventListener(\"resize\", ()=>this._resize());\n requestAnimationFrame((t)=>this._frame(t));\n }\n _resize(){\n const dpr = Math.min(window.devicePixelRatio || 1, 2);\n const w = this.canvas.clientWidth, h = this.canvas.clientHeight;\n if (w < 2 || h < 2) { this.ready = false; return; }\n this.W = w; this.H = h;\n this.canvas.width = Math.round(w*dpr); this.canvas.height = Math.round(h*dpr);\n this.ctx.setTransform(dpr, 0, 0, dpr, 0, 0);\n this.ready = true;\n }\n emit(x, y, count){\n const spark = this.variant === \"spark\";\n const n = count || (spark ? 44 : 38);\n for (let i = 0; i < n; i++){\n const ang = spark ? Math.random()*6.2832\n : (-Math.PI/2 + (Math.random()-0.5)*Math.PI*0.95);\n const sp = spark ? (130 + Math.random()*300) : (90 + Math.random()*210);\n this.parts.push({\n x, y, px:x, py:y,\n vx: Math.cos(ang)*sp,\n vy: Math.sin(ang)*sp - (spark ? 0 : 30),\n life: 0,\n ttl: spark ? (0.45 + Math.random()*0.55) : (0.7 + Math.random()*0.8),\n r: spark ? (0.8 + Math.random()*1.6) : (1.4 + Math.random()*3.2),\n hue: spark ? (18 + Math.random()*34) : (168 + Math.random()*26),\n });\n }\n if (!spark) this.ripples.push({ x, y, r: 2, life: 0 });\n }\n _frame(t){\n if (!this.ready) { this._resize(); requestAnimationFrame((tt)=>this._frame(tt)); return; }\n const dt = Math.min((t-this.last)/1000, 0.05); this.last = t;\n const spark = this.variant === \"spark\";\n this.dripT += dt;\n if (this.dripT > (spark ? 1.7 : 1.4)) {\n this.dripT = 0;\n this.emit(this.W*(0.35 + Math.random()*0.3), this.H*0.52, spark ? 9 : 7);\n }\n const ctx = this.ctx;\n ctx.clearRect(0, 0, this.W, this.H);\n const g = spark ? 240 : 1500;\n ctx.save();\n ctx.globalCompositeOperation = spark ? \"lighter\" : \"source-over\";\n for (let i = this.parts.length - 1; i >= 0; i--){\n const p = this.parts[i];\n p.life += dt;\n if (p.life >= p.ttl) { this.parts.splice(i, 1); continue; }\n p.px = p.x; p.py = p.y;\n p.vy += g*dt;\n p.vx *= (1 - (spark ? 1.3 : 0.6)*dt);\n p.x += p.vx*dt; p.y += p.vy*dt;\n const k = 1 - p.life/p.ttl;\n if (spark){\n ctx.strokeStyle = `hsla(${p.hue},100%,${55+30*k}%,${k})`;\n ctx.lineWidth = p.r*k + 0.4;\n ctx.beginPath(); ctx.moveTo(p.px, p.py); ctx.lineTo(p.x, p.y); ctx.stroke();\n } else {\n ctx.fillStyle = `hsla(${p.hue},85%,${58+16*k}%,${0.85*k})`;\n ctx.beginPath(); ctx.arc(p.x, p.y, p.r*k + 0.5, 0, 6.2832); ctx.fill();\n }\n }\n ctx.restore();\n for (let i = this.ripples.length - 1; i >= 0; i--){\n const rp = this.ripples[i]; rp.life += dt;\n const k = 1 - rp.life/0.6;\n if (k <= 0) { this.ripples.splice(i, 1); continue; }\n rp.r += 64*dt;\n ctx.strokeStyle = `rgba(140,230,220,${0.4*k})`;\n ctx.lineWidth = 1.5;\n ctx.beginPath(); ctx.arc(rp.x, rp.y, rp.r, 0, 6.2832); ctx.stroke();\n }\n requestAnimationFrame((tt)=>this._frame(tt));\n }\n}\n\n/* ---------------- wire up the grid ---------------- */\ndocument.querySelectorAll(\".card\").forEach((card) => {\n const canvas = card.querySelector(\"canvas\");\n if (card.dataset.spray) {\n const spray = new SprayCard(canvas, card.dataset.spray);\n card.addEventListener(\"pointerdown\", (e) => {\n const rct = canvas.getBoundingClientRect();\n spray.emit(e.clientX - rct.left, e.clientY - rct.top, card.dataset.spray === \"spark\" ? 48 : 42);\n });\n } else {\n const run = new ShaderCard(canvas, parseInt(card.dataset.fx, 10));\n card.addEventListener(\"pointerenter\", () => { run.hover = true; });\n card.addEventListener(\"pointerleave\", () => { run.hover = false; });\n card.addEventListener(\"pointerdown\", () => run.stir());\n }\n card.addEventListener(\"pointerdown\", () => card.classList.add(\"pressed\"));\n [\"pointerup\", \"pointerleave\", \"pointercancel\"].forEach((ev) =>\n card.addEventListener(ev, () => card.classList.remove(\"pressed\"))\n );\n});\n",[],[145,204],["D",1780590225407],[162,163,164,165],[145],["D",1780590190719],{"_16":17,"_82":78},{"_16":17,"_75":76,"_77":78,"_33":34,"_79":80,"_81":26},{"_63":64,"_20":65,"_18":66,"_67":19,"_68":-5,"_69":-5,"_70":-5,"_71":-5,"_72":-5,"_73":21,"_74":17},"ctx",{"_56":-5,"_104":251,"_252":253,"_254":255,"_256":26,"_257":26,"_258":26,"_259":102,"_260":-5,"_261":-7,"_262":-7,"_263":40,"_264":26,"_265":26,"_266":-5,"_267":26,"_268":26,"_269":26,"_270":-5},"ENV",{"_222":223,"_224":225,"_226":65,"_227":228,"_229":230,"_231":232,"_233":234,"_235":236,"_237":238,"_239":240,"_241":242,"_243":244,"_245":246,"_247":248,"_249":250},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Search