// Winkz Designs 2026, flagship "watch a site rebuild itself" scroll demo. // A single site upgrades element-by-element (header → promise → photo → button → // reviews), then gets wired for AI search and recommended by the assistant. // Phase tabs on top; a plain-English breakdown checklist underneath. (function () { const { useState, useEffect, useRef } = React; const Icon = window.Icon, Eyebrow = window.Eyebrow, Grad = window.Grad; const GRAD = 'linear-gradient(120deg,#F23BFE,#79BAFF,#2DE3EA)'; const COPPER = 'linear-gradient(120deg,#FFC98A,#E8A163,#C87941,#8E4A24)'; const COPPER_TEXT = { background: 'linear-gradient(115deg,#FFC98A,#E8A163,#C87941)', WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent' }; /* ── Copperline Electric isometric infographic (replaces the "team photo" slot) ── */ const ISO_P = (x, y, z) => [(x - y) * 0.866, (x + y) * 0.5 - z]; const ISO_poly = (arr) => arr.map(([x, y, z]) => ISO_P(x, y, z).join(',')).join(' '); function IsoBox({ o, s, top, left, right, stroke }) { const [ox, oy, oz] = o, [w, d, h] = s; const T = ISO_poly([[ox, oy, oz + h], [ox + w, oy, oz + h], [ox + w, oy + d, oz + h], [ox, oy + d, oz + h]]); const L = ISO_poly([[ox, oy + d, oz], [ox, oy + d, oz + h], [ox + w, oy + d, oz + h], [ox + w, oy + d, oz]]); const R = ISO_poly([[ox + w, oy, oz], [ox + w, oy, oz + h], [ox + w, oy + d, oz + h], [ox + w, oy + d, oz]]); return ; } function GoogleBadge({ show = true, dark = false }) { const star = (i) => ( ); return ( 4.9 {[0, 1, 2, 3, 4].map(star)} 600+ reviews ); } function CopperlineLogo({ scale = 1, dark = false }) { return ( Copperline ELECTRIC ); } function CopperlineIso() { const base = 150; // downtown Denver skyline: [x, width, roofTop] const BLD = [ [20, 26, 106], [48, 20, 92], [70, 30, 70], [104, 24, 54], [130, 26, 84], [158, 20, 100], [180, 32, 66], [214, 22, 90], [238, 26, 78], [266, 20, 102], [288, 30, 88], ]; const tones = ['#16273f', '#1a2c47', '#132340', '#1c2f4e']; const wins = []; BLD.forEach(([bx, bw, btop], bi) => { for (let wy = btop + 8; wy < base - 6; wy += 8) { for (let wx = bx + 4; wx < bx + bw - 4; wx += 7) { const lit = ((bi * 3 + wx + wy) % 5) !== 0; wins.push([wx, wy, lit, ((wx * 2 + wy) % 13 === 0)]); } } }); const mtnBack = '0,116 44,64 88,98 130,52 178,92 222,56 266,98 310,60 340,104 340,150 0,150'; const mtnFront = '0,138 38,104 78,128 120,96 168,126 210,100 258,130 300,102 340,132 340,150 0,150'; const ridge = '0,116 44,64 88,98 130,52 178,92 222,56 266,98 310,60 340,104'; return ( {/* aurora / energy streams */} {/* stars */} {[[30, 24], [70, 16], [120, 30], [210, 20], [262, 14], [300, 32], [182, 12]].map((p, i) => )} {/* Rockies */} {/* downtown buildings */} {BLD.map((b, i) => )} {/* rooftop rim light on the signature tower */} {/* lit windows */} {wins.map((w, i) => )} {/* street base + brand dashes */} {[20, 60, 100, 140, 180, 220, 260, 300].map((x, i) => )} {/* glowing bolt powering the city */} {(() => { const cx = 116, cy = 30; const b = (dx, dy) => `${cx + dx},${cy + dy}`; const bolt = [b(3, -15), b(-6, 2), b(-1, 2), b(-5, 15), b(8, -3), b(1, -3), b(6, -15)].join(' '); return ; })()} ); } // element-upgrade thresholds (redesign phase) const T = { header: 0.10, promise: 0.19, photo: 0.28, button: 0.37, trust: 0.46 }; const BREAKDOWN = [ ['PanelTop', 'A clean header people trust', T.header], ['MessageSquareQuote', 'One clear promise, not "welcome to our website"', T.promise], ['Image', 'Real, modern photography', T.photo], ['MousePointerClick', 'One obvious button, so more visitors book', T.button], ['Star', 'Reviews & services up front for instant trust', T.trust], ]; const STAGES = [ ['Audit', 0.00, 'Reading the dated site, what’s costing them customers.'], ['Header', T.header, 'Rebuilding a clean header people instantly trust.'], ['Message', T.promise, 'Rewriting the headline into one clear promise.'], ['Imagery', T.photo, 'Swapping clip-art for real, modern photography.'], ['Call-to-action', T.button, 'Adding one obvious button so visitors book.'], ['Proof', T.trust, 'Surfacing reviews & services up front for trust.'], ['AI SEO', 0.55, 'Wiring keywords, schema & content for AI search.'], ['Recommended', 0.78, 'Becoming the name the AI assistant recommends.'], ]; const SEO_ITEMS = [ ['Heading1', 'Keyword-rich H1/H2 headers', 0.60], ['Target', 'Target keywords optimized', 0.635], ['Braces', 'LocalBusiness schema', 0.67], ['MapPin', 'Service + area entities', 0.705], ['FileCheck2', 'Clean, crawlable content', 0.74], ]; const KEYWORDS = [ ['emergency electrician denver', 0.60], ['24/7 electrical repair', 0.635], ['panel upgrade denver', 0.67], ['ev charger installation', 0.705], ]; const TABS = [ ['Redesign', 'PenLine', 'redesign'], ['AI SEO', 'Sparkles', 'aiseo'], ['Get found', 'Search', 'getfound'], ]; // cross-fade one slot between a "dated" and "modern" node function Swap({ up, dated, modern, h }) { return (
{dated}
{modern}
); } function BuildReveal() { const wrapRef = useRef(null); const [p, setP] = useState(0); useEffect(() => { const onScroll = () => { const el = wrapRef.current; if (!el) return; const rect = el.getBoundingClientRect(); const vh = window.innerHeight || 800; const total = el.offsetHeight - vh; const scrolled = Math.min(Math.max(-rect.top, 0), total); setP(total > 0 ? scrolled / total : 0); }; window.addEventListener('scroll', onScroll, { passive: true }); window.addEventListener('resize', onScroll, { passive: true }); onScroll(); return () => { window.removeEventListener('scroll', onScroll); window.removeEventListener('resize', onScroll); }; }, []); const headerUp = p >= T.header, promiseUp = p >= T.promise, photoUp = p >= T.photo, buttonUp = p >= T.button, trustUp = p >= T.trust; const secure = p >= 0.30; const phase = p >= 0.78 ? 'getfound' : p >= 0.55 ? 'aiseo' : 'redesign'; const seoOn = phase === 'aiseo' || phase === 'getfound'; const recOn = phase === 'getfound'; const datedFooterOut = p >= 0.50; const coverOn = 1 - Math.min(1, p / 0.06); const activeStage = STAGES.reduce((a, s, i) => (p >= s[1] ? i : a), 0); const replay = () => { const el = wrapRef.current; if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY + 4, behavior: 'smooth' }); }; return (
{/* ── Toolbar ── */}
AI
From invisible to the first answer AI gives
Rebuild · optimize for AI search · get recommended
{TABS.map(([label, icon, key]) => { const active = phase === key; const passed = (key === 'redesign') || (key === 'aiseo' && (phase === 'aiseo' || phase === 'getfound')) || (key === 'getfound' && phase === 'getfound'); return ( {label} ); })} Replay
{/* ── Live rebuild: narration rail + frame ── */}
{/* narration rail */}
LIVE REBUILD
{STAGES.map((s, i) => { const active = i === activeStage, done = i < activeStage; return (
{done ? : {i + 1}}
{s[0]}
{s[2]}
); })}
{/* ── Browser frame ── */}
{secure ? 'copperlineelectric.com' : 'copperline-electric.net'}
{secure && ● LIVE}
{/* canvas */}
{/* NAV */} ☎ (303) 555-0148 Copperline Electric HOME · SERVICES
} modern={
{['Services', 'Areas', 'Reviews'].map((l, i) => {l})} Book now
} />
{/* PROMISE (headline + sub) */}
Welcome To Our Website!!!

