north-star / commit
initial
.gitlab-ci.yaml | 7 +++++++ src/app.js | 18 ++++++++++++++++++ src/index.html | 17 +++++++++++++++++ src/style.css | 31 +++++++++++++++++++++++++++++++ 4 files changed, 73 insertions(+) diff --git a/.gitlab-ci.yaml b/.gitlab-ci.yaml new file mode 100644 index 0000000..6b41688 --- /dev/null +++ b/.gitlab-ci.yaml @@ -0,0 +1,7 @@ +pages: + script: + - mkdir -p public + - cp ./src/* ./public/ -R + artifacts: + paths: + - public diff --git a/src/app.js b/src/app.js new file mode 100644 index 0000000..323d724 --- /dev/null +++ b/src/app.js @@ -0,0 +1,18 @@ +const arrow = document.getElementById('arrow'); + +let currentAngle = 0; + +document.addEventListener('mousemove', (e) => { + const rect = arrow.getBoundingClientRect(); + const cx = rect.left + rect.width / 2; + const cy = rect.top + rect.height / 2; + const dx = e.clientX - cx; + const dy = e.clientY - cy; + const rawAngle = Math.atan2(dy, dx) * (180 / Math.PI) + 90; + + // Find the shortest delta from the current accumulated angle + let delta = ((rawAngle - currentAngle) % 360 + 540) % 360 - 180; + currentAngle += delta; + + arrow.style.transform = `rotate(${currentAngle}deg)`; +}); diff --git a/src/index.html b/src/index.html new file mode 100644 index 0000000..53a9992 --- /dev/null +++ b/src/index.html @@ -0,0 +1,17 @@ +<!doctype html> +<html lang="en"> + +<head> + <meta charset="UTF-8" /> + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> + <title>North Star</title> + <link rel="stylesheet" href="style.css" /> + +</head> + +<body> + <div id="arrow">▲</div> + <script src="app.js"></script> +</body> + +</html> \ No newline at end of file diff --git a/src/style.css b/src/style.css new file mode 100644 index 0000000..0e5eee4 --- /dev/null +++ b/src/style.css @@ -0,0 +1,31 @@ +html, +body { + height: 100%; + margin: 0; +} + +body { + display: grid; + place-items: center; + background: #0f172a; + color: #f8fafc; + font-family: system-ui, sans-serif; + overflow: hidden; +} + +#arrow { + font-size: 70vmin; + line-height: 1; + transform: rotate(0deg); + transition: transform 160ms ease; + user-select: none; +} + +.hint { + position: fixed; + bottom: 16px; + left: 50%; + transform: translateX(-50%); + font-size: 14px; + color: #94a3b8; +} \ No newline at end of file