8457493f49
- Updated HomePage to use CategoryShowcaseScroll instead of RobotCategoryGrid for better category display. - Modified BrandShowcase component to adjust background gradients and text colors for improved aesthetics. - Changed CompanyStory component to enhance visual consistency with updated accent colors. - Refined ExclusiveAccessSection to align with new design standards, including gradient adjustments. - Enhanced Hero3DRobotics with new gradient backgrounds and updated text colors for better readability. - Updated RoboticsScrollShowcase to reflect new color scheme and improved text visibility. - Adjusted RoboticsSplineShowcase to maintain design consistency with updated colors and gradients. - Improved MotionSection to enhance scroll behavior and visibility transitions. - Updated container-scroll-animation styles for better visual effects. - Introduced new CategoryShowcaseScroll component for a more dynamic category display experience.
60 lines
1.6 KiB
TypeScript
60 lines
1.6 KiB
TypeScript
'use client';
|
|
|
|
import React, { useEffect, useRef, useState } from 'react';
|
|
|
|
type Props = {
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
id?: string;
|
|
delay?: number;
|
|
style?: React.CSSProperties;
|
|
};
|
|
|
|
export function MotionSection({ children, className = '', id, delay = 0, style }: Props) {
|
|
const ref = useRef<HTMLDivElement | null>(null);
|
|
const [visible, setVisible] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const el = ref.current;
|
|
if (!el) return;
|
|
const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
|
if (reduce) {
|
|
setVisible(true);
|
|
return;
|
|
}
|
|
const obs = new IntersectionObserver(
|
|
(entries) => {
|
|
for (const e of entries) {
|
|
if (e.isIntersecting) {
|
|
setVisible(true);
|
|
obs.disconnect();
|
|
break;
|
|
}
|
|
}
|
|
},
|
|
{ threshold: 0, rootMargin: '0px 0px -10% 0px' }
|
|
);
|
|
obs.observe(el);
|
|
return () => obs.disconnect();
|
|
}, []);
|
|
|
|
return (
|
|
<section
|
|
ref={ref}
|
|
id={id}
|
|
className={className}
|
|
style={{
|
|
opacity: visible ? 1 : 0,
|
|
// when hidden, lift via translate. When visible, drop transform entirely so
|
|
// child position:sticky behaves correctly (transformed ancestor would break sticky).
|
|
...(visible ? {} : { transform: 'translateY(28px)' }),
|
|
transition: `opacity 0.9s cubic-bezier(0.16,1,0.3,1) ${delay}s, transform 0.9s cubic-bezier(0.16,1,0.3,1) ${delay}s`,
|
|
scrollMarginTop: '6rem',
|
|
...style,
|
|
}}
|
|
>
|
|
{children}
|
|
</section>
|
|
);
|
|
}
|