feat: add pointer movement effect for dynamic title and line animations

mattjmoran · Feb 24, 2025 · 31b24be · 31b24be
1 parent 69f830f
commit 31b24be
Showing 1 changed file with 81 additions and 8 deletions.
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -5,24 +5,46 @@
 	import hash from '$lib/utils/hash';
 
 	let innerWidth = $state(0);
+	let innerHeight = $state(0);
 
 	const seed = Math.random();
 
 	let transitionDiv = $state({
 		width: 1,
 		height: 1
 	});
+
 	let transitionSvg = $derived({
 		height: Math.ceil(transitionDiv.height / 50),
 		width: Math.ceil(
 			(transitionDiv.width * Math.ceil(transitionDiv.height / 50)) / transitionDiv.height
 		)
 	});
+
 	let transitionRepeat = $derived({
 		x: [...Array(transitionSvg.width).keys()],
 		y: [...Array(transitionSvg.height).keys()]
 	});
 
+	const onpointermove = (event: {pageX: number; pageY: number}) => {
+		const motion = { x: innerWidth / 100, y: innerHeight / 100 };
+
+		const line = document.querySelector('#intro .line');
+    if (line instanceof SVGSVGElement) {
+        const x = (event.pageX / innerWidth - 0.5) * motion.x * 4; 
+        const y = (event.pageY / innerHeight - 0.5) * motion.y * 4;
+        line.style.transform = `translateX(calc(-50% + ${x}px)) translateY(${y}px)`;
+    }
+		
+		const title = document.querySelector('#intro .title');
+		if (title instanceof HTMLElement) {
+			const { left, top, width, height } = title.getBoundingClientRect();
+			const x = (((event.pageX - left) / width) - 0.5) * motion.x;
+			const y = (((event.pageY - top) / height) - 0.5) * motion.y;
+			title.style.transform = `translateX(${x}px) translateY(${y}px)`;
+		}
+	};
+
 	let time: string | undefined = $state();
 
 	onMount(() => {
@@ -41,7 +63,8 @@
 	});
 </script>
 
-<svelte:window bind:innerWidth={innerWidth} />
+<svelte:window bind:innerWidth={innerWidth} bind:innerHeight={innerHeight} />
+<svelte:body {onpointermove} />
 
 <div id="intro">
 	<div class="content">
@@ -63,12 +86,20 @@
 		</div>
 		<div class="title">
 			{#if innerWidth >= 768}
-				<h1 style="justify-content: left;">Matthew</h1>
-				<h1 style="justify-content: right;">J. Moran</h1>
+				<h1 style="justify-content: left;">Matthew</h1>			
+				<h1 style="justify-content: right;">J. <span style="z-index: 1;">Moran</span></h1>
+				<h2 style="justify-content: right;">Developer & Designer</h2>
+				<svg class="line" fill="none" viewBox="0 0 808 108" xmlns="http://www.w3.org/2000/svg">
+					<path d="M4 102c27 6 151-1 277-21 157-25 195 39 274 10 75-26 64-97 14-86-72 17 11 86 71 86 47 0 101-12 164-19" stroke="#55ff00" stroke-linecap="round"/>
+				</svg>	
 			{:else}
-				<h1 style="justify-content: left;">M</h1>
+				<h1 style="justify-content: left; z-index: 1;">M</h1>
 				<h1 style="justify-content: center;">J</h1>
-				<h1 style="justify-content: right;">M</h1>
+				<h1 style="justify-content: right; z-index: 1;">M</h1>
+				<svg class="line" fill="none" viewBox="0 0 735 403" xmlns="http://www.w3.org/2000/svg">
+					<path d="M6 5c245 69 284 260 428 259 137-1 243-95 128-140-119-46-81 158 0 204 65 38 73 36 168 69" stroke="#5f0" stroke-linecap="round"/>
+				</svg>
+
 			{/if}
 		</div>
 		<div class="subtext">
@@ -194,16 +225,58 @@
 		@extend %flex-column;
 		justify-content: center;
 		flex: 1;
+		user-select: none;
 		& h1 {
 			@extend %no-space, %flex-center;
-			user-select: none;
-			font: bold 15vw/1 'Mars Display';
+			font: bold 15vw/100% 'Mars Display';
 			height: calc(15vw * var(--title-height-percent));
-			@media (--tablet), (--phone) {
+			@media (--tablet) {
+				font-size: 14rem;
+				height: calc(14rem * var(--title-height-percent));
+			}
+			@media (--phone) {
 				font-size: 12rem;
 				height: calc(12rem * var(--title-height-percent));
 			}
 		}
+		& h2 {
+			@extend %no-space, %flex-center;
+			font: 2vw/100% 'jgs_font';
+			color: var(--light-gray);
+			text-transform: uppercase;
+		}
+	}
+
+	@keyframes line-movement {
+		from {
+				stroke-dashoffset: 120;
+		}
+		to {
+				stroke-dashoffset: 0;
+		}
+	}
+
+	#intro .line {
+    left: 50%;
+		width: 110vw;
+		position: absolute;
+    transform: translateX(-50%);
+    transition: transform 0.2s ease-out;
+    & path {
+			stroke-width: 5;
+			stroke-dasharray: 15;
+			animation: line-movement 4s linear infinite;
+			@media (--tablet) {
+				stroke-width: 10;
+				stroke-dasharray: 30;
+				animation: line-movement 3s linear infinite;
+			}
+			@media (--phone) {
+				stroke-width: 15;
+				stroke-dasharray: 60;
+				animation: line-movement 2s linear infinite;
+			}
+    }
 	}
 
 	#intro .subtext {