{"id":284,"date":"2026-04-13T01:51:09","date_gmt":"2026-04-13T01:51:09","guid":{"rendered":"https:\/\/metaartron.com\/?page_id=284"},"modified":"2026-04-13T01:53:30","modified_gmt":"2026-04-13T01:53:30","slug":"dragon-skin","status":"publish","type":"page","link":"https:\/\/metaartron.com\/?page_id=284","title":{"rendered":"dragon skin"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"284\" class=\"elementor elementor-284\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-03ed8aa e-flex e-con-boxed e-con e-parent\" data-id=\"03ed8aa\" 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-b517012 elementor-widget elementor-widget-html\" data-id=\"b517012\" 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,180,180);\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 vScale;\r\n    varying float vEdge;\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 SCALE GRID (offset rows like dragon skin)\r\n      vec2 grid = uv * vec2(12.0, 18.0);\r\n\r\n      \/\/ shift every alternate row\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      float dist = length(gv);\r\n\r\n      \/\/ SCALE SHAPE\r\n      float scale = smoothstep(0.4, 0.0, dist);\r\n\r\n      \/\/ EDGE (between scales)\r\n      float edge = smoothstep(0.45, 0.5, dist);\r\n\r\n      \/\/ MOTION (breathing + wave)\r\n      float wave = sin(pos.x*2.0 + time*1.5) * 0.15;\r\n      float breathe = sin(time*0.8) * 0.1;\r\n\r\n      float height = scale * 0.6 + wave + breathe;\r\n\r\n      pos.z += height;\r\n\r\n      vScale = scale;\r\n      vEdge = edge;\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 vScale;\r\n    varying float vEdge;\r\n    varying vec2 vUv;\r\n\r\n    void main(){\r\n\r\n      \/\/ BASE DARK\r\n      vec3 base = vec3(0.01,0.01,0.015);\r\n\r\n      \/\/ SCALE BODY (deep red)\r\n      vec3 scaleColor = vec3(0.35,0.03,0.03) * vScale;\r\n\r\n      \/\/ EDGE GLOW (dragon energy)\r\n      vec3 edgeGlow = vec3(1.0,0.1,0.05) * (1.0 - vEdge) * 0.7;\r\n\r\n      \/\/ METALLIC SHINE\r\n      float shine = pow(vScale, 3.0);\r\n      vec3 highlight = vec3(1.0,0.3,0.2) * shine * 0.5;\r\n\r\n      \/\/ MICRO DETAIL\r\n      float grain = fract(\r\n        sin(dot(vUv*200.0, vec2(12.9898,78.233))) * 43758.5453\r\n      );\r\n      vec3 micro = vec3(grain * 0.04);\r\n\r\n      vec3 color = base + scaleColor + edgeGlow + 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-284","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/metaartron.com\/index.php?rest_route=\/wp\/v2\/pages\/284","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=284"}],"version-history":[{"count":7,"href":"https:\/\/metaartron.com\/index.php?rest_route=\/wp\/v2\/pages\/284\/revisions"}],"predecessor-version":[{"id":294,"href":"https:\/\/metaartron.com\/index.php?rest_route=\/wp\/v2\/pages\/284\/revisions\/294"}],"wp:attachment":[{"href":"https:\/\/metaartron.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=284"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}