Feat: cursor upon-target sur liens et boutons

- Détection de survol via mouseover sur a, button, [role="button"], [tabindex]
- Classe upon-target appliquée au curseur et à son outline
- cursor-outline scale(0.5) au survol d'un élément interactif

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
isUnknown 2026-02-19 14:18:59 +01:00
parent 47e993be58
commit ebd8ad5e7b

View file

@ -1,10 +1,11 @@
<script>
import { onMount } from 'svelte'
let cursorX = 0
let cursorY = 0
let outlineX = 0
let outlineY = 0
let cursorX = $state(0)
let cursorY = $state(0)
let outlineX = $state(0)
let outlineY = $state(0)
let onTarget = $state(false)
let rafId
onMount(() => {
@ -13,6 +14,14 @@
cursorY = e.clientY
}
const handleMouseOver = (e) => {
onTarget = !!e.target.closest('a, button, [role="button"], [tabindex]')
}
const handleMouseOut = () => {
onTarget = false
}
const animate = () => {
outlineX += (cursorX - outlineX) * 0.2
outlineY += (cursorY - outlineY) * 0.2
@ -20,17 +29,29 @@
}
window.addEventListener('mousemove', handleMouseMove)
window.addEventListener('mouseover', handleMouseOver)
window.addEventListener('mouseout', handleMouseOut)
animate()
return () => {
window.removeEventListener('mousemove', handleMouseMove)
window.removeEventListener('mouseover', handleMouseOver)
window.removeEventListener('mouseout', handleMouseOut)
if (rafId) cancelAnimationFrame(rafId)
}
})
</script>
<div class="cursor" style="transform: translate({cursorX}px, {cursorY}px)"></div>
<div class="cursor-outline" style="transform: translate({outlineX}px, {outlineY}px)"></div>
<div
class="cursor"
class:upon-target={onTarget}
style="transform: translate({cursorX}px, {cursorY}px)"
></div>
<div
class="cursor-outline"
class:upon-target={onTarget}
style="transform: translate({outlineX}px, {outlineY}px)"
></div>
<style>
.cursor,
@ -40,6 +61,7 @@
left: 0;
pointer-events: none;
z-index: var(--z-cursor);
transition: transform 0.1s ease, scale 0.2s ease, opacity 0.2s ease;
}
.cursor {
@ -57,6 +79,11 @@
border-radius: 50%;
transform-origin: center;
margin: -16px 0 0 -16px;
transition: scale 0.2s ease;
}
.cursor-outline.upon-target {
scale: 0.5;
}
@media (max-width: 768px) {