Glass Card w/ SVG + GSAP (ode to Phil Goodwin @ Unfold)

glass-card-w-svg-gsap-ode-to-phil-goodwin-unfold.markdown

Glass Card w/ SVG + GSAP (ode to Phil Goodwin @ Unfold)

Inspired by this slick shot by Phil Goodwin @ Unfold - https://dribbble.com/shots/14647423-Glass-Card-Design

For optimum performance, no SVG blur filter is used; just a blurry JPG that is masked by the card shape :)

A Pen by Tom Miller on CodePen.

License.

index.html

<svg width="100%" height="100%">  
  <defs>
    
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="65%">
      <stop offset="10%" stop-color="#004476" />
      <stop offset="90%" stop-color="#006fbe" />
    </linearGradient>
    <linearGradient id="grad2" x1="0%" y1="0%" x2="100%" y2="85%">
      <stop offset="0%" stop-color="#f5eacc" />
      <stop offset="80%" stop-color="#e0c677" />
      <stop offset="110%" stop-color="#ebd8a0" />      
    </linearGradient>
    <linearGradient id="grad3" x1="0%" y1="0%" x2="100%" y2="85%">
      <stop offset="0%" stop-color="#54e2fe" />
      <stop offset="80%" stop-color="#049afd" />
      <stop offset="110%" stop-color="#2aaffc" />      
    </linearGradient>
    <linearGradient id="grad4" x1="0%" y1="0%" x2="80%" y2="70%">
      <stop offset="0%" stop-color="rgba(255,255,255,0.75)" />
      <stop offset="90%" stop-color="rgba(255,255,255,0.3)" />
    </linearGradient>
    
    <pattern id="cardBg" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse">
      <image opacity="0.5" width="100" height="100" xlink:href="https://assets.codepen.io/721952/whiteNoise2.png" />
      <image class="fillLight" opacity="0.5" width="100" height="100" xlink:href="https://assets.codepen.io/721952/whiteNoise.png" />
    </pattern>
      
    <mask id="m">
      <rect class="card" fill="#fff" width="340" height="540" rx="30" ry="30" />
    </mask>
    
  </defs>
  
  <rect fill="url(#grad1)" width="100%" height="100%" />
  
  <g class="main">
    <circle class="ball bg" fill="url(#grad2)" cx="120" cy="130" r="130"/>
    <circle class="ball bg" fill="url(#grad3)" cx="550" cy="410" r="210"/>
    <g class="blur" mask="url(#m)">
      <image class="bg" x="33" y="7" width="700" height="600" xlink:href="https://assets.codepen.io/721952/bgBlur.jpg" />
    </g>
    <g class="card">
      <rect fill="none" stroke="#ccc" opacity="0.75" stroke-width="3" width="341" height="541" rx="31" ry="31" opacity="0.8" />
      <rect fill="url(#cardBg)" width="340" height="540" rx="30" ry="30" opacity="0.8" />
      <text class="numTxt" fill="#f0f0f0" font-size="23">4678 9743 6489 9721</text>
      <text class="nameTxt" fill="#e4e4f4" font-size="15">PHILIP GOODWIN</text>      
      <g class="chip">
        <rect fill="url(#grad2)" width="58" height="76.5" rx="9" ry="9" />
        <path fill="none" opacity="0.8" stroke="#c9b678" d="M58,54.05 M0,25.72c2.11,0.21,3.75,0.47,4.03,0.74c2.92,3.64,5.83,7.28,8.67,10.98c0.77,1,1.52,1.72,2.89,1.47c0.95-0.18,1.28,0.3,1.27,1.25c-0.04,4.03-0.01,8.03-0.02,12.07c8.44,0,16.73,0,25.08,0c0-8.43,0-25.32,0-25.32l-26.77,0c0,0-1.95,0-1.95-1.96c-0.4-1.85-0.4-14.9-0.34-24.95 M45.96,0c0,8.65,0.01,18.65-0.01,24.19c-0.01,2.9,0.27,2.55-2.38,2.84c0,3.91,0,7.82,0,12.17c4.69-3.07,7.28-8.53,11.07-12.63C55,26.06,56.3,25.72,58,25.5 M58,54.05c-0.55,0-0.89,0.01-0.89,0.01c-2.46,0.26-9.33-10.83-12.02-13.2c-0.41-0.36-1.57,0.2-1.57,0.2s-0.02,7.37-0.02,11.13c2.56,0.32,2.56,0.32,2.56,2.77c0,4.4,0,12.9,0,21.04 M13.1,76c0.01-8.57,0.04-17.77,0.07-22.53c-0.01-0.82,0.36-1.2,1.17-1.17c0.28,0.01,1.03-0.06,1.03-0.06l0.05-11.81c0,0-1.73,0.15-2.12,0.72c-0.39,0.57-6.16,7.63-9.18,11.5C3.9,52.85,2.19,53.11,0,53.35"/>
      </g>
      <path class="knot" opacity="0.82" fill="#eee" stroke="#eee" stroke-width="0.2" d="M57.29,25.64c0.22,3.8-1.46,7.05-2.79,10.39c0.22,6.27-2.65,12.28-7.79,15.91c-3.4,2.47-7.55,2.49-11.4,3.18c-4.9,3.24-11.44,3.87-16.76,1.25c-4.55-1.58-6.26-6.36-9.63-9.14c-4.95-2.36-7.89-7.5-8.72-12.77c-0.89-4.53,1.45-8.67,2.88-12.72C2.6,13.51,8.25,5.38,16.52,3.82c8.51-0.73,12.75-6.36,21.81-2.44c3.45,1.71,6.46,4.34,8.38,7.7C52.37,13.56,57.49,17.52,57.29,25.64z M10.66,40.61c-0.52,11.27,14.21,6.48,20.71,4.27c3.36-1.8,8.91-0.78,10.98-4.33c2.67-17.88,8.69-13.02-3.47-23.76c-0.89-0.91-1.69-1.92-2.65-2.76c-1.1-1.41,1.82-1.59,2.42-0.67c2.07,1.95,9.2,11.18,8.23,3.12c-1.46-13.3-22.26-1.65-30.14-0.84c-2.96,1.29-1.94,7.05-3.3,9.8c-1.15,5.17-4.42,8.14,1.03,11.95c0.88,1.24,9.41,7.1,6.03,7.74C17.85,45.86,10.2,32.65,10.66,40.61z M5.31,22.01c0.12,2.59,1.21,5.23,2.48,7.54c2.77,3.26,3.52-5.85,4.15-7.45c1.34-3.74,0.35-5.56-3.13-2.54c-3.69-0.81,2.33-4.29,3.8-4.75c1.92-1.05,2.18-3.61,3.4-5.31C22.23,1,3.36,9.19,5.31,22.01z M41.03,51.87c9.31-1.72,13.63-12.99,9.8-21.17c-0.93-3.34-3.13-4.76-3.83-0.36c-0.58,3.77-5.3,13.29,2.29,7.85c2.61,3.49-5.19,3.9-5.9,6.48c-0.69,1.5-1.26,3.13-2.29,4.44C40.25,49.87,39.05,51.76,41.03,51.87z M16.28,49.8c-4.06,0.84,3.39,4.83,4.79,5.32c1.61,0.7,10.41,1.61,9.27-1.45C20.53,47.6,26.36,50.17,16.28,49.8z M3.65,27.92c-2.58,1.17-1.11,7.02-0.69,9.38c0.99,1.58,3.19,7.3,5.45,5.38c0.46-1.18-0.51-2.41-0.19-3.66c-0.11-1.55,0.8-3.11,0.12-4.6c-1.05-1.81-2.66-3.26-3.31-5.3C4.77,28.36,4.27,27.92,3.65,27.92z M55.32,25.78c-0.18-2.59-0.65-5.49-2.15-7.78c-0.88-1.26-3.92-5.75-4.26-2.01c0.65,2.05,0.5,4.19,0.04,6.26c-0.03,1.93,1.99,3.11,2.62,4.85C53.69,32.33,55.05,30.04,55.32,25.78z M29.94,2.34c-7.72,0.84,1.81,4.22,3.78,5.86c1.45,0.64,3.12-0.08,4.64-0.17c1.26-0.41,2.77,0.64,3.81-0.33C41.66,3.44,33.77,1.68,29.94,2.34z M18.5,12.91c1.81-0.81,14.15-2.06,10.25-5.25c-2.13-0.65-4.59-2.36-6.81-1.65C20.69,7.03,15.07,12.18,18.5,12.91z M34.53,52.17c2.22-0.32,5.8-4.44,5.24-6.62c-0.97-1.12-6.7,1-8.21,1.52C23.58,48.62,30.53,51.77,34.53,52.17z"/>
      <path class="logo" fill="url(#grad4)" d="M100,31.88c0,0.02,0,0.04,0,0.05c-0.11-0.01-0.21-0.02-0.32-0.02c-2.3,0-4.6,0-6.9,0c-0.1,0-0.21-0.01-0.31-0.01c-0.34-1.59-0.66-3.15-0.99-4.72c-0.1,0-0.16-0.01-0.22-0.01c-3.29,0-6.58,0-9.88,0c-0.23,0-0.23,0-0.31,0.23c-0.49,1.43-0.99,2.86-1.48,4.29c-0.07,0.21-0.07,0.22-0.3,0.22c-2.69,0-5.38,0-8.07,0c-0.07,0-0.13-0.02-0.21-0.03c0.02-0.06,0.02-0.11,0.04-0.15c0.24-0.57,0.48-1.14,0.71-1.72c1.37-3.28,2.74-6.57,4.11-9.85c1.01-2.42,2.01-4.84,3.02-7.26c1.09-2.61,2.17-5.23,3.26-7.84c0.33-0.8,0.67-1.6,1.04-2.39c0.27-0.58,0.66-1.09,1.18-1.49c0.64-0.49,1.38-0.68,2.16-0.69c2.23-0.01,4.46,0,6.68,0c0.24,0,0.24,0,0.29,0.24c0.34,1.64,0.68,3.27,1.02,4.91c0.38,1.83,0.77,3.65,1.15,5.48c0.42,2.01,0.83,4.02,1.25,6.03c0.47,2.24,0.94,4.48,1.41,6.72c0.49,2.33,0.97,4.66,1.45,6.99C99.86,31.21,99.93,31.54,100,31.88z M87.75,9.17c-0.02,0-0.04-0.01-0.06-0.01c-1.38,3.85-2.77,7.71-4.16,11.58c2.25,0,4.46,0,6.69,0C89.39,16.88,88.57,13.03,87.75,9.17z M0,1.54c0.05,0.01,0.11,0.01,0.16,0.02c0.7,0.16,1.4,0.31,2.09,0.49c1.33,0.34,2.63,0.79,3.91,1.29c0.68,0.27,1.37,0.54,1.99,0.93C8.6,4.55,8.99,4.89,9.27,5.35c0.25,0.4,0.41,0.85,0.53,1.3c0.46,1.73,0.91,3.46,1.36,5.18c0.6,2.32,1.21,4.64,1.81,6.96c0.41,1.58,0.81,3.15,1.22,4.73c0.6,2.32,1.2,4.64,1.81,6.96c0.12,0.47,0.25,0.94,0.37,1.41c0.09,0.01,0.16,0.02,0.23,0.02c2.7,0,5.4,0,8.09,0c0.17,0,0.25-0.05,0.31-0.21c0.24-0.59,0.49-1.18,0.73-1.77c0.97-2.32,1.94-4.64,2.91-6.95c0.93-2.22,1.85-4.44,2.78-6.66c1.07-2.56,2.15-5.13,3.22-7.69c1.05-2.5,2.09-5,3.13-7.5c0.08-0.19,0.16-0.39,0.24-0.61c-2.86,0-5.68,0-8.52,0c-2.79,7.07-5.58,14.13-8.39,21.23c-0.03-0.1-0.06-0.16-0.07-0.21c-0.06-0.29-0.11-0.59-0.17-0.89c-0.26-1.35-0.51-2.71-0.77-4.06c-0.22-1.16-0.45-2.33-0.67-3.49c-0.28-1.46-0.55-2.92-0.83-4.38c-0.21-1.09-0.41-2.17-0.62-3.26c-0.14-0.72-0.26-1.44-0.43-2.16c-0.15-0.69-0.5-1.29-1.02-1.77c-0.76-0.7-1.67-1.02-2.69-1.02c-4.45-0.01-8.91,0-13.37,0c-0.09,0-0.17,0.01-0.26,0.02C0.2,0.67,0.18,0.79,0.15,0.91C0.11,1.11,0.05,1.3,0,1.49C0,1.51,0,1.53,0,1.54z M64.75,0c-0.08,0.01-0.15,0.03-0.23,0.04c-0.48,0.03-0.96,0.02-1.43,0.08c-1.43,0.15-2.83,0.45-4.18,0.95c-1.86,0.69-3.53,1.68-4.87,3.18c-1.79,2.02-2.52,4.39-2.29,7.06c0.14,1.65,0.88,3.02,2.01,4.2c0.61,0.63,1.29,1.16,2.01,1.65c1.1,0.74,2.28,1.36,3.45,1.99c0.83,0.45,1.68,0.89,2.41,1.5c0.32,0.26,0.63,0.55,0.88,0.88c0.52,0.69,0.58,1.45,0.19,2.22c-0.35,0.7-0.94,1.14-1.62,1.47c-0.96,0.46-1.99,0.63-3.04,0.65c-0.92,0.02-1.84-0.06-2.75-0.21c-1.81-0.3-3.54-0.86-5.18-1.71c-0.08-0.04-0.17-0.09-0.28-0.15c-0.49,2.31-0.98,4.59-1.47,6.89c0.36,0.13,0.7,0.27,1.05,0.39c1.2,0.41,2.43,0.72,3.68,0.94c1.28,0.23,2.57,0.37,3.88,0.4c0.06,0,0.12,0.03,0.17,0.04c0.28,0,0.57,0,0.85,0c0.05-0.01,0.1-0.03,0.15-0.04c0.57-0.04,1.15-0.07,1.72-0.12c1.81-0.17,3.56-0.59,5.23-1.33c1.51-0.67,2.85-1.57,3.95-2.81c1.05-1.17,1.75-2.52,2.12-4.05c0.21-0.89,0.28-1.8,0.27-2.71c-0.01-0.88-0.17-1.72-0.49-2.54c-0.5-1.3-1.34-2.34-2.38-3.24c-0.84-0.73-1.77-1.34-2.73-1.88c-1.07-0.6-2.15-1.17-3.22-1.76c-0.69-0.38-1.36-0.81-1.9-1.4c-0.7-0.77-0.79-1.66-0.13-2.5c0.34-0.44,0.79-0.73,1.29-0.96c0.92-0.42,1.9-0.55,2.9-0.56c0.62-0.01,1.24,0.03,1.85,0.11c1.53,0.19,3.01,0.58,4.42,1.2c0.14,0.06,0.29,0.12,0.45,0.18c0.48-2.23,0.96-4.43,1.43-6.64c-0.11-0.05-0.2-0.09-0.29-0.12c-0.76-0.28-1.55-0.51-2.34-0.69c-1.49-0.33-2.99-0.55-4.52-0.56c-0.08,0-0.15-0.03-0.23-0.04C65.28,0,65.02,0,64.75,0z M34.76,31.88c0.06,0.02,0.08,0.03,0.11,0.03c2.62,0,5.24,0,7.85,0c0.04,0,0.09-0.01,0.13-0.02c0.01,0,0.02-0.01,0.02-0.01c0.01-0.01,0.01-0.01,0.02-0.02c2.21-10.43,4.42-20.87,6.63-31.33c-2.71,0-5.39,0-8.11,0C39.2,10.98,36.98,21.43,34.76,31.88z"/>
    </g>
  </g>
