KERNEL Laptop Care
Every machine has a story. We keep it going.
- Client
- KERNEL Laptop Care & Supply
- Category
- Repair & retail · 3D scroll story
- Year
- 2026
- Website
- laptop-sample.vercel.app ↗
A website for a Colombo laptop repair and sales shop, told as one continuous 3D scene: a laptop opens, overheats, comes apart layer by layer to show each repair service, gets diagnosed and rebuilt — then joins the shelf of laptops for sale.
Why it matters
Turns an invisible service into something customers can see — and links repairs and sales in one story.
Built with
- Next.js
- React
- React Three Fiber
- Three.js
- GSAP ScrollTrigger
- Lenis
The brief
Repair work happens behind a counter, out of sight. The site had to show customers exactly what happens to their laptop — and make the shop feel expert and trustworthy before they walk in.
The design
A dark studio with a single laptop under a spotlight, cyan for the parts being worked on and amber for heat and faults. Monospaced readouts give it the feel of a technician’s bench.
The build
A real-time 3D model in React Three Fiber, choreographed to the scroll with GSAP ScrollTrigger and Lenis: it opens, glitches, explodes into its parts, gets scanned and rebuilds itself, then moves onto a shelf of stock for sale.
Key features
- One scroll-driven 3D scene from opening to reassembly
- Exploded-view teardown highlighting each of six repair services
- Motherboard diagnosis animation with fault detection
- Laptop shop with specs, prices and new / refurbished filters
- Repair tracking by ticket number and a booking form
Next project
