span dialog

codeswing.json

{
  "scripts": [],
  "styles": []
}

index.html

<p>I am a front end developer driven by the intellectual craftsmanship required for projects that expect excellence down to the smallest level of detail.

<p>As the main developer for <span-glitch>louvre.fr</span-glitch> I got to apply my <span-glitch>engineering background</span-glitch> and my <span-glitch>web experience</span-glitch> to deliver a product I am proud of while making small contributions to the <span-glitch>open source projects</span-glitch> it relies on.

script.js

const spans = document.querySelectorAll('span-glitch')
spans.forEach(span => {
	span.style.setProperty('--content', `"${span.textContent}"`)
})

style.scss

@use 'sass:math';

body {
	font-size: 30px;
	font-family: monospace;
}

span-glitch {
	$steps: 7;
	$size: .075em;
	--content: '';

	cursor: pointer;
	display: inline-block;
	position: relative;
	z-index: 0;

	&::after,
	&::before {
		content: var(--content);
		position: absolute;
		inset: 0 #{-2 * $size};
		padding: 0 #{2 * $size};
		background: #1E1E1E;
		animation: #{$steps * .4s} steps(#{$steps}, jump-none) infinite glitch;
	}

	&::before {
		transform: translateX(#{-$size});
		color: rgb(212, 212, 177);
		color: white;
	}

	&::after {
		transform: translateX(#{$size});
		animation-delay: #{$steps * .1s};
		color: rgb(216, 191, 191);
	}

	@keyframes glitch {
		@for $i from 0 through $steps{
			#{percentage($i * (1 / $steps))}{
				clip-path: inset(#{random() * 1.4em} 0 #{random() * 1.4em});
			}
		}
	}

	& + & {
		&::before { animation-delay: .9s; }
		&::after { animation-delay: #{$steps * .1s + .9s}; }
	}

	& + & + & {
		&::before { animation-delay: .2s; }
		&::after { animation-delay: #{$steps * .1s + .2s}; }
	}
	
	& + & + & + & {
		&::before { animation-delay: .6s; }
		&::after { animation-delay: #{$steps * .1s + .6s}; }
	}
}