Index & Build \u2014 SEO & Web Development Studio<\/title>\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n :root{\r\n --bg:#020103;\r\n --line:rgba(232,234,240,0.1);\r\n --text:#F0F1F7;\r\n --muted:#8A8AA0;\r\n --violet:#8B5CF6;\r\n --cyan:#4FF3E0;\r\n --gold:#F5C77E;\r\n --font-display:'Space Grotesk', sans-serif;\r\n --font-body:'Inter', sans-serif;\r\n --font-mono:'JetBrains Mono', monospace;\r\n }\r\n *{box-sizing:border-box; margin:0; padding:0;}\r\n html{scroll-behavior:smooth;}\r\n body{background:var(--bg); color:var(--text); font-family:var(--font-body); overflow-x:hidden;}\r\n\r\n \/* ============ DESKTOP: full-bleed canvas behind overlaid text ============ *\/\r\n .hero{position:relative; height:100vh; height:100svh; min-height:560px; width:100%; overflow:hidden; background:var(--bg);}\r\n #scene-canvas{position:absolute; inset:0; width:100%; height:100%; display:block; z-index:1; cursor:grab; touch-action:pan-y;}\r\n #scene-canvas.dragging{cursor:grabbing;}\r\n .vignette{\r\n position:absolute; inset:0; z-index:2; pointer-events:none;\r\n background:\r\n radial-gradient(ellipse 60% 70% at 15% 55%, rgba(2,1,3,0.86) 0%, transparent 60%),\r\n linear-gradient(180deg, rgba(2,1,3,0.5) 0%, rgba(2,1,3,0) 25%, rgba(2,1,3,0) 62%, rgba(2,1,3,0.6) 100%);\r\n }\r\n\r\n .canvas-wrap{\r\n position:absolute; top:0; left:0; right:0; bottom:0; z-index:1;\r\n }\r\n\r\n nav{\r\n position:absolute; top:0; left:0; right:0; z-index:6;\r\n display:flex; align-items:center; justify-content:space-between;\r\n padding:28px 48px;\r\n }\r\n .logo{font-family:var(--font-display); font-weight:600; font-size:18px; display:flex; align-items:center; gap:9px;}\r\n .logo .dot{width:7px; height:7px; border-radius:50%; background:var(--cyan); box-shadow:0 0 8px 1px var(--cyan);}\r\n .nav-links{display:flex; gap:36px; list-style:none; font-size:14px; color:var(--muted);}\r\n .nav-links a{color:inherit; text-decoration:none;}\r\n .nav-links a:hover{color:var(--text);}\r\n .nav-cta{\r\n font-family:var(--font-mono); font-size:12px; color:var(--text);\r\n border:1px solid var(--line); padding:9px 16px; border-radius:2px;\r\n text-decoration:none; letter-spacing:0.02em; transition:border-color .2s ease, background .2s ease;\r\n white-space:nowrap;\r\n }\r\n .nav-cta:hover{border-color:var(--cyan); background:rgba(79,243,224,0.08);}\r\n @media (max-width:860px){ .nav-links{display:none;} }\r\n\r\n .copy{\r\n position:absolute; left:48px; bottom:130px; z-index:5; max-width:540px;\r\n will-change:transform, opacity; pointer-events:none;\r\n }\r\n .copy a{ pointer-events:auto; }\r\n\r\n .eyebrow{\r\n font-family:var(--font-mono); font-size:12px; letter-spacing:0.14em; color:var(--violet);\r\n display:flex; align-items:center; gap:10px; margin-bottom:18px; text-transform:uppercase;\r\n }\r\n .eyebrow .pulse{width:6px; height:6px; border-radius:50%; background:var(--gold); animation:pulse 1.8s ease-in-out infinite; flex-shrink:0;}\r\n @keyframes pulse{0%,100%{opacity:1;} 50%{opacity:0.4;}}\r\n\r\n h1{\r\n font-family:var(--font-display); font-weight:700;\r\n font-size:clamp(26px, 4.8vw, 54px); line-height:1.1; letter-spacing:-0.015em; margin-bottom:18px;\r\n }\r\n h1 .line{display:block;}\r\n h1 .accent{color:var(--cyan);}\r\n\r\n .subhead{ font-size:15px; line-height:1.6; color:var(--muted); margin-bottom:20px; max-width:440px; }\r\n\r\n .hint{\r\n font-family:var(--font-mono); font-size:11.5px; color:var(--gold); margin-bottom:22px;\r\n display:flex; align-items:center; gap:8px; letter-spacing:0.02em;\r\n }\r\n\r\n .cta-row{display:flex; align-items:center; gap:22px; flex-wrap:wrap;}\r\n .btn-primary{\r\n font-family:var(--font-body); font-weight:600; font-size:14.5px; color:#020103; background:var(--cyan);\r\n padding:14px 26px; border-radius:2px; text-decoration:none; display:inline-block;\r\n transition:transform .2s ease, box-shadow .2s ease; text-align:center;\r\n }\r\n .btn-primary:hover{transform:translateY(-2px); box-shadow:0 10px 24px -8px rgba(79,243,224,0.4);}\r\n .btn-secondary{\r\n font-family:var(--font-body); font-weight:500; font-size:14.5px; color:var(--text); text-decoration:none;\r\n border-bottom:1px solid var(--line); padding-bottom:2px; transition:border-color .2s ease;\r\n }\r\n .btn-secondary:hover{border-color:var(--text);}\r\n\r\n .hud{\r\n position:absolute; right:48px; bottom:130px; z-index:5;\r\n font-family:var(--font-mono); text-align:right; pointer-events:none;\r\n }\r\n .hud .label{font-size:10px; letter-spacing:0.13em; color:var(--muted); text-transform:uppercase; margin-bottom:3px; white-space:nowrap;}\r\n .hud .val{font-size:19px; font-weight:500; color:var(--cyan); line-height:1;}\r\n .hud .val.gold{color:var(--gold);}\r\n .hud .row{margin-bottom:11px;}\r\n\r\n \/* ============ MOBILE: normal stacked flow \u2014 copy, then 3D block, then stats ============ *\/\r\n @media (max-width:860px){\r\n .hero{\r\n height:auto; min-height:100svh; overflow:visible;\r\n display:flex; flex-direction:column;\r\n }\r\n nav{ position:relative; padding:20px 20px 4px; }\r\n\r\n .copy{\r\n position:relative; left:auto; right:auto; bottom:auto; top:auto;\r\n max-width:none; padding:18px 22px 0; pointer-events:auto; order:1;\r\n }\r\n .eyebrow{ font-size:11px; margin-bottom:14px; }\r\n .subhead{ font-size:14px; margin-bottom:18px; }\r\n .hint{ font-size:10.5px; white-space:normal; line-height:1.5; }\r\n .cta-row{ flex-direction:column; align-items:stretch; gap:12px; width:100%; margin-bottom:22px; }\r\n .btn-primary{ width:100%; padding:14px 22px; font-size:14px; }\r\n .btn-secondary{ text-align:center; border-bottom:none; padding:4px 0; }\r\n\r\n .canvas-wrap{\r\n position:relative; top:auto; left:auto; right:auto; bottom:auto; z-index:auto;\r\n order:2; width:100%; height:46vh; min-height:300px;\r\n border-top:1px solid var(--line); border-bottom:1px solid var(--line);\r\n }\r\n #scene-canvas{ position:absolute; inset:0; }\r\n .vignette{ display:none; }\r\n\r\n .hud{\r\n position:relative; right:auto; bottom:auto; left:auto; top:auto; order:3;\r\n text-align:left; padding:20px 22px; margin-top:auto;\r\n display:grid; grid-template-columns:repeat(2, auto); gap:14px 26px;\r\n }\r\n .hud .row{ margin-bottom:0; }\r\n }\r\n @media (max-width:420px){\r\n .logo{font-size:15px;}\r\n .nav-cta{font-size:10.5px; padding:8px 12px;}\r\n .hud .label{font-size:9px;}\r\n .hud .val{font-size:16px;}\r\n }\r\n\r\n @media (prefers-reduced-motion: reduce){\r\n .eyebrow .pulse{animation:none;}\r\n html{scroll-behavior:auto;}\r\n }\r\n\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<section class=\"hero\">\r\n <nav>\r\n <div class=\"logo\"><span class=\"dot\"><\/span>Index & Build<\/div>\r\n <ul class=\"nav-links\">\r\n <li><a href=\"#\">Services<\/a><\/li>\r\n <li><a href=\"#\">SEO<\/a><\/li>\r\n <li><a href=\"#\">Portfolio<\/a><\/li>\r\n <li><a href=\"#\">About<\/a><\/li>\r\n <\/ul>\r\n <a href=\"#\" class=\"nav-cta\">Get a free quote \u2197<\/a>\r\n <\/nav>\r\n\r\n <div class=\"copy\" id=\"copy\">\r\n <div class=\"eyebrow\"><span class=\"pulse\"><\/span>Website Development & SEO Services<\/div>\r\n <h1>\r\n <span class=\"line\">Most websites stop at 3D.<\/span>\r\n <span class=\"line accent\">We build in the 4th.<\/span>\r\n <\/h1>\r\n <p class=\"subhead\">Full-service website development and SEO, folded into one build \u2014 clean code, structured data, and a search strategy that rotates your rankings toward the first page.<\/p>\r\n <div class=\"hint\">\u25c6 Drag to rotate manually \u00b7 Scroll folds the W-axis<\/div>\r\n <div class=\"cta-row\">\r\n <a href=\"#\" class=\"btn-primary\">Start your project<\/a>\r\n <a href=\"#\" class=\"btn-secondary\">See our work<\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"canvas-wrap\">\r\n <canvas id=\"scene-canvas\"><\/canvas>\r\n <div class=\"vignette\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"hud\">\r\n <div class=\"row\"><div class=\"label\">W-axis rotation<\/div><div class=\"val\" id=\"hud-w\">000\u00b0<\/div><\/div>\r\n <div class=\"row\"><div class=\"label\">Dimensions active<\/div><div class=\"val\" id=\"hud-dim\">3\/4<\/div><\/div>\r\n <div class=\"row\"><div class=\"label\">Vertices \u00b7 edges<\/div><div class=\"val gold\" id=\"hud-count\">24 \u00b7 56<\/div><\/div>\r\n <div class=\"row\"><div class=\"label\">Control<\/div><div class=\"val gold\" id=\"hud-control\">AUTO<\/div><\/div>\r\n <\/div>\r\n\r\n<\/section>\r\n\r\n<script>\r\n(function(){\r\n var canvas = document.getElementById('scene-canvas');\r\n var ctx = canvas.getContext('2d');\r\n var reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\r\n\r\n var W = 0, H = 0, cx = 0, cy = 0;\r\n var DPR = Math.min(window.devicePixelRatio || 1, 2);\r\n var isMobile = false;\r\n\r\n function resize(){\r\n var wrap = canvas.parentElement;\r\n W = wrap.clientWidth;\r\n H = wrap.clientHeight;\r\n isMobile = window.innerWidth <= 860;\r\n canvas.width = W * DPR;\r\n canvas.height = H * DPR;\r\n canvas.style.width = W + 'px';\r\n canvas.style.height = H + 'px';\r\n ctx.setTransform(DPR, 0, 0, DPR, 0, 0);\r\n cx = isMobile ? W * 0.5 : W * 0.66;\r\n cy = H * 0.5;\r\n }\r\n window.addEventListener('resize', resize);\r\n window.addEventListener('orientationchange', resize);\r\n\r\n var tessVerts = [];\r\n for (var i = 0; i < 16; i++){\r\n tessVerts.push([ (i & 1) ? 1 : -1, (i & 2) ? 1 : -1, (i & 4) ? 1 : -1, (i & 8) ? 1 : -1 ]);\r\n }\r\n var tessEdges = [];\r\n for (var a = 0; a < 16; a++){\r\n for (var b = a + 1; b < 16; b++){\r\n var diff = a ^ b;\r\n if (diff === 1 || diff === 2 || diff === 4 || diff === 8) tessEdges.push([a, b]);\r\n }\r\n }\r\n\r\n var hcVerts = [\r\n [1,0,0,0], [-1,0,0,0],\r\n [0,1,0,0], [0,-1,0,0],\r\n [0,0,1,0], [0,0,-1,0],\r\n [0,0,0,1], [0,0,0,-1]\r\n ];\r\n var hcEdges = [];\r\n for (var c = 0; c < 8; c++){\r\n for (var d = c + 1; d < 8; d++){\r\n if (Math.floor(c \/ 2) !== Math.floor(d \/ 2)) hcEdges.push([c, d]);\r\n }\r\n }\r\n\r\n var starCount = 90;\r\n var stars = [];\r\n (function buildStars(){\r\n for (var i = 0; i < starCount; i++){\r\n stars.push({ x: Math.random(), y: Math.random(), r: 0.5 + Math.random() * 1.2, phase: Math.random() * 6.28 });\r\n }\r\n })();\r\n\r\n function rotate4(v, plane, angle){\r\n var s = Math.sin(angle), co = Math.cos(angle);\r\n var p = v.slice();\r\n var i = plane[0], j = plane[1];\r\n var vi = p[i], vj = p[j];\r\n p[i] = vi * co - vj * s;\r\n p[j] = vi * s + vj * co;\r\n return p;\r\n }\r\n\r\n var mouseX = 0, mouseY = 0, mx = 0, my = 0;\r\n var isDragging = false;\r\n var lastPX = 0, lastPY = 0;\r\n var rotXY = 0.4, rotZW = 0.2;\r\n var lastDragTime = 0;\r\n var dragIsRotation = false;\r\n var dragStartX = 0, dragStartY = 0;\r\n\r\n function onPointerDown(e){\r\n var p = (e.touches ? e.touches[0] : e);\r\n isDragging = true;\r\n dragIsRotation = !e.touches;\r\n canvas.classList.add('dragging');\r\n lastPX = p.clientX;\r\n lastPY = p.clientY;\r\n dragStartX = p.clientX;\r\n dragStartY = p.clientY;\r\n }\r\n function onPointerMove(e){\r\n var p = (e.touches ? e.touches[0] : e);\r\n mouseX = (p.clientX \/ window.innerWidth) * 2 - 1;\r\n mouseY = (p.clientY \/ window.innerHeight) * 2 - 1;\r\n if (isDragging){\r\n if (e.touches && !dragIsRotation){\r\n var totalDx = p.clientX - dragStartX;\r\n var totalDy = p.clientY - dragStartY;\r\n if (Math.abs(totalDx) > Math.abs(totalDy) * 1.4 && Math.abs(totalDx) > 8){\r\n dragIsRotation = true;\r\n } else if (Math.abs(totalDy) > 10){\r\n isDragging = false;\r\n canvas.classList.remove('dragging');\r\n return;\r\n }\r\n }\r\n if (dragIsRotation){\r\n var dx = p.clientX - lastPX;\r\n var dy = p.clientY - lastPY;\r\n rotXY += dx * 0.006;\r\n rotZW += dy * 0.006;\r\n lastDragTime = performance.now();\r\n }\r\n lastPX = p.clientX;\r\n lastPY = p.clientY;\r\n }\r\n }\r\n function onPointerUp(){\r\n isDragging = false;\r\n dragIsRotation = false;\r\n canvas.classList.remove('dragging');\r\n }\r\n canvas.addEventListener('mousedown', onPointerDown);\r\n canvas.addEventListener('touchstart', onPointerDown, { passive: true });\r\n window.addEventListener('mousemove', onPointerMove);\r\n window.addEventListener('touchmove', onPointerMove, { passive: true });\r\n window.addEventListener('mouseup', onPointerUp);\r\n window.addEventListener('touchend', onPointerUp);\r\n\r\n var scrollProgress = 0;\r\n var heroEl = document.querySelector('.hero');\r\n var copyEl = document.getElementById('copy');\r\n var hudW = document.getElementById('hud-w');\r\n var hudDim = document.getElementById('hud-dim');\r\n var hudControl = document.getElementById('hud-control');\r\n\r\n function onScroll(){\r\n var heroHeight = heroEl.offsetHeight || window.innerHeight;\r\n scrollProgress = Math.min(Math.max(window.scrollY \/ heroHeight, 0), 1);\r\n if (!isMobile){\r\n copyEl.style.transform = 'translateY(' + (scrollProgress * -30) + 'px)';\r\n copyEl.style.opacity = String(1 - scrollProgress * 1.3);\r\n } else {\r\n copyEl.style.transform = '';\r\n copyEl.style.opacity = '';\r\n }\r\n hudDim.textContent = scrollProgress > 0.55 ? '4\/4' : '3\/4';\r\n }\r\n window.addEventListener('scroll', onScroll, { passive: true });\r\n\r\n function projectSet(verts, angleYZ, angleXY, angleXW, angleZW, scaleUnit){\r\n return verts.map(function(v){\r\n var p = v;\r\n p = rotate4(p, [1, 2], angleYZ);\r\n p = rotate4(p, [0, 1], angleXY);\r\n p = rotate4(p, [0, 3], angleXW);\r\n p = rotate4(p, [2, 3], angleZW);\r\n\r\n var distW = 3;\r\n var fW = distW \/ (distW - p[3]);\r\n var x3 = p[0] * fW, y3 = p[1] * fW, z3 = p[2] * fW;\r\n\r\n var distZ = 4.2;\r\n var fZ = distZ \/ (distZ - z3);\r\n var sx = cx + x3 * fZ * scaleUnit;\r\n var sy = cy - y3 * fZ * scaleUnit;\r\n\r\n return { sx: sx, sy: sy, depth: p[3] + z3 * 0.5 };\r\n });\r\n }\r\n\r\n function glowLine(p1, p2, coreColor, alpha){\r\n ctx.lineCap = 'round';\r\n ctx.strokeStyle = 'rgba(' + coreColor + ',' + (alpha * 0.12).toFixed(3) + ')';\r\n ctx.lineWidth = 7;\r\n ctx.beginPath(); ctx.moveTo(p1.sx, p1.sy); ctx.lineTo(p2.sx, p2.sy); ctx.stroke();\r\n ctx.strokeStyle = 'rgba(' + coreColor + ',' + (alpha * 0.25).toFixed(3) + ')';\r\n ctx.lineWidth = 3.5;\r\n ctx.beginPath(); ctx.moveTo(p1.sx, p1.sy); ctx.lineTo(p2.sx, p2.sy); ctx.stroke();\r\n ctx.strokeStyle = 'rgba(' + coreColor + ',' + alpha.toFixed(3) + ')';\r\n ctx.lineWidth = 1.1;\r\n ctx.beginPath(); ctx.moveTo(p1.sx, p1.sy); ctx.lineTo(p2.sx, p2.sy); ctx.stroke();\r\n }\r\n\r\n var lastTime = performance.now();\r\n var t = 0;\r\n var fps = 60;\r\n\r\n function draw(){\r\n var now = performance.now();\r\n var dt = Math.min((now - lastTime) \/ 1000, 0.05);\r\n fps += ((1 \/ Math.max(dt, 0.0001)) - fps) * 0.05;\r\n lastTime = now;\r\n t += dt;\r\n\r\n mx += (mouseX - mx) * 0.03;\r\n my += (mouseY - my) * 0.03;\r\n\r\n var recentlyDragged = (now - lastDragTime) < 400;\r\n hudControl.textContent = (isDragging && dragIsRotation) || recentlyDragged ? 'MANUAL' : 'AUTO';\r\n\r\n var idleSpeed = reduceMotion ? 0 : 1;\r\n if (!(isDragging && dragIsRotation)){\r\n rotXY += dt * 0.13 * idleSpeed;\r\n rotZW += dt * 0.08 * idleSpeed;\r\n }\r\n var angleYZ = t * 0.18 * idleSpeed;\r\n var angleXW = scrollProgress * Math.PI * 1.4 + t * 0.05 * idleSpeed + mx * 0.35;\r\n\r\n var wAxisDeg = Math.round(((angleXW % (Math.PI * 2)) \/ (Math.PI * 2)) * 360);\r\n if (wAxisDeg < 0) wAxisDeg += 360;\r\n hudW.textContent = (wAxisDeg < 10 ? '00' : wAxisDeg < 100 ? '0' : '') + wAxisDeg + '\\u00B0';\r\n\r\n var scaleFactor = isMobile ? 0.13 : 0.11;\r\n var scaleUnit = Math.min(W, H) * scaleFactor;\r\n var tessProj = projectSet(tessVerts, angleYZ, rotXY, angleXW, rotZW, scaleUnit);\r\n var hcProj = projectSet(hcVerts, angleYZ, rotXY, angleXW, rotZW, scaleUnit * 1.55);\r\n\r\n ctx.clearRect(0, 0, W, H);\r\n ctx.fillStyle = '#020103';\r\n ctx.fillRect(0, 0, W, H);\r\n\r\n for (var si = 0; si < starCount; si++){\r\n var st = stars[si];\r\n var flicker = 0.3 + Math.sin(t * 1.2 + st.phase) * 0.3;\r\n ctx.fillStyle = 'rgba(139,92,246,' + Math.max(0, flicker * 0.5).toFixed(3) + ')';\r\n ctx.beginPath();\r\n ctx.arc(st.x * W, st.y * H, st.r, 0, Math.PI * 2);\r\n ctx.fill();\r\n }\r\n\r\n ctx.globalCompositeOperation = 'lighter';\r\n\r\n var allDepths = tessProj.concat(hcProj).map(function(p){ return p.depth; });\r\n var minDepth = Math.min.apply(null, allDepths);\r\n var maxDepth = Math.max.apply(null, allDepths);\r\n var depthRange = Math.max(0.001, maxDepth - minDepth);\r\n\r\n hcEdges.forEach(function(e){\r\n var p1 = hcProj[e[0]], p2 = hcProj[e[1]];\r\n var avgDepth = (p1.depth + p2.depth) \/ 2;\r\n var norm = (avgDepth - minDepth) \/ depthRange;\r\n glowLine(p1, p2, '245,199,126', 0.14 + norm * 0.3);\r\n });\r\n\r\n tessEdges.forEach(function(e){\r\n var p1 = tessProj[e[0]], p2 = tessProj[e[1]];\r\n var avgDepth = (p1.depth + p2.depth) \/ 2;\r\n var norm = (avgDepth - minDepth) \/ depthRange;\r\n var alpha = 0.2 + norm * 0.6;\r\n var offset = 1.2 + norm * 1.5;\r\n\r\n ctx.lineWidth = 1;\r\n ctx.strokeStyle = 'rgba(255,60,90,' + (alpha * 0.7).toFixed(3) + ')';\r\n ctx.beginPath(); ctx.moveTo(p1.sx - offset, p1.sy); ctx.lineTo(p2.sx - offset, p2.sy); ctx.stroke();\r\n ctx.strokeStyle = 'rgba(60,255,180,' + (alpha * 0.7).toFixed(3) + ')';\r\n ctx.beginPath(); ctx.moveTo(p1.sx, p1.sy - offset * 0.6); ctx.lineTo(p2.sx, p2.sy - offset * 0.6); ctx.stroke();\r\n ctx.strokeStyle = 'rgba(90,140,255,' + (alpha * 0.7).toFixed(3) + ')';\r\n ctx.beginPath(); ctx.moveTo(p1.sx + offset, p1.sy); ctx.lineTo(p2.sx + offset, p2.sy); ctx.stroke();\r\n\r\n glowLine(p1, p2, '240,245,255', alpha);\r\n });\r\n\r\n tessProj.concat(hcProj).forEach(function(p, idx){\r\n var norm = (p.depth - minDepth) \/ depthRange;\r\n var r = 1.5 + norm * 2.2;\r\n var isHc = idx >= tessProj.length;\r\n var color = isHc ? '245,199,126' : '200,230,255';\r\n var glow = ctx.createRadialGradient(p.sx, p.sy, 0, p.sx, p.sy, r * 5);\r\n glow.addColorStop(0, 'rgba(' + color + ',' + (0.5 + norm * 0.4).toFixed(3) + ')');\r\n glow.addColorStop(1, 'rgba(' + color + ',0)');\r\n ctx.fillStyle = glow;\r\n ctx.beginPath(); ctx.arc(p.sx, p.sy, r * 5, 0, Math.PI * 2); ctx.fill();\r\n ctx.fillStyle = 'rgba(255,255,255,0.95)';\r\n ctx.beginPath(); ctx.arc(p.sx, p.sy, r, 0, Math.PI * 2); ctx.fill();\r\n });\r\n\r\n ctx.globalCompositeOperation = 'source-over';\r\n\r\n requestAnimationFrame(draw);\r\n }\r\n\r\n resize();\r\n onScroll();\r\n requestAnimationFrame(draw);\r\n})();\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-0065bd7 e-con e-atomic-element e-flexbox-base e-15063ac \" data-id=\"0065bd7\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"0065bd7\">\n \t\t<div class=\"elementor-element elementor-element-fe20b34 elementor-widget elementor-widget-html\" data-id=\"fe20b34\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<section class=\"fullscreen-video-section\">\r\n <div class=\"video-wrapper\">\r\n <video autoplay muted loop playsinline class=\"fullscreen-video\">\r\n <source src=\"https:\/\/files.peachworlds.com\/website\/0e5f237e-0e45-4db9-8798-8e340bff43f0\/peachwebsitevideo-2b.mp4\" type=\"video\/mp4\">\r\n <\/video>\r\n <\/div>\r\n<\/section>\r\n\r\n<style>\r\n.fullscreen-video-section {\r\n position: relative;\r\n width: 100%;\r\n height: 100vh;\r\n overflow: hidden;\r\n margin: 0;\r\n padding: 0;\r\n}\r\n\r\n.video-wrapper {\r\n position: absolute;\r\n inset: 0;\r\n overflow: hidden;\r\n}\r\n\r\n.fullscreen-video {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n width: 100%;\r\n height: 120%;\r\n object-fit: cover;\r\n transform: translate(-50%, -50%);\r\n will-change: transform;\r\n transition: transform 0.1s linear;\r\n}\r\n\r\nbody, html {\r\n margin: 0;\r\n padding: 0;\r\n}\r\n<\/style>\r\n\r\n<script>\r\nconst video = document.querySelector('.fullscreen-video');\r\n\r\nwindow.addEventListener('scroll', () => {\r\n const scrolled = window.pageYOffset;\r\n video.style.transform = `translate(-50%, calc(-50% + ${scrolled * 0.15}px))`;\r\n});\r\n<\/script>\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Index & Build \u2014 SEO & Web Development Studio Index & Build Services SEO Portfolio About Get a free quote \u2197 Website Development & SEO Services Most websites stop at 3D. We build in the 4th. Full-service website development and SEO, folded into one build \u2014 clean code, structured data, and a search strategy that rotates your […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-7","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/themealvar.com\/index.php?rest_route=\/wp\/v2\/pages\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themealvar.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/themealvar.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/themealvar.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themealvar.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=7"}],"version-history":[{"count":6,"href":"https:\/\/themealvar.com\/index.php?rest_route=\/wp\/v2\/pages\/7\/revisions"}],"predecessor-version":[{"id":29,"href":"https:\/\/themealvar.com\/index.php?rest_route=\/wp\/v2\/pages\/7\/revisions\/29"}],"wp:attachment":[{"href":"https:\/\/themealvar.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n \t\t

\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\nIndex & Build \u2014 SEO & Web Development Studio<\/title>\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n :root{\r\n --bg:#020103;\r\n --line:rgba(232,234,240,0.1);\r\n --text:#F0F1F7;\r\n --muted:#8A8AA0;\r\n --violet:#8B5CF6;\r\n --cyan:#4FF3E0;\r\n --gold:#F5C77E;\r\n --font-display:'Space Grotesk', sans-serif;\r\n --font-body:'Inter', sans-serif;\r\n --font-mono:'JetBrains Mono', monospace;\r\n }\r\n *{box-sizing:border-box; margin:0; padding:0;}\r\n html{scroll-behavior:smooth;}\r\n body{background:var(--bg); color:var(--text); font-family:var(--font-body); overflow-x:hidden;}\r\n\r\n \/* ============ DESKTOP: full-bleed canvas behind overlaid text ============ *\/\r\n .hero{position:relative; height:100vh; height:100svh; min-height:560px; width:100%; overflow:hidden; background:var(--bg);}\r\n #scene-canvas{position:absolute; inset:0; width:100%; height:100%; display:block; z-index:1; cursor:grab; touch-action:pan-y;}\r\n #scene-canvas.dragging{cursor:grabbing;}\r\n .vignette{\r\n position:absolute; inset:0; z-index:2; pointer-events:none;\r\n background:\r\n radial-gradient(ellipse 60% 70% at 15% 55%, rgba(2,1,3,0.86) 0%, transparent 60%),\r\n linear-gradient(180deg, rgba(2,1,3,0.5) 0%, rgba(2,1,3,0) 25%, rgba(2,1,3,0) 62%, rgba(2,1,3,0.6) 100%);\r\n }\r\n\r\n .canvas-wrap{\r\n position:absolute; top:0; left:0; right:0; bottom:0; z-index:1;\r\n }\r\n\r\n nav{\r\n position:absolute; top:0; left:0; right:0; z-index:6;\r\n display:flex; align-items:center; justify-content:space-between;\r\n padding:28px 48px;\r\n }\r\n .logo{font-family:var(--font-display); font-weight:600; font-size:18px; display:flex; align-items:center; gap:9px;}\r\n .logo .dot{width:7px; height:7px; border-radius:50%; background:var(--cyan); box-shadow:0 0 8px 1px var(--cyan);}\r\n .nav-links{display:flex; gap:36px; list-style:none; font-size:14px; color:var(--muted);}\r\n .nav-links a{color:inherit; text-decoration:none;}\r\n .nav-links a:hover{color:var(--text);}\r\n .nav-cta{\r\n font-family:var(--font-mono); font-size:12px; color:var(--text);\r\n border:1px solid var(--line); padding:9px 16px; border-radius:2px;\r\n text-decoration:none; letter-spacing:0.02em; transition:border-color .2s ease, background .2s ease;\r\n white-space:nowrap;\r\n }\r\n .nav-cta:hover{border-color:var(--cyan); background:rgba(79,243,224,0.08);}\r\n @media (max-width:860px){ .nav-links{display:none;} }\r\n\r\n .copy{\r\n position:absolute; left:48px; bottom:130px; z-index:5; max-width:540px;\r\n will-change:transform, opacity; pointer-events:none;\r\n }\r\n .copy a{ pointer-events:auto; }\r\n\r\n .eyebrow{\r\n font-family:var(--font-mono); font-size:12px; letter-spacing:0.14em; color:var(--violet);\r\n display:flex; align-items:center; gap:10px; margin-bottom:18px; text-transform:uppercase;\r\n }\r\n .eyebrow .pulse{width:6px; height:6px; border-radius:50%; background:var(--gold); animation:pulse 1.8s ease-in-out infinite; flex-shrink:0;}\r\n @keyframes pulse{0%,100%{opacity:1;} 50%{opacity:0.4;}}\r\n\r\n h1{\r\n font-family:var(--font-display); font-weight:700;\r\n font-size:clamp(26px, 4.8vw, 54px); line-height:1.1; letter-spacing:-0.015em; margin-bottom:18px;\r\n }\r\n h1 .line{display:block;}\r\n h1 .accent{color:var(--cyan);}\r\n\r\n .subhead{ font-size:15px; line-height:1.6; color:var(--muted); margin-bottom:20px; max-width:440px; }\r\n\r\n .hint{\r\n font-family:var(--font-mono); font-size:11.5px; color:var(--gold); margin-bottom:22px;\r\n display:flex; align-items:center; gap:8px; letter-spacing:0.02em;\r\n }\r\n\r\n .cta-row{display:flex; align-items:center; gap:22px; flex-wrap:wrap;}\r\n .btn-primary{\r\n font-family:var(--font-body); font-weight:600; font-size:14.5px; color:#020103; background:var(--cyan);\r\n padding:14px 26px; border-radius:2px; text-decoration:none; display:inline-block;\r\n transition:transform .2s ease, box-shadow .2s ease; text-align:center;\r\n }\r\n .btn-primary:hover{transform:translateY(-2px); box-shadow:0 10px 24px -8px rgba(79,243,224,0.4);}\r\n .btn-secondary{\r\n font-family:var(--font-body); font-weight:500; font-size:14.5px; color:var(--text); text-decoration:none;\r\n border-bottom:1px solid var(--line); padding-bottom:2px; transition:border-color .2s ease;\r\n }\r\n .btn-secondary:hover{border-color:var(--text);}\r\n\r\n .hud{\r\n position:absolute; right:48px; bottom:130px; z-index:5;\r\n font-family:var(--font-mono); text-align:right; pointer-events:none;\r\n }\r\n .hud .label{font-size:10px; letter-spacing:0.13em; color:var(--muted); text-transform:uppercase; margin-bottom:3px; white-space:nowrap;}\r\n .hud .val{font-size:19px; font-weight:500; color:var(--cyan); line-height:1;}\r\n .hud .val.gold{color:var(--gold);}\r\n .hud .row{margin-bottom:11px;}\r\n\r\n \/* ============ MOBILE: normal stacked flow \u2014 copy, then 3D block, then stats ============ *\/\r\n @media (max-width:860px){\r\n .hero{\r\n height:auto; min-height:100svh; overflow:visible;\r\n display:flex; flex-direction:column;\r\n }\r\n nav{ position:relative; padding:20px 20px 4px; }\r\n\r\n .copy{\r\n position:relative; left:auto; right:auto; bottom:auto; top:auto;\r\n max-width:none; padding:18px 22px 0; pointer-events:auto; order:1;\r\n }\r\n .eyebrow{ font-size:11px; margin-bottom:14px; }\r\n .subhead{ font-size:14px; margin-bottom:18px; }\r\n .hint{ font-size:10.5px; white-space:normal; line-height:1.5; }\r\n .cta-row{ flex-direction:column; align-items:stretch; gap:12px; width:100%; margin-bottom:22px; }\r\n .btn-primary{ width:100%; padding:14px 22px; font-size:14px; }\r\n .btn-secondary{ text-align:center; border-bottom:none; padding:4px 0; }\r\n\r\n .canvas-wrap{\r\n position:relative; top:auto; left:auto; right:auto; bottom:auto; z-index:auto;\r\n order:2; width:100%; height:46vh; min-height:300px;\r\n border-top:1px solid var(--line); border-bottom:1px solid var(--line);\r\n }\r\n #scene-canvas{ position:absolute; inset:0; }\r\n .vignette{ display:none; }\r\n\r\n .hud{\r\n position:relative; right:auto; bottom:auto; left:auto; top:auto; order:3;\r\n text-align:left; padding:20px 22px; margin-top:auto;\r\n display:grid; grid-template-columns:repeat(2, auto); gap:14px 26px;\r\n }\r\n .hud .row{ margin-bottom:0; }\r\n }\r\n @media (max-width:420px){\r\n .logo{font-size:15px;}\r\n .nav-cta{font-size:10.5px; padding:8px 12px;}\r\n .hud .label{font-size:9px;}\r\n .hud .val{font-size:16px;}\r\n }\r\n\r\n @media (prefers-reduced-motion: reduce){\r\n .eyebrow .pulse{animation:none;}\r\n html{scroll-behavior:auto;}\r\n }\r\n\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<section class=\"hero\">\r\n <nav>\r\n <div class=\"logo\"><span class=\"dot\"><\/span>Index & Build<\/div>\r\n <ul class=\"nav-links\">\r\n <li><a href=\"#\">Services<\/a><\/li>\r\n <li><a href=\"#\">SEO<\/a><\/li>\r\n <li><a href=\"#\">Portfolio<\/a><\/li>\r\n <li><a href=\"#\">About<\/a><\/li>\r\n <\/ul>\r\n <a href=\"#\" class=\"nav-cta\">Get a free quote \u2197<\/a>\r\n <\/nav>\r\n\r\n <div class=\"copy\" id=\"copy\">\r\n <div class=\"eyebrow\"><span class=\"pulse\"><\/span>Website Development & SEO Services<\/div>\r\n <h1>\r\n <span class=\"line\">Most websites stop at 3D.<\/span>\r\n <span class=\"line accent\">We build in the 4th.<\/span>\r\n <\/h1>\r\n <p class=\"subhead\">Full-service website development and SEO, folded into one build \u2014 clean code, structured data, and a search strategy that rotates your rankings toward the first page.<\/p>\r\n <div class=\"hint\">\u25c6 Drag to rotate manually \u00b7 Scroll folds the W-axis<\/div>\r\n <div class=\"cta-row\">\r\n <a href=\"#\" class=\"btn-primary\">Start your project<\/a>\r\n <a href=\"#\" class=\"btn-secondary\">See our work<\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"canvas-wrap\">\r\n <canvas id=\"scene-canvas\"><\/canvas>\r\n <div class=\"vignette\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"hud\">\r\n <div class=\"row\"><div class=\"label\">W-axis rotation<\/div><div class=\"val\" id=\"hud-w\">000\u00b0<\/div><\/div>\r\n <div class=\"row\"><div class=\"label\">Dimensions active<\/div><div class=\"val\" id=\"hud-dim\">3\/4<\/div><\/div>\r\n <div class=\"row\"><div class=\"label\">Vertices \u00b7 edges<\/div><div class=\"val gold\" id=\"hud-count\">24 \u00b7 56<\/div><\/div>\r\n <div class=\"row\"><div class=\"label\">Control<\/div><div class=\"val gold\" id=\"hud-control\">AUTO<\/div><\/div>\r\n <\/div>\r\n\r\n<\/section>\r\n\r\n<script>\r\n(function(){\r\n var canvas = document.getElementById('scene-canvas');\r\n var ctx = canvas.getContext('2d');\r\n var reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\r\n\r\n var W = 0, H = 0, cx = 0, cy = 0;\r\n var DPR = Math.min(window.devicePixelRatio || 1, 2);\r\n var isMobile = false;\r\n\r\n function resize(){\r\n var wrap = canvas.parentElement;\r\n W = wrap.clientWidth;\r\n H = wrap.clientHeight;\r\n isMobile = window.innerWidth <= 860;\r\n canvas.width = W * DPR;\r\n canvas.height = H * DPR;\r\n canvas.style.width = W + 'px';\r\n canvas.style.height = H + 'px';\r\n ctx.setTransform(DPR, 0, 0, DPR, 0, 0);\r\n cx = isMobile ? W * 0.5 : W * 0.66;\r\n cy = H * 0.5;\r\n }\r\n window.addEventListener('resize', resize);\r\n window.addEventListener('orientationchange', resize);\r\n\r\n var tessVerts = [];\r\n for (var i = 0; i < 16; i++){\r\n tessVerts.push([ (i & 1) ? 1 : -1, (i & 2) ? 1 : -1, (i & 4) ? 1 : -1, (i & 8) ? 1 : -1 ]);\r\n }\r\n var tessEdges = [];\r\n for (var a = 0; a < 16; a++){\r\n for (var b = a + 1; b < 16; b++){\r\n var diff = a ^ b;\r\n if (diff === 1 || diff === 2 || diff === 4 || diff === 8) tessEdges.push([a, b]);\r\n }\r\n }\r\n\r\n var hcVerts = [\r\n [1,0,0,0], [-1,0,0,0],\r\n [0,1,0,0], [0,-1,0,0],\r\n [0,0,1,0], [0,0,-1,0],\r\n [0,0,0,1], [0,0,0,-1]\r\n ];\r\n var hcEdges = [];\r\n for (var c = 0; c < 8; c++){\r\n for (var d = c + 1; d < 8; d++){\r\n if (Math.floor(c \/ 2) !== Math.floor(d \/ 2)) hcEdges.push([c, d]);\r\n }\r\n }\r\n\r\n var starCount = 90;\r\n var stars = [];\r\n (function buildStars(){\r\n for (var i = 0; i < starCount; i++){\r\n stars.push({ x: Math.random(), y: Math.random(), r: 0.5 + Math.random() * 1.2, phase: Math.random() * 6.28 });\r\n }\r\n })();\r\n\r\n function rotate4(v, plane, angle){\r\n var s = Math.sin(angle), co = Math.cos(angle);\r\n var p = v.slice();\r\n var i = plane[0], j = plane[1];\r\n var vi = p[i], vj = p[j];\r\n p[i] = vi * co - vj * s;\r\n p[j] = vi * s + vj * co;\r\n return p;\r\n }\r\n\r\n var mouseX = 0, mouseY = 0, mx = 0, my = 0;\r\n var isDragging = false;\r\n var lastPX = 0, lastPY = 0;\r\n var rotXY = 0.4, rotZW = 0.2;\r\n var lastDragTime = 0;\r\n var dragIsRotation = false;\r\n var dragStartX = 0, dragStartY = 0;\r\n\r\n function onPointerDown(e){\r\n var p = (e.touches ? e.touches[0] : e);\r\n isDragging = true;\r\n dragIsRotation = !e.touches;\r\n canvas.classList.add('dragging');\r\n lastPX = p.clientX;\r\n lastPY = p.clientY;\r\n dragStartX = p.clientX;\r\n dragStartY = p.clientY;\r\n }\r\n function onPointerMove(e){\r\n var p = (e.touches ? e.touches[0] : e);\r\n mouseX = (p.clientX \/ window.innerWidth) * 2 - 1;\r\n mouseY = (p.clientY \/ window.innerHeight) * 2 - 1;\r\n if (isDragging){\r\n if (e.touches && !dragIsRotation){\r\n var totalDx = p.clientX - dragStartX;\r\n var totalDy = p.clientY - dragStartY;\r\n if (Math.abs(totalDx) > Math.abs(totalDy) * 1.4 && Math.abs(totalDx) > 8){\r\n dragIsRotation = true;\r\n } else if (Math.abs(totalDy) > 10){\r\n isDragging = false;\r\n canvas.classList.remove('dragging');\r\n return;\r\n }\r\n }\r\n if (dragIsRotation){\r\n var dx = p.clientX - lastPX;\r\n var dy = p.clientY - lastPY;\r\n rotXY += dx * 0.006;\r\n rotZW += dy * 0.006;\r\n lastDragTime = performance.now();\r\n }\r\n lastPX = p.clientX;\r\n lastPY = p.clientY;\r\n }\r\n }\r\n function onPointerUp(){\r\n isDragging = false;\r\n dragIsRotation = false;\r\n canvas.classList.remove('dragging');\r\n }\r\n canvas.addEventListener('mousedown', onPointerDown);\r\n canvas.addEventListener('touchstart', onPointerDown, { passive: true });\r\n window.addEventListener('mousemove', onPointerMove);\r\n window.addEventListener('touchmove', onPointerMove, { passive: true });\r\n window.addEventListener('mouseup', onPointerUp);\r\n window.addEventListener('touchend', onPointerUp);\r\n\r\n var scrollProgress = 0;\r\n var heroEl = document.querySelector('.hero');\r\n var copyEl = document.getElementById('copy');\r\n var hudW = document.getElementById('hud-w');\r\n var hudDim = document.getElementById('hud-dim');\r\n var hudControl = document.getElementById('hud-control');\r\n\r\n function onScroll(){\r\n var heroHeight = heroEl.offsetHeight || window.innerHeight;\r\n scrollProgress = Math.min(Math.max(window.scrollY \/ heroHeight, 0), 1);\r\n if (!isMobile){\r\n copyEl.style.transform = 'translateY(' + (scrollProgress * -30) + 'px)';\r\n copyEl.style.opacity = String(1 - scrollProgress * 1.3);\r\n } else {\r\n copyEl.style.transform = '';\r\n copyEl.style.opacity = '';\r\n }\r\n hudDim.textContent = scrollProgress > 0.55 ? '4\/4' : '3\/4';\r\n }\r\n window.addEventListener('scroll', onScroll, { passive: true });\r\n\r\n function projectSet(verts, angleYZ, angleXY, angleXW, angleZW, scaleUnit){\r\n return verts.map(function(v){\r\n var p = v;\r\n p = rotate4(p, [1, 2], angleYZ);\r\n p = rotate4(p, [0, 1], angleXY);\r\n p = rotate4(p, [0, 3], angleXW);\r\n p = rotate4(p, [2, 3], angleZW);\r\n\r\n var distW = 3;\r\n var fW = distW \/ (distW - p[3]);\r\n var x3 = p[0] * fW, y3 = p[1] * fW, z3 = p[2] * fW;\r\n\r\n var distZ = 4.2;\r\n var fZ = distZ \/ (distZ - z3);\r\n var sx = cx + x3 * fZ * scaleUnit;\r\n var sy = cy - y3 * fZ * scaleUnit;\r\n\r\n return { sx: sx, sy: sy, depth: p[3] + z3 * 0.5 };\r\n });\r\n }\r\n\r\n function glowLine(p1, p2, coreColor, alpha){\r\n ctx.lineCap = 'round';\r\n ctx.strokeStyle = 'rgba(' + coreColor + ',' + (alpha * 0.12).toFixed(3) + ')';\r\n ctx.lineWidth = 7;\r\n ctx.beginPath(); ctx.moveTo(p1.sx, p1.sy); ctx.lineTo(p2.sx, p2.sy); ctx.stroke();\r\n ctx.strokeStyle = 'rgba(' + coreColor + ',' + (alpha * 0.25).toFixed(3) + ')';\r\n ctx.lineWidth = 3.5;\r\n ctx.beginPath(); ctx.moveTo(p1.sx, p1.sy); ctx.lineTo(p2.sx, p2.sy); ctx.stroke();\r\n ctx.strokeStyle = 'rgba(' + coreColor + ',' + alpha.toFixed(3) + ')';\r\n ctx.lineWidth = 1.1;\r\n ctx.beginPath(); ctx.moveTo(p1.sx, p1.sy); ctx.lineTo(p2.sx, p2.sy); ctx.stroke();\r\n }\r\n\r\n var lastTime = performance.now();\r\n var t = 0;\r\n var fps = 60;\r\n\r\n function draw(){\r\n var now = performance.now();\r\n var dt = Math.min((now - lastTime) \/ 1000, 0.05);\r\n fps += ((1 \/ Math.max(dt, 0.0001)) - fps) * 0.05;\r\n lastTime = now;\r\n t += dt;\r\n\r\n mx += (mouseX - mx) * 0.03;\r\n my += (mouseY - my) * 0.03;\r\n\r\n var recentlyDragged = (now - lastDragTime) < 400;\r\n hudControl.textContent = (isDragging && dragIsRotation) || recentlyDragged ? 'MANUAL' : 'AUTO';\r\n\r\n var idleSpeed = reduceMotion ? 0 : 1;\r\n if (!(isDragging && dragIsRotation)){\r\n rotXY += dt * 0.13 * idleSpeed;\r\n rotZW += dt * 0.08 * idleSpeed;\r\n }\r\n var angleYZ = t * 0.18 * idleSpeed;\r\n var angleXW = scrollProgress * Math.PI * 1.4 + t * 0.05 * idleSpeed + mx * 0.35;\r\n\r\n var wAxisDeg = Math.round(((angleXW % (Math.PI * 2)) \/ (Math.PI * 2)) * 360);\r\n if (wAxisDeg < 0) wAxisDeg += 360;\r\n hudW.textContent = (wAxisDeg < 10 ? '00' : wAxisDeg < 100 ? '0' : '') + wAxisDeg + '\\u00B0';\r\n\r\n var scaleFactor = isMobile ? 0.13 : 0.11;\r\n var scaleUnit = Math.min(W, H) * scaleFactor;\r\n var tessProj = projectSet(tessVerts, angleYZ, rotXY, angleXW, rotZW, scaleUnit);\r\n var hcProj = projectSet(hcVerts, angleYZ, rotXY, angleXW, rotZW, scaleUnit * 1.55);\r\n\r\n ctx.clearRect(0, 0, W, H);\r\n ctx.fillStyle = '#020103';\r\n ctx.fillRect(0, 0, W, H);\r\n\r\n for (var si = 0; si < starCount; si++){\r\n var st = stars[si];\r\n var flicker = 0.3 + Math.sin(t * 1.2 + st.phase) * 0.3;\r\n ctx.fillStyle = 'rgba(139,92,246,' + Math.max(0, flicker * 0.5).toFixed(3) + ')';\r\n ctx.beginPath();\r\n ctx.arc(st.x * W, st.y * H, st.r, 0, Math.PI * 2);\r\n ctx.fill();\r\n }\r\n\r\n ctx.globalCompositeOperation = 'lighter';\r\n\r\n var allDepths = tessProj.concat(hcProj).map(function(p){ return p.depth; });\r\n var minDepth = Math.min.apply(null, allDepths);\r\n var maxDepth = Math.max.apply(null, allDepths);\r\n var depthRange = Math.max(0.001, maxDepth - minDepth);\r\n\r\n hcEdges.forEach(function(e){\r\n var p1 = hcProj[e[0]], p2 = hcProj[e[1]];\r\n var avgDepth = (p1.depth + p2.depth) \/ 2;\r\n var norm = (avgDepth - minDepth) \/ depthRange;\r\n glowLine(p1, p2, '245,199,126', 0.14 + norm * 0.3);\r\n });\r\n\r\n tessEdges.forEach(function(e){\r\n var p1 = tessProj[e[0]], p2 = tessProj[e[1]];\r\n var avgDepth = (p1.depth + p2.depth) \/ 2;\r\n var norm = (avgDepth - minDepth) \/ depthRange;\r\n var alpha = 0.2 + norm * 0.6;\r\n var offset = 1.2 + norm * 1.5;\r\n\r\n ctx.lineWidth = 1;\r\n ctx.strokeStyle = 'rgba(255,60,90,' + (alpha * 0.7).toFixed(3) + ')';\r\n ctx.beginPath(); ctx.moveTo(p1.sx - offset, p1.sy); ctx.lineTo(p2.sx - offset, p2.sy); ctx.stroke();\r\n ctx.strokeStyle = 'rgba(60,255,180,' + (alpha * 0.7).toFixed(3) + ')';\r\n ctx.beginPath(); ctx.moveTo(p1.sx, p1.sy - offset * 0.6); ctx.lineTo(p2.sx, p2.sy - offset * 0.6); ctx.stroke();\r\n ctx.strokeStyle = 'rgba(90,140,255,' + (alpha * 0.7).toFixed(3) + ')';\r\n ctx.beginPath(); ctx.moveTo(p1.sx + offset, p1.sy); ctx.lineTo(p2.sx + offset, p2.sy); ctx.stroke();\r\n\r\n glowLine(p1, p2, '240,245,255', alpha);\r\n });\r\n\r\n tessProj.concat(hcProj).forEach(function(p, idx){\r\n var norm = (p.depth - minDepth) \/ depthRange;\r\n var r = 1.5 + norm * 2.2;\r\n var isHc = idx >= tessProj.length;\r\n var color = isHc ? '245,199,126' : '200,230,255';\r\n var glow = ctx.createRadialGradient(p.sx, p.sy, 0, p.sx, p.sy, r * 5);\r\n glow.addColorStop(0, 'rgba(' + color + ',' + (0.5 + norm * 0.4).toFixed(3) + ')');\r\n glow.addColorStop(1, 'rgba(' + color + ',0)');\r\n ctx.fillStyle = glow;\r\n ctx.beginPath(); ctx.arc(p.sx, p.sy, r * 5, 0, Math.PI * 2); ctx.fill();\r\n ctx.fillStyle = 'rgba(255,255,255,0.95)';\r\n ctx.beginPath(); ctx.arc(p.sx, p.sy, r, 0, Math.PI * 2); ctx.fill();\r\n });\r\n\r\n ctx.globalCompositeOperation = 'source-over';\r\n\r\n requestAnimationFrame(draw);\r\n }\r\n\r\n resize();\r\n onScroll();\r\n requestAnimationFrame(draw);\r\n})();\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-0065bd7 e-con e-atomic-element e-flexbox-base e-15063ac \" data-id=\"0065bd7\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"0065bd7\">\n \t\t<div class=\"elementor-element elementor-element-fe20b34 elementor-widget elementor-widget-html\" data-id=\"fe20b34\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<section class=\"fullscreen-video-section\">\r\n <div class=\"video-wrapper\">\r\n <video autoplay muted loop playsinline class=\"fullscreen-video\">\r\n <source src=\"https:\/\/files.peachworlds.com\/website\/0e5f237e-0e45-4db9-8798-8e340bff43f0\/peachwebsitevideo-2b.mp4\" type=\"video\/mp4\">\r\n <\/video>\r\n <\/div>\r\n<\/section>\r\n\r\n<style>\r\n.fullscreen-video-section {\r\n position: relative;\r\n width: 100%;\r\n height: 100vh;\r\n overflow: hidden;\r\n margin: 0;\r\n padding: 0;\r\n}\r\n\r\n.video-wrapper {\r\n position: absolute;\r\n inset: 0;\r\n overflow: hidden;\r\n}\r\n\r\n.fullscreen-video {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n width: 100%;\r\n height: 120%;\r\n object-fit: cover;\r\n transform: translate(-50%, -50%);\r\n will-change: transform;\r\n transition: transform 0.1s linear;\r\n}\r\n\r\nbody, html {\r\n margin: 0;\r\n padding: 0;\r\n}\r\n<\/style>\r\n\r\n<script>\r\nconst video = document.querySelector('.fullscreen-video');\r\n\r\nwindow.addEventListener('scroll', () => {\r\n const scrolled = window.pageYOffset;\r\n video.style.transform = `translate(-50%, calc(-50% + ${scrolled * 0.15}px))`;\r\n});\r\n<\/script>\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Index & Build \u2014 SEO & Web Development Studio Index & Build Services SEO Portfolio About Get a free quote \u2197 Website Development & SEO Services Most websites stop at 3D. We build in the 4th. Full-service website development and SEO, folded into one build \u2014 clean code, structured data, and a search strategy that rotates your […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-7","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/themealvar.com\/index.php?rest_route=\/wp\/v2\/pages\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themealvar.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/themealvar.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/themealvar.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themealvar.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=7"}],"version-history":[{"count":6,"href":"https:\/\/themealvar.com\/index.php?rest_route=\/wp\/v2\/pages\/7\/revisions"}],"predecessor-version":[{"id":29,"href":"https:\/\/themealvar.com\/index.php?rest_route=\/wp\/v2\/pages\/7\/revisions\/29"}],"wp:attachment":[{"href":"https:\/\/themealvar.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}