← back to Abramsagency
liquid-glass motion: always-on staggered light-sweep sheen + cursor refraction glare + 3D pointer tilt on cards
4e76bdf726c24398491a89c95ddbe6f02fbba935 · 2026-08-13 11:03:08 -0700 · Steve Abrams
Files touched
Diff
commit 4e76bdf726c24398491a89c95ddbe6f02fbba935
Author: Steve Abrams <steve@designerwallcoverings.com>
Date: Thu Aug 13 11:03:08 2026 -0700
liquid-glass motion: always-on staggered light-sweep sheen + cursor refraction glare + 3D pointer tilt on cards
---
public/index.html | 88 ++++++++++++++++++++++++++++++++++++++++++++-----------
1 file changed, 71 insertions(+), 17 deletions(-)
diff --git a/public/index.html b/public/index.html
index 77921b5..36fcb56 100644
--- a/public/index.html
+++ b/public/index.html
@@ -83,8 +83,7 @@ section{padding:clamp(56px,9vw,110px) 0}
/* ---------- services (4 pillars) ---------- */
.pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
-.pillar{padding:26px;position:relative;overflow:hidden;transition:transform .3s,border-color .3s}
-.pillar:hover{transform:translateY(-6px)}
+.pillar{padding:26px}
.pillar .ic{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;font-size:1.5rem;margin-bottom:16px}
.p1 .ic{background:linear-gradient(135deg,#7c5cff,#a78bfa)} .p1:hover{border-color:#7c5cff}
.p2 .ic{background:linear-gradient(135deg,#22d3ee,#38bdf8)} .p2:hover{border-color:#22d3ee}
@@ -158,8 +157,32 @@ footer{padding:44px 0 60px;text-align:center;color:var(--muted);font-size:.85rem
footer .logo{justify-content:center;margin-bottom:14px}
/* reveal */
-.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
-.reveal.in{opacity:1;transform:none}
+.reveal{opacity:0;transition:opacity .7s ease}
+.reveal:not(.lg){transform:translateY(28px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
+.reveal:not(.lg).in{transform:none}
+.reveal.in{opacity:1}
+
+/* ---------- LIQUID GLASS (movement) ---------- */
+.lg{position:relative;overflow:hidden;isolation:isolate;--ey:0px;
+ transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(calc(var(--ty,0px) + var(--ey)));
+ transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.8,.2,1),border-color .3s;will-change:transform}
+.lg:hover{--ty:-6px}
+.notilt:hover{--ty:0px}
+.reveal.lg{--ey:26px}
+.reveal.lg.in{--ey:0px}
+/* refraction glare that follows the cursor */
+.lg::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
+ background:radial-gradient(360px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.16),transparent 55%);
+ opacity:0;transition:opacity .4s}
+.lg:hover::before{opacity:1}
+/* light that sweeps across the glass — always-on + staggered = liquid motion */
+.lg::after{content:"";position:absolute;top:-60%;left:0;width:45%;height:220%;pointer-events:none;z-index:1;
+ mix-blend-mode:soft-light;
+ background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.35) 48%,rgba(255,255,255,.7) 50%,rgba(255,255,255,.25) 52%,transparent 65%);
+ transform:translateX(-160%) rotate(8deg);
+ animation:sheen 7s cubic-bezier(.6,0,.4,1) infinite;animation-delay:calc(var(--i,0)*1.15s)}
+@keyframes sheen{0%{transform:translateX(-160%) rotate(8deg)}14%{transform:translateX(340%) rotate(8deg)}100%{transform:translateX(340%) rotate(8deg)}}
+@media(prefers-reduced-motion:reduce){.lg::after{display:none}.lg{transform:none!important;transition:opacity .5s}}
/* ---------- responsive / mobile-forward ---------- */
@media(max-width:860px){
@@ -222,7 +245,7 @@ footer .logo{justify-content:center;margin-bottom:14px}
<p>Most agencies hand you files and walk away. We build the system and keep it running — so the work compounds instead of decaying.</p>
</div>
<div class="pillars">
- <div class="pillar glass p1 reveal">
+ <div class="pillar glass lg p1 reveal">
<div class="ic">🤖</div>
<h3>AI Agents & Automation</h3>
<p>Autonomous software that does the repetitive work — 24/7, at a fraction of headcount cost.</p>
@@ -233,7 +256,7 @@ footer .logo{justify-content:center;margin-bottom:14px}
<li>LLM apps, RAG & internal copilots</li>
</ul>
</div>
- <div class="pillar glass p2 reveal">
+ <div class="pillar glass lg p2 reveal">
<div class="ic">🧩</div>
<h3>Full-Service Digital</h3>
<p>Your entire online operation under one roof — strategy, build, and day-to-day running.</p>
@@ -244,7 +267,7 @@ footer .logo{justify-content:center;margin-bottom:14px}
<li>Ongoing operations & support</li>
</ul>
</div>
- <div class="pillar glass p3 reveal">
+ <div class="pillar glass lg p3 reveal">
<div class="ic">🛍️</div>
<h3>Web & E-commerce</h3>
<p>Beautiful, blazing-fast sites and stores engineered to convert on mobile first.</p>
@@ -255,7 +278,7 @@ footer .logo{justify-content:center;margin-bottom:14px}
<li>Performance, SEO & Core Web Vitals</li>
</ul>
</div>
- <div class="pillar glass p4 reveal">
+ <div class="pillar glass lg p4 reveal">
<div class="ic">📈</div>
<h3>Growth & Marketing</h3>
<p>Get found, followed, and booked — content and campaigns run like clockwork.</p>
@@ -280,13 +303,13 @@ footer .logo{justify-content:center;margin-bottom:14px}
<div class="case-grid">
<div class="case-metrics reveal">
- <div class="metric glass m1"><b>60k+</b><span>Products catalogued, priced & live</span></div>
- <div class="metric glass m2"><b>209</b><span>Sister microsites operated</span></div>
- <div class="metric glass m3"><b>100+</b><span>Vendor scrapers feeding the catalog</span></div>
- <div class="metric glass m4"><b>24/7</b><span>AI agents running the back office</span></div>
+ <div class="metric glass lg m1"><b>60k+</b><span>Products catalogued, priced & live</span></div>
+ <div class="metric glass lg m2"><b>209</b><span>Sister microsites operated</span></div>
+ <div class="metric glass lg m3"><b>100+</b><span>Vendor scrapers feeding the catalog</span></div>
+ <div class="metric glass lg m4"><b>24/7</b><span>AI agents running the back office</span></div>
</div>
- <div class="built glass reveal">
+ <div class="built glass lg reveal">
<h3>What we built for them</h3>
<div class="sub">A complete, self-running commerce operation.</div>
<div class="row"><span class="tag">🛒</span><div><b>The Shopify storefront</b><small>60k+ SKUs with automated pricing, metafields, and a catalog kept fresh nightly.</small></div></div>
@@ -299,7 +322,7 @@ footer .logo{justify-content:center;margin-bottom:14px}
</div>
<!-- LIVE COLOR-WHEEL DEMO -->
- <div id="demo" class="demo glass reveal">
+ <div id="demo" class="demo glass lg notilt reveal">
<div class="demo-head">
<h3>🎨 The color wheel, live</h3>
<p>The same color-sort we shipped for Designer Wallcoverings. <b style="color:var(--ink)">Drag the wheel</b> to spin the grid to any hue — plus sort & density controls, all dogfooded right here.</p>
@@ -336,11 +359,11 @@ footer .logo{justify-content:center;margin-bottom:14px}
<h2>Let's build yours.</h2>
<p>Tell us what you're trying to run better. We'll come back with a concrete plan — what we'd build, what it'd cost, and what it'd save.</p>
<div class="taplinks">
- <a class="tap glass" href="mailto:info@abramsagency.com"><span class="ic">✉️</span><div><b>info@abramsagency.com</b><small>Email us — we reply same day</small></div></a>
- <a class="tap glass" href="tel:+13105551234"><span class="ic">📞</span><div><b>Tap to call</b><small>Talk it through in 15 minutes</small></div></a>
+ <a class="tap glass lg" href="mailto:info@abramsagency.com"><span class="ic">✉️</span><div><b>info@abramsagency.com</b><small>Email us — we reply same day</small></div></a>
+ <a class="tap glass lg" href="tel:+13105551234"><span class="ic">📞</span><div><b>Tap to call</b><small>Talk it through in 15 minutes</small></div></a>
</div>
</div>
- <form class="lead glass reveal" id="leadform" autocomplete="on">
+ <form class="lead glass lg notilt reveal" id="leadform" autocomplete="on">
<div><label for="name">Your name</label><input id="name" name="name" required></div>
<div><label for="email">Email</label><input id="email" name="email" type="email" required></div>
<div><label for="need">What do you need?</label>
@@ -378,6 +401,37 @@ document.getElementById('yr').textContent=new Date().getFullYear();
const io=new IntersectionObserver((es)=>es.forEach(e=>{if(e.isIntersecting){e.target.classList.add('in');io.unobserve(e.target)}}),{threshold:.14});
document.querySelectorAll('.reveal').forEach(el=>io.observe(el));
+/* ---------- liquid-glass: pointer tilt + refraction glare ---------- */
+(function(){
+ const reduce=matchMedia('(prefers-reduced-motion:reduce)').matches;
+ const cards=[...document.querySelectorAll('.lg')];
+ cards.forEach((c,i)=>c.style.setProperty('--i',i%7)); // stagger the always-on sheen
+ if(reduce||!matchMedia('(hover:hover) and (pointer:fine)').matches)return;
+ let raf;
+ cards.filter(c=>!c.classList.contains('notilt')).forEach(c=>{
+ c.addEventListener('pointermove',e=>{
+ const r=c.getBoundingClientRect();
+ const x=(e.clientX-r.left)/r.width, y=(e.clientY-r.top)/r.height;
+ cancelAnimationFrame(raf);
+ raf=requestAnimationFrame(()=>{
+ c.style.setProperty('--ry',((x-.5)*9).toFixed(2)+'deg');
+ c.style.setProperty('--rx',((.5-y)*9).toFixed(2)+'deg');
+ c.style.setProperty('--mx',(x*100).toFixed(1)+'%');
+ c.style.setProperty('--my',(y*100).toFixed(1)+'%');
+ });
+ });
+ c.addEventListener('pointerleave',()=>{c.style.setProperty('--rx','0deg');c.style.setProperty('--ry','0deg');});
+ });
+ // glare-only (no tilt) cards still track the cursor for the refraction highlight
+ cards.filter(c=>c.classList.contains('notilt')).forEach(c=>{
+ c.addEventListener('pointermove',e=>{
+ const r=c.getBoundingClientRect();
+ c.style.setProperty('--mx',(((e.clientX-r.left)/r.width)*100).toFixed(1)+'%');
+ c.style.setProperty('--my',(((e.clientY-r.top)/r.height)*100).toFixed(1)+'%');
+ });
+ });
+})();
+
/* ---------- animated stat counters ---------- */
const cio=new IntersectionObserver((es)=>es.forEach(e=>{
if(!e.isIntersecting)return; const el=e.target.querySelector('[data-count]'); if(!el||el.dataset.done)return;
← eaecc03 abramsagency.com: mobile-first liquid landing — 4 service pi
·
back to Abramsagency
·
lead form: optional George email notification (env-gated off 1ac9fa4 →