A high-end Persian store website with scroll-driven motion, a 3D laptop that opens as you scroll, a live product configurator, and a polished interface built with HTML, CSS, GSAP, and Three.js.
🌐 Live Demo • 📘 نسخه فارسی راهنما • 📧 Contact • 🔗 GitHub Profile
- About
- Why This Website?
- Key Features
- Interface Highlights
- Project Structure
- Technologies
- Usage
- Target Audience
- Live Demo
- Roadmap
- FAQ
- Contributing
- Contact
- License
- Copyright
- Support
Electronics Business Website is a Persian electronics store interface designed to feel closer to a product film than a static catalog.
The main work is visual: a preloader, a custom cursor, a scroll-progress rail, stage navigation, a 3D laptop, and a configurator that updates the total as options change.
Libraries are loaded from CDN. There is no backend and no build step.
Tagline: A cinematic Persian electronics store website with scroll-driven motion, a 3D product preview, and a live configurator.
A store page can list specs, or it can make the product move.
This project focuses on the second path:
- Motion is tied to scroll, not only to click
- The laptop lid opens as the visitor moves down the hero
- Navigation stays available without covering the stage
- The configurator lets someone assemble a machine and see the price change
- The interface stays cinematic from the first frame to the last section
- 🎬 Full-page preloader with a live percent bar
- 🖱️ Custom cursor and a light film-grain overlay
- 📍 Stage navigation between sections
- 📊 Top scroll-progress line
- 💻 3D laptop preview with a lid that opens on scroll
- ✨ Screen glow and particle canvas around the hero
- ⚖️ Side-by-side model comparison
- 🎛️ Live configurator for RAM, storage, and color
- 💰 Running total that updates with each option
- 🔝 Back-to-top control
- 🇮🇷 RTL layout and Persian UI
- 📱 Responsive interface
The hero is not a still photo. As the page scrolls, the laptop lid lifts, the screen becomes the focus, and the scene feels like a product reveal.
The interface moves through opening, models, specs, comparison, and configuration. Navigation jumps between those stages without breaking the motion.
RAM, storage, and color can be changed in place. Labels and the total update immediately, so the visitor sees the machine they are building.
The header tightens after scroll, the progress rail stays thin, and the grain overlay keeps the page from looking flat.
Electronics-Business-Website/
├── index.html
├── css/
│ └── style.css
└── js/
└── main.js
index.html— page frame, sections, and CDN librariescss/style.css— layout, color system, and interface motionjs/main.js— GSAP / ScrollTrigger, Three.js stage, configurator, and UI behavior
External libraries loaded in the page:
- Vazirmatn and JetBrains Mono
- GSAP and ScrollTrigger
- Three.js
- HTML5
- CSS3
- JavaScript
- GSAP + ScrollTrigger
- Three.js
No package manager or bundler is required.
https://sadra-hatami.github.io/Electronics-Business-Website/
git clone https://github.com/sadra-hatami/Electronics-Business-Website.git
cd Electronics-Business-Website
python3 -m http.server 8080Then open http://localhost:8080.
A local server is the safer way to load css/ and js/ paths.
- Front-end developers studying scroll-driven UI
- Designers looking at cinematic product pages
- Stores that want an electronics showcase
- Students learning GSAP and Three.js together
https://sadra-hatami.github.io/Electronics-Business-Website/
Repository: https://github.com/sadra-hatami/Electronics-Business-Website
Possible later improvements:
- 🔊 Optional sound for the lid animation
- 🛒 Checkout connection
- 🌙 Theme switch
- 🖼️ Extra product scenes
- ♿ Reduced-motion refinements beyond the current media query
No. It is a static front-end project.
Relative css/ and js/ paths are more reliable over http://localhost than over a raw file path.
Yes. The hero stage uses Three.js. An older browser without WebGL will lose that scene.
No. Business Website is a general company template. This repository is a cinematic electronics store with motion and a 3D product stage.
Contributions are welcome.
You can:
- Report motion bugs
- Improve responsive behavior
- Refine the 3D scene
- Submit Pull Requests
Developer:
🌐 GitHub
This project is licensed under the MIT License.
© 2026 Sadra Hatami
All rights reserved.
The source code, visual design, motion, documentation, and project structure are protected under applicable copyright laws.
If you like this interface, please consider starring the repository.