Interactive — this is the real build running inside the page.Full screen
What it does
A full laptop store in a dark, technical style: a CSS 3D laptop opens as you scroll and boots into a typed spec readout, with four models to put on the bench. Every machine has a live configurator that updates the price and benchmark bars, plus ports and dimensions diagrams and a desk-kit bundle. A finder ranks the best three machines for how you work, a weighted compare lines up your builds, and a four-step preview checkout ends in a confirmed order.
Signature interaction
Scroll and the CSS 3D laptop lifts its lid, powers on and types out its own spec sheet (CPU, GPU, memory, battery) while call-outs count up beside it; switch models and it reboots with new specs.
What works in it
Scroll-driven 3D lid that boots into a typed spec readout
Live configurator for CPU, memory, storage, display and colour
Benchmark bars that react to every option
Ports and dimensions diagrams on each product
Desk-kit bundle at 15% off
Laptop finder by use case, budget and must-haves
Weighted compare with the better spec marked per row
Filters, sort and instant search
Cart drawer with SITESUP10 and KERNELEDU coupons
4-step checkout with card, cash on delivery, Whish Money or OMT
Owner reviews with write-a-review
Order confirmation with a typed tracking log
Motion preview
Screen recording of the live build, running on sample data.
Features inside this build
E-commerce
Product Variant Selection
A phone product page where colour swatches swap the gallery with a circular colour-wipe, storage options show price differences and low or sold-out stock per colour, an availability matrix shows every colour × storage combination at a glance, and the SKU, price and URL update with each choice.
Shoppers tick Compare on up to four phones, which collect in a floating tray, then open a side-by-side spec table with a sticky header and label column, a highlight-differences toggle, best-in-row markers, best value / camera / battery badges and removable columns.
Two bundle mechanics in one feature: tier cards for a single product (Single, Duo −15%, Trio −25%) with per-bottle flavour picks, and a build-your-own box where every item moves a progress bar toward the next discount tier, with a live price breakdown and an animated savings counter.
A four-step 'Almost yours.' checkout: contact and Lebanese address with inline validation, delivery zones priced by city with speed options, a calendar and time windows, payment by cash on delivery (USD or LBP), card with live brand detection, Luhn check and a flipping card preview, or a simulated Whish link, then a review with edit links and an order confirmation.