modern-web-design

Use gsap.to() with a scrollTrigger config specifying trigger element, start/end positions, and scrub for scroll-linked playback. Pin sections for multi-step reveals and batch animations to maintain 60fps performance.

Use the clamp() function with a minimum size, viewport-relative preferred value, and maximum size, such as clamp(1rem, 0.9rem + 0.5vw, 1.25rem). This scales text smoothly across breakpoints without media queries.

Wrap animations in a @media (prefers-reduced-motion: reduce) query that sets animation and transition durations near zero. In JavaScript, detect the preference with window.matchMedia and skip scroll animations or use instant reveals.

Yes, backdrop-filter is expensive on mobile GPUs. Limit glass elements to two or three per viewport, apply will-change only during animations, and test on real low-end devices rather than simulators.

WCAG AAA requires a 7:1 contrast ratio for normal text and 4.5:1 for large text (18pt or 14pt bold). The OKLCH color space helps build perceptually uniform palettes that meet these thresholds.

Avoid custom cursors on touch devices, for users with prefers-reduced-motion enabled, and when they hide the native cursor entirely. Use CSS transforms with requestAnimationFrame and layer the custom cursor on top of the native one.