Spotlight Cursor Text Screen

index.pug

.cursor
.shapes
  .shape.shape-1
  .shape.shape-2
  .shape.shape-3
.content
  h1 Hello there!

script.babel

document.body.addEventListener("mousemove", evt => {
  const mouseX = evt.clientX;
  const mouseY = evt.clientY;
  
  gsap.set(".cursor", {
    x: mouseX,
    y: mouseY
  })
  
  gsap.to(".shape", {
    x: mouseX,
    y: mouseY,
    stagger: -0.1
  })
})

scripts

<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js"></script>

spotlight-cursor-text-screen.markdown

Spotlight Cursor Text Screen

Using css screen blend mode and GSAP to create the cursor and text effect from the hero at https://wickret.cuberto.com

A Pen by Caroline Artz on CodePen.

License.

style.scss

body {
  font-family: Montserrat, sans-serif;
  font-weight: 900;
  
  &, * {
    cursor: none;
  }
}

.shapes {
  position: relative;
  height: 100vh;
  width: 100vw;
  background: #2128bd;
  overflow: hidden;
}

.shape {
  will-change: transform;
  position: absolute;
  border-radius: 50%;
  
  $shapes: (#005ffe: 650px, #ffe5e3: 440px, #ffcc57: 270px);
  
  @each $color, $size in $shapes {
    &.shape-#{index($shapes, ($color $size))} {
      background: $color;
      width: $size;
      height: $size;
      margin: (-$size/2) 0 0 (-$size/2);
    }
  }
}

.content {
  top: 0;
  left: 0;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
  background: #fff;
  mix-blend-mode: screen;
}

h1 {
  @include rf(100, 200); // defined in imported pen;
  
  color:#000;
  margin: 0;
  text-align: center;
}


.cursor {
  position: fixed;
  background: #2128bd;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border-radius: 50%;
  will-change: transform;
  user-select: none;
  pointer-events: none;
  z-index: 10000;
}

::selection {
  color: #fff;
  background: #2128bd;
}

styles

<link href="https://codepen.io/carolineartz/pen/abzLQoQ.scss" rel="stylesheet" />