moh
bb9f1a2f6e
Replace the flat, empty hero background with a pure-CSS layered backdrop: faded grid, brand glow, drifting brand orbs, grain, and a bottom fade that blends the hero into page content. Applies to both the home hero and the compact page heroes via HeroMotionBackdrop; respects prefers-reduced-motion.
34 lines
1.1 KiB
TypeScript
34 lines
1.1 KiB
TypeScript
import { cn } from "@/lib/utils";
|
|
|
|
type HeroMotionBackdropProps = {
|
|
compact?: boolean;
|
|
};
|
|
|
|
/**
|
|
* Layered ambient backdrop rendered behind every hero (home + page).
|
|
* Pure CSS so it needs no client JS: a faded grid for structure, a soft
|
|
* brand glow, slowly drifting brand orbs, a grain overlay for texture, and
|
|
* a bottom fade that blends the hero into the page content. The orb drift is
|
|
* disabled under `prefers-reduced-motion` (see globals.css).
|
|
*/
|
|
export function HeroMotionBackdrop({ compact = false }: HeroMotionBackdropProps) {
|
|
return (
|
|
<div
|
|
aria-hidden="true"
|
|
className={cn(
|
|
"hero-backdrop pointer-events-none absolute inset-0 z-0 overflow-hidden",
|
|
compact && "is-compact",
|
|
)}
|
|
>
|
|
<div className="hero-backdrop-base" />
|
|
<div className="hero-backdrop-grid" />
|
|
<div className="hero-backdrop-glow" />
|
|
<span className="hero-orb hero-orb-1" />
|
|
<span className="hero-orb hero-orb-2" />
|
|
<span className="hero-orb hero-orb-3" />
|
|
<div className="hero-noise hero-backdrop-noise" />
|
|
<div className="hero-backdrop-floor" />
|
|
</div>
|
|
);
|
|
}
|