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