~/work/atomic-muscles · 3D web
Atomic Muscles 3D Supplement Store, Web Design and Development
Overview
Atomic Muscles sells lab-tested whey protein and creatine made in Pakistan. The store is a scroll-driven experience: three pinned film scenes, a three.js particle layer, a 3D product you can turn, bundle pricing and Shopify checkout, in English and Urdu.
The challenge
Pakistan's supplement shelves are full of counterfeits and imported markups. A local brand had to look as premium as the imports and prove it was real, while keeping checkout simple for cash-on-delivery buyers.
Delivered as: Full-stack and front-end developer
problem / solution
What we set out to fix
Problem
- Buyers distrust supplements they cannot verify.
- Imported brands set the bar for how premium a tub should feel.
- Many buyers prefer Urdu, WhatsApp and cash on delivery.
Solution
- DRAP, GMP, halal and lab certificates up front, a tap away.
- Cinematic product films and a 3D tub you can rotate.
- An English and Urdu toggle with right-to-left layout.
- Shopify checkout, free nationwide delivery and WhatsApp support.
process
How we built it
01
Research
Studied the brand's catalogue, certificates, prices and customer reviews.
02
Story
Turned the home page into three film scenes: whey, creatine and the stack.
03
Build
Vite and vanilla JavaScript with three.js, scroll-scrubbed video and Lenis smooth scroll.
04
Launch
Shopify cart links, Urdu copy and real prices, tested on desktop and phones.
features
What it does
feature 01
A store that plays like a film
- Three pinned scenes cross-dissolve as you scroll, with a three.js ember field on top.
- Each scene lands its headline the moment the product appears.
feature 02
Products, proven
- Whey and creatine pages with flavours, bulk tiers and full nutrition facts.
- Certificates and lab reports open in a lightbox, right where doubt starts.
feature 03
Built to buy
- Bundle pricing, a slide-out cart and Shopify checkout.
- A sticky mobile buy bar and WhatsApp ordering for cash-on-delivery buyers.
stack.md
The tech stack, and why we used it
Three.jsReal-time 3D in the browser: a product you can turn and an ember field that reacts as you scroll.Vite and JavaScriptA fast build with no framework weight, so the budget goes on the film scenes.LenisSmooth scrolling keeps the pinned film scenes in step with the visitor's hand.Shopify checkoutA checkout buyers already trust, with no payment system to build or secure.users.md
Who uses it
Supplement buyers in Pakistan
Check certificates, compare flavours and order in English or Urdu.
Cash-on-delivery customers
Use the sticky buy bar or order on WhatsApp.
benefits.md
Benefits
- A local brand now looks as premium as the imports it competes with.
- Six certificates and lab reports sit next to the buy button, where doubt starts.
- Urdu with a right-to-left layout reaches buyers who prefer it.
cost.md
Cost benefits
- Shopify handles payments, orders and stock, so no custom backend is needed.
- One 3D product and film scene is reused across the store instead of repeat photo shoots.
screens · 6
Every screen
Scroll sideways through the product.
Typography
Aa
Anton + Archivo
Anton gives the store gym-poster headlines; Archivo keeps nutrition facts, prices and policies crisp. An Urdu face, Noto Nastaliq, switches in with the language toggle.
colours
built with