Simplify hero backgrounds and add entrance animations
- Replace animated blob/wave/noise backdrop with clean static gradient (radial ellipse highlights + linear fade) in hero-motion-backdrop - Remove all framer-motion from background layer; delete unused CSS classes: hero-blob, hero-sheet-glow, hero-sheet-wave, hero-sheet-noise, hero-title-shift keyframe, and responsive blob media queries - Add framer-motion stagger entrance to HeroContentMotion, HeroMotionItem, and HeroTitle (slide-up + fade on mount) - Refactor coming-soon page to use HeroContentMotion/HeroMotionItem instead of MotionFade (whileInView unreliable above the fold) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -3,11 +3,28 @@
|
||||
import type { ReactNode } from "react";
|
||||
|
||||
import { ArrowDown } from "lucide-react";
|
||||
import { motion } from "framer-motion";
|
||||
|
||||
import { Container } from "@/components/layout/container";
|
||||
import { HeroMotionBackdrop } from "@/components/layout/hero-motion-backdrop";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const heroItemVariants = {
|
||||
hidden: { opacity: 0, y: 16 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: { duration: 0.54, ease: [0.22, 1, 0.36, 1] as [number, number, number, number] },
|
||||
},
|
||||
};
|
||||
|
||||
const heroContainerVariants = {
|
||||
hidden: {},
|
||||
visible: {
|
||||
transition: { staggerChildren: 0.13, delayChildren: 0.08 },
|
||||
},
|
||||
};
|
||||
|
||||
type HeroTone = "default" | "accent" | "soft";
|
||||
type HeroLineAlign = "start" | "center" | "end";
|
||||
|
||||
@@ -119,14 +136,27 @@ export function HeroContentMotion({
|
||||
children,
|
||||
className,
|
||||
}: HeroContentMotionProps) {
|
||||
return <div className={className}>{children}</div>;
|
||||
return (
|
||||
<motion.div
|
||||
className={className}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
variants={heroContainerVariants}
|
||||
>
|
||||
{children}
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
|
||||
export function HeroMotionItem({
|
||||
children,
|
||||
className,
|
||||
}: HeroContentMotionProps) {
|
||||
return <div className={className}>{children}</div>;
|
||||
return (
|
||||
<motion.div className={className} variants={heroItemVariants}>
|
||||
{children}
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
|
||||
export function HeroTitle({
|
||||
@@ -147,7 +177,7 @@ export function HeroTitle({
|
||||
);
|
||||
|
||||
return (
|
||||
<h1 className={titleClassName}>
|
||||
<motion.h1 className={titleClassName} variants={heroItemVariants}>
|
||||
{lines.map((line, index) => (
|
||||
<span
|
||||
key={`${index}-${line.text}`}
|
||||
@@ -172,7 +202,7 @@ export function HeroTitle({
|
||||
)}
|
||||
</span>
|
||||
))}
|
||||
</h1>
|
||||
</motion.h1>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user