Add glitch & blur to heading reveal

Author: stormwarning

www/src/lib/components/heading.svelte

@@ -82,13 +82,60 @@ onMount(() => {
 }
 
 :global(.line) {
-	transition: 0.7s cubic-bezier(0.165, 0.84, 0.44, 1);
-	transition-property: opacity, transform;
+	--duration: 700ms;
+	--easing: cubic-bezier(0.165, 0.84, 0.44, 1);
+	--distance: 0.125em;
+	--distance-y: 0.0625em;
+	--rotation: rotateX(75deg) rotateY(10deg) rotateZ(-9deg);
+
+	position: relative;
+	transition: var(--duration) var(--easing);
+	transition-property: opacity, filter, transform, translate;
 	transition-delay: var(--delay, 0);
+	color: #1061ff;
+
+	&::before,
+	&::after {
+		position: absolute;
+		inset-inline-start: 0;
+		/* z-index: -1; */
+		content: attr(data-text);
+		mix-blend-mode: plus-lighter;
+		pointer-events: none;
+		user-select: none;
+		transition: var(--duration) var(--easing);
+		transition-property: opacity, filter, transform, translate;
+
+		@starting-style {
+			opacity: 0;
+			filter: blur(8px);
+			/* translate: var(--distance); */
+		}
+	}
+
+	&::before {
+		color: #14c7ff;
+		transition-delay: calc(var(--delay, 0));
+		@starting-style {
+			transform: var(--rotation);
+			/* translate: calc(var(--distance) * -2) calc(var(--distance-y) * 2); */
+		}
+	}
+
+	&::after {
+		color: #ff6231;
+		transition-delay: calc(var(--delay, 0));
+		@starting-style {
+			transform: var(--rotation);
+			/* translate: calc(var(--distance) * -3) calc(var(--distance-y) * 3); */
+		}
+	}
 
 	@starting-style {
 		opacity: 0;
-		transform: rotateX(75deg) rotateY(10deg) rotateZ(-9deg);
+		filter: blur(8px);
+		transform: var(--rotation);
+		/* translate: calc(var(--distance) * -1) var(--distance-y); */
 	}
 }
 </style>

www/src/lib/components/sub-heading.svelte

@@ -40,14 +40,17 @@ let show = $derived(shouldShow === undefined ? true : shouldShow)
 
 <style>
 .text {
-	transition:
-		opacity 0.7s cubic-bezier(0.165, 0.84, 0.44, 1),
-		transform 0.7s cubic-bezier(0.165, 0.84, 0.44, 1);
+	--duration: 700ms;
+	--easing: cubic-bezier(0.165, 0.84, 0.44, 1);
+
+	transition: var(--duration) var(--easing);
+	transition-property: opacity, filter, transform;
 	transition-delay: var(--delay, 0);
 }
 
 .hide .text {
 	opacity: 0;
+	filter: blur(8px);
 	transform: rotateX(75deg) rotateY(10deg) rotateZ(-9deg);
 }
 </style>

www/src/lib/wrap-lines.js

@@ -51,7 +51,7 @@ export function wrapLines(element) {
 
 			if (newTop > lastTop) {
 				if (lineWords.length > 0) {
-					markup += `<span ${lineClass} style="--delay: ${
+					markup += `<span ${lineClass} data-text="${lineWords.join(' ')}" style="--delay: ${
 						100 * lineNumber
 					}ms">${lineWords.join(' ')}</span>`
 				}
@@ -66,7 +66,7 @@ export function wrapLines(element) {
 			if (0 < index && child.nodeName !== 'BR') markup += ' '
 
 			if (index === children.length - 1 && lineWords.length > 0) {
-				markup += `<span ${lineClass} style="--delay: ${
+				markup += `<span ${lineClass} data-text="${lineWords.join(' ')}" style="--delay: ${
 					100 * lineNumber
 				}ms">${lineWords.join(' ')}</span>`
 			}