{"id":279,"date":"2026-04-13T01:39:33","date_gmt":"2026-04-13T01:39:33","guid":{"rendered":"https:\/\/metaartron.com\/?page_id=279"},"modified":"2026-04-13T01:40:05","modified_gmt":"2026-04-13T01:40:05","slug":"wave","status":"publish","type":"page","link":"https:\/\/metaartron.com\/?page_id=279","title":{"rendered":"wave"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"279\" class=\"elementor elementor-279\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4b3b442 e-flex e-con-boxed e-con e-parent\" data-id=\"4b3b442\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4b7d1b4 elementor-widget elementor-widget-html\" data-id=\"4b7d1b4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- META ARTRON BACKGROUND V2 -->\r\n\r\n<canvas id=\"meta-bg\"><\/canvas>\r\n\r\n<style>\r\n#meta-bg{\r\n  position: fixed;\r\n  top:0;\r\n  left:0;\r\n  width:100%;\r\n  height:100%;\r\n  z-index:-1;\r\n  pointer-events:none;\r\n}\r\n<\/style>\r\n\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/three.js\/r134\/three.min.js\"><\/script>\r\n\r\n<script>\r\n(function(){\r\n\r\n\/\/ SCENE\r\nconst scene = new THREE.Scene();\r\n\r\nconst camera = new THREE.PerspectiveCamera(\r\n  50,\r\n  window.innerWidth\/window.innerHeight,\r\n  0.1,\r\n  1000\r\n);\r\ncamera.position.z = 4;\r\n\r\n\/\/ RENDERER\r\nconst renderer = new THREE.WebGLRenderer({\r\n  canvas: document.getElementById(\"meta-bg\"),\r\n  alpha: true,\r\n  antialias: true\r\n});\r\n\r\nrenderer.setSize(window.innerWidth, window.innerHeight);\r\nrenderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));\r\n\r\n\/\/ GEOMETRY (denser = sharper ribs)\r\nconst geometry = new THREE.PlaneGeometry(10,10,300,300);\r\n\r\n\/\/ UNIFORMS\r\nconst uniforms = {\r\n  time: { value: 0 },\r\n  mouse: { value: new THREE.Vector2(0,0) }\r\n};\r\n\r\n\/\/ \ud83d\udd34 NEW VERTEX \u2014 FLOW FIELD + RIB STRUCTURE\r\nconst material = new THREE.ShaderMaterial({\r\n  uniforms: uniforms,\r\n  transparent: true,\r\n\r\n  vertexShader: `\r\n    uniform float time;\r\n    uniform vec2 mouse;\r\n\r\n    varying float vRib;\r\n    varying float vHeight;\r\n    varying vec2 vUv;\r\n\r\n    \/\/ directional flow field (not noise)\r\n    float flow(vec2 p){\r\n        float angle = sin(p.x * 1.5 + time * 0.5) * 0.8;\r\n        vec2 dir = vec2(cos(angle), sin(angle));\r\n\r\n        float f = dot(p, dir);\r\n        return sin(f * 6.0);\r\n    }\r\n\r\n    void main(){\r\n\r\n        vUv = uv;\r\n\r\n        vec3 pos = position;\r\n\r\n        vec2 p = pos.xy;\r\n\r\n        \/\/ FLOW DISPLACEMENT\r\n        float f = flow(p);\r\n\r\n        \/\/ STRUCTURAL RIBS (sharp bands)\r\n        float ribs = abs(sin(p.x * 8.0));\r\n        ribs = pow(ribs, 6.0); \/\/ sharpen\r\n\r\n        \/\/ HEIGHT COMBINATION\r\n        float height = f * 0.6 + ribs * 0.8;\r\n\r\n        \/\/ MOUSE INTERACTION (subtle push)\r\n        height += length(p - mouse * 2.0) * -0.15;\r\n\r\n        pos.z += height;\r\n\r\n        vRib = ribs;\r\n        vHeight = height;\r\n\r\n        gl_Position = projectionMatrix * modelViewMatrix * vec4(pos,1.0);\r\n    }\r\n  `,\r\n\r\n  \/\/ \ud83d\udd34 FRAGMENT \u2014 HARD EDGE + ARCHITECTURAL LOOK\r\n  fragmentShader: `\r\n    precision highp float;\r\n\r\n    varying float vRib;\r\n    varying float vHeight;\r\n    varying vec2 vUv;\r\n\r\n    void main(){\r\n\r\n        \/\/ BASE DARK\r\n        vec3 base = vec3(0.015,0.015,0.02);\r\n\r\n        \/\/ STRUCTURAL RED LINES (ribs)\r\n        vec3 ribColor = vec3(1.0,0.08,0.08) * vRib;\r\n\r\n        \/\/ FLOW SHADE\r\n        vec3 flowShade = vec3(0.3,0.02,0.02) * abs(vHeight);\r\n\r\n        \/\/ EDGE HIGHLIGHT (metal\/glass feel)\r\n        float edge = smoothstep(0.6,1.0,vRib);\r\n        vec3 highlight = vec3(1.0,0.2,0.2) * edge * 0.6;\r\n\r\n        \/\/ PANEL GRID SUBTLE (architectural detailing)\r\n        float grid = step(0.98, fract(vUv.x * 20.0)) \r\n                   + step(0.98, fract(vUv.y * 20.0));\r\n\r\n        vec3 gridColor = vec3(1.0,0.05,0.05) * grid * 0.15;\r\n\r\n        vec3 color = base + ribColor + flowShade + highlight + gridColor;\r\n\r\n        gl_FragColor = vec4(color, 0.95);\r\n    }\r\n  `,\r\n\r\n  side: THREE.DoubleSide\r\n});\r\n\r\n\/\/ MESH\r\nconst mesh = new THREE.Mesh(geometry, material);\r\nscene.add(mesh);\r\n\r\n\/\/ MOUSE\r\nwindow.addEventListener(\"mousemove\", (e)=>{\r\n  uniforms.mouse.value.x = (e.clientX\/window.innerWidth - 0.5)*2;\r\n  uniforms.mouse.value.y = (e.clientY\/window.innerHeight - 0.5)*2;\r\n});\r\n\r\n\/\/ ANIMATION\r\nfunction animate(){\r\n  requestAnimationFrame(animate);\r\n\r\n  uniforms.time.value += 0.01;\r\n\r\n  mesh.rotation.x = -0.75 + uniforms.mouse.value.y * 0.2;\r\n  mesh.rotation.y = uniforms.mouse.value.x * 0.3;\r\n\r\n  renderer.render(scene,camera);\r\n}\r\nanimate();\r\n\r\n\/\/ RESPONSIVE\r\nwindow.addEventListener(\"resize\", ()=>{\r\n  renderer.setSize(window.innerWidth, window.innerHeight);\r\n  camera.aspect = window.innerWidth\/window.innerHeight;\r\n  camera.updateProjectionMatrix();\r\n});\r\n\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-279","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/metaartron.com\/index.php?rest_route=\/wp\/v2\/pages\/279","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/metaartron.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/metaartron.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/metaartron.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/metaartron.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=279"}],"version-history":[{"count":4,"href":"https:\/\/metaartron.com\/index.php?rest_route=\/wp\/v2\/pages\/279\/revisions"}],"predecessor-version":[{"id":283,"href":"https:\/\/metaartron.com\/index.php?rest_route=\/wp\/v2\/pages\/279\/revisions\/283"}],"wp:attachment":[{"href":"https:\/\/metaartron.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=279"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}