/* OpenHero source by Cristian Olivera Chávez. MIT License Copyright (c) 2026 Cristian Olivera Chávez Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */ "use client"; import { useEffect, useRef, useState } from "react"; import { Icon } from "@iconify/react"; const strips = [ { label: "01 · Molecular assembly", title: "Bun, patty, and lacquered edge.", text: "A foundation of toasted brioche, precisely seared protein, and a thin glaze of glossy reduction.", metric: "01", note: "78g protein", }, { label: "02 · Maillard-reaction aesthetics", title: "Surface tension, smoke, and caramelized depth.", text: "The crust lands with engineered color, a deep amber edge that signals flavor before the first bite.", metric: "02", note: "14 min rest", }, { label: "03 · Textural layering", title: "Crunch, melt, and contrast.", text: "Pickle brightness, cheddar melt, onion bite, and sauce density are spaced like a perfectly tuned tasting curve.", metric: "03", note: "9 layers", }, { label: "04 · Grill rhythm", title: "A slow-motion finish before service.", text: "Final assembly is timed to the last ember, keeping the burger vivid, molten, and structurally elegant.", metric: "04", note: "Hot service", }, ]; const layers = [ { tag: "Bread", name: "Toasted brioche base", right: "Warm", width: "86%", }, { tag: "Protein", name: "Prime patty, seared hard", right: "Smoke", width: "74%", }, { tag: "Melt", name: "Cheddar blanket", right: "Gloss", width: "66%", }, { tag: "Finish", name: "Jalapeño spark", right: "Lift", width: "58%", }, ]; const info = [ { label: "Molten cheddar orange", value: "84°" }, { label: "Grill cadence", value: "Live" }, ]; const tags = ["Maillard", "Assembly", "Hydro-suspension", "Textural layering"]; export default function Page() { const heroVideoRef = useRef(null); const [scrolled, setScrolled] = useState(false); useEffect(() => { const updateHero = () => { const max = window.innerHeight * 1.15; const progress = Math.min(Math.max(window.scrollY / max, 0), 1); const scale = 1.06 + progress * 0.18; const translate = progress * 18; if (heroVideoRef.current) { heroVideoRef.current.style.transform = `scale(${scale}) translateY(${translate}px)`; } setScrolled(window.scrollY > 20); }; let ticking = false; const onScroll = () => { if (ticking) return; ticking = true; window.requestAnimationFrame(() => { updateHero(); ticking = false; }); }; updateHero(); window.addEventListener("scroll", onScroll, { passive: true }); window.addEventListener("resize", updateHero); return () => { window.removeEventListener("scroll", onScroll); window.removeEventListener("resize", updateHero); }; }, []); useEffect(() => { const revealObserver = new IntersectionObserver( (entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { entry.target.classList.add("in"); } }); }, { threshold: 0.16 } ); const assembleObserver = new IntersectionObserver( (entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { entry.target.classList.add("in"); } }); }, { threshold: 0.14 } ); document.querySelectorAll(".reveal").forEach((el) => revealObserver.observe(el)); document.querySelectorAll(".layer").forEach((el) => assembleObserver.observe(el)); return () => { revealObserver.disconnect(); assembleObserver.disconnect(); }; }, []); const handleMove = (e: React.MouseEvent) => { const target = e.currentTarget; const rect = target.getBoundingClientRect(); target.style.setProperty("--x", `${e.clientX - rect.left}px`); target.style.setProperty("--y", `${e.clientY - rect.top}px`); }; return (
Prime Gravity
The Art of the Burger
Molecular assembly · Maillard-reaction aesthetics

Prime Gravity

An ultra-premium burger atelier shaped by hydro-suspension plating, textural layering, and a grill rhythm that feels engineered rather than served.

Charcoal Black Molten Cheddar Jalapeño Finish
{[ ["seed", "--x0:60vw;--y0:14vh;--x1:8vw;--y1:32vh;--r0:-12deg;--r1:16deg;left:58%;top:12%"], ["seed", "--x0:62vw;--y0:22vh;--x1:12vw;--y1:44vh;--r0:14deg;--r1:-12deg;left:64%;top:18%"], ["seed", "--x0:66vw;--y0:36vh;--x1:18vw;--y1:48vh;--r0:-8deg;--r1:8deg;left:70%;top:28%"], ["seed", "--x0:58vw;--y0:48vh;--x1:14vw;--y1:58vh;--r0:10deg;--r1:-10deg;left:54%;top:38%"], ["seed", "--x0:72vw;--y0:24vh;--x1:24vw;--y1:38vh;--r0:-14deg;--r1:14deg;left:76%;top:20%"], ["drip", "--x0:68vw;--y0:18vh;--x1:18vw;--y1:26vh;--r0:-24deg;--r1:20deg;left:67%;top:14%"], ["drip", "--x0:74vw;--y0:30vh;--x1:22vw;--y1:46vh;--r0:18deg;--r1:-22deg;left:74%;top:24%"], ["drip", "--x0:70vw;--y0:50vh;--x1:16vw;--y1:56vh;--r0:-18deg;--r1:10deg;left:72%;top:42%"], ["seed", "--x0:76vw;--y0:18vh;--x1:28vw;--y1:20vh;--r0:7deg;--r1:-7deg;left:81%;top:14%"], ["seed", "--x0:78vw;--y0:44vh;--x1:30vw;--y1:52vh;--r0:-10deg;--r1:12deg;left:84%;top:36%"], ].map(([type, style], index) => ( { const [k, v] = pair.split(":"); return [k, v]; }) ), } as React.CSSProperties} /> ))}
Hydro-suspension plating

Sauce droplets and sesame seeds move behind the narrative like a live flame line, bending the air around the typography.

Assembly Ledger

Built like a production line, plated like a signature dish.

Each stage follows the heat, not a grid. The sequence moves as a drip of sauce, with every layer assembled on scroll.

{strips.map((strip) => (
{strip.label}

{strip.title}

{strip.text}

{strip.metric}
{strip.note}
))}
Flavor Stack

Ingredients suspended in a luxury of heat and texture.

The room opens into a rhythm of stacked materials: brioche warmth, charcoal edge, molten cheddar, and a clean jalapeño finish that keeps the palette alive.

{tags.map((tag) => ( {tag} ))}
{layers.map((layer, index) => (
{layer.tag}
{layer.name}
{layer.right}
))}
Service Finish

A dining room tuned for texture, heat, and precision.

The final sequence settles into a warm, shadowed dining environment where each reservation feels like a backstage pass to the grill.

{info.map((item) => (
{item.label}
{item.value}
))}

Prime Gravity finishes where the smoke clears.

A tactile, high-contrast burger atelier built around heat, structure, and a precise material language that feels plated rather than served.

{tags.map((tag) => ( {tag} ))}
); }