3D Scroll Animated Portfolio Website Template (HTML CSS JS)

A portfolio landing page with a real 3D scene that plays as you scroll. Not a video, not a GIF — a live WebGL scene that reacts to the scroll position, built to run on a phone without draining the battery. Open index.html and it works. No build step, no npm, no framework. WHAT THE SCROLL DOES The hero is a pinned 3D stage that moves through four acts as the visitor scrolls: 1. A faceted crystal floating in a bright studio 2. The studio dissolves and the space goes dark 3. The object lands on a pedestal and four colour passes sweep down it, revealing it from top to bottom while a counter climbs 0-100 4. The finished object turns slowly while info cards fade in The reveal runs in the shader, per pixel, so it sweeps smoothly instead of snapping piece by piece. WHAT IS INCLUDED index.html the page, all text lives here css/style.css all styling, design tokens at the top js/scene.js the 3D scene, CONFIG block at the top js/main.js behaviour, your details at the top vendor/three.min.js Three.js r149 assets/ placeholder avatar docs/documentation.html a 13-section setup guide LICENSE.txt your commercial licence LICENSE-THREEJS.txt the Three.js MIT licence Total: 736 KB. One instant download, no waiting. SECTIONS Hero with the 3D sequence About, with a stat block Services, six cards Selected work, six tiles Process, six numbered steps Contact, with a working form Footer FEATURES - Live WebGL 3D scene driven by scroll position - Magnetic avatar that leans toward the cursor - Gradient wordmark that the avatar overlaps, held at the same ratio on every screen size - Light and dark themes, following the visitor's system setting - Three languages included: English, French, Arabic - Full right-to-left layout for Arabic, including the 3D overlays - Contact form that needs no back end — it composes the message and opens WhatsApp or e-mail with it already written - Fully responsive, 375px to ultra-wide - Graceful fallback: no WebGL means a static frame, page still works - Respects prefers-reduced-motion - Keyboard accessible, visible focus states PLEASE READ BEFORE BUYING I would rather you skip this than be disappointed, so plainly: - This is an HTML / CSS / JavaScript template. It is NOT a theme for WordPress, Wix, Squarespace, Shopify, Webflow or Framer, and it cannot be imported into them. - It does NOT use React, Next.js, Tailwind or any framework. It is plain JavaScript, which is why there is no build step. - You need to be comfortable editing text in a code editor. If you can find and change a line of text, you can customise this. - Three.js is about 600 KB of the download. It loads once and is cached after that. - Images and text in the preview are placeholders. Your own photos and copy are not included. - This is a digital file. Nothing is shipped. CUSTOMISING Three blocks cover almost everything: Your details -> js/main.js, the SITE block at the very top Your colours -> css/style.css, section 1 "Design tokens" The 3D object -> js/scene.js, the CONFIG block at the very top The included documentation walks through all of it with code examples, including how to swap the avatar, add your work images, change the animation speed, add a language, and publish. LICENCE Use it on unlimited personal and client projects, including paid client work. Modify anything. No attribution required. You may not resell or redistribute the template itself. Full terms in LICENSE.txt. BROWSER SUPPORT Chrome, Edge, Firefox and Safari, current versions, desktop and mobile. QUESTIONS Message me before buying if you are unsure whether this fits your project. I would rather answer first than refund later.