Here is the complete, single-file `index.html` template. It is designed to be a cinematic, "Awwwards-style" experience using Tailwind CSS for styling, Motion One for high-performance scroll animations, and HTMX attributes for backend interaction points. ```html PizzaHub Online | Artisan Experience tailwind.config = { theme: { extend: { colors: { brand: { dark: '#0f172a', // Deep Slate surface: '#1e293b', // Lighter Slate primary: '#ea580c', // Burnt Orange accent: '#fbbf24', // Amber/Gold text: '#f8fafc', // Off-white muted: '#94a3b8' // Gray } }, fontFamily: { serif: ['"Playfair Display"', 'serif'], sans: ['"Space Grotesk"', 'sans-serif'], }, backgroundImage: { 'noise': "url('data:image/svg+xml,%3Csvg viewBox=%220 0 200 200%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cfilter id=%22noiseFilter%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.65%22 numOctaves=%223%22 stitchTiles=%22stitch%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23noiseFilter)%22 opacity=%220.05%22/%3E%3C/svg%3E')", } } } } / Custom Scrollbar Hide / ::-webkit-scrollbar { width: 0px; background: transparent; } body { -ms-overflow-style: none; scrollbar-width: none; } / Smooth text rendering / body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } / Loader Styles / #loader { position: fixed; inset: 0; z-index: 100; background-color: #0f172a; display: flex; justify-content: center; align-items: center; } / Utility for image masking animation / .clip-hide { clip-path: inset(0 100% 0 0); } .clip-show { clip-path: inset(0 0 0 0); }

PizzaHub.

Artisan Pizza

The Italian Standard

Culinary
Excellence

Scroll

Not just
Fast Food.

We believe in the alchemy of flour, water, and fire. Every order is a curated experience, tracked in real-time from our oven to your doorstep.

Dough

01. The Foundation

72-hour fermented sourdough base. Light, airy, and digestible.

Ingredients

02. The Source

San Marzano tomatoes and DOP Buffalo Mozzarella imported weekly.

Fire

03. The Fire

Blistered to perfection at 900°F in our wood-fired ovens.

Curated Selections

The Margherita

$18.00

Truffle & Mushroom

$24.00

Spicy Diavola

$21.00

View Full Menu

Create Your Masterpiece

Customization is at the heart of PizzaHub. Select your base, sauce, and toppings.

import { animate, scroll, hover, stagger } from "https://cdn.skypack.dev/motion"; // 1. Loader Animation const loader = document.getElementById('loader'); const loaderText = document.getElementById('loader-text'); const sequence = [ [loaderText, { opacity: [0, 1], y: [20, 0] }, { duration: 1 }], [loaderText, { opacity: 0, y: -20 }, { duration: 0.5, delay: 0.5 }], [loader, { opacity: 0 }, { duration: 0.8 }] ]; // Execute loader sequence then remove from DOM const runLoader = async () => { // Simple manual sequencing since Motion One timeline is separate package usually await animate(loaderText, { opacity: [0, 1], y: [20, 0] }, { duration: 1 }).finished; await new Promise(r => setTimeout(r, 500)); await animate(loaderText, { opacity: 0, y: -20 }, { duration: 0.5 }).finished; await animate(loader, { opacity: 0 }, { duration: 0.8 }).finished; loader.style.display = 'none'; // Trigger Hero Animations after loader animate(".reveal-hero", { opacity: [0, 1], y: [50, 0] }, { delay: stagger(0.2), duration: 1, easing: "ease-out" } ); }; runLoader(); // 2. Parallax Hero Image scroll( animate(".parallax-bg", { y: [0, 200] }), { target: document.querySelector("header") } ); // 3. Scrollytelling Cards Reveal document.querySelectorAll(".scroll-card").forEach((card) => { scroll( animate(card, { opacity: [0, 1], y: [100, 0] }), { target: card, offset: ["start end", "center center"] } ); }); // 4. Horizontal Scroll Section // We animate the track moving left as the user scrolls down the container const track = document.getElementById("horizontal-track"); const section = document.getElementById("horizontal-section"); scroll( animate(track, { transform: ["translateX(0)", "translateX(-70%)"] }), // Adjust -70% based on content width { target: section } ); // 5. Button Hovers (Magnetic effect simulation) document.querySelectorAll("button").forEach(btn => { btn.addEventListener("mouseenter", () => { animate(btn, { scale: 1.05 }, { duration: 0.3 }); }); btn.addEventListener("mouseleave", () => { animate(btn, { scale: 1 }, { duration: 0.3 }); }); }); ```