October 7, 2026
Recreating a winning site is one of the oldest ways to level up as a front-end developer. Musicians transcribe songs, painters copy the masters, and web developers rebuild sites that make them say “how did they do that?” It is also easy to do badly — by cloning pixels you have no right to ship, or by copying without learning anything. This is a workflow that keeps the learning high and the legal risk low.
First, the line between fair game and not
We are not lawyers, and this is not legal advice, but the practical distinction is well understood in the industry. Settle it before you write any code.
- Generally fair game: techniques and structure. How a scroll animation is sequenced, how a layout is built on a grid, what easing makes a reveal feel good, how a shader is wired to a uniform, how a page transition is choreographed. Ideas and methods are how the craft moves forward.
- Not fair game: the creative work itself. Photography, illustration, video, 3D models, custom fonts, logos, brand colours as a recognisable identity, and the written copy. These are owned, and many are licensed to the original site for that site only.
- Be careful with code. Reading how something works is one thing. Pasting proprietary source into a product you sell is another. Rebuild from understanding, not from copy-and-paste.
- Never present it as the original. A practice rebuild stays a practice rebuild. Do not put it on a domain that could be mistaken for the real site, and do not use it to collect anyone’s data.
If a rebuild is going into your portfolio, say what it is: “a study of the techniques used on X,” with credit to the original studio.
Step 1: pick a site that teaches one thing
Do not choose the most dazzling winner on the list. Choose one with a single effect you want to understand: a scroll-driven hero, a custom cursor, a shader background. Most winners are, as we found when comparing a dozen of them, built around one signature effect and a deliberately plain remainder. Learn the signature effect and you have learned the site.
Step 2: identify the stack before you build
You cannot reproduce something until you know what it is made of. Find out which libraries drive scrolling, motion and 3D, and which of them are actually responsible for the effect you care about. We cover the quick checks in how to find out what animation library a website uses. The short version: do not trust what is merely present in the bundle; confirm what runs.
Step 3: gather measurements, not impressions
“It feels springy” is not a spec. Collect numbers:
- Structure and layout with
reverse_engineer_dom— the markup, the grid, the breakpoints. - Tokens with
extract_design_system— the type scale, spacing and palette, as in our guide to extracting design tokens. - Motion with
reverse_engineer_animations— timelines, durations, easing curves and scroll triggers. - 3D and shaders with
reverse_engineer_webgl, if there is a canvas — see how to recreate a WebGL shader effect.
Notice what is on that list and what is not. You are collecting the how. The images, video and copy stay with their owners, and you will replace them with your own.
Step 4: rebuild in stages, and swap the content early
The biggest mistake is trying to match the finished page in one pass. Build up in layers, and make the pieces yours as you go.
- Static layout. Reproduce the structure with placeholder content. Get the grid and type right before anything moves.
- Tokens. Apply the type scale and spacing, but choose your own palette and fonts. This is the first step where your version becomes distinct.
- Motion. Add one animation at a time, using the measured durations and easing. Compare each to the original before moving on.
- The signature effect. Now build the thing you came for, in isolation, then drop it into the page.
- Your own content. Replace every image, word and logo with your own. If a placeholder is still the original’s, you are not done.
Step 5: compare, then diverge
Put your build next to the original at the same viewport and scroll positions, and note every difference. Each gap is a lesson: a missing easing curve, a scroll value out of step with a render loop, a font that fell back. Once the technique matches, deliberately change it. A new palette, a different effect speed, a different subject. The goal of the exercise is that you could now build something new with the technique, and that is a skill nobody can claim you copied.
file://, which is why saved copies
often look broken. We explain the cause in
why a captured site looks broken until you stop opening it as a file.
Keep any copy private and for study; it is not something to publish.
Mistakes that waste the exercise
- Starting with the whole site. A full homepage is a dozen lessons stacked together. Rebuild one section first.
- Copying the assets. It is faster in the short term and teaches nothing, and it is the part that creates real legal exposure.
- Matching at one viewport only. Many winners are judged on desktop, but the responsive behaviour is where the craft hides. Test narrow widths early.
- Ignoring performance. Winners often look heavy and are carefully optimised. If your rebuild stutters, the difference is the lesson, not a failure.
- Skipping accessibility. Reduced-motion preferences, keyboard focus and readable contrast are easy to lose in an effects-heavy build. Add them back; that is where your version can beat the original.
A weekend plan
If you want a concrete schedule, one effect fits comfortably into two days. Saturday morning: pick the site, confirm the stack and collect measurements. Saturday afternoon: static layout and tokens in your own palette. Sunday morning: the signature effect in isolation. Sunday afternoon: integrate it, swap in your own content, and write down three things you now understand that you did not on Friday. That last list is the real output of the exercise.
What to do with the result
A good rebuild is a portfolio piece, a conference talk or a blog post of your own about what you learned. A bad one is a lookalike site with someone else’s photography on it. If you are unsure which yours is, ask whether you could explain, line by line, why each part works. If you can, you learned something; if you can’t, go back to step 3.
For the craft behind the effects, read building the special effects: shaders, scroll-linked motion, and the other 10%. And to see what real, measured extractions look like before you start, browse the Enrichr gallery or follow the step-by-step walkthrough.