110 lines
4.5 KiB
HTML
110 lines
4.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>HOTCHPOTSH — The Art of the Spin</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,200,0,0" />
|
|
</head>
|
|
<body>
|
|
|
|
<header class="prototype-header">
|
|
<div class="logo">HOTCHPOTSH</div>
|
|
<div class="nav-minimal">Prototype 02 / Product Spin</div>
|
|
</header>
|
|
|
|
<div class="scroll-container">
|
|
|
|
<!-- Intro Section -->
|
|
<section class="intro-section">
|
|
<div class="intro-content">
|
|
<span class="label">Excellence in Form</span>
|
|
<h1>Tracing the Hand of the Maker</h1>
|
|
<p>A study of rotation, material, and light. Scroll to explore the silhouette of our signature Stoneware Mug.</p>
|
|
<div class="scroll-indicator">
|
|
<span class="material-symbols-outlined animate-bounce">expand_more</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Sticky Product Wrapper -->
|
|
<div class="product-stage">
|
|
<div class="cup-wrapper">
|
|
<!-- Canvas for smooth image sequence -->
|
|
<canvas id="cup-canvas"></canvas>
|
|
<!-- Hidden video for source buffering -->
|
|
<video id="cup-video" src="cup_spin.mp4" playsinline muted preload="auto" style="display: none;"></video>
|
|
<div class="stage-overlay"></div>
|
|
|
|
<!-- Buffering Status -->
|
|
<div id="buffer-status" class="buffer-info">
|
|
<span class="loader-dots"></span>
|
|
<span class="status-text">Refining silhouette...</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Scrolling Text Sections -->
|
|
<div class="content-section" data-step="1">
|
|
<div class="text-block">
|
|
<span class="step-num">01</span>
|
|
<h2>The Form</h2>
|
|
<p>Hand-thrown on the wheel, embracing imperfect symmetry. Every curve is a witness to the tactile dialogue between hands and clay.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content-section" data-step="2">
|
|
<div class="text-block">
|
|
<span class="step-num">02</span>
|
|
<h2>The Clay</h2>
|
|
<p>Locally sourced stoneware, rich in texture and history. We use a high-iron body that produces subtle speckling during the long firing process.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content-section" data-step="3">
|
|
<div class="text-block">
|
|
<span class="step-num">03</span>
|
|
<h2>The Glaze</h2>
|
|
<p>Fired at 1200°C to achieve a unique, stone-like finish. Our satin-matte glaze is applied by dipping, creating natural variations in depth.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content-section" data-step="4">
|
|
<div class="text-block">
|
|
<span class="step-num">04</span>
|
|
<h2>Daily Ritual</h2>
|
|
<p>Designed to be held, used, and cherished every morning. A vessel not just for coffee, but for a moment of quiet reflection.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Outro Section -->
|
|
<section class="outro-section">
|
|
<div class="outro-content">
|
|
<h2>Limited Release</h2>
|
|
<p>The Studio Collection / Batch 014</p>
|
|
<button class="btn-minimal">Shop Collection</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Parallax Section -->
|
|
<section class="parallax-section">
|
|
<div class="parallax-sticky">
|
|
<canvas id="parallax-canvas"></canvas>
|
|
<div class="product-reveal">
|
|
<img src="pottery-vase.png" alt="Finished Product" id="final-product-img">
|
|
</div>
|
|
</div>
|
|
<div class="parallax-trigger"></div>
|
|
</section>
|
|
|
|
</div>
|
|
|
|
<!-- Three.js from CDN -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html>
|