Back
Version 4
9/26/2024
/** @jsxImportSource https://esm.sh/react */
import React, { useEffect, useRef, useState } from "https://esm.sh/react";
import { createRoot } from "https://esm.sh/react-dom/client";
function App() {
const containerRef = useRef<HTMLDivElement>(null);
const textRef = useRef<HTMLHeadingElement>(null);
const [mainText, setMainText] = useState("Good Vibes");
useEffect(() => {
const container = containerRef.current;
const text = textRef.current;
if (!container || !text) return;
const distance = 30;
function setShadow(e: MouseEvent) {
const width = container.offsetWidth;
const height = container.offsetHeight;
let x = e.offsetX;
let y = e.offsetY;
if (container !== e.target) {
const target = e.target as HTMLElement;
x = x + target.offsetLeft;
y = y + target.offsetTop;
}
const xDistance = Math.round((x / width * distance) - (distance / 2));
const yDistance = Math.round((y / height * distance) - (distance / 2));
text.style.textShadow = `${xDistance}px ${yDistance}px #EB492C`;
}
container.addEventListener("mousemove", setShadow);
all-goodvibes.web.val.run
Updated: September 26, 2024