<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>灯光追踪</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<style>
@import url("https://fonts.googleapis.com/css?family=Montserrat:700");*{box-sizing:border-box}body{font-family:Montserrat,sans-serif;min-height:100vh;margin:0;padding:0;background-color:rgb(9,14,23);color:#ffffff}svg{opacity:0;position:absolute}.wrapper{position:relative}.hero{min-height:100vh;padding:clamp(1rem,2vw,5rem);display:flex;align-items:center}.hero--secondary{--mask:radial-gradient(circle at var(--x,70%) var(--y,50%),black 25%,transparent 0);position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(45deg,#482EF4,#5FF4C2,#ffffff);color:rgb(9,14,23);-webkit-mask-image:var(--mask);mask-image:var(--mask)}.hero__heading{font-size:clamp(2rem,5vw,8rem);text-transform:uppercase;margin:0;max-width:fit-content;margin-left:auto;margin-right:auto}
</style>
</head>
<body>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js'></script>
<div class="wrapper">
<div class="hero">
<h1 class="hero__heading">Have a nice day!</h1>
</div>
<div class="hero hero--secondary" aria-hidden="true" data-hero>
<p class="hero__heading">It will be sunny</p>
</div>
</div>
</body>
<script>
const hero = document.querySelector('[data-hero]')
window.addEventListener('mousemove', (e) => {
const { clientX, clientY } = e
const x = Math.round((clientX / window.innerWidth) * 100)
const y = Math.round((clientY / window.innerHeight) * 100)
gsap.to(hero, {
'--x': `${x}%`,
'--y': `${y}%`,
duration: 0.3,
ease: 'sine.out',
})
})
</script>
</html>
