frontend polish: add reduced-motion support, dynamic copyright, missing animation keyframes
Deploy to route.crispygoat.com / deploy (push) Successful in 4m1s
Deploy to route.crispygoat.com / deploy (push) Successful in 4m1s
- LandingPageWrapper: Use dynamic year for copyright - HeroSection: Add float-slow/float-slow-delayed keyframes, add prefers-reduced-motion media query - TuxedoVideoHero: Add reduced-motion JS guard and CSS media query for accessibility
This commit is contained in:
@@ -54,6 +54,10 @@ export default function TuxedoVideoHero({
|
||||
useEffect(() => {
|
||||
if (typeof window === "undefined" || !sectionRef.current) return;
|
||||
|
||||
// Respect reduced motion preference
|
||||
const prefersReducedMotion = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches === true;
|
||||
if (prefersReducedMotion) return;
|
||||
|
||||
const ctx = gsap.context(() => {
|
||||
// Scroll progress tracking
|
||||
ScrollTrigger.create({
|
||||
@@ -466,7 +470,6 @@ export default function TuxedoVideoHero({
|
||||
animation: bounce 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Performance optimizations */
|
||||
.parallax-float {
|
||||
will-change: transform;
|
||||
}
|
||||
@@ -475,11 +478,21 @@ export default function TuxedoVideoHero({
|
||||
will-change: opacity, transform;
|
||||
}
|
||||
|
||||
/* Smooth transitions */
|
||||
button, a {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.parallax-float, .animate-bounce, .hero-reveal {
|
||||
animation: none !important;
|
||||
transition: none !important;
|
||||
}
|
||||
.hero-reveal {
|
||||
opacity: 1 !important;
|
||||
transform: none !important;
|
||||
}
|
||||
}
|
||||
`}</style>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user