ARCMID Loading<\/title>\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n background: #1a1816; \/* very dark version of your palette *\/\n overflow: hidden;\n font-family: 'Inter', system-ui, -apple-system, sans-serif;\n }\n\n #arcmid-loader {\n position: fixed;\n inset: 0;\n z-index: 99999;\n display: flex;\n align-items: center;\n justify-content: center;\n background: #1a1816;\n transition: opacity 0.8s ease, visibility 0.8s ease;\n }\n\n #arcmid-loader.fade-out {\n opacity: 0;\n visibility: hidden;\n pointer-events: none;\n }\n\n #canvas-wrapper {\n width: 100%;\n height: 180px;\n max-width: 900px;\n position: relative;\n }\n\n canvas {\n display: block;\n width: 100%;\n height: 100%;\n }\n\n \/* Optional subtle brand mark under the text *\/\n .brand-sub {\n position: absolute;\n bottom: -40px;\n left: 50%;\n transform: translateX(-50%);\n color: #60564d;\n font-size: 11px;\n letter-spacing: 0.35em;\n text-transform: uppercase;\n opacity: 0.6;\n font-weight: 400;\n }\n <\/style>\n\n\n <div id=\"arcmid-loader\">\n <div id=\"canvas-wrapper\">\n <canvas id=\"vapor-canvas\"><\/canvas>\n <div class=\"brand-sub\">ARCMID<\/div>\n <\/div>\n <\/div>\n\n <script>\n \/\/ ========== CONFIG ==========\n const TEXTS = [\"ARCMID\"]; \/\/ You can add more words if you want cycling\n const FONT_FAMILY = \"Inter, system-ui, sans-serif\";\n const FONT_SIZE = 180; \/\/ px\n const FONT_WEIGHT = 600;\n const COLOR = \"rgb(125, 115, 105)\"; \/\/ #7d7369\n const SPREAD = 4.5;\n const DENSITY = 6;\n const VAPORIZE_DURATION = 2.2; \/\/ seconds\n const FADE_IN_DURATION = 1.0;\n const WAIT_DURATION = 0.6;\n const DIRECTION = \"left-to-right\"; \/\/ or \"right-to-left\"\n const ALIGNMENT = \"center\";\n\n \/\/ When the whole loading sequence is finished \u2192 hide the loader\n const TOTAL_CYCLES = 1; \/\/ how many times the text vaporizes before finishing\n \/\/ ============================\n\n const canvas = document.getElementById(\"vapor-canvas\");\n const wrapper = document.getElementById(\"canvas-wrapper\");\n const loader = document.getElementById(\"arcmid-loader\");\n\n let particles = [];\n let textBoundaries = null;\n let currentTextIndex = 0;\n let animationState = \"static\"; \/\/ static | vaporizing | fadingIn | waiting\n let vaporizeProgress = 0;\n let fadeOpacity = 0;\n let cycleCount = 0;\n let animationId = null;\n let lastTime = 0;\n let dpr = Math.min(window.devicePixelRatio * 1.5 || 1.5, 2.5);\n\n \/\/ ---------- Helpers ----------\n function transformValue(input, inputRange, outputRange, clamp = false) {\n const [inMin, inMax] = inputRange;\n const [outMin, outMax] = outputRange;\n let progress = (input - inMin) \/ (inMax - inMin);\n let result = outMin + progress * (outMax - outMin);\n if (clamp) {\n result = outMax > outMin\n ? Math.min(Math.max(result, outMin), outMax)\n : Math.min(Math.max(result, outMax), outMin);\n }\n return result;\n }\n\n function calculateVaporizeSpread(fontSize) {\n const points = [\n { size: 20, spread: 0.2 },\n { size: 50, spread: 0.5 },\n { size: 100, spread: 1.5 }\n ];\n if (fontSize <= points[0].size) return points[0].spread;\n if (fontSize >= points[points.length - 1].size) return points[points.length - 1].spread;\n let i = 0;\n while (i < points.length - 1 && points[i + 1].size < fontSize) i++;\n const p1 = points[i];\n const p2 = points[i + 1];\n return p1.spread + (fontSize - p1.size) * (p2.spread - p1.spread) \/ (p2.size - p1.size);\n }\n\n function parseColor(color) {\n const rgbMatch = color.match(\/rgb\$(\\d+),\\s*(\\d+),\\s*(\\d+)\$\/);\n const rgbaMatch = color.match(\/rgba\$(\\d+),\\s*(\\d+),\\s*(\\d+),\\s*([\\d.]+)\$\/);\n if (rgbaMatch) return `rgba(${rgbaMatch[1]}, ${rgbaMatch[2]}, ${rgbaMatch[3]}, ${rgbaMatch[4]})`;\n if (rgbMatch) return `rgba(${rgbMatch[1]}, ${rgbMatch[2]}, ${rgbMatch[3]}, 1)`;\n return \"rgba(125, 115, 105, 1)\";\n }\n\n \/\/ ---------- Particle System ----------\n function createParticles(ctx, text, textX, textY, font, color) {\n particles = [];\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n ctx.fillStyle = color;\n ctx.font = font;\n ctx.textAlign = ALIGNMENT;\n ctx.textBaseline = \"middle\";\n ctx.imageSmoothingQuality = \"high\";\n ctx.imageSmoothingEnabled = true;\n\n const metrics = ctx.measureText(text);\n const textWidth = metrics.width;\n let textLeft;\n if (ALIGNMENT === \"center\") textLeft = textX - textWidth \/ 2;\n else if (ALIGNMENT === \"left\") textLeft = textX;\n else textLeft = textX - textWidth;\n\n textBoundaries = { left: textLeft, right: textLeft + textWidth, width: textWidth };\n\n ctx.fillText(text, textX, textY);\n\n const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);\n const data = imageData.data;\n\n const currentDPR = canvas.width \/ parseInt(canvas.style.width);\n const sampleRate = Math.max(1, Math.round(currentDPR \/ 3));\n\n for (let y = 0; y < canvas.height; y += sampleRate) {\n for (let x = 0; x < canvas.width; x += sampleRate) {\n const idx = (y * canvas.width + x) * 4;\n const alpha = data[idx + 3];\n if (alpha > 0) {\n const originalAlpha = (alpha \/ 255) * (sampleRate \/ currentDPR);\n particles.push({\n x, y,\n originalX: x,\n originalY: y,\n color: `rgba(${data[idx]}, ${data[idx + 1]}, ${data[idx + 2]}, ${originalAlpha})`,\n opacity: originalAlpha,\n originalAlpha,\n velocityX: 0,\n velocityY: 0,\n angle: 0,\n speed: 0,\n shouldFadeQuickly: false\n });\n }\n }\n }\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n }\n\n function updateParticles(vaporizeX, deltaTime, spread, duration, density) {\n let allVaporized = true;\n particles.forEach(p => {\n const shouldVaporize = DIRECTION === \"left-to-right\"\n ? p.originalX <= vaporizeX\n : p.originalX >= vaporizeX;\n\n if (shouldVaporize) {\n if (p.speed === 0) {\n p.angle = Math.random() * Math.PI * 2;\n p.speed = (Math.random() * 1 + 0.5) * spread;\n p.velocityX = Math.cos(p.angle) * p.speed;\n p.velocityY = Math.sin(p.angle) * p.speed;\n p.shouldFadeQuickly = Math.random() > density;\n }\n\n if (p.shouldFadeQuickly) {\n p.opacity = Math.max(0, p.opacity - deltaTime);\n } else {\n const dx = p.originalX - p.x;\n const dy = p.originalY - p.y;\n const dist = Math.sqrt(dx * dx + dy * dy);\n const damping = Math.max(0.95, 1 - dist \/ (100 * spread));\n const randomSpread = spread * 3;\n p.velocityX = (p.velocityX + (Math.random() - 0.5) * randomSpread + dx * 0.002) * damping;\n p.velocityY = (p.velocityY + (Math.random() - 0.5) * randomSpread + dy * 0.002) * damping;\n\n const maxVel = spread * 2;\n const currVel = Math.sqrt(p.velocityX ** 2 + p.velocityY ** 2);\n if (currVel > maxVel) {\n const scale = maxVel \/ currVel;\n p.velocityX *= scale;\n p.velocityY *= scale;\n }\n\n p.x += p.velocityX * deltaTime * 20;\n p.y += p.velocityY * deltaTime * 10;\n\n const fadeRate = 0.25 * (2000 \/ duration);\n p.opacity = Math.max(0, p.opacity - deltaTime * fadeRate);\n }\n\n if (p.opacity > 0.01) allVaporized = false;\n } else {\n allVaporized = false;\n }\n });\n return allVaporized;\n }\n\n function renderParticles(ctx) {\n ctx.save();\n ctx.scale(dpr, dpr);\n particles.forEach(p => {\n if (p.opacity > 0) {\n const color = p.color.replace(\/[\\d.]+\\)$\/, `${p.opacity})`);\n ctx.fillStyle = color;\n ctx.fillRect(p.x \/ dpr, p.y \/ dpr, 1, 1);\n }\n });\n ctx.restore();\n }\n\n function resetParticles() {\n particles.forEach(p => {\n p.x = p.originalX;\n p.y = p.originalY;\n p.opacity = p.originalAlpha;\n p.speed = 0;\n p.velocityX = 0;\n p.velocityY = 0;\n });\n }\n\n \/\/ ---------- Render & Resize ----------\n function renderCanvas() {\n const width = wrapper.clientWidth;\n const height = wrapper.clientHeight;\n if (!width || !height) return;\n\n canvas.style.width = width + \"px\";\n canvas.style.height = height + \"px\";\n canvas.width = Math.floor(width * dpr);\n canvas.height = Math.floor(height * dpr);\n\n const ctx = canvas.getContext(\"2d\");\n const font = `${FONT_WEIGHT} ${FONT_SIZE * dpr}px ${FONT_FAMILY}`;\n const color = parseColor(COLOR);\n\n const textX = ALIGNMENT === \"center\" ? canvas.width \/ 2\n : ALIGNMENT === \"left\" ? 0 : canvas.width;\n const textY = canvas.height \/ 2;\n const text = TEXTS[currentTextIndex] || \"ARCMID\";\n\n createParticles(ctx, text, textX, textY, font, color);\n }\n\n function resize() {\n dpr = Math.min(window.devicePixelRatio * 1.5 || 1.5, 2.5);\n renderCanvas();\n }\n\n \/\/ ---------- Animation Loop ----------\n const transformedDensity = transformValue(DENSITY, [0, 10], [0.3, 1], true);\n const vaporizeSpread = calculateVaporizeSpread(FONT_SIZE) * SPREAD;\n const VAPORIZE_MS = VAPORIZE_DURATION * 1000;\n const FADE_MS = FADE_IN_DURATION * 1000;\n const WAIT_MS = WAIT_DURATION * 1000;\n\n function animate(time) {\n if (!lastTime) lastTime = time;\n const deltaTime = (time - lastTime) \/ 1000;\n lastTime = time;\n\n const ctx = canvas.getContext(\"2d\");\n if (!ctx || !particles.length) {\n animationId = requestAnimationFrame(animate);\n return;\n }\n\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n\n switch (animationState) {\n case \"static\":\n renderParticles(ctx);\n break;\n\n case \"vaporizing\": {\n vaporizeProgress += deltaTime * 100 \/ (VAPORIZE_MS \/ 1000);\n const progress = Math.min(100, vaporizeProgress);\n const vaporizeX = DIRECTION === \"left-to-right\"\n ? textBoundaries.left + textBoundaries.width * progress \/ 100\n : textBoundaries.right - textBoundaries.width * progress \/ 100;\n\n const allDone = updateParticles(vaporizeX, deltaTime, vaporizeSpread, VAPORIZE_MS, transformedDensity);\n renderParticles(ctx);\n\n if (vaporizeProgress >= 100 && allDone) {\n cycleCount++;\n if (cycleCount >= TOTAL_CYCLES) {\n \/\/ Finished \u2192 fade out the whole loader\n finishLoading();\n return;\n }\n currentTextIndex = (currentTextIndex + 1) % TEXTS.length;\n animationState = \"fadingIn\";\n fadeOpacity = 0;\n }\n break;\n }\n\n case \"fadingIn\": {\n fadeOpacity += deltaTime * 1000 \/ FADE_MS;\n ctx.save();\n ctx.scale(dpr, dpr);\n particles.forEach(p => {\n p.x = p.originalX;\n p.y = p.originalY;\n const opacity = Math.min(fadeOpacity, 1) * p.originalAlpha;\n const color = p.color.replace(\/[\\d.]+\\)$\/, `${opacity})`);\n ctx.fillStyle = color;\n ctx.fillRect(p.x \/ dpr, p.y \/ dpr, 1, 1);\n });\n ctx.restore();\n\n if (fadeOpacity >= 1) {\n animationState = \"waiting\";\n setTimeout(() => {\n animationState = \"vaporizing\";\n vaporizeProgress = 0;\n resetParticles();\n }, WAIT_MS);\n }\n break;\n }\n\n case \"waiting\":\n renderParticles(ctx);\n break;\n }\n\n animationId = requestAnimationFrame(animate);\n }\n\n function finishLoading() {\n cancelAnimationFrame(animationId);\n loader.classList.add(\"fade-out\");\n \/\/ Optional: remove the element after transition\n setTimeout(() => {\n loader.style.display = \"none\";\n }, 900);\n }\n\n \/\/ ---------- Init ----------\n window.addEventListener(\"resize\", resize);\n resize();\n \/\/ Small delay so font loads and layout settles\n setTimeout(() => {\n animationState = \"vaporizing\";\n lastTime = performance.now();\n animationId = requestAnimationFrame(animate);\n }, 300);\n\n \/\/ Fallback: hide loader after max 6 seconds even if animation fails\n setTimeout(finishLoading, 6000);\n <\/script>\n\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-64245c9 e-con e-atomic-element e-flexbox-base e-78beb8f \" data-id=\"64245c9\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"64245c9\" data-e-type=\"e-flexbox\" data-id=\"64245c9\">\n \t\t<div class=\"elementor-element elementor-element-39ebec2 elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"39ebec2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\" \/>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\n <title>Geometric Blur Mesh Background<\/title>\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n html, body {\n width: 100%;\n height: 100%;\n overflow: hidden;\n background: #000;\n cursor: pointer;\n }\n #container {\n position: relative;\n width: 100%;\n height: 100%;\n overflow: hidden;\n }\n canvas {\n display: block;\n width: 100%;\n height: 100%;\n }\n .label {\n position: absolute;\n bottom: 48px;\n left: 50%;\n transform: translateX(-50%);\n pointer-events: none;\n text-align: center;\n font-family: system-ui, -apple-system, sans-serif;\n }\n .label .shape {\n color: rgba(255, 255, 255, 0.2);\n font-size: 12px;\n font-weight: 300;\n letter-spacing: 0.2em;\n }\n .label .hint {\n color: rgba(255, 255, 255, 0.1);\n font-size: 10px;\n font-weight: 300;\n margin-top: 4px;\n letter-spacing: 0.05em;\n }\n <\/style>\n<\/head>\n<body>\n <div id=\"container\">\n <canvas id=\"canvas\"><\/canvas>\n <div class=\"label\">\n <div class=\"shape\" id=\"shape-name\">CUBE<\/div>\n <div class=\"hint\">CLICK TO SWITCH<\/div>\n <\/div>\n <\/div>\n\n <script>\n const fragmentShader = `\n#ifdef GL_ES\nprecision highp float;\n#endif\nuniform vec2 u_mouse;\nuniform vec2 u_resolution;\nuniform float u_pixelRatio;\nuniform float u_time;\nuniform int u_shape;\n#define PI 3.1415926535897932384626433832795\n#define TWO_PI 6.2831853071795864769252867665590\nmat3 rotateX(float angle) {\n float s = sin(angle);\n float c = cos(angle);\n return mat3(1.0, 0.0, 0.0, 0.0, c, -s, 0.0, s, c);\n}\nmat3 rotateY(float angle) {\n float s = sin(angle);\n float c = cos(angle);\n return mat3(c, 0.0, s, 0.0, 1.0, 0.0, -s, 0.0, c);\n}\nmat3 rotateZ(float angle) {\n float s = sin(angle);\n float c = cos(angle);\n return mat3(c, -s, 0.0, s, c, 0.0, 0.0, 0.0, 1.0);\n}\nvec2 coord(in vec2 p) {\n p = p \/ u_resolution.xy;\n if (u_resolution.x > u_resolution.y) {\n p.x *= u_resolution.x \/ u_resolution.y;\n p.x += (u_resolution.y - u_resolution.x) \/ u_resolution.y \/ 2.0;\n } else {\n p.y *= u_resolution.y \/ u_resolution.x;\n p.y += (u_resolution.x - u_resolution.y) \/ u_resolution.x \/ 2.0;\n }\n p -= 0.5;\n return p;\n}\nvec2 project(vec3 p) {\n float perspective = 2.0 \/ (2.0 - p.z);\n return p.xy * perspective;\n}\nfloat distToSegment(vec2 p, vec2 a, vec2 b) {\n vec2 pa = p - a;\n vec2 ba = b - a;\n float h = clamp(dot(pa, ba) \/ dot(ba, ba), 0.0, 1.0);\n return length(pa - ba * h);\n}\nfloat drawLine(vec2 p, vec2 a, vec2 b, float thickness, float blur) {\n float d = distToSegment(p, a, b);\n return smoothstep(thickness + blur, thickness - blur, d);\n}\nvoid getCubeVertices(out vec3 v[8]) {\n float s = 0.7;\n v[0] = vec3(-s, -s, -s);\n v[1] = vec3( s, -s, -s);\n v[2] = vec3( s, s, -s);\n v[3] = vec3(-s, s, -s);\n v[4] = vec3(-s, -s, s);\n v[5] = vec3( s, -s, s);\n v[6] = vec3( s, s, s);\n v[7] = vec3(-s, s, s);\n}\nvoid getTetrahedronVertices(out vec3 v[4]) {\n float a = 1.0 \/ sqrt(3.0);\n v[0] = vec3( a, a, a);\n v[1] = vec3( a, -a, -a);\n v[2] = vec3(-a, a, -a);\n v[3] = vec3(-a, -a, a);\n}\nvoid getOctahedronVertices(out vec3 v[6]) {\n v[0] = vec3( 1.0, 0.0, 0.0);\n v[1] = vec3(-1.0, 0.0, 0.0);\n v[2] = vec3( 0.0, 1.0, 0.0);\n v[3] = vec3( 0.0, -1.0, 0.0);\n v[4] = vec3( 0.0, 0.0, 1.0);\n v[5] = vec3( 0.0, 0.0, -1.0);\n}\nvoid getIcosahedronVertices(out vec3 v[12]) {\n float t = (1.0 + sqrt(5.0)) \/ 2.0;\n float s = 1.0 \/ sqrt(1.0 + t * t);\n v[0] = vec3(-s, t * s, 0);\n v[1] = vec3( s, t * s, 0);\n v[2] = vec3(-s, -t * s, 0);\n v[3] = vec3( s, -t * s, 0);\n v[4] = vec3(0, -s, t * s);\n v[5] = vec3(0, s, t * s);\n v[6] = vec3(0, -s, -t * s);\n v[7] = vec3(0, s, -t * s);\n v[8] = vec3( t * s, 0, -s);\n v[9] = vec3( t * s, 0, s);\n v[10] = vec3(-t * s, 0, -s);\n v[11] = vec3(-t * s, 0, s);\n}\nfloat drawWireframe(vec2 p, int shape, mat3 rotation, float scale, float thickness, float blur) {\n float result = 0.0;\n if (shape == 0) {\n vec3 v[8];\n getCubeVertices(v);\n for (int i = 0; i < 8; i++) v[i] = rotation * (v[i] * scale);\n result += drawLine(p, project(v[0]), project(v[1]), thickness, blur);\n result += drawLine(p, project(v[1]), project(v[2]), thickness, blur);\n result += drawLine(p, project(v[2]), project(v[3]), thickness, blur);\n result += drawLine(p, project(v[3]), project(v[0]), thickness, blur);\n result += drawLine(p, project(v[4]), project(v[5]), thickness, blur);\n result += drawLine(p, project(v[5]), project(v[6]), thickness, blur);\n result += drawLine(p, project(v[6]), project(v[7]), thickness, blur);\n result += drawLine(p, project(v[7]), project(v[4]), thickness, blur);\n result += drawLine(p, project(v[0]), project(v[4]), thickness, blur);\n result += drawLine(p, project(v[1]), project(v[5]), thickness, blur);\n result += drawLine(p, project(v[2]), project(v[6]), thickness, blur);\n result += drawLine(p, project(v[3]), project(v[7]), thickness, blur);\n } else if (shape == 1) {\n vec3 v[4];\n getTetrahedronVertices(v);\n for (int i = 0; i < 4; i++) v[i] = rotation * (v[i] * scale);\n result += drawLine(p, project(v[0]), project(v[1]), thickness, blur);\n result += drawLine(p, project(v[0]), project(v[2]), thickness, blur);\n result += drawLine(p, project(v[0]), project(v[3]), thickness, blur);\n result += drawLine(p, project(v[1]), project(v[2]), thickness, blur);\n result += drawLine(p, project(v[1]), project(v[3]), thickness, blur);\n result += drawLine(p, project(v[2]), project(v[3]), thickness, blur);\n } else if (shape == 2) {\n vec3 v[6];\n getOctahedronVertices(v);\n for (int i = 0; i < 6; i++) v[i] = rotation * (v[i] * scale);\n result += drawLine(p, project(v[2]), project(v[0]), thickness, blur);\n result += drawLine(p, project(v[2]), project(v[1]), thickness, blur);\n result += drawLine(p, project(v[2]), project(v[4]), thickness, blur);\n result += drawLine(p, project(v[2]), project(v[5]), thickness, blur);\n result += drawLine(p, project(v[3]), project(v[0]), thickness, blur);\n result += drawLine(p, project(v[3]), project(v[1]), thickness, blur);\n result += drawLine(p, project(v[3]), project(v[4]), thickness, blur);\n result += drawLine(p, project(v[3]), project(v[5]), thickness, blur);\n result += drawLine(p, project(v[0]), project(v[4]), thickness, blur);\n result += drawLine(p, project(v[4]), project(v[1]), thickness, blur);\n result += drawLine(p, project(v[1]), project(v[5]), thickness, blur);\n result += drawLine(p, project(v[5]), project(v[0]), thickness, blur);\n } else if (shape == 3) {\n vec3 v[12];\n getIcosahedronVertices(v);\n for (int i = 0; i < 12; i++) v[i] = rotation * (v[i] * scale);\n result += drawLine(p, project(v[0]), project(v[1]), thickness, blur);\n result += drawLine(p, project(v[0]), project(v[5]), thickness, blur);\n result += drawLine(p, project(v[0]), project(v[7]), thickness, blur);\n result += drawLine(p, project(v[0]), project(v[10]), thickness, blur);\n result += drawLine(p, project(v[0]), project(v[11]), thickness, blur);\n result += drawLine(p, project(v[1]), project(v[5]), thickness, blur);\n result += drawLine(p, project(v[1]), project(v[7]), thickness, blur);\n result += drawLine(p, project(v[1]), project(v[8]), thickness, blur);\n result += drawLine(p, project(v[1]), project(v[9]), thickness, blur);\n result += drawLine(p, project(v[2]), project(v[3]), thickness, blur);\n result += drawLine(p, project(v[2]), project(v[4]), thickness, blur);\n result += drawLine(p, project(v[2]), project(v[6]), thickness, blur);\n result += drawLine(p, project(v[2]), project(v[10]), thickness, blur);\n result += drawLine(p, project(v[2]), project(v[11]), thickness, blur);\n result += drawLine(p, project(v[3]), project(v[4]), thickness, blur);\n result += drawLine(p, project(v[3]), project(v[6]), thickness, blur);\n result += drawLine(p, project(v[3]), project(v[8]), thickness, blur);\n result += drawLine(p, project(v[3]), project(v[9]), thickness, blur);\n result += drawLine(p, project(v[4]), project(v[5]), thickness, blur);\n result += drawLine(p, project(v[4]), project(v[11]), thickness, blur);\n result += drawLine(p, project(v[5]), project(v[11]), thickness, blur);\n result += drawLine(p, project(v[6]), project(v[7]), thickness, blur);\n result += drawLine(p, project(v[6]), project(v[8]), thickness, blur);\n result += drawLine(p, project(v[6]), project(v[10]), thickness, blur);\n result += drawLine(p, project(v[7]), project(v[10]), thickness, blur);\n result += drawLine(p, project(v[8]), project(v[9]), thickness, blur);\n result += drawLine(p, project(v[9]), project(v[11]), thickness, blur);\n result += drawLine(p, project(v[10]), project(v[11]), thickness, blur);\n } else if (shape == 4) {\n vec3 v[5];\n float s = 0.7;\n v[0] = vec3(-s, 0.0, -s);\n v[1] = vec3( s, 0.0, -s);\n v[2] = vec3( s, 0.0, s);\n v[3] = vec3(-s, 0.0, s);\n v[4] = vec3( 0.0, 1.0, 0.0);\n for (int i = 0; i < 5; i++) v[i] = rotation * (v[i] * scale);\n result += drawLine(p, project(v[0]), project(v[1]), thickness, blur);\n result += drawLine(p, project(v[1]), project(v[2]), thickness, blur);\n result += drawLine(p, project(v[2]), project(v[3]), thickness, blur);\n result += drawLine(p, project(v[3]), project(v[0]), thickness, blur);\n result += drawLine(p, project(v[0]), project(v[4]), thickness, blur);\n result += drawLine(p, project(v[1]), project(v[4]), thickness, blur);\n result += drawLine(p, project(v[2]), project(v[4]), thickness, blur);\n result += drawLine(p, project(v[3]), project(v[4]), thickness, blur);\n } else if (shape == 5) {\n vec3 v[6];\n float s = 0.6;\n v[0] = vec3(-s, 0.0, -s);\n v[1] = vec3( s, 0.0, -s);\n v[2] = vec3( s, 0.0, s);\n v[3] = vec3(-s, 0.0, s);\n v[4] = vec3( 0.0, 1.0, 0.0);\n v[5] = vec3( 0.0, -1.0, 0.0);\n for (int i = 0; i < 6; i++) v[i] = rotation * (v[i] * scale);\n result += drawLine(p, project(v[0]), project(v[1]), thickness, blur);\n result += drawLine(p, project(v[1]), project(v[2]), thickness, blur);\n result += drawLine(p, project(v[2]), project(v[3]), thickness, blur);\n result += drawLine(p, project(v[3]), project(v[0]), thickness, blur);\n result += drawLine(p, project(v[0]), project(v[4]), thickness, blur);\n result += drawLine(p, project(v[1]), project(v[4]), thickness, blur);\n result += drawLine(p, project(v[2]), project(v[4]), thickness, blur);\n result += drawLine(p, project(v[3]), project(v[4]), thickness, blur);\n result += drawLine(p, project(v[0]), project(v[5]), thickness, blur);\n result += drawLine(p, project(v[1]), project(v[5]), thickness, blur);\n result += drawLine(p, project(v[2]), project(v[5]), thickness, blur);\n result += drawLine(p, project(v[3]), project(v[5]), thickness, blur);\n } else if (shape == 6) {\n vec3 v[12];\n float angleStep = TWO_PI \/ 6.0;\n v[0] = vec3(cos(0.0 * angleStep), -1.0, sin(0.0 * angleStep));\n v[1] = vec3(cos(1.0 * angleStep), -1.0, sin(1.0 * angleStep));\n v[2] = vec3(cos(2.0 * angleStep), -1.0, sin(2.0 * angleStep));\n v[3] = vec3(cos(3.0 * angleStep), -1.0, sin(3.0 * angleStep));\n v[4] = vec3(cos(4.0 * angleStep), -1.0, sin(4.0 * angleStep));\n v[5] = vec3(cos(5.0 * angleStep), -1.0, sin(5.0 * angleStep));\n v[6] = vec3(cos(0.0 * angleStep), 1.0, sin(0.0 * angleStep));\n v[7] = vec3(cos(1.0 * angleStep), 1.0, sin(1.0 * angleStep));\n v[8] = vec3(cos(2.0 * angleStep), 1.0, sin(2.0 * angleStep));\n v[9] = vec3(cos(3.0 * angleStep), 1.0, sin(3.0 * angleStep));\n v[10] = vec3(cos(4.0 * angleStep), 1.0, sin(4.0 * angleStep));\n v[11] = vec3(cos(5.0 * angleStep), 1.0, sin(5.0 * angleStep));\n for (int i = 0; i < 12; i++) v[i] = rotation * (v[i] * scale);\n result += drawLine(p, project(v[0]), project(v[1]), thickness, blur);\n result += drawLine(p, project(v[1]), project(v[2]), thickness, blur);\n result += drawLine(p, project(v[2]), project(v[3]), thickness, blur);\n result += drawLine(p, project(v[3]), project(v[4]), thickness, blur);\n result += drawLine(p, project(v[4]), project(v[5]), thickness, blur);\n result += drawLine(p, project(v[5]), project(v[0]), thickness, blur);\n result += drawLine(p, project(v[6]), project(v[7]), thickness, blur);\n result += drawLine(p, project(v[7]), project(v[8]), thickness, blur);\n result += drawLine(p, project(v[8]), project(v[9]), thickness, blur);\n result += drawLine(p, project(v[9]), project(v[10]), thickness, blur);\n result += drawLine(p, project(v[10]), project(v[11]), thickness, blur);\n result += drawLine(p, project(v[11]), project(v[6]), thickness, blur);\n result += drawLine(p, project(v[0]), project(v[6]), thickness, blur);\n result += drawLine(p, project(v[1]), project(v[7]), thickness, blur);\n result += drawLine(p, project(v[2]), project(v[8]), thickness, blur);\n result += drawLine(p, project(v[3]), project(v[9]), thickness, blur);\n result += drawLine(p, project(v[4]), project(v[10]), thickness, blur);\n result += drawLine(p, project(v[5]), project(v[11]), thickness, blur);\n } else {\n float t = u_time * 0.5;\n float morph = sin(t) * 0.5 + 0.5;\n vec3 cube[8];\n getCubeVertices(cube);\n vec3 octa[6];\n getOctahedronVertices(octa);\n vec3 v[8];\n for (int i = 0; i < 8; i++) {\n if (i < 6) {\n v[i] = mix(cube[i], octa[i] * 1.5, morph);\n } else {\n v[i] = cube[i] * (1.0 - morph * 0.3);\n }\n v[i] = rotation * (v[i] * scale);\n }\n float alpha = 1.0 - morph * 0.5;\n result += drawLine(p, project(v[0]), project(v[1]), thickness, blur) * alpha;\n result += drawLine(p, project(v[1]), project(v[2]), thickness, blur) * alpha;\n result += drawLine(p, project(v[2]), project(v[3]), thickness, blur) * alpha;\n result += drawLine(p, project(v[3]), project(v[0]), thickness, blur) * alpha;\n result += drawLine(p, project(v[4]), project(v[5]), thickness, blur) * alpha;\n result += drawLine(p, project(v[5]), project(v[6]), thickness, blur) * alpha;\n result += drawLine(p, project(v[6]), project(v[7]), thickness, blur) * alpha;\n result += drawLine(p, project(v[7]), project(v[4]), thickness, blur) * alpha;\n result += drawLine(p, project(v[0]), project(v[6]), thickness, blur) * morph;\n result += drawLine(p, project(v[1]), project(v[7]), thickness, blur) * morph;\n result += drawLine(p, project(v[2]), project(v[4]), thickness, blur) * morph;\n result += drawLine(p, project(v[3]), project(v[5]), thickness, blur) * morph;\n }\n return clamp(result, 0.0, 1.0);\n}\nvec3 render(vec2 st, vec2 mouse) {\n float mouseDistance = length(st - mouse);\n float mouseInfluence = 1.0 - smoothstep(0.0, 0.5, mouseDistance);\n float time = u_time * 0.2;\n mat3 rotation = rotateY(time + (mouse.x - 0.5) * mouseInfluence * 1.0) *\n rotateX(time * 0.7 + (mouse.y - 0.5) * mouseInfluence * 1.0) *\n rotateZ(time * 0.1);\n float scale = 0.35;\n float blur = mix(0.0001, 0.05, mouseInfluence);\n float thickness = mix(0.002, 0.003, mouseInfluence);\n float shape = drawWireframe(st, u_shape, rotation, scale, thickness, blur);\n vec3 color = vec3(0.9, 0.95, 1.0);\n float dimming = 1.0 - mouseInfluence * 0.3;\n color *= shape * dimming;\n float vignette = 1.0 - length(st) * 0.2;\n color *= vignette;\n color = pow(color, vec3(0.9));\n return color;\n}\nvoid main() {\n vec2 st = coord(gl_FragCoord.xy);\n vec2 mouse = coord(u_mouse * u_pixelRatio) * vec2(1., -1.);\n vec3 color = render(st, mouse);\n gl_FragColor = vec4(color, 1.0);\n}\n`;\n\n const vertexShader = `\nattribute vec3 a_position;\nattribute vec2 a_uv;\nvarying vec2 v_texcoord;\nvoid main() {\n gl_Position = vec4(a_position, 1.0);\n v_texcoord = a_uv;\n}\n`;\n\n const shapes = [\n \"Cube\",\n \"Tetrahedron\",\n \"Octahedron\",\n \"Icosahedron\",\n \"Pyramid\",\n \"Diamond\",\n \"Hexagonal Prism\",\n \"Morphing\"\n ];\n\n const canvas = document.getElementById('canvas');\n const container = document.getElementById('container');\n const shapeNameEl = document.getElementById('shape-name');\n\n let currentShape = 0;\n let gl = null;\n let program = null;\n let uniforms = {};\n let mouse = { x: 0, y: 0 };\n let mouseDamp = { x: 0, y: 0 };\n let startTime = Date.now();\n let animationId = null;\n\n function createShader(type, source) {\n const shader = gl.createShader(type);\n gl.shaderSource(shader, source);\n gl.compileShader(shader);\n if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n console.error('Shader error:', gl.getShaderInfoLog(shader));\n gl.deleteShader(shader);\n return null;\n }\n return shader;\n }\n\n function initWebGL() {\n gl = canvas.getContext('webgl', {\n antialias: true,\n alpha: false,\n premultipliedAlpha: false,\n preserveDrawingBuffer: false\n });\n if (!gl) {\n console.error('WebGL not supported');\n return false;\n }\n gl.clearColor(0, 0, 0, 1);\n\n const vShader = createShader(gl.VERTEX_SHADER, vertexShader);\n const fShader = createShader(gl.FRAGMENT_SHADER, fragmentShader);\n if (!vShader || !fShader) return false;\n\n program = gl.createProgram();\n gl.attachShader(program, vShader);\n gl.attachShader(program, fShader);\n gl.linkProgram(program);\n if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {\n console.error('Program link error:', gl.getProgramInfoLog(program));\n return false;\n }\n gl.useProgram(program);\n\n uniforms = {\n u_mouse: gl.getUniformLocation(program, 'u_mouse'),\n u_resolution: gl.getUniformLocation(program, 'u_resolution'),\n u_pixelRatio: gl.getUniformLocation(program, 'u_pixelRatio'),\n u_time: gl.getUniformLocation(program, 'u_time'),\n u_shape: gl.getUniformLocation(program, 'u_shape')\n };\n\n const vertices = new Float32Array([-1, -1, 0, 1, -1, 0, -1, 1, 0, 1, 1, 0]);\n const uvs = new Float32Array([0, 0, 1, 0, 0, 1, 1, 1]);\n\n const positionBuffer = gl.createBuffer();\n gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);\n gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);\n const posLoc = gl.getAttribLocation(program, 'a_position');\n gl.enableVertexAttribArray(posLoc);\n gl.vertexAttribPointer(posLoc, 3, gl.FLOAT, false, 0, 0);\n\n const uvBuffer = gl.createBuffer();\n gl.bindBuffer(gl.ARRAY_BUFFER, uvBuffer);\n gl.bufferData(gl.ARRAY_BUFFER, uvs, gl.STATIC_DRAW);\n const uvLoc = gl.getAttribLocation(program, 'a_uv');\n gl.enableVertexAttribArray(uvLoc);\n gl.vertexAttribPointer(uvLoc, 2, gl.FLOAT, false, 0, 0);\n\n return true;\n }\n\n function resize() {\n const dpr = Math.min(window.devicePixelRatio || 1, 2);\n const width = container.clientWidth;\n const height = container.clientHeight;\n canvas.width = width * dpr;\n canvas.height = height * dpr;\n canvas.style.width = width + 'px';\n canvas.style.height = height + 'px';\n if (gl) gl.viewport(0, 0, canvas.width, canvas.height);\n }\n\n function onMouseMove(e) {\n const rect = canvas.getBoundingClientRect();\n const clientX = e.touches ? e.touches[0].clientX : e.clientX;\n const clientY = e.touches ? e.touches[0].clientY : e.clientY;\n mouse.x = clientX - rect.left;\n mouse.y = clientY - rect.top;\n }\n\n function onClick() {\n currentShape = (currentShape + 1) % shapes.length;\n shapeNameEl.textContent = shapes[currentShape].toUpperCase();\n }\n\n function onKeyPress(e) {\n if (e.key >= '1' && e.key <= '8') {\n const idx = parseInt(e.key) - 1;\n if (idx < shapes.length) {\n currentShape = idx;\n shapeNameEl.textContent = shapes[currentShape].toUpperCase();\n }\n }\n }\n\n let lastTime = performance.now();\n function animate(time) {\n const delta = (time - lastTime) \/ 1000;\n lastTime = time;\n\n if (!gl || !program) {\n animationId = requestAnimationFrame(animate);\n return;\n }\n\n const damping = 8;\n mouseDamp.x += (mouse.x - mouseDamp.x) * damping * delta;\n mouseDamp.y += (mouse.y - mouseDamp.y) * damping * delta;\n\n gl.clearColor(0, 0, 0, 1);\n gl.clear(gl.COLOR_BUFFER_BIT);\n\n const dpr = Math.min(window.devicePixelRatio || 1, 2);\n const elapsed = (Date.now() - startTime) \/ 1000;\n\n if (uniforms.u_mouse) gl.uniform2f(uniforms.u_mouse, mouseDamp.x, mouseDamp.y);\n if (uniforms.u_resolution) gl.uniform2f(uniforms.u_resolution, canvas.width, canvas.height);\n if (uniforms.u_pixelRatio) gl.uniform1f(uniforms.u_pixelRatio, dpr);\n if (uniforms.u_time) gl.uniform1f(uniforms.u_time, elapsed);\n if (uniforms.u_shape) gl.uniform1i(uniforms.u_shape, currentShape);\n\n gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);\n animationId = requestAnimationFrame(animate);\n }\n\n \/\/ Init\n if (initWebGL()) {\n resize();\n window.addEventListener('resize', resize);\n window.addEventListener('mousemove', onMouseMove);\n window.addEventListener('touchmove', onMouseMove, { passive: true });\n container.addEventListener('click', onClick);\n window.addEventListener('keypress', onKeyPress);\n animationId = requestAnimationFrame(animate);\n }\n <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>ARCMID Loading ARCMID Geometric Blur Mesh Background CUBE CLICK TO SWITCH<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-2","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/arcmid.com\/wp-json\/wp\/v2\/pages\/2","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/arcmid.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/arcmid.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/arcmid.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/arcmid.com\/wp-json\/wp\/v2\/comments?post=2"}],"version-history":[{"count":125,"href":"https:\/\/arcmid.com\/wp-json\/wp\/v2\/pages\/2\/revisions"}],"predecessor-version":[{"id":217,"href":"https:\/\/arcmid.com\/wp-json\/wp\/v2\/pages\/2\/revisions\/217"}],"wp:attachment":[{"href":"https:\/\/arcmid.com\/wp-json\/wp\/v2\/media?parent=2"}],"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\n\n\n \n \n ARCMID Loading<\/title>\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n background: #1a1816; \/* very dark version of your palette *\/\n overflow: hidden;\n font-family: 'Inter', system-ui, -apple-system, sans-serif;\n }\n\n #arcmid-loader {\n position: fixed;\n inset: 0;\n z-index: 99999;\n display: flex;\n align-items: center;\n justify-content: center;\n background: #1a1816;\n transition: opacity 0.8s ease, visibility 0.8s ease;\n }\n\n #arcmid-loader.fade-out {\n opacity: 0;\n visibility: hidden;\n pointer-events: none;\n }\n\n #canvas-wrapper {\n width: 100%;\n height: 180px;\n max-width: 900px;\n position: relative;\n }\n\n canvas {\n display: block;\n width: 100%;\n height: 100%;\n }\n\n \/* Optional subtle brand mark under the text *\/\n .brand-sub {\n position: absolute;\n bottom: -40px;\n left: 50%;\n transform: translateX(-50%);\n color: #60564d;\n font-size: 11px;\n letter-spacing: 0.35em;\n text-transform: uppercase;\n opacity: 0.6;\n font-weight: 400;\n }\n <\/style>\n\n\n <div id=\"arcmid-loader\">\n <div id=\"canvas-wrapper\">\n <canvas id=\"vapor-canvas\"><\/canvas>\n <div class=\"brand-sub\">ARCMID<\/div>\n <\/div>\n <\/div>\n\n <script>\n \/\/ ========== CONFIG ==========\n const TEXTS = [\"ARCMID\"]; \/\/ You can add more words if you want cycling\n const FONT_FAMILY = \"Inter, system-ui, sans-serif\";\n const FONT_SIZE = 180; \/\/ px\n const FONT_WEIGHT = 600;\n const COLOR = \"rgb(125, 115, 105)\"; \/\/ #7d7369\n const SPREAD = 4.5;\n const DENSITY = 6;\n const VAPORIZE_DURATION = 2.2; \/\/ seconds\n const FADE_IN_DURATION = 1.0;\n const WAIT_DURATION = 0.6;\n const DIRECTION = \"left-to-right\"; \/\/ or \"right-to-left\"\n const ALIGNMENT = \"center\";\n\n \/\/ When the whole loading sequence is finished \u2192 hide the loader\n const TOTAL_CYCLES = 1; \/\/ how many times the text vaporizes before finishing\n \/\/ ============================\n\n const canvas = document.getElementById(\"vapor-canvas\");\n const wrapper = document.getElementById(\"canvas-wrapper\");\n const loader = document.getElementById(\"arcmid-loader\");\n\n let particles = [];\n let textBoundaries = null;\n let currentTextIndex = 0;\n let animationState = \"static\"; \/\/ static | vaporizing | fadingIn | waiting\n let vaporizeProgress = 0;\n let fadeOpacity = 0;\n let cycleCount = 0;\n let animationId = null;\n let lastTime = 0;\n let dpr = Math.min(window.devicePixelRatio * 1.5 || 1.5, 2.5);\n\n \/\/ ---------- Helpers ----------\n function transformValue(input, inputRange, outputRange, clamp = false) {\n const [inMin, inMax] = inputRange;\n const [outMin, outMax] = outputRange;\n let progress = (input - inMin) \/ (inMax - inMin);\n let result = outMin + progress * (outMax - outMin);\n if (clamp) {\n result = outMax > outMin\n ? Math.min(Math.max(result, outMin), outMax)\n : Math.min(Math.max(result, outMax), outMin);\n }\n return result;\n }\n\n function calculateVaporizeSpread(fontSize) {\n const points = [\n { size: 20, spread: 0.2 },\n { size: 50, spread: 0.5 },\n { size: 100, spread: 1.5 }\n ];\n if (fontSize <= points[0].size) return points[0].spread;\n if (fontSize >= points[points.length - 1].size) return points[points.length - 1].spread;\n let i = 0;\n while (i < points.length - 1 && points[i + 1].size < fontSize) i++;\n const p1 = points[i];\n const p2 = points[i + 1];\n return p1.spread + (fontSize - p1.size) * (p2.spread - p1.spread) \/ (p2.size - p1.size);\n }\n\n function parseColor(color) {\n const rgbMatch = color.match(\/rgb\$(\\d+),\\s*(\\d+),\\s*(\\d+)\$\/);\n const rgbaMatch = color.match(\/rgba\$(\\d+),\\s*(\\d+),\\s*(\\d+),\\s*([\\d.]+)\$\/);\n if (rgbaMatch) return `rgba(${rgbaMatch[1]}, ${rgbaMatch[2]}, ${rgbaMatch[3]}, ${rgbaMatch[4]})`;\n if (rgbMatch) return `rgba(${rgbMatch[1]}, ${rgbMatch[2]}, ${rgbMatch[3]}, 1)`;\n return \"rgba(125, 115, 105, 1)\";\n }\n\n \/\/ ---------- Particle System ----------\n function createParticles(ctx, text, textX, textY, font, color) {\n particles = [];\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n ctx.fillStyle = color;\n ctx.font = font;\n ctx.textAlign = ALIGNMENT;\n ctx.textBaseline = \"middle\";\n ctx.imageSmoothingQuality = \"high\";\n ctx.imageSmoothingEnabled = true;\n\n const metrics = ctx.measureText(text);\n const textWidth = metrics.width;\n let textLeft;\n if (ALIGNMENT === \"center\") textLeft = textX - textWidth \/ 2;\n else if (ALIGNMENT === \"left\") textLeft = textX;\n else textLeft = textX - textWidth;\n\n textBoundaries = { left: textLeft, right: textLeft + textWidth, width: textWidth };\n\n ctx.fillText(text, textX, textY);\n\n const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);\n const data = imageData.data;\n\n const currentDPR = canvas.width \/ parseInt(canvas.style.width);\n const sampleRate = Math.max(1, Math.round(currentDPR \/ 3));\n\n for (let y = 0; y < canvas.height; y += sampleRate) {\n for (let x = 0; x < canvas.width; x += sampleRate) {\n const idx = (y * canvas.width + x) * 4;\n const alpha = data[idx + 3];\n if (alpha > 0) {\n const originalAlpha = (alpha \/ 255) * (sampleRate \/ currentDPR);\n particles.push({\n x, y,\n originalX: x,\n originalY: y,\n color: `rgba(${data[idx]}, ${data[idx + 1]}, ${data[idx + 2]}, ${originalAlpha})`,\n opacity: originalAlpha,\n originalAlpha,\n velocityX: 0,\n velocityY: 0,\n angle: 0,\n speed: 0,\n shouldFadeQuickly: false\n });\n }\n }\n }\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n }\n\n function updateParticles(vaporizeX, deltaTime, spread, duration, density) {\n let allVaporized = true;\n particles.forEach(p => {\n const shouldVaporize = DIRECTION === \"left-to-right\"\n ? p.originalX <= vaporizeX\n : p.originalX >= vaporizeX;\n\n if (shouldVaporize) {\n if (p.speed === 0) {\n p.angle = Math.random() * Math.PI * 2;\n p.speed = (Math.random() * 1 + 0.5) * spread;\n p.velocityX = Math.cos(p.angle) * p.speed;\n p.velocityY = Math.sin(p.angle) * p.speed;\n p.shouldFadeQuickly = Math.random() > density;\n }\n\n if (p.shouldFadeQuickly) {\n p.opacity = Math.max(0, p.opacity - deltaTime);\n } else {\n const dx = p.originalX - p.x;\n const dy = p.originalY - p.y;\n const dist = Math.sqrt(dx * dx + dy * dy);\n const damping = Math.max(0.95, 1 - dist \/ (100 * spread));\n const randomSpread = spread * 3;\n p.velocityX = (p.velocityX + (Math.random() - 0.5) * randomSpread + dx * 0.002) * damping;\n p.velocityY = (p.velocityY + (Math.random() - 0.5) * randomSpread + dy * 0.002) * damping;\n\n const maxVel = spread * 2;\n const currVel = Math.sqrt(p.velocityX ** 2 + p.velocityY ** 2);\n if (currVel > maxVel) {\n const scale = maxVel \/ currVel;\n p.velocityX *= scale;\n p.velocityY *= scale;\n }\n\n p.x += p.velocityX * deltaTime * 20;\n p.y += p.velocityY * deltaTime * 10;\n\n const fadeRate = 0.25 * (2000 \/ duration);\n p.opacity = Math.max(0, p.opacity - deltaTime * fadeRate);\n }\n\n if (p.opacity > 0.01) allVaporized = false;\n } else {\n allVaporized = false;\n }\n });\n return allVaporized;\n }\n\n function renderParticles(ctx) {\n ctx.save();\n ctx.scale(dpr, dpr);\n particles.forEach(p => {\n if (p.opacity > 0) {\n const color = p.color.replace(\/[\\d.]+\\)$\/, `${p.opacity})`);\n ctx.fillStyle = color;\n ctx.fillRect(p.x \/ dpr, p.y \/ dpr, 1, 1);\n }\n });\n ctx.restore();\n }\n\n function resetParticles() {\n particles.forEach(p => {\n p.x = p.originalX;\n p.y = p.originalY;\n p.opacity = p.originalAlpha;\n p.speed = 0;\n p.velocityX = 0;\n p.velocityY = 0;\n });\n }\n\n \/\/ ---------- Render & Resize ----------\n function renderCanvas() {\n const width = wrapper.clientWidth;\n const height = wrapper.clientHeight;\n if (!width || !height) return;\n\n canvas.style.width = width + \"px\";\n canvas.style.height = height + \"px\";\n canvas.width = Math.floor(width * dpr);\n canvas.height = Math.floor(height * dpr);\n\n const ctx = canvas.getContext(\"2d\");\n const font = `${FONT_WEIGHT} ${FONT_SIZE * dpr}px ${FONT_FAMILY}`;\n const color = parseColor(COLOR);\n\n const textX = ALIGNMENT === \"center\" ? canvas.width \/ 2\n : ALIGNMENT === \"left\" ? 0 : canvas.width;\n const textY = canvas.height \/ 2;\n const text = TEXTS[currentTextIndex] || \"ARCMID\";\n\n createParticles(ctx, text, textX, textY, font, color);\n }\n\n function resize() {\n dpr = Math.min(window.devicePixelRatio * 1.5 || 1.5, 2.5);\n renderCanvas();\n }\n\n \/\/ ---------- Animation Loop ----------\n const transformedDensity = transformValue(DENSITY, [0, 10], [0.3, 1], true);\n const vaporizeSpread = calculateVaporizeSpread(FONT_SIZE) * SPREAD;\n const VAPORIZE_MS = VAPORIZE_DURATION * 1000;\n const FADE_MS = FADE_IN_DURATION * 1000;\n const WAIT_MS = WAIT_DURATION * 1000;\n\n function animate(time) {\n if (!lastTime) lastTime = time;\n const deltaTime = (time - lastTime) \/ 1000;\n lastTime = time;\n\n const ctx = canvas.getContext(\"2d\");\n if (!ctx || !particles.length) {\n animationId = requestAnimationFrame(animate);\n return;\n }\n\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n\n switch (animationState) {\n case \"static\":\n renderParticles(ctx);\n break;\n\n case \"vaporizing\": {\n vaporizeProgress += deltaTime * 100 \/ (VAPORIZE_MS \/ 1000);\n const progress = Math.min(100, vaporizeProgress);\n const vaporizeX = DIRECTION === \"left-to-right\"\n ? textBoundaries.left + textBoundaries.width * progress \/ 100\n : textBoundaries.right - textBoundaries.width * progress \/ 100;\n\n const allDone = updateParticles(vaporizeX, deltaTime, vaporizeSpread, VAPORIZE_MS, transformedDensity);\n renderParticles(ctx);\n\n if (vaporizeProgress >= 100 && allDone) {\n cycleCount++;\n if (cycleCount >= TOTAL_CYCLES) {\n \/\/ Finished \u2192 fade out the whole loader\n finishLoading();\n return;\n }\n currentTextIndex = (currentTextIndex + 1) % TEXTS.length;\n animationState = \"fadingIn\";\n fadeOpacity = 0;\n }\n break;\n }\n\n case \"fadingIn\": {\n fadeOpacity += deltaTime * 1000 \/ FADE_MS;\n ctx.save();\n ctx.scale(dpr, dpr);\n particles.forEach(p => {\n p.x = p.originalX;\n p.y = p.originalY;\n const opacity = Math.min(fadeOpacity, 1) * p.originalAlpha;\n const color = p.color.replace(\/[\\d.]+\\)$\/, `${opacity})`);\n ctx.fillStyle = color;\n ctx.fillRect(p.x \/ dpr, p.y \/ dpr, 1, 1);\n });\n ctx.restore();\n\n if (fadeOpacity >= 1) {\n animationState = \"waiting\";\n setTimeout(() => {\n animationState = \"vaporizing\";\n vaporizeProgress = 0;\n resetParticles();\n }, WAIT_MS);\n }\n break;\n }\n\n case \"waiting\":\n renderParticles(ctx);\n break;\n }\n\n animationId = requestAnimationFrame(animate);\n }\n\n function finishLoading() {\n cancelAnimationFrame(animationId);\n loader.classList.add(\"fade-out\");\n \/\/ Optional: remove the element after transition\n setTimeout(() => {\n loader.style.display = \"none\";\n }, 900);\n }\n\n \/\/ ---------- Init ----------\n window.addEventListener(\"resize\", resize);\n resize();\n \/\/ Small delay so font loads and layout settles\n setTimeout(() => {\n animationState = \"vaporizing\";\n lastTime = performance.now();\n animationId = requestAnimationFrame(animate);\n }, 300);\n\n \/\/ Fallback: hide loader after max 6 seconds even if animation fails\n setTimeout(finishLoading, 6000);\n <\/script>\n\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-64245c9 e-con e-atomic-element e-flexbox-base e-78beb8f \" data-id=\"64245c9\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"64245c9\" data-e-type=\"e-flexbox\" data-id=\"64245c9\">\n \t\t<div class=\"elementor-element elementor-element-39ebec2 elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"39ebec2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\" \/>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\n <title>Geometric Blur Mesh Background<\/title>\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n html, body {\n width: 100%;\n height: 100%;\n overflow: hidden;\n background: #000;\n cursor: pointer;\n }\n #container {\n position: relative;\n width: 100%;\n height: 100%;\n overflow: hidden;\n }\n canvas {\n display: block;\n width: 100%;\n height: 100%;\n }\n .label {\n position: absolute;\n bottom: 48px;\n left: 50%;\n transform: translateX(-50%);\n pointer-events: none;\n text-align: center;\n font-family: system-ui, -apple-system, sans-serif;\n }\n .label .shape {\n color: rgba(255, 255, 255, 0.2);\n font-size: 12px;\n font-weight: 300;\n letter-spacing: 0.2em;\n }\n .label .hint {\n color: rgba(255, 255, 255, 0.1);\n font-size: 10px;\n font-weight: 300;\n margin-top: 4px;\n letter-spacing: 0.05em;\n }\n <\/style>\n<\/head>\n<body>\n <div id=\"container\">\n <canvas id=\"canvas\"><\/canvas>\n <div class=\"label\">\n <div class=\"shape\" id=\"shape-name\">CUBE<\/div>\n <div class=\"hint\">CLICK TO SWITCH<\/div>\n <\/div>\n <\/div>\n\n <script>\n const fragmentShader = `\n#ifdef GL_ES\nprecision highp float;\n#endif\nuniform vec2 u_mouse;\nuniform vec2 u_resolution;\nuniform float u_pixelRatio;\nuniform float u_time;\nuniform int u_shape;\n#define PI 3.1415926535897932384626433832795\n#define TWO_PI 6.2831853071795864769252867665590\nmat3 rotateX(float angle) {\n float s = sin(angle);\n float c = cos(angle);\n return mat3(1.0, 0.0, 0.0, 0.0, c, -s, 0.0, s, c);\n}\nmat3 rotateY(float angle) {\n float s = sin(angle);\n float c = cos(angle);\n return mat3(c, 0.0, s, 0.0, 1.0, 0.0, -s, 0.0, c);\n}\nmat3 rotateZ(float angle) {\n float s = sin(angle);\n float c = cos(angle);\n return mat3(c, -s, 0.0, s, c, 0.0, 0.0, 0.0, 1.0);\n}\nvec2 coord(in vec2 p) {\n p = p \/ u_resolution.xy;\n if (u_resolution.x > u_resolution.y) {\n p.x *= u_resolution.x \/ u_resolution.y;\n p.x += (u_resolution.y - u_resolution.x) \/ u_resolution.y \/ 2.0;\n } else {\n p.y *= u_resolution.y \/ u_resolution.x;\n p.y += (u_resolution.x - u_resolution.y) \/ u_resolution.x \/ 2.0;\n }\n p -= 0.5;\n return p;\n}\nvec2 project(vec3 p) {\n float perspective = 2.0 \/ (2.0 - p.z);\n return p.xy * perspective;\n}\nfloat distToSegment(vec2 p, vec2 a, vec2 b) {\n vec2 pa = p - a;\n vec2 ba = b - a;\n float h = clamp(dot(pa, ba) \/ dot(ba, ba), 0.0, 1.0);\n return length(pa - ba * h);\n}\nfloat drawLine(vec2 p, vec2 a, vec2 b, float thickness, float blur) {\n float d = distToSegment(p, a, b);\n return smoothstep(thickness + blur, thickness - blur, d);\n}\nvoid getCubeVertices(out vec3 v[8]) {\n float s = 0.7;\n v[0] = vec3(-s, -s, -s);\n v[1] = vec3( s, -s, -s);\n v[2] = vec3( s, s, -s);\n v[3] = vec3(-s, s, -s);\n v[4] = vec3(-s, -s, s);\n v[5] = vec3( s, -s, s);\n v[6] = vec3( s, s, s);\n v[7] = vec3(-s, s, s);\n}\nvoid getTetrahedronVertices(out vec3 v[4]) {\n float a = 1.0 \/ sqrt(3.0);\n v[0] = vec3( a, a, a);\n v[1] = vec3( a, -a, -a);\n v[2] = vec3(-a, a, -a);\n v[3] = vec3(-a, -a, a);\n}\nvoid getOctahedronVertices(out vec3 v[6]) {\n v[0] = vec3( 1.0, 0.0, 0.0);\n v[1] = vec3(-1.0, 0.0, 0.0);\n v[2] = vec3( 0.0, 1.0, 0.0);\n v[3] = vec3( 0.0, -1.0, 0.0);\n v[4] = vec3( 0.0, 0.0, 1.0);\n v[5] = vec3( 0.0, 0.0, -1.0);\n}\nvoid getIcosahedronVertices(out vec3 v[12]) {\n float t = (1.0 + sqrt(5.0)) \/ 2.0;\n float s = 1.0 \/ sqrt(1.0 + t * t);\n v[0] = vec3(-s, t * s, 0);\n v[1] = vec3( s, t * s, 0);\n v[2] = vec3(-s, -t * s, 0);\n v[3] = vec3( s, -t * s, 0);\n v[4] = vec3(0, -s, t * s);\n v[5] = vec3(0, s, t * s);\n v[6] = vec3(0, -s, -t * s);\n v[7] = vec3(0, s, -t * s);\n v[8] = vec3( t * s, 0, -s);\n v[9] = vec3( t * s, 0, s);\n v[10] = vec3(-t * s, 0, -s);\n v[11] = vec3(-t * s, 0, s);\n}\nfloat drawWireframe(vec2 p, int shape, mat3 rotation, float scale, float thickness, float blur) {\n float result = 0.0;\n if (shape == 0) {\n vec3 v[8];\n getCubeVertices(v);\n for (int i = 0; i < 8; i++) v[i] = rotation * (v[i] * scale);\n result += drawLine(p, project(v[0]), project(v[1]), thickness, blur);\n result += drawLine(p, project(v[1]), project(v[2]), thickness, blur);\n result += drawLine(p, project(v[2]), project(v[3]), thickness, blur);\n result += drawLine(p, project(v[3]), project(v[0]), thickness, blur);\n result += drawLine(p, project(v[4]), project(v[5]), thickness, blur);\n result += drawLine(p, project(v[5]), project(v[6]), thickness, blur);\n result += drawLine(p, project(v[6]), project(v[7]), thickness, blur);\n result += drawLine(p, project(v[7]), project(v[4]), thickness, blur);\n result += drawLine(p, project(v[0]), project(v[4]), thickness, blur);\n result += drawLine(p, project(v[1]), project(v[5]), thickness, blur);\n result += drawLine(p, project(v[2]), project(v[6]), thickness, blur);\n result += drawLine(p, project(v[3]), project(v[7]), thickness, blur);\n } else if (shape == 1) {\n vec3 v[4];\n getTetrahedronVertices(v);\n for (int i = 0; i < 4; i++) v[i] = rotation * (v[i] * scale);\n result += drawLine(p, project(v[0]), project(v[1]), thickness, blur);\n result += drawLine(p, project(v[0]), project(v[2]), thickness, blur);\n result += drawLine(p, project(v[0]), project(v[3]), thickness, blur);\n result += drawLine(p, project(v[1]), project(v[2]), thickness, blur);\n result += drawLine(p, project(v[1]), project(v[3]), thickness, blur);\n result += drawLine(p, project(v[2]), project(v[3]), thickness, blur);\n } else if (shape == 2) {\n vec3 v[6];\n getOctahedronVertices(v);\n for (int i = 0; i < 6; i++) v[i] = rotation * (v[i] * scale);\n result += drawLine(p, project(v[2]), project(v[0]), thickness, blur);\n result += drawLine(p, project(v[2]), project(v[1]), thickness, blur);\n result += drawLine(p, project(v[2]), project(v[4]), thickness, blur);\n result += drawLine(p, project(v[2]), project(v[5]), thickness, blur);\n result += drawLine(p, project(v[3]), project(v[0]), thickness, blur);\n result += drawLine(p, project(v[3]), project(v[1]), thickness, blur);\n result += drawLine(p, project(v[3]), project(v[4]), thickness, blur);\n result += drawLine(p, project(v[3]), project(v[5]), thickness, blur);\n result += drawLine(p, project(v[0]), project(v[4]), thickness, blur);\n result += drawLine(p, project(v[4]), project(v[1]), thickness, blur);\n result += drawLine(p, project(v[1]), project(v[5]), thickness, blur);\n result += drawLine(p, project(v[5]), project(v[0]), thickness, blur);\n } else if (shape == 3) {\n vec3 v[12];\n getIcosahedronVertices(v);\n for (int i = 0; i < 12; i++) v[i] = rotation * (v[i] * scale);\n result += drawLine(p, project(v[0]), project(v[1]), thickness, blur);\n result += drawLine(p, project(v[0]), project(v[5]), thickness, blur);\n result += drawLine(p, project(v[0]), project(v[7]), thickness, blur);\n result += drawLine(p, project(v[0]), project(v[10]), thickness, blur);\n result += drawLine(p, project(v[0]), project(v[11]), thickness, blur);\n result += drawLine(p, project(v[1]), project(v[5]), thickness, blur);\n result += drawLine(p, project(v[1]), project(v[7]), thickness, blur);\n result += drawLine(p, project(v[1]), project(v[8]), thickness, blur);\n result += drawLine(p, project(v[1]), project(v[9]), thickness, blur);\n result += drawLine(p, project(v[2]), project(v[3]), thickness, blur);\n result += drawLine(p, project(v[2]), project(v[4]), thickness, blur);\n result += drawLine(p, project(v[2]), project(v[6]), thickness, blur);\n result += drawLine(p, project(v[2]), project(v[10]), thickness, blur);\n result += drawLine(p, project(v[2]), project(v[11]), thickness, blur);\n result += drawLine(p, project(v[3]), project(v[4]), thickness, blur);\n result += drawLine(p, project(v[3]), project(v[6]), thickness, blur);\n result += drawLine(p, project(v[3]), project(v[8]), thickness, blur);\n result += drawLine(p, project(v[3]), project(v[9]), thickness, blur);\n result += drawLine(p, project(v[4]), project(v[5]), thickness, blur);\n result += drawLine(p, project(v[4]), project(v[11]), thickness, blur);\n result += drawLine(p, project(v[5]), project(v[11]), thickness, blur);\n result += drawLine(p, project(v[6]), project(v[7]), thickness, blur);\n result += drawLine(p, project(v[6]), project(v[8]), thickness, blur);\n result += drawLine(p, project(v[6]), project(v[10]), thickness, blur);\n result += drawLine(p, project(v[7]), project(v[10]), thickness, blur);\n result += drawLine(p, project(v[8]), project(v[9]), thickness, blur);\n result += drawLine(p, project(v[9]), project(v[11]), thickness, blur);\n result += drawLine(p, project(v[10]), project(v[11]), thickness, blur);\n } else if (shape == 4) {\n vec3 v[5];\n float s = 0.7;\n v[0] = vec3(-s, 0.0, -s);\n v[1] = vec3( s, 0.0, -s);\n v[2] = vec3( s, 0.0, s);\n v[3] = vec3(-s, 0.0, s);\n v[4] = vec3( 0.0, 1.0, 0.0);\n for (int i = 0; i < 5; i++) v[i] = rotation * (v[i] * scale);\n result += drawLine(p, project(v[0]), project(v[1]), thickness, blur);\n result += drawLine(p, project(v[1]), project(v[2]), thickness, blur);\n result += drawLine(p, project(v[2]), project(v[3]), thickness, blur);\n result += drawLine(p, project(v[3]), project(v[0]), thickness, blur);\n result += drawLine(p, project(v[0]), project(v[4]), thickness, blur);\n result += drawLine(p, project(v[1]), project(v[4]), thickness, blur);\n result += drawLine(p, project(v[2]), project(v[4]), thickness, blur);\n result += drawLine(p, project(v[3]), project(v[4]), thickness, blur);\n } else if (shape == 5) {\n vec3 v[6];\n float s = 0.6;\n v[0] = vec3(-s, 0.0, -s);\n v[1] = vec3( s, 0.0, -s);\n v[2] = vec3( s, 0.0, s);\n v[3] = vec3(-s, 0.0, s);\n v[4] = vec3( 0.0, 1.0, 0.0);\n v[5] = vec3( 0.0, -1.0, 0.0);\n for (int i = 0; i < 6; i++) v[i] = rotation * (v[i] * scale);\n result += drawLine(p, project(v[0]), project(v[1]), thickness, blur);\n result += drawLine(p, project(v[1]), project(v[2]), thickness, blur);\n result += drawLine(p, project(v[2]), project(v[3]), thickness, blur);\n result += drawLine(p, project(v[3]), project(v[0]), thickness, blur);\n result += drawLine(p, project(v[0]), project(v[4]), thickness, blur);\n result += drawLine(p, project(v[1]), project(v[4]), thickness, blur);\n result += drawLine(p, project(v[2]), project(v[4]), thickness, blur);\n result += drawLine(p, project(v[3]), project(v[4]), thickness, blur);\n result += drawLine(p, project(v[0]), project(v[5]), thickness, blur);\n result += drawLine(p, project(v[1]), project(v[5]), thickness, blur);\n result += drawLine(p, project(v[2]), project(v[5]), thickness, blur);\n result += drawLine(p, project(v[3]), project(v[5]), thickness, blur);\n } else if (shape == 6) {\n vec3 v[12];\n float angleStep = TWO_PI \/ 6.0;\n v[0] = vec3(cos(0.0 * angleStep), -1.0, sin(0.0 * angleStep));\n v[1] = vec3(cos(1.0 * angleStep), -1.0, sin(1.0 * angleStep));\n v[2] = vec3(cos(2.0 * angleStep), -1.0, sin(2.0 * angleStep));\n v[3] = vec3(cos(3.0 * angleStep), -1.0, sin(3.0 * angleStep));\n v[4] = vec3(cos(4.0 * angleStep), -1.0, sin(4.0 * angleStep));\n v[5] = vec3(cos(5.0 * angleStep), -1.0, sin(5.0 * angleStep));\n v[6] = vec3(cos(0.0 * angleStep), 1.0, sin(0.0 * angleStep));\n v[7] = vec3(cos(1.0 * angleStep), 1.0, sin(1.0 * angleStep));\n v[8] = vec3(cos(2.0 * angleStep), 1.0, sin(2.0 * angleStep));\n v[9] = vec3(cos(3.0 * angleStep), 1.0, sin(3.0 * angleStep));\n v[10] = vec3(cos(4.0 * angleStep), 1.0, sin(4.0 * angleStep));\n v[11] = vec3(cos(5.0 * angleStep), 1.0, sin(5.0 * angleStep));\n for (int i = 0; i < 12; i++) v[i] = rotation * (v[i] * scale);\n result += drawLine(p, project(v[0]), project(v[1]), thickness, blur);\n result += drawLine(p, project(v[1]), project(v[2]), thickness, blur);\n result += drawLine(p, project(v[2]), project(v[3]), thickness, blur);\n result += drawLine(p, project(v[3]), project(v[4]), thickness, blur);\n result += drawLine(p, project(v[4]), project(v[5]), thickness, blur);\n result += drawLine(p, project(v[5]), project(v[0]), thickness, blur);\n result += drawLine(p, project(v[6]), project(v[7]), thickness, blur);\n result += drawLine(p, project(v[7]), project(v[8]), thickness, blur);\n result += drawLine(p, project(v[8]), project(v[9]), thickness, blur);\n result += drawLine(p, project(v[9]), project(v[10]), thickness, blur);\n result += drawLine(p, project(v[10]), project(v[11]), thickness, blur);\n result += drawLine(p, project(v[11]), project(v[6]), thickness, blur);\n result += drawLine(p, project(v[0]), project(v[6]), thickness, blur);\n result += drawLine(p, project(v[1]), project(v[7]), thickness, blur);\n result += drawLine(p, project(v[2]), project(v[8]), thickness, blur);\n result += drawLine(p, project(v[3]), project(v[9]), thickness, blur);\n result += drawLine(p, project(v[4]), project(v[10]), thickness, blur);\n result += drawLine(p, project(v[5]), project(v[11]), thickness, blur);\n } else {\n float t = u_time * 0.5;\n float morph = sin(t) * 0.5 + 0.5;\n vec3 cube[8];\n getCubeVertices(cube);\n vec3 octa[6];\n getOctahedronVertices(octa);\n vec3 v[8];\n for (int i = 0; i < 8; i++) {\n if (i < 6) {\n v[i] = mix(cube[i], octa[i] * 1.5, morph);\n } else {\n v[i] = cube[i] * (1.0 - morph * 0.3);\n }\n v[i] = rotation * (v[i] * scale);\n }\n float alpha = 1.0 - morph * 0.5;\n result += drawLine(p, project(v[0]), project(v[1]), thickness, blur) * alpha;\n result += drawLine(p, project(v[1]), project(v[2]), thickness, blur) * alpha;\n result += drawLine(p, project(v[2]), project(v[3]), thickness, blur) * alpha;\n result += drawLine(p, project(v[3]), project(v[0]), thickness, blur) * alpha;\n result += drawLine(p, project(v[4]), project(v[5]), thickness, blur) * alpha;\n result += drawLine(p, project(v[5]), project(v[6]), thickness, blur) * alpha;\n result += drawLine(p, project(v[6]), project(v[7]), thickness, blur) * alpha;\n result += drawLine(p, project(v[7]), project(v[4]), thickness, blur) * alpha;\n result += drawLine(p, project(v[0]), project(v[6]), thickness, blur) * morph;\n result += drawLine(p, project(v[1]), project(v[7]), thickness, blur) * morph;\n result += drawLine(p, project(v[2]), project(v[4]), thickness, blur) * morph;\n result += drawLine(p, project(v[3]), project(v[5]), thickness, blur) * morph;\n }\n return clamp(result, 0.0, 1.0);\n}\nvec3 render(vec2 st, vec2 mouse) {\n float mouseDistance = length(st - mouse);\n float mouseInfluence = 1.0 - smoothstep(0.0, 0.5, mouseDistance);\n float time = u_time * 0.2;\n mat3 rotation = rotateY(time + (mouse.x - 0.5) * mouseInfluence * 1.0) *\n rotateX(time * 0.7 + (mouse.y - 0.5) * mouseInfluence * 1.0) *\n rotateZ(time * 0.1);\n float scale = 0.35;\n float blur = mix(0.0001, 0.05, mouseInfluence);\n float thickness = mix(0.002, 0.003, mouseInfluence);\n float shape = drawWireframe(st, u_shape, rotation, scale, thickness, blur);\n vec3 color = vec3(0.9, 0.95, 1.0);\n float dimming = 1.0 - mouseInfluence * 0.3;\n color *= shape * dimming;\n float vignette = 1.0 - length(st) * 0.2;\n color *= vignette;\n color = pow(color, vec3(0.9));\n return color;\n}\nvoid main() {\n vec2 st = coord(gl_FragCoord.xy);\n vec2 mouse = coord(u_mouse * u_pixelRatio) * vec2(1., -1.);\n vec3 color = render(st, mouse);\n gl_FragColor = vec4(color, 1.0);\n}\n`;\n\n const vertexShader = `\nattribute vec3 a_position;\nattribute vec2 a_uv;\nvarying vec2 v_texcoord;\nvoid main() {\n gl_Position = vec4(a_position, 1.0);\n v_texcoord = a_uv;\n}\n`;\n\n const shapes = [\n \"Cube\",\n \"Tetrahedron\",\n \"Octahedron\",\n \"Icosahedron\",\n \"Pyramid\",\n \"Diamond\",\n \"Hexagonal Prism\",\n \"Morphing\"\n ];\n\n const canvas = document.getElementById('canvas');\n const container = document.getElementById('container');\n const shapeNameEl = document.getElementById('shape-name');\n\n let currentShape = 0;\n let gl = null;\n let program = null;\n let uniforms = {};\n let mouse = { x: 0, y: 0 };\n let mouseDamp = { x: 0, y: 0 };\n let startTime = Date.now();\n let animationId = null;\n\n function createShader(type, source) {\n const shader = gl.createShader(type);\n gl.shaderSource(shader, source);\n gl.compileShader(shader);\n if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n console.error('Shader error:', gl.getShaderInfoLog(shader));\n gl.deleteShader(shader);\n return null;\n }\n return shader;\n }\n\n function initWebGL() {\n gl = canvas.getContext('webgl', {\n antialias: true,\n alpha: false,\n premultipliedAlpha: false,\n preserveDrawingBuffer: false\n });\n if (!gl) {\n console.error('WebGL not supported');\n return false;\n }\n gl.clearColor(0, 0, 0, 1);\n\n const vShader = createShader(gl.VERTEX_SHADER, vertexShader);\n const fShader = createShader(gl.FRAGMENT_SHADER, fragmentShader);\n if (!vShader || !fShader) return false;\n\n program = gl.createProgram();\n gl.attachShader(program, vShader);\n gl.attachShader(program, fShader);\n gl.linkProgram(program);\n if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {\n console.error('Program link error:', gl.getProgramInfoLog(program));\n return false;\n }\n gl.useProgram(program);\n\n uniforms = {\n u_mouse: gl.getUniformLocation(program, 'u_mouse'),\n u_resolution: gl.getUniformLocation(program, 'u_resolution'),\n u_pixelRatio: gl.getUniformLocation(program, 'u_pixelRatio'),\n u_time: gl.getUniformLocation(program, 'u_time'),\n u_shape: gl.getUniformLocation(program, 'u_shape')\n };\n\n const vertices = new Float32Array([-1, -1, 0, 1, -1, 0, -1, 1, 0, 1, 1, 0]);\n const uvs = new Float32Array([0, 0, 1, 0, 0, 1, 1, 1]);\n\n const positionBuffer = gl.createBuffer();\n gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);\n gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);\n const posLoc = gl.getAttribLocation(program, 'a_position');\n gl.enableVertexAttribArray(posLoc);\n gl.vertexAttribPointer(posLoc, 3, gl.FLOAT, false, 0, 0);\n\n const uvBuffer = gl.createBuffer();\n gl.bindBuffer(gl.ARRAY_BUFFER, uvBuffer);\n gl.bufferData(gl.ARRAY_BUFFER, uvs, gl.STATIC_DRAW);\n const uvLoc = gl.getAttribLocation(program, 'a_uv');\n gl.enableVertexAttribArray(uvLoc);\n gl.vertexAttribPointer(uvLoc, 2, gl.FLOAT, false, 0, 0);\n\n return true;\n }\n\n function resize() {\n const dpr = Math.min(window.devicePixelRatio || 1, 2);\n const width = container.clientWidth;\n const height = container.clientHeight;\n canvas.width = width * dpr;\n canvas.height = height * dpr;\n canvas.style.width = width + 'px';\n canvas.style.height = height + 'px';\n if (gl) gl.viewport(0, 0, canvas.width, canvas.height);\n }\n\n function onMouseMove(e) {\n const rect = canvas.getBoundingClientRect();\n const clientX = e.touches ? e.touches[0].clientX : e.clientX;\n const clientY = e.touches ? e.touches[0].clientY : e.clientY;\n mouse.x = clientX - rect.left;\n mouse.y = clientY - rect.top;\n }\n\n function onClick() {\n currentShape = (currentShape + 1) % shapes.length;\n shapeNameEl.textContent = shapes[currentShape].toUpperCase();\n }\n\n function onKeyPress(e) {\n if (e.key >= '1' && e.key <= '8') {\n const idx = parseInt(e.key) - 1;\n if (idx < shapes.length) {\n currentShape = idx;\n shapeNameEl.textContent = shapes[currentShape].toUpperCase();\n }\n }\n }\n\n let lastTime = performance.now();\n function animate(time) {\n const delta = (time - lastTime) \/ 1000;\n lastTime = time;\n\n if (!gl || !program) {\n animationId = requestAnimationFrame(animate);\n return;\n }\n\n const damping = 8;\n mouseDamp.x += (mouse.x - mouseDamp.x) * damping * delta;\n mouseDamp.y += (mouse.y - mouseDamp.y) * damping * delta;\n\n gl.clearColor(0, 0, 0, 1);\n gl.clear(gl.COLOR_BUFFER_BIT);\n\n const dpr = Math.min(window.devicePixelRatio || 1, 2);\n const elapsed = (Date.now() - startTime) \/ 1000;\n\n if (uniforms.u_mouse) gl.uniform2f(uniforms.u_mouse, mouseDamp.x, mouseDamp.y);\n if (uniforms.u_resolution) gl.uniform2f(uniforms.u_resolution, canvas.width, canvas.height);\n if (uniforms.u_pixelRatio) gl.uniform1f(uniforms.u_pixelRatio, dpr);\n if (uniforms.u_time) gl.uniform1f(uniforms.u_time, elapsed);\n if (uniforms.u_shape) gl.uniform1i(uniforms.u_shape, currentShape);\n\n gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);\n animationId = requestAnimationFrame(animate);\n }\n\n \/\/ Init\n if (initWebGL()) {\n resize();\n window.addEventListener('resize', resize);\n window.addEventListener('mousemove', onMouseMove);\n window.addEventListener('touchmove', onMouseMove, { passive: true });\n container.addEventListener('click', onClick);\n window.addEventListener('keypress', onKeyPress);\n animationId = requestAnimationFrame(animate);\n }\n <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>ARCMID Loading ARCMID Geometric Blur Mesh Background CUBE CLICK TO SWITCH<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-2","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/arcmid.com\/wp-json\/wp\/v2\/pages\/2","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/arcmid.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/arcmid.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/arcmid.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/arcmid.com\/wp-json\/wp\/v2\/comments?post=2"}],"version-history":[{"count":125,"href":"https:\/\/arcmid.com\/wp-json\/wp\/v2\/pages\/2\/revisions"}],"predecessor-version":[{"id":217,"href":"https:\/\/arcmid.com\/wp-json\/wp\/v2\/pages\/2\/revisions\/217"}],"wp:attachment":[{"href":"https:\/\/arcmid.com\/wp-json\/wp\/v2\/media?parent=2"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}