a28a3a489d
Some checks failed
Build and Push Docker Image / build-and-push (push) Has been cancelled
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
44 lines
1.6 KiB
TypeScript
44 lines
1.6 KiB
TypeScript
'use client';
|
|
|
|
import type { PointerEvent } from 'react';
|
|
|
|
type MarsPlanetProps = {
|
|
className?: string;
|
|
};
|
|
|
|
export default function MarsPlanet({ className = '' }: MarsPlanetProps) {
|
|
const handlePointerMove = (event: PointerEvent<HTMLDivElement>) => {
|
|
const bounds = event.currentTarget.getBoundingClientRect();
|
|
const x = ((event.clientX - bounds.left) / bounds.width - 0.5) * 2;
|
|
const y = ((event.clientY - bounds.top) / bounds.height - 0.5) * 2;
|
|
|
|
event.currentTarget.style.setProperty('--mars-x', x.toFixed(3));
|
|
event.currentTarget.style.setProperty('--mars-y', y.toFixed(3));
|
|
};
|
|
|
|
const resetTilt = (event: PointerEvent<HTMLDivElement>) => {
|
|
event.currentTarget.style.setProperty('--mars-x', '0');
|
|
event.currentTarget.style.setProperty('--mars-y', '0');
|
|
};
|
|
|
|
return (
|
|
<div
|
|
aria-hidden="true"
|
|
className={`mars-planet ${className}`}
|
|
onPointerMove={handlePointerMove}
|
|
onPointerLeave={resetTilt}
|
|
>
|
|
<span className="mars-planet__orbit" />
|
|
<span className="mars-planet__body">
|
|
<span className="mars-planet__band mars-planet__band--one" />
|
|
<span className="mars-planet__band mars-planet__band--two" />
|
|
<span className="mars-planet__crater mars-planet__crater--one" />
|
|
<span className="mars-planet__crater mars-planet__crater--two" />
|
|
<span className="mars-planet__crater mars-planet__crater--three" />
|
|
</span>
|
|
<span className="mars-planet__spark mars-planet__spark--one" />
|
|
<span className="mars-planet__spark mars-planet__spark--two" />
|
|
</div>
|
|
);
|
|
}
|