E-commerce · Laptop Store

KERNEL

A laptop store where the lid opens, the screen boots and types out its own spec sheet

Interactive — this is the real build running inside the page. Full screen
KERNEL — screen from the live build

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

Product Variant Selection — the feature running live
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.

Try it
Product Comparison — the feature running live
E-commerce

Product Comparison

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.

Try it
Product Bundles — the feature running live
E-commerce

Product Bundles

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.

Try it
Multi-step Checkout — the feature running live
E-commerce

Multi-step Checkout

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.

Try it