Meta Artron<\/title>\r\n\r\n<style>\r\nbody {\r\n margin: 0;\r\n background: #0A0A0A;\r\n font-family: 'Poppins', sans-serif;\r\n overflow-x: hidden;\r\n}\r\n\r\n\/* CANVAS *\/\r\n#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: 0;\r\n}\r\n\r\n\/* SCROLL *\/\r\n.scroll-container {\r\n position: relative;\r\n z-index: 10;\r\n}\r\n\r\n.section {\r\n height: 100vh;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n\r\n\/* TEXT *\/\r\n.about h2 {\r\n color: #EAEAEA;\r\n font-size: 4vw;\r\n font-weight: 300;\r\n opacity: 0;\r\n transform: translateY(80px);\r\n transition: all 1s ease;\r\n}\r\n\r\n.section.active .about h2 {\r\n opacity: 1;\r\n transform: translateY(0);\r\n}\r\n<\/style>\r\n<\/head>\r\n\r\n<body>\r\n\r\n<canvas id=\"bg\"><\/canvas>\r\n\r\n<div class=\"scroll-container\">\r\n\r\n \r\n <section class=\"section\"><\/section>\r\n\r\n \r\n <section class=\"section about\">\r\n <h2>Where Art meets function.<\/h2>\r\n <\/section>\r\n\r\n<\/div>\r\n\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\/\/ SCENE\r\nconst scene = new THREE.Scene();\r\n\r\nconst camera = new THREE.PerspectiveCamera(\r\n 75,\r\n window.innerWidth\/window.innerHeight,\r\n 0.1,\r\n 1000\r\n);\r\n\r\nconst renderer = new THREE.WebGLRenderer({\r\n canvas: document.getElementById(\"bg\"),\r\n alpha: true,\r\n antialias: true\r\n});\r\n\r\nrenderer.setSize(window.innerWidth, window.innerHeight);\r\ncamera.position.z = 7;\r\n\r\n\/\/ MAIN GEOMETRY\r\nconst geometry = new THREE.PlaneGeometry(25, 25, 180, 180);\r\n\r\nconst material = new THREE.MeshBasicMaterial({\r\n color: 0x8b0000,\r\n wireframe: true,\r\n transparent: true,\r\n opacity: 0.9\r\n});\r\n\r\nconst mesh = new THREE.Mesh(geometry, material);\r\nscene.add(mesh);\r\n\r\n\/\/ SECOND LAYER\r\nconst geometry2 = new THREE.PlaneGeometry(25, 25, 120, 120);\r\n\r\nconst material2 = new THREE.MeshBasicMaterial({\r\n color: 0xff2222,\r\n wireframe: true,\r\n transparent: true,\r\n opacity: 0.25\r\n});\r\n\r\nconst mesh2 = new THREE.Mesh(geometry2, material2);\r\nmesh2.position.z = -1.5;\r\nscene.add(mesh2);\r\n\r\n\/\/ MOUSE\r\nlet mouseX = 0;\r\nlet mouseY = 0;\r\n\r\nwindow.addEventListener(\"mousemove\", (e) => {\r\n mouseX = (e.clientX \/ window.innerWidth - 0.5) * 2;\r\n mouseY = (e.clientY \/ window.innerHeight - 0.5) * 2;\r\n});\r\n\r\n\/\/ TIME\r\nlet t = 0;\r\n\r\n\/\/ ANIMATION\r\nfunction animate(){\r\n requestAnimationFrame(animate);\r\n t += 0.015;\r\n\r\n let pos = mesh.geometry.attributes.position;\r\n\r\n for(let i=0;i<pos.count;i++){\r\n let x = pos.getX(i);\r\n let y = pos.getY(i);\r\n\r\n \/\/ RADIAL SYSTEM (NON-WAVE)\r\n let r = Math.sqrt(x*x + y*y);\r\n let angle = Math.atan2(y, x);\r\n\r\n \/\/ CELLULAR FIELD\r\n let cells = Math.sin(r * 2.5 - t * 2) * Math.cos(angle * 6);\r\n\r\n \/\/ MICRO DETAIL\r\n let micro = Math.sin(x * 3 + t) * Math.cos(y * 3 - t);\r\n\r\n let elevation = (cells * 0.8 + micro * 0.2);\r\n\r\n \/\/ MOUSE INTERACTION\r\n let dx = x - mouseX * 10;\r\n let dy = y - mouseY * 10;\r\n let dist = Math.sqrt(dx*dx + dy*dy);\r\n\r\n elevation += Math.exp(-dist * 0.5) * 2.0;\r\n\r\n pos.setZ(i, elevation);\r\n }\r\n\r\n pos.needsUpdate = true;\r\n\r\n \/\/ SECOND LAYER\r\n let pos2 = mesh2.geometry.attributes.position;\r\n\r\n for(let i=0;i<pos2.count;i++){\r\n let x = pos2.getX(i);\r\n let y = pos2.getY(i);\r\n\r\n let r = Math.sqrt(x*x + y*y);\r\n let wave = Math.sin(r * 1.5 - t);\r\n\r\n pos2.setZ(i, wave * 0.6);\r\n }\r\n\r\n pos2.needsUpdate = true;\r\n\r\n \/\/ ROTATION\r\n mesh.rotation.x = -0.6 + mouseY * 0.2;\r\n mesh.rotation.y = mouseX * 0.3;\r\n\r\n mesh2.rotation.x = -0.6;\r\n mesh2.rotation.y = mouseX * 0.15;\r\n\r\n renderer.render(scene, camera);\r\n}\r\n\r\nanimate();\r\n\r\n\/\/ SCROLL INTERACTION\r\nconst sections = document.querySelectorAll(\".section\");\r\n\r\nwindow.addEventListener(\"scroll\", () => {\r\n let scrollY = window.scrollY;\r\n\r\n sections.forEach((section) => {\r\n const offset = section.offsetTop;\r\n const height = section.offsetHeight;\r\n\r\n if (scrollY > offset - height \/ 2 && scrollY < offset + height \/ 2) {\r\n section.classList.add(\"active\");\r\n } else {\r\n section.classList.remove(\"active\");\r\n }\r\n });\r\n});\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<\/script>\r\n\r\n<\/body>\r\n<\/html>\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":"<p>Meta Artron Where Art meets function.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-203","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/metaartron.com\/index.php?rest_route=\/wp\/v2\/pages\/203","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=203"}],"version-history":[{"count":4,"href":"https:\/\/metaartron.com\/index.php?rest_route=\/wp\/v2\/pages\/203\/revisions"}],"predecessor-version":[{"id":208,"href":"https:\/\/metaartron.com\/index.php?rest_route=\/wp\/v2\/pages\/203\/revisions\/208"}],"wp:attachment":[{"href":"https:\/\/metaartron.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=203"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n\r\nMeta Artron<\/title>\r\n\r\n<style>\r\nbody {\r\n margin: 0;\r\n background: #0A0A0A;\r\n font-family: 'Poppins', sans-serif;\r\n overflow-x: hidden;\r\n}\r\n\r\n\/* CANVAS *\/\r\n#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: 0;\r\n}\r\n\r\n\/* SCROLL *\/\r\n.scroll-container {\r\n position: relative;\r\n z-index: 10;\r\n}\r\n\r\n.section {\r\n height: 100vh;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n\r\n\/* TEXT *\/\r\n.about h2 {\r\n color: #EAEAEA;\r\n font-size: 4vw;\r\n font-weight: 300;\r\n opacity: 0;\r\n transform: translateY(80px);\r\n transition: all 1s ease;\r\n}\r\n\r\n.section.active .about h2 {\r\n opacity: 1;\r\n transform: translateY(0);\r\n}\r\n<\/style>\r\n<\/head>\r\n\r\n<body>\r\n\r\n<canvas id=\"bg\"><\/canvas>\r\n\r\n<div class=\"scroll-container\">\r\n\r\n \r\n <section class=\"section\"><\/section>\r\n\r\n \r\n <section class=\"section about\">\r\n <h2>Where Art meets function.<\/h2>\r\n <\/section>\r\n\r\n<\/div>\r\n\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\/\/ SCENE\r\nconst scene = new THREE.Scene();\r\n\r\nconst camera = new THREE.PerspectiveCamera(\r\n 75,\r\n window.innerWidth\/window.innerHeight,\r\n 0.1,\r\n 1000\r\n);\r\n\r\nconst renderer = new THREE.WebGLRenderer({\r\n canvas: document.getElementById(\"bg\"),\r\n alpha: true,\r\n antialias: true\r\n});\r\n\r\nrenderer.setSize(window.innerWidth, window.innerHeight);\r\ncamera.position.z = 7;\r\n\r\n\/\/ MAIN GEOMETRY\r\nconst geometry = new THREE.PlaneGeometry(25, 25, 180, 180);\r\n\r\nconst material = new THREE.MeshBasicMaterial({\r\n color: 0x8b0000,\r\n wireframe: true,\r\n transparent: true,\r\n opacity: 0.9\r\n});\r\n\r\nconst mesh = new THREE.Mesh(geometry, material);\r\nscene.add(mesh);\r\n\r\n\/\/ SECOND LAYER\r\nconst geometry2 = new THREE.PlaneGeometry(25, 25, 120, 120);\r\n\r\nconst material2 = new THREE.MeshBasicMaterial({\r\n color: 0xff2222,\r\n wireframe: true,\r\n transparent: true,\r\n opacity: 0.25\r\n});\r\n\r\nconst mesh2 = new THREE.Mesh(geometry2, material2);\r\nmesh2.position.z = -1.5;\r\nscene.add(mesh2);\r\n\r\n\/\/ MOUSE\r\nlet mouseX = 0;\r\nlet mouseY = 0;\r\n\r\nwindow.addEventListener(\"mousemove\", (e) => {\r\n mouseX = (e.clientX \/ window.innerWidth - 0.5) * 2;\r\n mouseY = (e.clientY \/ window.innerHeight - 0.5) * 2;\r\n});\r\n\r\n\/\/ TIME\r\nlet t = 0;\r\n\r\n\/\/ ANIMATION\r\nfunction animate(){\r\n requestAnimationFrame(animate);\r\n t += 0.015;\r\n\r\n let pos = mesh.geometry.attributes.position;\r\n\r\n for(let i=0;i<pos.count;i++){\r\n let x = pos.getX(i);\r\n let y = pos.getY(i);\r\n\r\n \/\/ RADIAL SYSTEM (NON-WAVE)\r\n let r = Math.sqrt(x*x + y*y);\r\n let angle = Math.atan2(y, x);\r\n\r\n \/\/ CELLULAR FIELD\r\n let cells = Math.sin(r * 2.5 - t * 2) * Math.cos(angle * 6);\r\n\r\n \/\/ MICRO DETAIL\r\n let micro = Math.sin(x * 3 + t) * Math.cos(y * 3 - t);\r\n\r\n let elevation = (cells * 0.8 + micro * 0.2);\r\n\r\n \/\/ MOUSE INTERACTION\r\n let dx = x - mouseX * 10;\r\n let dy = y - mouseY * 10;\r\n let dist = Math.sqrt(dx*dx + dy*dy);\r\n\r\n elevation += Math.exp(-dist * 0.5) * 2.0;\r\n\r\n pos.setZ(i, elevation);\r\n }\r\n\r\n pos.needsUpdate = true;\r\n\r\n \/\/ SECOND LAYER\r\n let pos2 = mesh2.geometry.attributes.position;\r\n\r\n for(let i=0;i<pos2.count;i++){\r\n let x = pos2.getX(i);\r\n let y = pos2.getY(i);\r\n\r\n let r = Math.sqrt(x*x + y*y);\r\n let wave = Math.sin(r * 1.5 - t);\r\n\r\n pos2.setZ(i, wave * 0.6);\r\n }\r\n\r\n pos2.needsUpdate = true;\r\n\r\n \/\/ ROTATION\r\n mesh.rotation.x = -0.6 + mouseY * 0.2;\r\n mesh.rotation.y = mouseX * 0.3;\r\n\r\n mesh2.rotation.x = -0.6;\r\n mesh2.rotation.y = mouseX * 0.15;\r\n\r\n renderer.render(scene, camera);\r\n}\r\n\r\nanimate();\r\n\r\n\/\/ SCROLL INTERACTION\r\nconst sections = document.querySelectorAll(\".section\");\r\n\r\nwindow.addEventListener(\"scroll\", () => {\r\n let scrollY = window.scrollY;\r\n\r\n sections.forEach((section) => {\r\n const offset = section.offsetTop;\r\n const height = section.offsetHeight;\r\n\r\n if (scrollY > offset - height \/ 2 && scrollY < offset + height \/ 2) {\r\n section.classList.add(\"active\");\r\n } else {\r\n section.classList.remove(\"active\");\r\n }\r\n });\r\n});\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<\/script>\r\n\r\n<\/body>\r\n<\/html>\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":"<p>Meta Artron Where Art meets function.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-203","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/metaartron.com\/index.php?rest_route=\/wp\/v2\/pages\/203","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=203"}],"version-history":[{"count":4,"href":"https:\/\/metaartron.com\/index.php?rest_route=\/wp\/v2\/pages\/203\/revisions"}],"predecessor-version":[{"id":208,"href":"https:\/\/metaartron.com\/index.php?rest_route=\/wp\/v2\/pages\/203\/revisions\/208"}],"wp:attachment":[{"href":"https:\/\/metaartron.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=203"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}