tknuth/hotschpotsh
0
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Initial commit of project structure

Browse Source
This commit is contained in:
Timo Knuth
2026-01-13 08:13:48 +01:00
commit be7f7b7bf7
47 changed files with 4455 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
product-scroll-poc/index.html Normal file
View File

@@ -0,0 +1,96 @@
<!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>
</div>
<script src="script.js"></script>
</body>
</html>