Holographic Foil Card New

Membership card with a foil sheen that turns with the cursor or finger, and slowly moves on its own when idle. For memberships, gift cards and loyalty programmes.

Sportschool
Kralingen

Goud · lid sinds 2019

M. de Boer0412 8823 1907

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.

<!-- Holographic Foil Card · Bron: SmoothUI · licentie MIT. Laat deze vermelding staan bij hergebruik. -->
<div class="jouw-container">
<div class="hlf"><div class="hlf__card" tabindex="0" aria-label="Ledenpas Sportschool Kralingen"><div class="hlf__foil"></div><div class="hlf__glare"></div><div class="hlf__in"><div class="hlf__head"><span class="hlf__brand">Sportschool<br>Kralingen</span><span class="hlf__chip"></span></div><span class="hlf__tier">Goud · lid sinds 2019</span><div class="hlf__foot"><span class="hlf__name">M. de Boer</span><span class="hlf__no">0412 8823 1907</span></div></div></div></div>
</div>

/* Holographic Foil Card · Bron: SmoothUI · licentie MIT. Laat deze vermelding staan bij hergebruik. */
.hlf{perspective:900px;font-family:'Switzer',system-ui,sans-serif}
.hlf__card{--rx:0deg;--ry:0deg;--mx:50%;--my:50%;position:relative;width:250px;max-width:74vw;aspect-ratio:1.586;border-radius:6px;background:linear-gradient(135deg,#1f1d1b,#0a0a0a);overflow:hidden;transform:rotateX(var(--rx)) rotateY(var(--ry));transform-style:preserve-3d;box-shadow:0 18px 40px rgba(10,10,10,.28);touch-action:none;outline:none}
.hlf__card:focus-visible{box-shadow:0 0 0 2px #fff,0 0 0 4px #F5480F}
.hlf__foil{position:absolute;inset:0;background:repeating-linear-gradient(115deg,#ff8a52 0%,#ffd98f 7%,#cdeedd 14%,#bfe0f2 21%,#ffd2b5 28%,#ff8a52 35%);background-size:260% 260%;background-position:var(--mx) var(--my);mix-blend-mode:screen;opacity:.34;-webkit-mask-image:repeating-linear-gradient(45deg,#000 0 1px,rgba(0,0,0,.7) 1px 3px);mask-image:repeating-linear-gradient(45deg,#000 0 1px,rgba(0,0,0,.7) 1px 3px)}
.hlf__glare{position:absolute;inset:0;background:radial-gradient(circle at var(--mx) var(--my),rgba(255,255,255,.42),rgba(255,255,255,0) 48%);mix-blend-mode:overlay}
.hlf__in{position:absolute;inset:0;padding:14px 16px;display:flex;flex-direction:column;justify-content:space-between;color:#fff}
.hlf__head{display:flex;justify-content:space-between;align-items:flex-start}
.hlf__brand{font-size:15px;font-weight:800;line-height:1.05;letter-spacing:-.01em}
.hlf__chip{width:30px;height:22px;border-radius:3px;background:linear-gradient(135deg,#f6d38c,#b8893a);opacity:.9}
.hlf__tier{font:500 9px/1 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#ff7a45}
.hlf__foot{display:flex;justify-content:space-between;align-items:flex-end;gap:8px}
.hlf__name{font-size:12px;font-weight:600}
.hlf__no{font:500 10px/1 'JetBrains Mono',monospace;letter-spacing:.06em;opacity:.8}

// Holographic Foil Card · Bron: SmoothUI · licentie MIT. Laat deze vermelding staan bij hergebruik.
// root = het element waarin de HTML staat
function init(root){
var w = root.querySelector('.hlf'); if (!w) return;
    var card = w.querySelector('.hlf__card'), stage = root, reduce = matchMedia('(prefers-reduced-motion:reduce)').matches;
    var tx = .5, ty = .5, cx = .5, cy = .5, idle = true, raf = 0, t0 = performance.now(), lastMove = 0;
    function apply() {
      card.style.setProperty('--ry', ((cx - .5) * 26).toFixed(2) + 'deg');
      card.style.setProperty('--rx', ((.5 - cy) * 22).toFixed(2) + 'deg');
      card.style.setProperty('--mx', (cx * 100).toFixed(1) + '%');
      card.style.setProperty('--my', (cy * 100).toFixed(1) + '%');
    }
    function loop(now) {
      if (now - lastMove > 1600) idle = true;
      if (idle) { var t = (now - t0) / 1000; tx = .5 + Math.cos(t * .8) * .32; ty = .5 + Math.sin(t * 1.1) * .26; }
      cx += (tx - cx) * .1; cy += (ty - cy) * .1; apply();
      raf = requestAnimationFrame(loop);
    }
    function mv(e) { var r = card.getBoundingClientRect(); tx = Math.max(0, Math.min(1, (e.clientX - r.left) / r.width)); ty = Math.max(0, Math.min(1, (e.clientY - r.top) / r.height)); idle = false; lastMove = performance.now(); if (reduce) { cx = tx; cy = ty; apply(); } }
    stage.addEventListener('pointermove', mv);
    if (reduce) { cx = .62; cy = .38; apply(); return; }
    var io = 'IntersectionObserver' in window ? new IntersectionObserver(function (es) { if (es[0].isIntersecting) { if (!raf) raf = requestAnimationFrame(loop); } else if (raf) { cancelAnimationFrame(raf); raf = 0; } }) : null;
    if (io) io.observe(w); else raf = requestAnimationFrame(loop);
}
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 →