What Awwwards-winning websites have in common

Awwwards gives out a Site of the Day every day, judged by a jury on design, usability, creativity and content. Browse a few months of winners and the same patterns show up again and again, built with a short list of libraries. This is that list, with what each pattern costs, because the sites that get copied badly are the ones where somebody took the effect and left the discipline behind.

One idea, executed completely

The winners are rarely the sites with the most effects. They are the sites with one strong idea pushed all the way through: a transition that becomes the navigation, a 3D object that follows the whole story, a typographic system so confident it needs no imagery. Everything else on the page is quiet so that idea can be loud.

When you study a winner, name the idea in one sentence before you look at anything else. If you cannot, the site is probably carried by production value rather than an idea, and production value does not transfer to your project.

Smooth scroll and scroll-driven motion

Almost every winner intercepts the scroll. Lenis is the current default for smoothing it, and GSAP's ScrollTrigger drives the animations that key off scroll position: pinned sections, parallax layers, text that assembles as it enters, progress-based timelines. The two are designed to work together and the combination is close to a house style for the category.

The cost: smooth scroll fights the browser. It breaks find-in-page, confuses keyboard users, and makes a long page feel heavier on a trackpad than it needs to. The good implementations respect prefers-reduced-motion, keep native scroll on touch devices, and stop the smoothing on pages that are mostly reading.

Component motion and page transitions

Where the effect is on an element rather than the whole page, Motion (formerly Framer Motion) is the usual choice in React projects: layout animations, shared-element transitions between routes, and gestures with physics that feel right out of the box. GSAP covers the same ground framework-agnostically, with better control over complex timelines.

Page transitions are where many sites lose the jury's "usability" score. A transition that takes 800ms the first time is charming; the tenth time it is the reason the visitor leaves. The winners keep transitions under about 400ms after the first, or make them interruptible.

WebGL and 3D

The hero that is a scene rather than an image is the most recognisable Awwwards move. Three.js is underneath most of them, often through React Three Fiber in React projects. For designed, interactive 3D without writing shader code, Spline exports scenes you can embed and script, and Rive handles vector animation with state machines that respond to input, at a fraction of the file size of a video.

The cost is the biggest in this list. A WebGL hero can be tens of megabytes, drain a laptop battery, and show a black rectangle on a device without the right GPU support. The disciplined versions lazy-load the scene behind a static image, cap pixel ratio, pause when off-screen, and ship a real fallback rather than a spinner.

Type as the design

Several winners each month are almost entirely typographic: a variable font, large sizes, tight tracking, and motion applied to the letters themselves. It photographs well in a case study and it is cheap in bytes compared with 3D, with one exception: variable fonts with many axes are large, and a site that animates weight on scroll is animating a font file that had better be subset and preloaded.

The parts nobody screenshots

The winners that hold up also do the unglamorous things. They preload the hero's font and image, so the first paint is the design rather than a flash of fallback. They keep the custom cursor off touch devices. They make the motion pause when the tab is hidden. They have a working focus order under all the animation, because the jury does tab through it.

How to use the category

The award-winning websites collection on TeaserTrack lists Awwwards Sites of the Day with the award and the date for each, so you can study the current standard rather than the one from a redesign cycle ago. Open the network panel on any of them before you borrow an effect: the sites look effortless, and knowing the price of the effect is how you decide whether it belongs on a product page where someone is trying to sign up.

The libraries themselves are in the UI libraries category, and the tools that make the heavy parts tractable, Spline and Rive especially, show up there as they ship new versions.