top-design

Focus on dramatic typography with at least 10:1 display-to-body scale contrast, custom cubic-bezier easing instead of default ease values, and one signature moment worth screenshotting. Use smooth scroll via Lenis and choreograph the page load with staggered reveals.

Use premium foundry typefaces from Pangram Pangram, Dinamo, or Klim, or quality free alternatives like Space Grotesk, Instrument Serif, and Fraunces. Avoid Inter, Roboto, Arial, and system-ui for hero experiences as they signal generic application design.

Lenis is the recommended modern choice at roughly 4KB gzipped, preserving native scroll accessibility with GSAP ScrollTrigger integration. Locomotive Scroll offers built-in parallax via data attributes but is heavier and less actively maintained.

Only animate transform and opacity properties, which are GPU-accelerated; never animate width, height, top, left, or margin. Subset and preload fonts, serve WebP or AVIF images with srcset, and target LCP under 2.5 seconds with near-zero CLS.

Custom cursors are opt-in only and should never replace the native cursor unless the user explicitly requests one. Misapplied custom cursors hurt usability and feel gimmicky, so always confirm before implementing.

Wrap animations in a prefers-reduced-motion media query that reduces durations to near zero, and check the media query in JavaScript to skip or simplify GSAP timelines. All content must remain accessible without animation.