Why static?
The demo needs no account, backend, database, analytics, or paid service. GitHub Pages is the full runtime.
Interactive demo · 221 synthetic items · zero external writes
A product experience first.
An inspectable system underneath.
Scoopy reframes catalog browsing as a small reveal. The public implementation keeps the complete visual journey while replacing retailer content and commercial behavior with deterministic, reviewable code.
60-second tour
What to inspect
- Scroll the story.The box moves through six chapters with a static fallback.
- Open collections.Twelve themes expose a generated 221-item catalog.
- Build twice.The same theme and tier return the same scoop.
- Submit the form.The final state confirms nothing was stored or sent.
Architecture
Progressive enhancement keeps the story optional.
Synthetic catalog→Product UI→Deterministic scoop→Browser-only resultCapability gate→Three.js scene→GSAP scroll chapters→Static fallback
Why deterministic?
A stable hash makes the interaction testable and lets a recruiter reproduce the same state.
Why a fallback?
Content remains readable when WebGL, motion, or JavaScript capabilities are limited.
Workflow
From approved visual prototype to public evidence.
- 01Preserve
Carry over the product composition, brand tokens, and six-chapter interaction.
- 02Sanitize
Replace catalog titles, brands, URLs, images, sales claims, and form behavior.
- 03Isolate
Bundle pinned fonts and animation libraries locally and block third-party runtime traffic.
- 04Prove
Test deterministic data, fallbacks, keyboard navigation, mobile layout, and zero writes.
Annotated public code
Small functions carry the important guarantees.
export function deterministicScoop(items, size, seed) {
const count = Math.max(0, Math.min(Number(size) || 0, items.length));
return seededOrder(items, seed).slice(0, count);
}The seed is derived from theme and tier, so tests and visitors can reproduce a scoop.
var mode = 'none';
var canvas = document.createElement('canvas');
if (canvas.getContext('webgl2') || canvas.getContext('webgl')) {
mode = 'auto';
}
window.__scoopMode = mode;The content path is the default; the 3D layer earns permission from browser capabilities.
heading.textContent = 'Demo state complete, ' + name + '.';
message.textContent = 'Nothing was stored or sent. This browser-only form exists to demonstrate the final product state.';
success.append(icon, heading, message);
form.appendChild(success);Text-only DOM APIs prevent injection. No fetch, storage API, form action, or analytics endpoint exists in the demo path.
Quality evidence
Safety is part of the product behavior.
- Node tests validate count, uniqueness, synthetic fields, and repeatable selection.
- Playwright covers desktop, mobile, keyboard, builder, form, case links, reduced motion, and static mode.
- Text and focus remain available before the optional 3D module finishes.
Run locally
One static build, no service account.
npm install
npm run dev
npm run test:allLimitations: this is a product concept, not a storefront. Prices, inventory, pickup, delivery, and waitlist behavior are demonstrative.