</svg>

script.js

gsap.timeline()
    .set('.logo',     { x:215, y:482 })
    .set('.chip',     { x:148, y:66 })
    .set('.knot',     { x:22, y:250 })
    .set('.numTxt',   { x:22, y:375 })
    .set('.nameTxt',  { x:22, y:410 })
    .add(centerMain(), 0.2)
    .from('.ball',    { duration:2,
                        transformOrigin:'50% 50%',
                        scale:0,
                        opacity:0,
                        ease:'elastic',
                        stagger:0.2
                      }, 0)
    .fromTo('.card',  { x:200,
                        y:40,
                        transformOrigin:'50% 50%',
                        rotation:-4,
                        skewX:10,
                        skewY:4,
                        scale:2,
                        opacity:0
                      },{
                        duration:1.3,
                        skewX:0,
                        skewY:0,
                        scale:1,
                        opacity:1,
                        ease:'power4.inOut'
                      }, 0.2)
        


function centerMain(){ gsap.set('.main', {x:'50%', xPercent:-50, y:'50%', yPercent:-50}); }
window.onresize = centerMain;

window.onmousemove = (e)=> {
  let winPercent = { x:e.clientX/window.innerWidth, y:e.clientY/window.innerHeight },
      distFromCenter = 1 - Math.abs((e.clientX - window.innerWidth/2)/window.innerWidth*2);
  
  gsap.timeline({defaults:{duration:0.5, overwrite:'auto'}})
      .to('.card',        {rotation:-7+9*winPercent.x}, 0)
      .to('.fillLight',   {opacity:distFromCenter}, 0)  
      .to('.bg',          {x:100-200*winPercent.x, y:20-40*winPercent.y}, 0) 
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>

style.css

@import url('https://fonts.googleapis.com/css2?family=Space+Mono&display=swap');

html, body {
  width:100%;
  height:100%;
  overflow:hidden;
  font-family: 'Space Mono', monospace;
  letter-spacing:1.6px;
}