- {/* Image with parallax */}
+ {/* Image — no parallax, no scale change on active. */}
{product.imageUrl && (
)}
{/* Gradient overlay */}
@@ -162,8 +148,14 @@ export default function CinematicShowcase({
useEffect(() => {
if (typeof window === "undefined" || !containerRef.current) return;
+ const prefersReducedMotion = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches === true;
+ if (prefersReducedMotion) return;
+
const ctx = gsap.context(() => {
- // Scroll-driven product switching
+ // Scroll-driven product switching — kept (it's the structure of this
+ // section), but no positional movement of the cards themselves. The
+ // active state is communicated by opacity only, computed in the
+ // onUpdate and used to setActiveIndex.
const productSwitchTrigger = ScrollTrigger.create({
trigger: containerRef.current,
start: "top top",
@@ -172,7 +164,6 @@ export default function CinematicShowcase({
onUpdate: (self) => {
setScrollProgress(self.progress);
- // Calculate which product should be active
const progress = self.progress;
const productCount = products.length;
const segmentSize = 1 / productCount;
@@ -187,33 +178,24 @@ export default function CinematicShowcase({
},
});
- // Parallax for background text
- gsap.to(".showcase-headline", {
- y: -100,
- ease: "none",
- scrollTrigger: {
- trigger: containerRef.current,
- start: "top top",
- end: "bottom bottom",
- scrub: 1,
- },
- });
+ // Parallax for background text — removed. The HARVEST headline now
+ // sits at a fixed Y so the eye doesn't chase it as the user scrolls.
- // Scale reveal for cards
+ // Scale reveal for cards — replaced with a calm opacity-only fade.
+ // No more back.out(1.4) overshoot, no 100px slide, no 0.9→1 scale.
gsap.fromTo(
".product-card-wrapper",
- { opacity: 0, y: 100, scale: 0.9 },
+ { opacity: 0, y: 8 },
{
opacity: 1,
y: 0,
- scale: 1,
- duration: 0.8,
- stagger: 0.15,
- ease: "back.out(1.4)",
+ duration: 0.32,
+ stagger: 0.04,
+ ease: "power1.out",
scrollTrigger: {
trigger: containerRef.current,
- start: "top 80%",
- toggleActions: "play none none reverse",
+ start: "top 85%",
+ toggleActions: "play none none none",
},
}
);
@@ -232,34 +214,36 @@ export default function CinematicShowcase({
>
{/* Sticky container */}
- {/* Background headline with parallax */}
+ {/* Background headline — fixed position, no scroll parallax. */}
HARVEST
- {/* Progress dots */}
+ {/* Progress dots — opacity + color only, no scale. */}
{products.map((_, i) => (
))}
- {/* Progress bar */}
+ {/* Progress bar — width updates as scroll changes. No transition
+ * (the scroll itself is the animation; an additional transition
+ * makes the bar lag behind the user's scroll position). */}
@@ -278,23 +262,19 @@ export default function CinematicShowcase({
- {/* Product showcase */}
+ {/* Product showcase — cards sit in a flex row, all visible. The
+ * active state is opacity only (no scale, no translate, no big
+ * cubic-bezier). Switching is communicated by which card is
+ * bright. */}
-
+
{products.map((product, i) => (
{
if (typeof window === "undefined" || !sectionRef.current) return;
- // Respect reduced motion preference
+ // Respect reduced motion preference — render everything visible immediately.
const prefersReducedMotion = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches === true;
- if (prefersReducedMotion) return;
+ if (prefersReducedMotion) {
+ setIsVisible(true);
+ return;
+ }
const ctx = gsap.context(() => {
- // Scroll progress tracking
+ // Scroll progress tracking (the bar at the top of the page).
ScrollTrigger.create({
trigger: sectionRef.current,
start: "top top",
@@ -70,12 +81,13 @@ export default function TuxedoVideoHero({
},
});
- // Hero content pin - fade out on scroll
+ // Hero content — gentle fade on scroll, NO positional shift.
+ // (Previously: y: -80. Multi-axis scroll-driven motion is the worst
+ // trigger for motion sickness. The content just dissolves as you scroll.)
if (contentRef.current) {
gsap.to(contentRef.current, {
- y: -80,
opacity: 0,
- ease: "power2.inOut",
+ ease: "power1.out",
scrollTrigger: {
trigger: sectionRef.current,
start: "top top",
@@ -85,59 +97,37 @@ export default function TuxedoVideoHero({
});
}
- // Video scale + parallax
- if (videoRef.current) {
- gsap.to(videoRef.current, {
- scale: 1.15,
- y: 100,
- ease: "power2.inOut",
- scrollTrigger: {
- trigger: sectionRef.current,
- start: "top top",
- end: "50% top",
- scrub: 1.5,
- },
- });
- }
+ // Video — no scale, no parallax. Just a static background.
+ // (Previously: scale 1.15 + y 100. The scale made the video breathe as
+ // the user scrolled, which was cinematic but disorienting.)
- // Staggered entrance for content elements
+ // Staggered entrance for content elements — small Y, no scale, light ease.
const contentElements = gsap.utils.toArray(".hero-reveal");
- contentElements.forEach((el, i) => {
+ contentElements.forEach((el) => {
gsap.fromTo(
el,
- { opacity: 0, y: 40, scale: 0.95 },
+ { opacity: 0, y: 8 },
{
opacity: 1,
y: 0,
- scale: 1,
- duration: 1,
- ease: "power3.out",
+ duration: 0.32,
+ ease: "power1.out",
scrollTrigger: {
trigger: el,
- start: "top 90%",
- toggleActions: "play none none reverse",
+ start: "top 95%",
+ toggleActions: "play none none none",
},
}
);
});
- // Parallax floating elements
- const floatElements = gsap.utils.toArray(".parallax-float");
- floatElements.forEach((el, idx) => {
- gsap.to(el, {
- y: -80 - idx * 20,
- scrollTrigger: {
- trigger: el,
- start: "top bottom",
- end: "bottom top",
- scrub: 1,
- },
- });
- });
+ // Parallax floating elements — disabled. The .parallax-float class is
+ // kept in the markup so the CSS keyframe animation (`float-slow` /
+ // `float-delayed`) still runs as a gentle ambient pulse, but the
+ // scroll-driven Y shift is gone.
- // Scroll indicator bounce on scroll
+ // Scroll indicator — just fades, no bounce, no positional shift.
gsap.to(".scroll-indicator", {
- y: 20,
opacity: 0,
scrollTrigger: {
trigger: sectionRef.current,
@@ -164,13 +154,12 @@ export default function TuxedoVideoHero({
return (
<>
{/* ─── SCROLL PROGRESS BAR ──────────────────────────────────────────── */}
-
+
@@ -250,12 +239,13 @@ export default function TuxedoVideoHero({
className="relative z-10 mx-auto w-full max-w-6xl px-6 pb-32 pt-32 flex flex-col justify-end"
>
- {/* Logo with glow effect */}
+ {/* Logo with glow effect — calmer entrance. Was a 1s scale 0.9→1
+ * with a custom ease. Now a 320ms opacity-only fade. */}
{logoSrc ? (
@@ -318,9 +308,9 @@ export default function TuxedoVideoHero({
background: "linear-gradient(135deg, #059669 0%, #10b981 100%)",
boxShadow: "0 8px 32px rgba(16, 185, 129, 0.4), inset 0 1px 0 rgba(255,255,255,0.2)",
}}
- whileHover={{ scale: 1.02 }}
- whileTap={{ scale: 0.98 }}
- transition={{ duration: 0.2 }}
+ /* whileHover / whileTap dropped — the gradient background
+ * already shifts on hover, and the SVG arrow inside the
+ * button still nudges right on hover. No additional scale. */
>
{primaryButton}
@@ -449,25 +439,29 @@ export default function TuxedoVideoHero({
{/* ─── GLOBAL ANIMATIONS ──────────────────────────────────────────────── */}