root/chadebebe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add animated Mars planet decoration to header
Some checks failed
Build and Push Docker Image / build-and-push (push) Has been cancelled
Details

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Adriano Belisario
2026-05-04 22:24:39 +00:00
parent 653121921e
commit a28a3a489d
3 changed files with 238 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
components/header.tsx
View File

@@ -1,5 +1,7 @@
'use client';
import MarsPlanet from '@/components/mars-planet';
interface HeaderProps {
title: string;
subtitle?: string;
@@ -25,6 +27,7 @@ export default function Header({ title, subtitle, imageUrl, actions, maxWidth =
/>
<div className={`${maxWidth} mx-auto relative py-14 px-4 sm:py-20 sm:px-6 lg:px-8`}>
<MarsPlanet className="absolute right-4 top-4 sm:right-8 sm:top-7 lg:right-10 lg:top-9" />
<div className="flex flex-col md:flex-row items-center md:items-start gap-8">
{imageUrl && (
<div className="md:w-56 flex-shrink-0">

43
components/mars-planet.tsx Normal file
View File

@@ -0,0 +1,43 @@
'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>
);
}