{"id":290,"date":"2026-04-13T01:56:23","date_gmt":"2026-04-13T01:56:23","guid":{"rendered":"https:\/\/metaartron.com\/?page_id=290"},"modified":"2026-04-13T01:57:16","modified_gmt":"2026-04-13T01:57:16","slug":"elementor-page-290","status":"publish","type":"page","link":"https:\/\/metaartron.com\/?page_id=290","title":{"rendered":"dragon pattern panel"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"290\" class=\"elementor elementor-290\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a9a4f35 e-flex e-con-boxed e-con e-parent\" data-id=\"a9a4f35\" 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-789a77e elementor-widget elementor-widget-html\" data-id=\"789a77e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<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 =====\r\nconst geometry = new THREE.PlaneGeometry(10,10,200,200);\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\/\/ ===== SHADER =====\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 vPanel;\r\n    varying float vJoint;\r\n    varying vec2 vUv;\r\n\r\n    void main(){\r\n\r\n      vUv = uv;\r\n\r\n      vec3 pos = position;\r\n\r\n      \/\/ \ud83d\udd34 PANEL GRID\r\n      vec2 grid = uv * vec2(10.0, 16.0);\r\n\r\n      \/\/ staggered pattern (like cladding)\r\n      if(mod(floor(grid.y), 2.0) > 0.5){\r\n        grid.x += 0.5;\r\n      }\r\n\r\n      vec2 gv = fract(grid) - 0.5;\r\n\r\n      \/\/ PANEL SHAPE (rectangular + curved hybrid)\r\n      float panel = smoothstep(0.45, 0.0, length(gv * vec2(1.2,0.8)));\r\n\r\n      \/\/ PANEL JOINTS\r\n      float jointX = smoothstep(0.48,0.5,abs(gv.x));\r\n      float jointY = smoothstep(0.48,0.5,abs(gv.y));\r\n      float joints = max(jointX, jointY);\r\n\r\n      \/\/ HEIGHT (panel extrusion)\r\n      float height = panel * 0.6;\r\n\r\n      \/\/ joints are recessed\r\n      height -= joints * 0.5;\r\n\r\n      \/\/ directional facade flow\r\n      float flow = sin(pos.x*1.5 + time*0.8) * 0.1;\r\n      height += flow;\r\n\r\n      pos.z += height;\r\n\r\n      vPanel = panel;\r\n      vJoint = joints;\r\n\r\n      gl_Position = projectionMatrix * modelViewMatrix * vec4(pos,1.0);\r\n    }\r\n  `,\r\n\r\n  fragmentShader: `\r\n    precision highp float;\r\n\r\n    varying float vPanel;\r\n    varying float vJoint;\r\n    varying vec2 vUv;\r\n\r\n    void main(){\r\n\r\n      \/\/ BASE (architectural black)\r\n      vec3 base = vec3(0.015,0.015,0.02);\r\n\r\n      \/\/ PANEL MATERIAL (dark red metal)\r\n      vec3 panelColor = vec3(0.25,0.02,0.02) * vPanel;\r\n\r\n      \/\/ JOINTS (shadow gaps)\r\n      vec3 jointColor = vec3(0.0,0.0,0.0) * vJoint;\r\n\r\n      \/\/ GOLD SEAM DETAIL\r\n      float seam = pow(1.0 - vJoint, 8.0);\r\n      vec3 gold = vec3(1.0,0.75,0.2) * seam * 0.6;\r\n\r\n      \/\/ EDGE HIGHLIGHT (machined finish)\r\n      float edge = pow(vPanel, 4.0);\r\n      vec3 highlight = vec3(1.0,0.2,0.15) * edge * 0.4;\r\n\r\n      \/\/ MICRO PANEL TEXTURE\r\n      float grain = fract(\r\n        sin(dot(vUv*180.0, vec2(12.9898,78.233))) * 43758.5453\r\n      );\r\n      vec3 micro = vec3(grain * 0.03);\r\n\r\n      vec3 color = base + panelColor + gold + highlight + micro;\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.25;\r\n\r\n  renderer.render(scene,camera);\r\n}\r\nanimate();\r\n\r\n\/\/ ===== RESIZE =====\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-290","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/metaartron.com\/index.php?rest_route=\/wp\/v2\/pages\/290","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=290"}],"version-history":[{"count":7,"href":"https:\/\/metaartron.com\/index.php?rest_route=\/wp\/v2\/pages\/290\/revisions"}],"predecessor-version":[{"id":300,"href":"https:\/\/metaartron.com\/index.php?rest_route=\/wp\/v2\/pages\/290\/revisions\/300"}],"wp:attachment":[{"href":"https:\/\/metaartron.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=290"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}