We are a family owned electrical company serving the greater Denver area for over 20 years. We do wiring, panels, repairs and MORE. Satisfaction guaranteed!!!

} modern={
Licensed & insured
Denver's most-trusted electrician, on call 24/7.

Upfront pricing, same-day service, and licensed pros who treat your home right.

} /> {/* button lives at the bottom of the site now */}
{/* PHOTO */} Copperline Electric storefront, 2009 Come visit our shop!
} modern={
Copperline Electric · powering Denver
} />
{/* TRUST row */}
Visitors: 004213 Best viewed in Internet Explorer 6
} modern={
{[['Flame', 'Emergency repair', '24/7 response'], ['Gauge', 'Panel upgrades', 'Safe & to code'], ['BatteryCharging', 'EV chargers', 'Install & wiring']].map((c, i) => (
{c[1]}
{c[2]}
))}
} />
{/* dated footer fades out */}
Copyright 2011 Copperline Electric · Site by CoolWebDesigns
{/* BOOK button pinned to the bottom of the mini site */}
» Click Here! «} modern={
Book an electrician CTA ✓
} />
{/* intro cover, keeps the dark aesthetic on entry, lifts as you scroll in */}
BEFORE · WHAT MOST BUSINESSES HAVE
A dated site nobody finds, and AI never mentions.
Scroll to rebuild it
{/* ===== AI-SEO OVERLAY ===== */}
SEO & AI optimization
{SEO_ITEMS.map((it, i) => { const done = p >= it[2]; return (
{done ? : } {it[1]}
); })}
TARGET KEYWORDS
{KEYWORDS.map((k, i) => { const shown = p >= k[1]; return ( {k[0]} ); })}
{/* ===== RECOMMENDED OVERLAY, embedded chat widget, bottom-right ===== */}
AI Assistant live
"Best emergency electrician in Denver?"
Go with Copperline Electric, 4.9★, 600+ reviews, 24/7, upfront pricing.
Recommended #1
{/* /br-layout */}
); } window.BuildReveal = BuildReveal; })();