Six steps for learning from an award-winning site without copying it: pick one slice, survey the stack, read the docs, recover the exact numbers, swap in your own content, then compare your rebuild with the original to find the gaps.
What the video shows
- Rebuild it. Recreating a site forces you to deal with scroll physics, easing, WebGL, typography and layout.
- Learning versus copying. Techniques, structure, design decisions and open-source libraries are fair game. Images, video, written copy, logos, font files and copied source are not yours.
- Step 1: one slice, not the whole site. A hero transition or a cursor follower; everything else is out of scope.
- Step 2: survey the stack. Find out whether it runs on Lenis, GSAP or Three.js before you write a line of code.
- Step 3: know the stack, know the docs.
- Step 4: recover the numbers. Durations, easing curves, shader uniforms, the type scale. Exact numbers beat eyeballing.
- Step 5: your content, their technique. Your own markup, images and copy, and fonts from Google Fonts or Fontshare.
- Step 6: compare and find the gaps. A trigger that fires early, easing that is too sharp, a dropped frame.
