Framework Laptop Redesign

Overview

This is an unofficial, self-initiated redesign concept of the Framework homepage. It is not affiliated with Framework Computer. Framework makes modular laptops you can repair, upgrade and customise, and I built this interactive 3D product website to show that idea instead of just stating it. The brief I set myself: product presentation that feels premium, blended with the honesty of an engineering-led hardware company.

The challenge

"Repairable and upgradeable" is Framework's whole story, but it's hard to feel from photos. The challenge was to let visitors see the machine come apart, choose their own ports and compare the lineup, all while keeping scrolling perfectly smooth and every section pointed at configuring a laptop.

What I built

• A scroll-driven 3D teardown of a procedurally modelled Laptop 13 in Three.js: the Expansion Cards slide out, the magnetic bezel lifts, the keyboard cover comes away and the mainboard is revealed, then it reassembles. Hover any part to name it, try bezel colours and switch between Silver and Graphite.
• An Expansion Card builder: tap a card and it slots into the next free bay; tap a bay to eject.
• A type-led hero where the product photo scales from a framed image to full-bleed on scroll, with callouts that snap to real features.
• A lineup selector: an index of four machines with an auto-advancing progress bar beside a sticky stage of crossfading product media and key specs.
• A marketplace section with Upgrade, Customize and Repair columns that swap imagery, and a floating capsule nav with a mega menu.
• A mission section with crossing marquee tapes and count-up figures.

Design & build

The page uses Framework's orange, Geist for type and DM Mono for labels, with a custom "slot in" easing curve. It is static HTML with Three.js, GSAP ScrollTrigger and Lenis. Performance was the rule: animation is transform-only, the 3D canvas renders only while on screen, device pixel ratio is capped, and headless tests held 60fps across a 14-viewport QA sweep.

What it delivers

The concept shows how 3D can work as proof rather than decoration: one interaction explains the product's biggest promise better than a paragraph could. It reflects how I approach landing pages for hardware and consumer tech. Product names, imagery and specs belong to Framework Computer Inc.