Glans die de muis volgt New

A gift card that does not tilt but does catch the light: a soft white highlight and a slanted sheen band follow the cursor across the surface, and the drop shadow moves the opposite way as if the lamp hangs above you. No rainbow or holographic effect, just glossy card stock. On keyboard focus the sheen runs across once; with reduced motion there is a fixed sheen. For gift vouchers, membership passes or a premium product card.

Boekhandel Van PeltZutphen € 50 CadeaukaartGeldig tot 31 december 2027

How to use it

Paste the HTML where the components should appear.
Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
Add the JavaScript and call init() with the element that contains the HTML.

<!-- Glans die de muis volgt · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="hgk">
<a class="hgk__card" href="#hv-glans-kaart" aria-label="Cadeaukaart van 50 euro bestellen bij Boekhandel Van Pelt">
<span class="hgk__top"><span class="hgk__brand">Boekhandel Van Pelt</span><span class="hgk__city">Zutphen</span></span>
<span class="hgk__amt">€ 50</span>
<span class="hgk__bot"><span class="hgk__lbl">Cadeaukaart</span><span class="hgk__nr">Geldig tot 31 december 2027</span></span>
<span class="hgk__shine" aria-hidden="true"></span>
</a>
</div>
</div>

/* Glans die de muis volgt · NedDev · eigen werk. */
.hgk{position:absolute;inset:0;display:grid;place-items:center;padding:16px;background:#f4f3f1;font-family:'Switzer',sans-serif;container-type:size}
.hgk *,.hgk *::before,.hgk *::after{box-sizing:border-box}
.hgk__card{--hgk-x:30%;--hgk-y:20%;--hgk-sx:0px;--hgk-sy:12px;position:relative;width:min(290px,78cqw);aspect-ratio:1.586;max-height:82cqh;display:flex;flex-direction:column;justify-content:space-between;padding:16px 18px;border-radius:8px;overflow:hidden;background:#0a0a0a;color:#fff;text-decoration:none;outline:none;box-shadow:var(--hgk-sx) var(--hgk-sy) 26px -12px rgba(10,10,10,.55),0 1px 2px rgba(10,10,10,.3);transition:box-shadow .25s ease}
.hgk__card::before{content:'';position:absolute;right:-30%;bottom:-55%;width:90%;aspect-ratio:1;border-radius:50%;background:#F5480F;opacity:.92}
.hgk__card:focus-visible{outline:2px solid #F5480F;outline-offset:4px}
.hgk__top,.hgk__bot,.hgk__amt{position:relative;z-index:1}
.hgk__top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.hgk__brand{font:600 14px/1.2 'Switzer',sans-serif}
.hgk__city{font:400 12px/1.2 'Switzer',sans-serif;color:#cfccc6}
.hgk__amt{font:700 clamp(30px,12cqw,46px)/1 'Switzer',sans-serif;letter-spacing:-.03em}
.hgk__bot{display:flex;flex-direction:column;gap:2px}
.hgk__lbl{font:500 13px/1.2 'Switzer',sans-serif}
.hgk__nr{font:400 12px/1.2 'Switzer',sans-serif;color:#e4e1dc}
.hgk__shine{position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;background:radial-gradient(circle at var(--hgk-x) var(--hgk-y),rgba(255,255,255,.34),rgba(255,255,255,.08) 22%,rgba(255,255,255,0) 46%),linear-gradient(115deg,rgba(255,255,255,0) calc(var(--hgk-x) - 22%),rgba(255,255,255,.13) var(--hgk-x),rgba(255,255,255,0) calc(var(--hgk-x) + 22%));mix-blend-mode:screen;opacity:.55;transition:opacity .3s ease}
.hgk__card:hover .hgk__shine,.hgk__card.is-live .hgk__shine{opacity:1}
.hgk__card.is-sweep .hgk__shine{animation:hgk-sweep 1.1s cubic-bezier(.4,0,.2,1) 1}
@keyframes hgk-sweep{0%{--hgk-x:-20%}100%{--hgk-x:120%}}
@property --hgk-x{syntax:'<percentage>';inherits:true;initial-value:30%}
@property --hgk-y{syntax:'<percentage>';inherits:true;initial-value:20%}
@media (prefers-reduced-motion:reduce){.hgk__card{transition:none}.hgk__shine{transition:none;opacity:.8}.hgk__card.is-sweep .hgk__shine{animation:none}}

// Glans die de muis volgt · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var c=root.querySelector('.hgk__card');if(!c)return;
var rm=matchMedia('(prefers-reduced-motion: reduce)').matches,raf=0,ex=0,ey=0;
function apply(){raf=0;var r=c.getBoundingClientRect();var nx=Math.max(0,Math.min(1,(ex-r.left)/r.width)),ny=Math.max(0,Math.min(1,(ey-r.top)/r.height));c.style.setProperty('--hgk-x',(nx*100).toFixed(1)+'%');c.style.setProperty('--hgk-y',(ny*100).toFixed(1)+'%');c.style.setProperty('--hgk-sx',((.5-nx)*14).toFixed(1)+'px');c.style.setProperty('--hgk-sy',(8+(.5-ny)*10).toFixed(1)+'px');}
if(!rm){
var area=root.querySelector('.hgk');
area.addEventListener('pointermove',function(e){if(e.pointerType==='touch')return;ex=e.clientX;ey=e.clientY;c.classList.add('is-live');if(!raf)raf=requestAnimationFrame(apply);});
area.addEventListener('pointerleave',function(){c.classList.remove('is-live');c.style.setProperty('--hgk-x','30%');c.style.setProperty('--hgk-y','20%');c.style.setProperty('--hgk-sx','0px');c.style.setProperty('--hgk-sy','12px');});
c.addEventListener('focus',function(){if(!c.matches(':focus-visible'))return;c.classList.remove('is-sweep');void c.offsetWidth;c.classList.add('is-sweep');});
c.addEventListener('animationend',function(){c.classList.remove('is-sweep');});
}
}
init(document.querySelector('.jouw-container'));

More components

Seen something you like?

Add it to your selection and send it over. We build your site around it, in your brand.

Get in touch →