Pages Hard
Auto — Performance / Tuning Landing
A high-octane landing page for a fictional performance and tuning shop, built in vanilla HTML, CSS and JavaScript. It pairs a carbon-and-neon motorsport aesthetic with a live dyno gauge, an interactive virtual power pull, a switchable before-and-after dyno chart drawn in SVG, a masonry build gallery with spec popups, flat-rate stage packages, and a validated book-a-dyno form. Scroll reveals, animated stat counters and a scrolling marquee add adrenaline without any framework or build step.
Open in Lab
MCP
html css vanilla-js
Targets: JS HTML
Code
:root {
--carbon: #0e0f12;
--carbon-2: #15171c;
--carbon-3: #1c1f26;
--neon: #b6ff2e;
--neon-d: #93d61f;
--orange: #ff6a13;
--orange-d: #e2540a;
--steel: #5b6470;
--steel-l: #8a929d;
--ink: #eef1f4;
--muted: #9aa3af;
--line: rgba(255, 255, 255, 0.08);
--line-2: rgba(255, 255, 255, 0.16);
--bg: #0e0f12;
--surface: #15171c;
--ok: #2f9e6f;
--warn: #e0962a;
--danger: #d4493e;
--r-sm: 8px;
--r-md: 14px;
--r-lg: 18px;
--shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
--font: "Inter", system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--font);
background: var(--bg);
color: var(--ink);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
.wrap { width: min(1160px, 92vw); margin-inline: auto; }
.hl { color: var(--neon); }
.tabular { font-variant-numeric: tabular-nums; }
img { max-width: 100%; }
/* ---------- NAV ---------- */
.nav {
position: sticky;
top: 0;
z-index: 60;
background: rgba(14, 15, 18, 0.72);
backdrop-filter: blur(14px);
border-bottom: 1px solid var(--line);
transition: background .25s, border-color .25s;
}
.nav.scrolled { background: rgba(14, 15, 18, 0.94); border-color: var(--line-2); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 66px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand-mark {
display: grid; place-items: center;
width: 36px; height: 36px; border-radius: 10px;
background: var(--neon); color: #0b0c0e;
box-shadow: 0 0 18px rgba(182, 255, 46, .35);
}
.brand-name { font-weight: 800; letter-spacing: -.02em; font-size: 18px; }
.brand-dim { color: var(--neon); }
.nav-links { display: flex; align-items: center; gap: 26px; }
.nav-links a { color: var(--muted); text-decoration: none; font-weight: 500; font-size: 14.5px; transition: color .15s; }
.nav-links a:hover { color: var(--ink); }
.nav-cta {
background: var(--neon); color: #0b0c0e !important; font-weight: 700 !important;
padding: 9px 16px; border-radius: var(--r-sm);
box-shadow: 0 0 0 0 rgba(182,255,46,.4); transition: box-shadow .2s, transform .12s;
}
.nav-cta:hover { box-shadow: 0 0 22px rgba(182,255,46,.45); transform: translateY(-1px); }
.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav-toggle span { width: 24px; height: 2px; background: var(--ink); transition: .25s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* ---------- BUTTONS ---------- */
.btn {
display: inline-flex; align-items: center; justify-content: center;
gap: 8px; font-weight: 700; font-size: 15px; cursor: pointer;
border: 0; border-radius: var(--r-sm); padding: 13px 22px;
text-decoration: none; transition: transform .12s, box-shadow .2s, background .2s, color .2s;
font-family: inherit;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn-primary { background: var(--neon); color: #0b0c0e; box-shadow: 0 0 24px rgba(182,255,46,.28); }
.btn-primary:hover { box-shadow: 0 0 34px rgba(182,255,46,.5); transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line-2); }
.btn-ghost:hover { border-color: var(--neon); color: var(--neon); }
.btn-outline { background: transparent; color: var(--ink); border: 1px solid var(--line-2); width: 100%; }
.btn-outline:hover { border-color: var(--neon); color: var(--neon); }
.btn-block { width: 100%; }
.btn-pull {
width: 100%; margin-top: 14px; background: var(--orange); color: #0b0c0e;
box-shadow: 0 0 20px rgba(255,106,19,.28);
}
.btn-pull:hover { box-shadow: 0 0 30px rgba(255,106,19,.5); transform: translateY(-2px); }
.btn-pull:disabled { opacity: .55; cursor: progress; transform: none; box-shadow: none; }
/* ---------- HERO ---------- */
.hero { position: relative; padding: clamp(48px, 8vw, 96px) 0 64px; overflow: hidden; }
.hero-grid {
position: absolute; inset: 0;
background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
background-size: 46px 46px;
-webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%);
mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%);
opacity: .6;
}
.hero-glow {
position: absolute; top: -120px; left: 50%; transform: translateX(-50%);
width: 720px; height: 420px;
background: radial-gradient(circle, rgba(182,255,46,.18), transparent 65%);
filter: blur(20px); pointer-events: none;
}
.hero-inner { position: relative; display: grid; grid-template-columns: 1.15fr .85fr; gap: 44px; align-items: center; }
.eyebrow {
display: inline-flex; align-items: center; gap: 8px;
font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
color: var(--neon); background: rgba(182,255,46,.08);
border: 1px solid rgba(182,255,46,.25); padding: 7px 13px; border-radius: 100px;
}
.eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--neon); box-shadow: 0 0 8px var(--neon); }
.hero h1 { font-size: clamp(40px, 6.4vw, 70px); line-height: 1.02; letter-spacing: -.035em; margin: 20px 0 0; font-weight: 800; }
.lede { color: var(--muted); font-size: clamp(15px, 1.6vw, 18px); max-width: 46ch; margin: 18px 0 0; }
.hero-actions { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.hero-stats { list-style: none; display: flex; gap: 30px; margin: 38px 0 0; padding: 24px 0 0; border-top: 1px solid var(--line); }
.hero-stats b { display: block; font-size: 30px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.hero-stats span { font-size: 12.5px; color: var(--muted); }
/* hero card / gauge */
.hero-card {
background: linear-gradient(160deg, var(--carbon-3), var(--carbon-2));
border: 1px solid var(--line-2); border-radius: var(--r-lg);
padding: 22px; box-shadow: var(--shadow);
}
.gauge-head { display: flex; justify-content: space-between; align-items: center; }
.bay { font-size: 12px; font-weight: 700; letter-spacing: .14em; color: var(--steel-l); }
.live { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 700; color: var(--neon); letter-spacing: .08em; }
.live i { width: 8px; height: 8px; border-radius: 50%; background: var(--neon); animation: pulse 1.2s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; box-shadow: 0 0 0 0 rgba(182,255,46,.5);} 50% { opacity: .45; box-shadow: 0 0 0 6px rgba(182,255,46,0);} }
.gauge { display: grid; place-items: center; padding: 18px 0 8px; }
.gauge-ring {
width: 188px; height: 188px; border-radius: 50%;
background:
radial-gradient(circle at center, var(--carbon-2) 58%, transparent 59%),
conic-gradient(var(--neon) 0deg, var(--orange) 0deg, var(--carbon-3) 0deg);
display: grid; place-items: center; position: relative;
transition: background .08s linear;
}
.gauge-ring::after { content: ""; position: absolute; inset: 14px; border-radius: 50%; border: 1px dashed var(--line-2); }
.gauge-val { text-align: center; }
.gauge-val b { font-size: 38px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.gauge-val small { display: block; font-size: 11px; letter-spacing: .18em; color: var(--steel-l); }
.gauge-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; margin-top: 6px; }
.gauge-meta > div { background: var(--carbon-2); padding: 11px 13px; }
.gauge-meta label { display: block; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--steel-l); }
.gauge-meta b { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
/* ---------- MARQUEE ---------- */
.marquee { background: var(--neon); color: #0b0c0e; overflow: hidden; border-block: 1px solid #0b0c0e; }
.marquee-track { display: flex; gap: 26px; white-space: nowrap; padding: 12px 0; width: max-content; animation: scroll 26s linear infinite; }
.marquee-track span { font-weight: 800; font-size: 14px; letter-spacing: .05em; }
@keyframes scroll { to { transform: translateX(-50%); } }
/* ---------- SECTIONS ---------- */
.section { padding: clamp(56px, 8vw, 96px) 0; }
.section.dark { background: var(--carbon-2); border-block: 1px solid var(--line); }
.sec-head { max-width: 620px; margin-bottom: 44px; }
.kicker { font-size: 12.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--neon); }
.sec-head h2 { font-size: clamp(28px, 4.4vw, 46px); letter-spacing: -.03em; margin: 12px 0 10px; font-weight: 800; line-height: 1.05; }
.sec-head p { color: var(--muted); font-size: 16px; margin: 0; }
/* services */
.svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.svc {
background: var(--surface); border: 1px solid var(--line);
border-radius: var(--r-md); padding: 22px; position: relative;
transition: transform .2s, border-color .2s, box-shadow .2s;
}
.svc:hover { transform: translateY(-5px); border-color: rgba(182,255,46,.4); box-shadow: 0 18px 40px rgba(0,0,0,.4); }
.svc-ico { font-size: 26px; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 12px; background: var(--carbon-3); border: 1px solid var(--line); margin-bottom: 16px; }
.svc h3 { margin: 0 0 8px; font-size: 18px; font-weight: 700; }
.svc p { margin: 0 0 14px; color: var(--muted); font-size: 14px; }
.svc-tag { font-size: 11.5px; font-weight: 700; color: var(--neon); background: rgba(182,255,46,.1); border: 1px solid rgba(182,255,46,.22); padding: 5px 10px; border-radius: 100px; }
/* ---------- DYNO ---------- */
.dyno-wrap { background: var(--carbon); border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: 22px; box-shadow: var(--shadow); }
.dyno-pick { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.chip {
background: var(--carbon-3); color: var(--muted); border: 1px solid var(--line);
border-radius: 100px; padding: 9px 16px; font-weight: 600; font-size: 13.5px; cursor: pointer;
font-family: inherit; transition: .18s;
}
.chip:hover { color: var(--ink); border-color: var(--line-2); }
.chip.is-active { background: var(--neon); color: #0b0c0e; border-color: var(--neon); box-shadow: 0 0 18px rgba(182,255,46,.3); }
.dyno-chart { position: relative; padding-left: 44px; padding-bottom: 22px; }
.dyno-axis { position: absolute; left: 0; top: 0; bottom: 22px; display: flex; flex-direction: column; justify-content: space-between; font-size: 10.5px; color: var(--steel-l); font-variant-numeric: tabular-nums; }
.dyno-svg { display: block; width: 100%; height: 280px; background: linear-gradient(180deg, transparent, rgba(255,255,255,.015)); border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.area { fill: url(#gTuned); transition: d .4s; }
.line { fill: none; stroke-width: 3; vector-effect: non-scaling-stroke; transition: d .4s; }
.line.stock { stroke: var(--steel-l); stroke-dasharray: 6 5; }
.line.tuned { stroke: var(--neon); filter: drop-shadow(0 0 6px rgba(182,255,46,.6)); }
.dyno-rev { display: flex; justify-content: space-between; padding-left: 0; margin-top: 6px; font-size: 10.5px; color: var(--steel-l); }
.dyno-read { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.dr-car { font-weight: 700; font-size: 15px; }
.dr-cols { display: flex; gap: 26px; }
.dr-col label { display: block; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--steel-l); }
.dr-col b { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.dr-col.gain b { color: var(--orange); }
.dr-col.tuned b { color: var(--neon); }
/* ---------- BUILDS ---------- */
.builds-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-auto-rows: 200px; gap: 16px; }
.builds-grid .build:first-child { grid-row: span 2; }
.build {
position: relative; border: 1px solid var(--line); border-radius: var(--r-md);
overflow: hidden; cursor: pointer; text-align: left; padding: 0;
background: linear-gradient(150deg, var(--c1), var(--c2));
font-family: inherit; color: var(--ink); transition: transform .2s, border-color .2s;
}
.build::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 40%, rgba(182,255,46,.08)); opacity: 0; transition: opacity .25s; }
.build:hover { transform: translateY(-4px); border-color: rgba(182,255,46,.45); }
.build:hover::before { opacity: 1; }
.build-tag { position: absolute; top: 14px; left: 14px; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; background: var(--neon); color: #0b0c0e; padding: 4px 9px; border-radius: 6px; }
.build-meta { position: absolute; left: 16px; bottom: 16px; }
.build-meta b { display: block; font-size: 18px; font-weight: 800; }
.build-meta small { color: var(--muted); font-size: 13px; }
/* ---------- PACKAGES ---------- */
.pkg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
.pkg { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px; display: flex; flex-direction: column; transition: transform .2s, border-color .2s; }
.pkg:hover { transform: translateY(-4px); border-color: var(--line-2); }
.pkg.featured { border-color: var(--neon); box-shadow: 0 0 0 1px var(--neon), 0 24px 60px rgba(0,0,0,.5); background: linear-gradient(180deg, rgba(182,255,46,.06), var(--surface)); }
.pkg-flag { position: absolute; top: -12px; left: 26px; background: var(--neon); color: #0b0c0e; font-size: 11px; font-weight: 800; letter-spacing: .08em; padding: 5px 12px; border-radius: 100px; }
.pkg h3 { margin: 0 0 6px; font-size: 20px; font-weight: 800; }
.pkg-price { display: flex; align-items: baseline; gap: 2px; margin: 6px 0 2px; }
.pkg-price span { font-size: 20px; font-weight: 700; color: var(--muted); }
.pkg-price b { font-size: 42px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.pkg-sub { color: var(--muted); font-size: 13px; margin: 0 0 18px; }
.pkg ul { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 10px; flex: 1; }
.pkg li { font-size: 14px; color: var(--ink); padding-left: 24px; position: relative; }
.pkg li::before { content: "›"; position: absolute; left: 4px; color: var(--neon); font-weight: 800; }
/* ---------- BOOK ---------- */
.book { background: radial-gradient(ellipse 70% 100% at 80% 0%, rgba(182,255,46,.08), transparent 60%), var(--bg); }
.book-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
.book-copy h2 { font-size: clamp(28px, 4.4vw, 46px); letter-spacing: -.03em; margin: 12px 0 10px; font-weight: 800; }
.book-copy p { color: var(--muted); margin: 0 0 18px; }
.book-perks { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.book-perks li { color: var(--ink); font-size: 14.5px; }
.book-form { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: 26px; box-shadow: var(--shadow); display: grid; gap: 14px; }
.field { display: grid; gap: 6px; }
.field label { font-size: 12.5px; font-weight: 600; color: var(--muted); letter-spacing: .02em; }
.field input, .field select {
font-family: inherit; font-size: 15px; color: var(--ink);
background: var(--carbon); border: 1px solid var(--line-2); border-radius: var(--r-sm);
padding: 12px 14px; transition: border-color .15s, box-shadow .15s;
}
.field input::placeholder { color: var(--steel); }
.field input:focus, .field select:focus { outline: none; border-color: var(--neon); box-shadow: 0 0 0 3px rgba(182,255,46,.18); }
.field.error input, .field.error select { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(212,73,62,.18); }
.book-note { font-size: 12px; color: var(--steel-l); text-align: center; margin: 2px 0 0; }
/* ---------- FOOTER ---------- */
.footer { background: var(--carbon-2); border-top: 1px solid var(--line); padding: 56px 0 26px; }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 30px; }
.foot-brand p { color: var(--muted); font-size: 13.5px; max-width: 30ch; margin: 12px 0 0; }
.foot-col h4 { font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--steel-l); margin: 0 0 14px; }
.foot-col a, .foot-col span { display: block; color: var(--muted); text-decoration: none; font-size: 14px; margin-bottom: 9px; transition: color .15s; }
.foot-col a:hover { color: var(--neon); }
.foot-bottom { display: flex; justify-content: space-between; margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--steel-l); font-size: 12.5px; flex-wrap: wrap; gap: 8px; }
/* ---------- TOAST ---------- */
.toast {
position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 24px);
background: var(--neon); color: #0b0c0e; font-weight: 700; font-size: 14px;
padding: 13px 20px; border-radius: var(--r-sm); box-shadow: 0 12px 36px rgba(0,0,0,.5);
opacity: 0; pointer-events: none; transition: transform .3s, opacity .3s; z-index: 90; max-width: 90vw;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
/* ---------- REVEAL ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
/* ---------- RESPONSIVE ---------- */
@media (max-width: 980px) {
.hero-inner { grid-template-columns: 1fr; gap: 36px; }
.hero-card { max-width: 420px; }
.svc-grid { grid-template-columns: 1fr 1fr; }
.pkg-grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
.builds-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 180px; }
.builds-grid .build:first-child { grid-row: span 1; grid-column: span 2; }
.book-wrap { grid-template-columns: 1fr; }
.foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
.nav-links {
position: fixed; inset: 66px 0 auto 0; flex-direction: column; gap: 0;
background: var(--carbon-2); border-bottom: 1px solid var(--line-2);
padding: 8px 0; transform: translateY(-120%); transition: transform .3s; align-items: stretch;
}
.nav-links.open { transform: translateY(0); }
.nav-links a { padding: 14px 28px; border-top: 1px solid var(--line); }
.nav-cta { margin: 10px 24px; text-align: center; }
.nav-toggle { display: flex; }
}
@media (max-width: 520px) {
.wrap { width: 90vw; }
.hero-stats { gap: 18px; flex-wrap: wrap; }
.hero-stats b { font-size: 24px; }
.svc-grid { grid-template-columns: 1fr; }
.builds-grid { grid-template-columns: 1fr; grid-auto-rows: 170px; }
.builds-grid .build:first-child { grid-column: span 1; }
.dyno-read { flex-direction: column; align-items: flex-start; }
.dr-cols { gap: 18px; width: 100%; justify-content: space-between; }
.foot-grid { grid-template-columns: 1fr; }
.gauge-ring { width: 160px; height: 160px; }
}
@media (prefers-reduced-motion: reduce) {
.reveal, .btn, .svc, .build, .pkg { transition: none; }
.marquee-track, .live i { animation: none; }
.reveal { opacity: 1; transform: none; }
html { scroll-behavior: auto; }
}(function () {
"use strict";
/* ---------- Toast helper ---------- */
var toastEl = document.getElementById("toast");
var toastTimer;
function toast(msg) {
if (!toastEl) return;
toastEl.textContent = msg;
toastEl.classList.add("show");
clearTimeout(toastTimer);
toastTimer = setTimeout(function () {
toastEl.classList.remove("show");
}, 2600);
}
/* ---------- Nav: scroll state + mobile toggle ---------- */
var nav = document.getElementById("nav");
var navToggle = document.getElementById("navToggle");
var navLinks = document.getElementById("navLinks");
window.addEventListener(
"scroll",
function () {
nav.classList.toggle("scrolled", window.scrollY > 12);
},
{ passive: true }
);
function closeMenu() {
navLinks.classList.remove("open");
navToggle.setAttribute("aria-expanded", "false");
}
navToggle.addEventListener("click", function () {
var open = navLinks.classList.toggle("open");
navToggle.setAttribute("aria-expanded", String(open));
});
navLinks.addEventListener("click", function (e) {
if (e.target.tagName === "A") closeMenu();
});
/* ---------- Scroll reveal ---------- */
var reveals = document.querySelectorAll(".reveal");
if ("IntersectionObserver" in window) {
var io = new IntersectionObserver(
function (entries) {
entries.forEach(function (en) {
if (en.isIntersecting) {
en.target.classList.add("in");
io.unobserve(en.target);
}
});
},
{ threshold: 0.16 }
);
reveals.forEach(function (el, i) {
el.style.transitionDelay = (i % 4) * 60 + "ms";
io.observe(el);
});
} else {
reveals.forEach(function (el) {
el.classList.add("in");
});
}
/* ---------- Animated hero stat counters ---------- */
var statBs = document.querySelectorAll("#heroStats b[data-count]");
var statsDone = false;
function runCounters() {
if (statsDone) return;
statsDone = true;
statBs.forEach(function (b) {
var target = parseInt(b.getAttribute("data-count"), 10);
var suffix = b.getAttribute("data-suffix") || "";
var start = performance.now();
var dur = 1400;
function tick(now) {
var p = Math.min((now - start) / dur, 1);
var eased = 1 - Math.pow(1 - p, 3);
b.textContent = Math.round(target * eased) + suffix;
if (p < 1) requestAnimationFrame(tick);
}
requestAnimationFrame(tick);
});
}
if ("IntersectionObserver" in window) {
var statsIO = new IntersectionObserver(
function (es) {
if (es[0].isIntersecting) {
runCounters();
statsIO.disconnect();
}
},
{ threshold: 0.4 }
);
var statsEl = document.getElementById("heroStats");
if (statsEl) statsIO.observe(statsEl);
} else {
runCounters();
}
/* ---------- Hero virtual dyno pull ---------- */
var pullBtn = document.getElementById("pullBtn");
var ring = document.getElementById("gaugeRing");
var rpmVal = document.getElementById("rpmVal");
var hpVal = document.getElementById("hpVal");
var tqVal = document.getElementById("tqVal");
var boostVal = document.getElementById("boostVal");
var afrVal = document.getElementById("afrVal");
var pulling = false;
function paintRing(frac) {
// 0..1 of sweep; neon up to redline, orange peak segment
var deg = Math.round(frac * 320);
var peak = Math.max(deg - 24, 0);
ring.style.background =
"radial-gradient(circle at center, var(--carbon-2) 58%, transparent 59%)," +
"conic-gradient(var(--neon) 0deg " +
peak +
"deg, var(--orange) " +
peak +
"deg " +
deg +
"deg, var(--carbon-3) " +
deg +
"deg)";
}
function runPull() {
if (pulling) return;
pulling = true;
pullBtn.disabled = true;
var start = performance.now();
var dur = 2300;
var maxRpm = 7200;
var maxHp = 408;
var maxTq = 369;
function frame(now) {
var p = Math.min((now - start) / dur, 1);
var e = 1 - Math.pow(1 - p, 2.4);
var rpm = Math.round(maxRpm * e);
var hp = Math.round(maxHp * Math.pow(e, 1.15));
var tq = Math.round(maxTq * Math.min(e * 1.3, 1));
var boost = (1.8 * Math.min(e * 1.4, 1)).toFixed(1);
var afr = (14.7 - 3.5 * e).toFixed(1);
rpmVal.textContent = rpm.toLocaleString();
hpVal.textContent = hp + " hp";
tqVal.textContent = tq + " lb-ft";
boostVal.textContent = boost + " bar";
afrVal.textContent = afr;
paintRing(e);
if (p < 1) {
requestAnimationFrame(frame);
} else {
pulling = false;
pullBtn.disabled = false;
toast("Pull complete — peak 408 hp @ 6,400 rpm");
}
}
requestAnimationFrame(frame);
}
paintRing(0);
if (pullBtn) pullBtn.addEventListener("click", runPull);
/* ---------- Dyno before/after chart ---------- */
var dynoSvg = document.getElementById("dynoSvg");
var areaTuned = document.getElementById("areaTuned");
var lineStock = document.getElementById("lineStock");
var lineTuned = document.getElementById("lineTuned");
var chips = document.querySelectorAll(".dyno-pick .chip");
var drCar = document.getElementById("drCar");
var drStock = document.getElementById("drStock");
var drGain = document.getElementById("drGain");
var drTuned = document.getElementById("drTuned");
var W = 600,
H = 280,
MAXP = 900;
// Build a torque-like power curve scaled to a peak value.
function curve(peak) {
var pts = [];
var n = 24;
for (var i = 0; i <= n; i++) {
var t = i / n; // 0..1 across rpm
// rises, plateaus near top, soft fall after redline
var shape =
Math.sin(t * Math.PI * 0.92) * 0.78 + t * 0.34 - Math.pow(Math.max(t - 0.82, 0), 2) * 2.4;
shape = Math.max(shape, 0.06);
var hp = peak * Math.min(shape, 1);
var x = t * W;
var y = H - (hp / MAXP) * H;
pts.push([x, y]);
}
return pts;
}
function toPath(pts) {
return pts
.map(function (p, i) {
return (i === 0 ? "M" : "L") + p[0].toFixed(1) + " " + p[1].toFixed(1);
})
.join(" ");
}
function toArea(pts) {
return toPath(pts) + " L" + W + " " + H + " L0 " + H + " Z";
}
function setBuild(stock, tuned, car) {
var sp = curve(stock);
var tp = curve(tuned);
lineStock.setAttribute("d", toPath(sp));
lineTuned.setAttribute("d", toPath(tp));
areaTuned.setAttribute("d", toArea(tp));
drCar.textContent = car;
drStock.textContent = stock + " hp";
drTuned.textContent = tuned + " hp";
drGain.textContent = "+" + (tuned - stock) + " hp";
}
chips.forEach(function (chip) {
chip.addEventListener("click", function () {
chips.forEach(function (c) {
c.classList.remove("is-active");
c.setAttribute("aria-selected", "false");
});
chip.classList.add("is-active");
chip.setAttribute("aria-selected", "true");
setBuild(
parseInt(chip.dataset.stock, 10),
parseInt(chip.dataset.tuned, 10),
chip.dataset.car
);
});
});
// init with first chip
if (chips.length) {
var first = chips[0];
setBuild(
parseInt(first.dataset.stock, 10),
parseInt(first.dataset.tuned, 10),
first.dataset.car
);
}
/* ---------- Build gallery spec popups ---------- */
document.querySelectorAll(".build").forEach(function (b) {
b.addEventListener("click", function () {
toast(b.dataset.spec);
});
});
/* ---------- Package selection ---------- */
document.querySelectorAll(".pkg-pick").forEach(function (btn) {
btn.addEventListener("click", function () {
var pkg = btn.dataset.pkg;
var goal = document.getElementById("bGoal");
if (goal) {
for (var i = 0; i < goal.options.length; i++) {
if (goal.options[i].text.indexOf(pkg) === 0) {
goal.selectedIndex = i;
break;
}
}
}
toast(pkg + " selected — finish booking below");
document.getElementById("book").scrollIntoView({ behavior: "smooth", block: "start" });
});
});
/* ---------- Booking form validation ---------- */
var form = document.getElementById("bookForm");
if (form) {
form.addEventListener("submit", function (e) {
e.preventDefault();
var ok = true;
["bName", "bCar", "bDate"].forEach(function (id) {
var input = document.getElementById(id);
var field = input.closest(".field");
if (!input.value.trim()) {
field.classList.add("error");
ok = false;
} else {
field.classList.remove("error");
}
});
if (!ok) {
toast("Add your name, vehicle and a date");
return;
}
var name = document.getElementById("bName").value.trim().split(" ")[0];
toast("Bay request sent — we'll confirm by tomorrow, " + name + "!");
form.reset();
});
form.addEventListener("input", function (e) {
var field = e.target.closest(".field");
if (field) field.classList.remove("error");
});
}
})();<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>APEX Dyno Works — Performance & Tuning</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- NAV -->
<header class="nav" id="nav">
<div class="wrap nav-inner">
<a class="brand" href="#top" aria-label="APEX Dyno Works home">
<span class="brand-mark" aria-hidden="true">
<svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 18h2l1.5-4h11L19 18h2"/><path d="M5 14l2-6h10l2 6"/><circle cx="7" cy="18" r="1.6"/><circle cx="17" cy="18" r="1.6"/></svg>
</span>
<span class="brand-name">APEX<span class="brand-dim">DynoWorks</span></span>
</a>
<nav class="nav-links" id="navLinks" aria-label="Primary">
<a href="#services">Services</a>
<a href="#dyno">Dyno Results</a>
<a href="#builds">Builds</a>
<a href="#packages">Packages</a>
<a href="#book" class="nav-cta">Book a Dyno</a>
</nav>
<button class="nav-toggle" id="navToggle" aria-label="Toggle menu" aria-expanded="false" aria-controls="navLinks">
<span></span><span></span><span></span>
</button>
</div>
</header>
<main id="top">
<!-- HERO -->
<section class="hero" id="hero">
<div class="hero-grid" aria-hidden="true"></div>
<div class="hero-glow" aria-hidden="true"></div>
<div class="wrap hero-inner">
<div class="hero-copy reveal">
<span class="eyebrow"><i class="dot"></i> Motorsport-grade calibration</span>
<h1>Unlock the<br><span class="hl">power</span> you paid for.</h1>
<p class="lede">Custom ECU tuning, bolt-on fabrication and chassis dyno validation. Every map is built on our load-cell dyno — no canned files, no guesswork.</p>
<div class="hero-actions">
<a href="#book" class="btn btn-primary">Book a dyno session</a>
<a href="#dyno" class="btn btn-ghost">See real numbers</a>
</div>
<ul class="hero-stats" id="heroStats">
<li><b data-count="1480" data-suffix="+">0</b><span>builds dyno-tuned</span></li>
<li><b data-count="38" data-suffix="%">0</b><span>avg power gain</span></li>
<li><b data-count="900" data-suffix="hp">0</b><span>dyno capacity</span></li>
</ul>
</div>
<div class="hero-card reveal" aria-label="Live dyno readout">
<div class="gauge-head">
<span class="bay">DYNO BAY 01</span>
<span class="live"><i></i> PULL ACTIVE</span>
</div>
<div class="gauge">
<div class="gauge-ring" id="gaugeRing">
<div class="gauge-val"><b id="rpmVal">0</b><small>RPM</small></div>
</div>
</div>
<div class="gauge-meta">
<div><label>Power</label><b id="hpVal">0 hp</b></div>
<div><label>Torque</label><b id="tqVal">0 lb-ft</b></div>
<div><label>Boost</label><b id="boostVal">0.0 bar</b></div>
<div><label>AFR</label><b id="afrVal">14.7</b></div>
</div>
<button class="btn btn-pull" id="pullBtn">Run a virtual pull</button>
</div>
</div>
</section>
<!-- MARQUEE -->
<div class="marquee" aria-hidden="true">
<div class="marquee-track">
<span>ECU REMAPPING</span><span>•</span><span>STAGE 1—3</span><span>•</span><span>TURBO BUILDS</span><span>•</span><span>EXHAUST FAB</span><span>•</span><span>COILOVER SETUP</span><span>•</span><span>DYNO TUNING</span><span>•</span>
<span>ECU REMAPPING</span><span>•</span><span>STAGE 1—3</span><span>•</span><span>TURBO BUILDS</span><span>•</span><span>EXHAUST FAB</span><span>•</span><span>COILOVER SETUP</span><span>•</span><span>DYNO TUNING</span><span>•</span>
</div>
</div>
<!-- SERVICES -->
<section class="section" id="services">
<div class="wrap">
<header class="sec-head reveal">
<span class="kicker">01 / Services</span>
<h2>Built for the <span class="hl">redline</span>.</h2>
<p>Whole-car performance from one shop. Calibrated, fabricated and verified under load.</p>
</header>
<div class="svc-grid">
<article class="svc reveal">
<div class="svc-ico" aria-hidden="true">⚡</div>
<h3>ECU Tuning</h3>
<p>Custom maps written cylinder-by-cylinder on the dyno. Flex-fuel, anti-lag and launch control available.</p>
<span class="svc-tag">+25–60 hp</span>
</article>
<article class="svc reveal">
<div class="svc-ico" aria-hidden="true">🔥</div>
<h3>Exhaust Fabrication</h3>
<p>Mandrel-bent stainless and titanium systems built in-house. Cat-back to full turbo-back.</p>
<span class="svc-tag">TIG welded</span>
</article>
<article class="svc reveal">
<div class="svc-ico" aria-hidden="true">🏁</div>
<h3>Suspension</h3>
<p>Coilover installs, corner-balancing and geometry alignment for street, track and time-attack.</p>
<span class="svc-tag">Corner-weighted</span>
</article>
<article class="svc reveal">
<div class="svc-ico" aria-hidden="true">📊</div>
<h3>Dyno Validation</h3>
<p>AWD load-cell dyno to 900 hp. Wideband AFR logging, knock detection and printed power sheets.</p>
<span class="svc-tag">Load-cell</span>
</article>
</div>
</div>
</section>
<!-- DYNO RESULTS / BEFORE-AFTER -->
<section class="section dark" id="dyno">
<div class="wrap">
<header class="sec-head reveal">
<span class="kicker">02 / Dyno Results</span>
<h2>Numbers, not <span class="hl">promises</span>.</h2>
<p>Drag the slider — every chart is from a real customer build on our bay.</p>
</header>
<div class="dyno-wrap reveal">
<div class="dyno-pick" role="tablist" aria-label="Select a build">
<button class="chip is-active" role="tab" aria-selected="true" data-stock="291" data-tuned="408" data-car="MK7 Golf R · 2.0T">MK7 Golf R</button>
<button class="chip" role="tab" aria-selected="false" data-stock="365" data-tuned="612" data-car="BMW M340i · B58">B58 M340i</button>
<button class="chip" role="tab" aria-selected="false" data-stock="455" data-tuned="703" data-car="Mustang GT · 5.0 Whipple">Mustang GT</button>
<button class="chip" role="tab" aria-selected="false" data-stock="306" data-tuned="540" data-car="GR Supra · B58">GR Supra</button>
</div>
<div class="dyno-chart">
<div class="dyno-axis"><span>900</span><span>600</span><span>300</span><span>0 hp</span></div>
<svg viewBox="0 0 600 280" preserveAspectRatio="none" class="dyno-svg" id="dynoSvg" role="img" aria-label="Stock versus tuned power curve">
<defs>
<linearGradient id="gTuned" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#b6ff2e" stop-opacity="0.35"/>
<stop offset="1" stop-color="#b6ff2e" stop-opacity="0"/>
</linearGradient>
</defs>
<path id="areaTuned" class="area" d=""></path>
<path id="lineStock" class="line stock" d=""></path>
<path id="lineTuned" class="line tuned" d=""></path>
</svg>
<div class="dyno-rev"><span>3k</span><span>5k</span><span>7k</span><span>RPM</span></div>
</div>
<div class="dyno-read">
<div class="dr-car" id="drCar">MK7 Golf R · 2.0T</div>
<div class="dr-cols">
<div class="dr-col"><label>Stock</label><b id="drStock">291 hp</b></div>
<div class="dr-col gain"><label>Gain</label><b id="drGain">+117 hp</b></div>
<div class="dr-col tuned"><label>APEX tuned</label><b id="drTuned">408 hp</b></div>
</div>
</div>
</div>
</div>
</section>
<!-- BUILD GALLERY -->
<section class="section" id="builds">
<div class="wrap">
<header class="sec-head reveal">
<span class="kicker">03 / Build Gallery</span>
<h2>Out of the <span class="hl">shop</span>.</h2>
<p>A few recent cars off the lift. Tap a card for the spec sheet.</p>
</header>
<div class="builds-grid">
<button class="build reveal" data-spec="610 whp · Pure Turbos · E50 · 9.8s 1/4" style="--c1:#1a2a12;--c2:#0e0f12">
<span class="build-tag">FEATURED</span>
<span class="build-meta"><b>Project Venom</b><small>BMW M2 Comp · S55</small></span>
</button>
<button class="build reveal" data-spec="540 whp · catless DP · E40 · time-attack" style="--c1:#102426;--c2:#0e0f12">
<span class="build-meta"><b>Track Weapon</b><small>GR Supra · B58</small></span>
</button>
<button class="build reveal" data-spec="703 whp · Whipple 3.0L · drag radials" style="--c1:#241410;--c2:#0e0f12">
<span class="build-meta"><b>Roll Racer</b><small>Mustang GT · Coyote</small></span>
</button>
<button class="build reveal" data-spec="408 whp · IS38 · meth · daily" style="--c1:#161d28;--c2:#0e0f12">
<span class="build-meta"><b>Sleeper R</b><small>MK7 Golf R · EA888</small></span>
</button>
</div>
</div>
</section>
<!-- PACKAGES -->
<section class="section dark" id="packages">
<div class="wrap">
<header class="sec-head reveal">
<span class="kicker">04 / Packages</span>
<h2>Pick your <span class="hl">stage</span>.</h2>
<p>Transparent flat-rate packages. All include a custom dyno tune and printed power sheet.</p>
</header>
<div class="pkg-grid">
<article class="pkg reveal">
<h3>Stage 1</h3>
<div class="pkg-price"><span>$</span><b>899</b></div>
<p class="pkg-sub">Bolt-on ready · 1 day</p>
<ul>
<li>Custom ECU remap</li>
<li>Single dyno pull tune</li>
<li>Wideband AFR logging</li>
<li>+25–40 hp typical</li>
</ul>
<button class="btn btn-outline pkg-pick" data-pkg="Stage 1">Choose Stage 1</button>
</article>
<article class="pkg featured reveal">
<span class="pkg-flag">MOST POPULAR</span>
<h3>Stage 2</h3>
<div class="pkg-price"><span>$</span><b>2,450</b></div>
<p class="pkg-sub">Hardware + tune · 2–3 days</p>
<ul>
<li>Downpipe + intake install</li>
<li>Full custom dyno tune</li>
<li>Flex-fuel calibration</li>
<li>Before/after power sheet</li>
<li>+60–110 hp typical</li>
</ul>
<button class="btn btn-primary pkg-pick" data-pkg="Stage 2">Choose Stage 2</button>
</article>
<article class="pkg reveal">
<h3>Stage 3</h3>
<div class="pkg-price"><span>$</span><b>7,900</b></div>
<p class="pkg-sub">Big turbo build · 1–2 wks</p>
<ul>
<li>Turbo / fueling upgrade</li>
<li>Multi-day dyno tuning</li>
<li>Anti-lag & launch control</li>
<li>Track-validated map</li>
<li>+150 hp and up</li>
</ul>
<button class="btn btn-outline pkg-pick" data-pkg="Stage 3">Choose Stage 3</button>
</article>
</div>
</div>
</section>
<!-- BOOK A DYNO CTA -->
<section class="section book" id="book">
<div class="wrap book-wrap reveal">
<div class="book-copy">
<span class="kicker">05 / Book a Dyno</span>
<h2>Reserve <span class="hl">bay time</span>.</h2>
<p>Tell us about your car. We'll confirm your dyno slot and a calibration plan within one business day.</p>
<ul class="book-perks">
<li>✓ AWD load-cell, up to 900 hp</li>
<li>✓ Same-day Stage 1 turnaround</li>
<li>✓ Printed power sheet included</li>
</ul>
</div>
<form class="book-form" id="bookForm" novalidate>
<div class="field">
<label for="bName">Name</label>
<input id="bName" name="name" type="text" placeholder="Dani Marquez" required />
</div>
<div class="field">
<label for="bCar">Vehicle</label>
<input id="bCar" name="car" type="text" placeholder="2019 Golf R · 2.0T" required />
</div>
<div class="field">
<label for="bGoal">Goal</label>
<select id="bGoal" name="goal">
<option>Stage 1 ECU tune</option>
<option>Stage 2 bolt-ons + tune</option>
<option>Stage 3 turbo build</option>
<option>Dyno pull only</option>
</select>
</div>
<div class="field">
<label for="bDate">Preferred date</label>
<input id="bDate" name="date" type="date" required />
</div>
<button type="submit" class="btn btn-primary btn-block">Request bay time</button>
<p class="book-note">No deposit charged today — fictional demo only.</p>
</form>
</div>
</section>
</main>
<!-- FOOTER -->
<footer class="footer">
<div class="wrap foot-grid">
<div class="foot-brand">
<span class="brand-name">APEX<span class="brand-dim">DynoWorks</span></span>
<p>Performance calibration & fabrication. Unit 7, 1400 Throttle Way, Mesa AZ. Fictional shop.</p>
</div>
<div class="foot-col">
<h4>Shop</h4>
<a href="#services">Services</a>
<a href="#dyno">Dyno results</a>
<a href="#builds">Build gallery</a>
<a href="#packages">Packages</a>
</div>
<div class="foot-col">
<h4>Hours</h4>
<span>Mon–Fri · 8a–6p</span>
<span>Sat · 9a–2p</span>
<span>Dyno by appt.</span>
</div>
<div class="foot-col">
<h4>Contact</h4>
<a href="#book">Book a dyno</a>
<span>(480) 555-0147</span>
<span>tune@apexdyno.example</span>
</div>
</div>
<div class="wrap foot-bottom">
<span>© 2026 APEX DynoWorks — fictional demo shop.</span>
<span>Illustrative UI only.</span>
</div>
</footer>
<div class="toast" id="toast" role="status" aria-live="polite"></div>
<script src="script.js"></script>
</body>
</html>Performance / Tuning Landing
A full marketing landing page for APEX DynoWorks, a fictional performance and tuning shop. The carbon-black canvas, neon-green accents and safety-orange highlights set an aggressive motorsport tone, while Inter with tabular figures keeps power, torque and price numbers crisp. The layout runs from a sticky glass nav into a split hero, then through services, dyno results, a build gallery, stage packages and a book-a-dyno call to action, ending in a four-column footer.
The hero ships with a working virtual dyno: press “Run a virtual pull” and a conic-gradient gauge sweeps from idle to redline while RPM, horsepower, torque, boost and AFR animate up to a 408 hp peak. The Dyno Results section draws stock-versus-tuned power curves as inline SVG paths and lets you switch between four real-feeling customer builds, recomputing the gain figure on each tab. Stat counters in the hero ease into view, and a neon marquee scrolls between the fold and the first section.
Every section is wired for interaction: build cards fire spec-sheet toasts, package buttons
preselect the matching goal and scroll you to the form, and the booking form validates name,
vehicle and date before sending a confirmation toast. Scroll-reveal animation, a mobile hamburger
menu, full keyboard access and a prefers-reduced-motion fallback round it out — all in vanilla
JS with no external libraries.
Illustrative UI only — fictional shop/dealership, not a real service system.