Splitting: Laser Write

index.html

<div class="title">
  <span class="text write" data-splitting="lines">
    RETRO<br/>
    LASER<br/>
    WRITE
  </span>
  <span aria-hidden="true" class="text laser" data-splitting="lines">
    RETRO<br/>
    LASER<br/>
    WRITE
  </span>
</div>

script.js

Splitting();

// Hover over the title to pause the CSS animation

scripts

<script src="https://unpkg.com/splitting/dist/splitting.js"></script>
<script src="https://codepen.io/shshaw/pen/5eb6d4e9bfd78e3911ed9d0d0dfce69b"></script>

splitting-laser-write.markdown

Splitting: Laser Write

This is an example for getting a sharp glow on the edge of the mask of a text clip-path animation.

By applying a filter blur followed by a high contrast on an element wrapping a thin clip-path animation we can give it the appearance of a bright glow without accidentally masking the glow filter itself in the same clip-path.

We then animate this together with a second layer that masks sharp/unblurred text behind it, which uses an CSS animation that follows the glow at the same time.

A Pen by Martin Pitt on CodePen.

License.

style.css

html, body { background: hsl(220, 80%, 8%); }
html { height: 100%; display: flex; }
body { margin: auto; }

.title {
  position: relative;
  text-align: center;
  transform: translateZ(0);
  transform-style: preserve-3d;
}

.title .text {
  font-family: sans-serif;
  font-weight: 400;
  font-size: calc(20vw / var(--word-total) );
  line-height: 1.0;
}

.title .write .word {
  color: hsl(0, 0%, 80%);
  text-shadow: 0 0 0.1em currentColor;
  transform-style: preserve-3d;
  animation: write linear both;
}

.title .laser {
  position: absolute;
  top: 0;
  left: 0;
  /* To avoid the blur getting masked by the clip-path we had to duplicate the element */
  filter: blur(4px) contrast(10);
  pointer-events: none;
}

.title .laser .word {
  display: inline-block;
}

.title .laser .word {
  color: hsl(0, 100%, 75%);
  text-shadow: 0 0 0.1em currentColor;
  transform: translateZ(5px);
  animation: laser linear both;
}

.title .write .word,
.title .laser .word {
  animation-duration: 4s;
  animation-delay: calc(0.3s + var(--word-index) * 160ms);
  animation-iteration-count: infinite;
}

.title:hover .word,
.title:hover .word {
  animation-play-state: paused;
}

/* .title .text .word,
.title .text .word::before {
  animation-play-state: paused;
  animation-delay: -0.4s;
} */

@keyframes write {
  from, 30% { clip-path: polygon(-20% 0%, -15% 0%, -15% 100%, -20% 100%) }
  70%, to { clip-path: polygon(-15% 0%, 120% 0%, 120% 100%, -15% 100%) }
}

@keyframes laser {
  from, 30% { clip-path: polygon(-20% 0%, -15% 0%, -15% 100%, -20% 100%) }
  70%, to { clip-path: polygon(115% 0%, 120% 0%, 120% 100%, 115% 100%) }
}

styles

<link href="https://unpkg.com/splitting@0.11.3/splitting.css" rel="stylesheet" />