AIE Realty 3D Animation<\/title>\r\n <style>\r\n \/* * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n } *\/\r\n\r\n .moving-canvas {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n min-height: 100vh;\r\n background-color: #fffff;\r\n font-family: Arial, sans-serif;\r\n perspective: 1200px;\r\n overflow: hidden;\r\n }\r\n\r\n .container {\r\n width: 100%;\r\n max-width: 500px;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n padding: 20px;\r\n }\r\n\r\n .logo-container {\r\n width: 100%;\r\n position: relative;\r\n transform-style: preserve-3d;\r\n animation: rotate 10s infinite linear;\r\n transform-origin: center center;\r\n }\r\n\r\n .logo {\r\n width: 100%;\r\n height: auto;\r\n transform-style: preserve-3d;\r\n transform: translateZ(0);\r\n backface-visibility: visible;\r\n transition: transform 0.5s ease;\r\n }\r\n\r\n @keyframes rotate {\r\n 0% {\r\n transform: rotateX(0deg) rotateY(0deg);\r\n }\r\n\r\n 25% {\r\n transform: rotateX(90deg) rotateY(90deg);\r\n }\r\n\r\n 50% {\r\n transform: rotateX(180deg) rotateY(180deg);\r\n }\r\n\r\n 75% {\r\n transform: rotateX(270deg) rotateY(270deg);\r\n }\r\n\r\n 100% {\r\n transform: rotateX(360deg) rotateY(360deg);\r\n }\r\n }\r\n\r\n \/* Enhanced 3D effect *\/\r\n .logo-container {\r\n transform-origin: center center;\r\n }\r\n\r\n \/* Glow effect for the AIE letters *\/\r\n .glow {\r\n filter: drop-shadow(0 0 8px rgba(0, 195, 255, 0.8));\r\n }\r\n\r\n \/* Glow effect for the AIE letters *\/\r\n .glow {\r\n filter: drop-shadow(0 0 10px rgba(0, 195, 255, 0.9));\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .container {\r\n max-width: 250px;\r\n }\r\n\r\n @keyframes rotate {\r\n 0% {\r\n transform: rotateY(0) rotateX(0);\r\n }\r\n\r\n 25% {\r\n transform: rotateY(90deg) rotateX(0);\r\n }\r\n\r\n 50% {\r\n transform: rotateY(90deg) rotateX(5deg);\r\n }\r\n\r\n 75% {\r\n transform: rotateY(0) rotateX(5deg);\r\n }\r\n\r\n 100% {\r\n transform: rotateY(0) rotateX(0);\r\n }\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .container {\r\n max-width: 250px;\r\n }\r\n\r\n .logo-container {\r\n animation-duration: 10s;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n\r\n<body>\r\n <div class=\"moving-canvas\">\r\n <div class=\"container\">\r\n <div class=\"logo-container\">\r\n <img decoding=\"async\" src=\"https:\/\/giorgiovalenton.wp-warriors.com\/wp-content\/uploads\/2025\/05\/Untitled-design-4.png\"\r\n alt=\"AIE Realty\" class=\"logo\">\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <script>\r\n document.addEventListener('DOMContentLoaded', function () {\r\n \/\/ This function enhances the 3D effect by adding additional rotation\r\n \/\/ in response to mouse movement for desktop devices\r\n const logoContainer = document.querySelector('.logo-container');\r\n const logo = document.querySelector('.logo');\r\n const container = document.querySelector('.container');\r\n\r\n \/\/ Only apply this effect on non-touch devices\r\n if (window.matchMedia('(hover: hover)').matches) {\r\n container.addEventListener('mousemove', function (e) {\r\n const x = e.clientX;\r\n const y = e.clientY;\r\n\r\n const centerX = window.innerWidth \/ 2;\r\n const centerY = window.innerHeight \/ 2;\r\n\r\n \/\/ Calculate the slight rotation based on mouse position\r\n const rotateX = (y - centerY) * 0.005;\r\n const rotateY = (x - centerX) * 0.005;\r\n\r\n \/\/ Apply additional rotation based on mouse position\r\n \/\/ This adds to the main rotation animation\r\n logo.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;\r\n });\r\n\r\n container.addEventListener('mouseleave', function () {\r\n logo.style.transform = '';\r\n });\r\n }\r\n });\r\n <\/script>\r\n<\/body>\r\n\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-d5fdd54 e-con-full elementor-hidden-desktop elementor-hidden-tablet elementor-hidden-mobile e-flex e-con e-parent\" data-id=\"d5fdd54\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4c3663d elementor-widget__width-inherit elementor-hidden-desktop elementor-hidden-tablet elementor-hidden-mobile elementor-widget elementor-widget-html\" data-id=\"4c3663d\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>AIE Realty 3D Animation<\/title>\r\n <style>\r\n \/* * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n } *\/\r\n\r\n .moving-canvas {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n min-height: 100vh;\r\n \/*background-color: #f5f5f5;*\/\r\n font-family: Arial, sans-serif;\r\n perspective: 1200px;\r\n overflow: hidden;\r\n }\r\n\r\n .container {\r\n width: 100%;\r\n max-width: 500px;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n padding: 20px;\r\n }\r\n\r\n .logo-container {\r\n width: 100%;\r\n position: relative;\r\n transform-style: preserve-3d;\r\n animation: rotate 10s infinite linear;\r\n transform-origin: center center;\r\n }\r\n\r\n .logo {\r\n width: 100%;\r\n height: auto;\r\n transform-style: preserve-3d;\r\n transform: translateZ(0);\r\n backface-visibility: visible;\r\n transition: transform 0.5s ease;\r\n }\r\n\r\n @keyframes rotate {\r\n 0% {\r\n transform: rotateX(0deg) rotateY(0deg);\r\n }\r\n\r\n 25% {\r\n transform: rotateX(90deg) rotateY(90deg);\r\n }\r\n\r\n 50% {\r\n transform: rotateX(180deg) rotateY(180deg);\r\n }\r\n\r\n 75% {\r\n transform: rotateX(270deg) rotateY(270deg);\r\n }\r\n\r\n 100% {\r\n transform: rotateX(360deg) rotateY(360deg);\r\n }\r\n }\r\n\r\n \/* Enhanced 3D effect *\/\r\n .logo-container {\r\n transform-origin: center center;\r\n }\r\n\r\n \/* Glow effect for the AIE letters *\/\r\n .glow {\r\n filter: drop-shadow(0 0 8px rgba(0, 195, 255, 0.8));\r\n }\r\n\r\n \/* Glow effect for the AIE letters *\/\r\n .glow {\r\n filter: drop-shadow(0 0 10px rgba(0, 195, 255, 0.9));\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .container {\r\n max-width: 250px;\r\n }\r\n\r\n @keyframes rotate {\r\n 0% {\r\n transform: rotateY(0) rotateX(0);\r\n }\r\n\r\n 25% {\r\n transform: rotateY(90deg) rotateX(0);\r\n }\r\n\r\n 50% {\r\n transform: rotateY(90deg) rotateX(5deg);\r\n }\r\n\r\n 75% {\r\n transform: rotateY(0) rotateX(5deg);\r\n }\r\n\r\n 100% {\r\n transform: rotateY(0) rotateX(0);\r\n }\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .container {\r\n max-width: 250px;\r\n }\r\n\r\n .logo-container {\r\n animation-duration: 10s;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n\r\n<body>\r\n <div class=\"moving-canvas\">\r\n <div class=\"container\">\r\n <div class=\"logo-container\">\r\n <img decoding=\"async\" src=\"https:\/\/giorgiovalenton.wp-warriors.com\/wp-content\/uploads\/2025\/05\/Untitled-design-4.png\"\r\n alt=\"AIE Realty\" class=\"logo\">\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <script>\r\n document.addEventListener('DOMContentLoaded', function () {\r\n \/\/ This function enhances the 3D effect by adding additional rotation\r\n \/\/ in response to mouse movement for desktop devices\r\n const logoContainer = document.querySelector('.logo-container');\r\n const logo = document.querySelector('.logo');\r\n const container = document.querySelector('.container');\r\n\r\n \/\/ Only apply this effect on non-touch devices\r\n if (window.matchMedia('(hover: hover)').matches) {\r\n container.addEventListener('mousemove', function (e) {\r\n const x = e.clientX;\r\n const y = e.clientY;\r\n\r\n const centerX = window.innerWidth \/ 2;\r\n const centerY = window.innerHeight \/ 2;\r\n\r\n \/\/ Calculate the slight rotation based on mouse position\r\n const rotateX = (y - centerY) * 0.005;\r\n const rotateY = (x - centerX) * 0.005;\r\n\r\n \/\/ Apply additional rotation based on mouse position\r\n \/\/ This adds to the main rotation animation\r\n logo.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;\r\n });\r\n\r\n container.addEventListener('mouseleave', function () {\r\n logo.style.transform = '';\r\n });\r\n }\r\n });\r\n <\/script>\r\n<\/body>\r\n\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e0ffa9f elementor-widget__width-inherit elementor-hidden-desktop elementor-hidden-tablet elementor-hidden-mobile elementor-widget elementor-widget-html\" data-id=\"e0ffa9f\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Network Visualization<\/title>\r\n <style>\r\n \/* body {\r\n margin: 0;\r\n overflow: hidden;\r\n background-color: white;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n height: 100vh;\r\n } *\/\r\n .moving-canvas {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n \/* align-content: center; *\/\r\n }\r\n\r\n canvas {\r\n display: block;\r\n }\r\n <\/style>\r\n<\/head>\r\n\r\n<body>\r\n <div class=\"moving-canvas\">\r\n <canvas id=\"networkCanvas\"><\/canvas>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ Initialize canvas\r\n const canvas = document.getElementById('networkCanvas');\r\n const ctx = canvas.getContext('2d');\r\n\r\n \/\/ Set canvas size\r\n const resize = () => {\r\n const size = Math.min(window.innerWidth, window.innerHeight) * 0.8;\r\n canvas.width = size;\r\n canvas.height = size;\r\n };\r\n\r\n window.addEventListener('resize', resize);\r\n resize();\r\n\r\n \/\/ Network parameters\r\n const nodeCount = 200; \/\/ More nodes for density\r\n const mainNodes = 50; \/\/ Primary visible nodes on the perimeter\r\n const connectionDensity = 1.5; \/\/ Higher density of connections\r\n\r\n \/\/ Create nodes - two types:\r\n \/\/ 1. Main visible nodes on the icosahedron corners\r\n \/\/ 2. Internal nodes that add to the network density\r\n const nodes = [];\r\n\r\n \/\/ Create the main nodes (vertices of a icosahedron\/dodecahedron for the geometric shape)\r\n for (let i = 0; i < mainNodes; i++) {\r\n \/\/ Place on the vertices of an icosahedron-like shape\r\n const phi = Math.PI * (3 - Math.sqrt(5)); \/\/ golden angle\r\n const y = 1 - (i \/ (mainNodes - 1)) * 2; \/\/ y goes from 1 to -1\r\n const radius = Math.sqrt(1 - y * y); \/\/ radius at y\r\n\r\n const theta = phi * i; \/\/ golden angle increment\r\n\r\n const x = Math.cos(theta) * radius;\r\n const z = Math.sin(theta) * radius;\r\n\r\n nodes.push({\r\n x: x,\r\n y: y,\r\n z: z,\r\n connections: [],\r\n size: 2,\r\n isMajor: true\r\n });\r\n }\r\n\r\n \/\/ Add interior nodes for density\r\n for (let i = 0; i < nodeCount - mainNodes; i++) {\r\n \/\/ Random positions within the sphere\r\n const u = Math.random();\r\n const v = Math.random();\r\n const theta = 2 * Math.PI * u;\r\n const phi = Math.acos(2 * v - 1);\r\n const radius = Math.random() * 0.7; \/\/ Smaller radius to keep inside main nodes\r\n\r\n const x = radius * Math.sin(phi) * Math.cos(theta);\r\n const y = radius * Math.sin(phi) * Math.sin(theta);\r\n const z = radius * Math.cos(phi);\r\n\r\n nodes.push({\r\n x: x,\r\n y: y,\r\n z: z,\r\n connections: [],\r\n size: 0.3 + Math.random() * 0.7,\r\n isMajor: false\r\n });\r\n }\r\n\r\n \/\/ Create connections - denser between main nodes, sparser elsewhere\r\n \/\/ Connect main nodes to each other\r\n for (let i = 0; i < mainNodes; i++) {\r\n for (let j = i + 1; j < mainNodes; j++) {\r\n \/\/ Higher probability of connection between main nodes\r\n if (Math.random() < 0.35) {\r\n nodes[i].connections.push(j);\r\n nodes[j].connections.push(i);\r\n }\r\n }\r\n }\r\n\r\n \/\/ Connect internal nodes\r\n for (let i = mainNodes; i < nodes.length; i++) {\r\n \/\/ Connect to some main nodes\r\n for (let j = 0; j < mainNodes; j++) {\r\n if (Math.random() < 0.08) {\r\n nodes[i].connections.push(j);\r\n nodes[j].connections.push(i);\r\n }\r\n }\r\n\r\n \/\/ Connect to other internal nodes\r\n for (let j = mainNodes; j < nodes.length; j++) {\r\n if (i !== j && Math.random() < 0.02) {\r\n nodes[i].connections.push(j);\r\n nodes[j].connections.push(i);\r\n }\r\n }\r\n }\r\n\r\n \/\/ Add additional cross-connections for the web effect\r\n for (let i = 0; i < nodes.length; i++) {\r\n const connectionCount = Math.floor(Math.random() * 7); \/\/ Random number of extra connections\r\n for (let c = 0; c < connectionCount; c++) {\r\n const target = Math.floor(Math.random() * nodes.length);\r\n if (i !== target && !nodes[i].connections.includes(target)) {\r\n nodes[i].connections.push(target);\r\n nodes[target].connections.push(i);\r\n }\r\n }\r\n }\r\n\r\n \/\/ Initial rotation\r\n let rotationX = Math.PI * 0.1;\r\n let rotationY = Math.PI * 0.3;\r\n let rotationZ = 0;\r\n const rotationSpeed = 0.0003;\r\n\r\n \/\/ Animation function\r\n function animate() {\r\n requestAnimationFrame(animate);\r\n\r\n \/\/ Clear canvas\r\n ctx.clearRect(0, 0, canvas.width, canvas.height);\r\n\r\n \/\/ Update rotation\r\n rotationY += rotationSpeed;\r\n\r\n \/\/ Center coordinates\r\n const centerX = canvas.width \/ 2;\r\n const centerY = canvas.height \/ 2;\r\n const scale = canvas.width * 0.38;\r\n\r\n \/\/ Calculate projected node positions\r\n const positions = nodes.map(node => {\r\n \/\/ Apply rotation matrices\r\n let x = node.x;\r\n let y = node.y;\r\n let z = node.z;\r\n\r\n \/\/ Rotate around X axis\r\n const tempY1 = y;\r\n const tempZ1 = z;\r\n y = tempY1 * Math.cos(rotationX) - tempZ1 * Math.sin(rotationX);\r\n z = tempY1 * Math.sin(rotationX) + tempZ1 * Math.cos(rotationX);\r\n\r\n \/\/ Rotate around Y axis\r\n const tempX2 = x;\r\n const tempZ2 = z;\r\n x = tempX2 * Math.cos(rotationY) + tempZ2 * Math.sin(rotationY);\r\n z = -tempX2 * Math.sin(rotationY) + tempZ2 * Math.cos(rotationY);\r\n\r\n \/\/ Project 3D to 2D (perspective projection)\r\n const perspective = 1.5; \/\/ Perspective factor\r\n const depth = 2 - z; \/\/ Depth from viewer\r\n\r\n return {\r\n x: centerX + (x * scale \/ depth),\r\n y: centerY + (y * scale \/ depth),\r\n z: z,\r\n size: node.size,\r\n isMajor: node.isMajor,\r\n depth: depth\r\n };\r\n });\r\n\r\n \/\/ Sort connections by depth for better rendering\r\n const connections = [];\r\n for (let i = 0; i < nodes.length; i++) {\r\n const node = nodes[i];\r\n const pos1 = positions[i];\r\n\r\n for (const j of node.connections) {\r\n if (i < j) { \/\/ Avoid duplicate connections\r\n const pos2 = positions[j];\r\n connections.push({\r\n from: pos1,\r\n to: pos2,\r\n depth: (pos1.z + pos2.z) \/ 2,\r\n isMajor: pos1.isMajor && pos2.isMajor\r\n });\r\n }\r\n }\r\n }\r\n\r\n \/\/ Sort connections by depth (back to front)\r\n connections.sort((a, b) => b.depth - a.depth);\r\n\r\n \/\/ Draw connections (lines) from back to front\r\n for (const conn of connections) {\r\n \/\/ Further increased line thickness\r\n ctx.lineWidth = conn.isMajor ? 1.0 : 0.6;\r\n\r\n \/\/ Opacity based on depth and connection type\r\n const opacity = conn.isMajor ?\r\n 0.18 :\r\n 0.09 + Math.max(0, (1.5 - conn.depth) * 0.06);\r\n\r\n ctx.strokeStyle = `rgba(0, 0, 0, ${opacity})`;\r\n ctx.beginPath();\r\n ctx.moveTo(conn.from.x, conn.from.y);\r\n ctx.lineTo(conn.to.x, conn.to.y);\r\n ctx.stroke();\r\n }\r\n\r\n \/\/ No nodes are drawn - removed the node drawing code\r\n }\r\n\r\n \/\/ Start animation\r\n animate();\r\n <\/script>\r\n<\/body>\r\n\r\n<\/html>\t\t\t\t<\/div>\n\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>AIE Realty 3D Animation AIE Realty 3D Animation Network Visualization<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-7","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/giorgiovalenton.wp-warriors.com\/index.php?rest_route=\/wp\/v2\/pages\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/giorgiovalenton.wp-warriors.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/giorgiovalenton.wp-warriors.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/giorgiovalenton.wp-warriors.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/giorgiovalenton.wp-warriors.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=7"}],"version-history":[{"count":61,"href":"https:\/\/giorgiovalenton.wp-warriors.com\/index.php?rest_route=\/wp\/v2\/pages\/7\/revisions"}],"predecessor-version":[{"id":122,"href":"https:\/\/giorgiovalenton.wp-warriors.com\/index.php?rest_route=\/wp\/v2\/pages\/7\/revisions\/122"}],"wp:attachment":[{"href":"https:\/\/giorgiovalenton.wp-warriors.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=7"}],"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\n \r\n \r\n AIE Realty 3D Animation<\/title>\r\n <style>\r\n \/* * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n } *\/\r\n\r\n .moving-canvas {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n min-height: 100vh;\r\n background-color: #fffff;\r\n font-family: Arial, sans-serif;\r\n perspective: 1200px;\r\n overflow: hidden;\r\n }\r\n\r\n .container {\r\n width: 100%;\r\n max-width: 500px;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n padding: 20px;\r\n }\r\n\r\n .logo-container {\r\n width: 100%;\r\n position: relative;\r\n transform-style: preserve-3d;\r\n animation: rotate 10s infinite linear;\r\n transform-origin: center center;\r\n }\r\n\r\n .logo {\r\n width: 100%;\r\n height: auto;\r\n transform-style: preserve-3d;\r\n transform: translateZ(0);\r\n backface-visibility: visible;\r\n transition: transform 0.5s ease;\r\n }\r\n\r\n @keyframes rotate {\r\n 0% {\r\n transform: rotateX(0deg) rotateY(0deg);\r\n }\r\n\r\n 25% {\r\n transform: rotateX(90deg) rotateY(90deg);\r\n }\r\n\r\n 50% {\r\n transform: rotateX(180deg) rotateY(180deg);\r\n }\r\n\r\n 75% {\r\n transform: rotateX(270deg) rotateY(270deg);\r\n }\r\n\r\n 100% {\r\n transform: rotateX(360deg) rotateY(360deg);\r\n }\r\n }\r\n\r\n \/* Enhanced 3D effect *\/\r\n .logo-container {\r\n transform-origin: center center;\r\n }\r\n\r\n \/* Glow effect for the AIE letters *\/\r\n .glow {\r\n filter: drop-shadow(0 0 8px rgba(0, 195, 255, 0.8));\r\n }\r\n\r\n \/* Glow effect for the AIE letters *\/\r\n .glow {\r\n filter: drop-shadow(0 0 10px rgba(0, 195, 255, 0.9));\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .container {\r\n max-width: 250px;\r\n }\r\n\r\n @keyframes rotate {\r\n 0% {\r\n transform: rotateY(0) rotateX(0);\r\n }\r\n\r\n 25% {\r\n transform: rotateY(90deg) rotateX(0);\r\n }\r\n\r\n 50% {\r\n transform: rotateY(90deg) rotateX(5deg);\r\n }\r\n\r\n 75% {\r\n transform: rotateY(0) rotateX(5deg);\r\n }\r\n\r\n 100% {\r\n transform: rotateY(0) rotateX(0);\r\n }\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .container {\r\n max-width: 250px;\r\n }\r\n\r\n .logo-container {\r\n animation-duration: 10s;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n\r\n<body>\r\n <div class=\"moving-canvas\">\r\n <div class=\"container\">\r\n <div class=\"logo-container\">\r\n <img decoding=\"async\" src=\"https:\/\/giorgiovalenton.wp-warriors.com\/wp-content\/uploads\/2025\/05\/Untitled-design-4.png\"\r\n alt=\"AIE Realty\" class=\"logo\">\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <script>\r\n document.addEventListener('DOMContentLoaded', function () {\r\n \/\/ This function enhances the 3D effect by adding additional rotation\r\n \/\/ in response to mouse movement for desktop devices\r\n const logoContainer = document.querySelector('.logo-container');\r\n const logo = document.querySelector('.logo');\r\n const container = document.querySelector('.container');\r\n\r\n \/\/ Only apply this effect on non-touch devices\r\n if (window.matchMedia('(hover: hover)').matches) {\r\n container.addEventListener('mousemove', function (e) {\r\n const x = e.clientX;\r\n const y = e.clientY;\r\n\r\n const centerX = window.innerWidth \/ 2;\r\n const centerY = window.innerHeight \/ 2;\r\n\r\n \/\/ Calculate the slight rotation based on mouse position\r\n const rotateX = (y - centerY) * 0.005;\r\n const rotateY = (x - centerX) * 0.005;\r\n\r\n \/\/ Apply additional rotation based on mouse position\r\n \/\/ This adds to the main rotation animation\r\n logo.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;\r\n });\r\n\r\n container.addEventListener('mouseleave', function () {\r\n logo.style.transform = '';\r\n });\r\n }\r\n });\r\n <\/script>\r\n<\/body>\r\n\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-d5fdd54 e-con-full elementor-hidden-desktop elementor-hidden-tablet elementor-hidden-mobile e-flex e-con e-parent\" data-id=\"d5fdd54\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4c3663d elementor-widget__width-inherit elementor-hidden-desktop elementor-hidden-tablet elementor-hidden-mobile elementor-widget elementor-widget-html\" data-id=\"4c3663d\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>AIE Realty 3D Animation<\/title>\r\n <style>\r\n \/* * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n } *\/\r\n\r\n .moving-canvas {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n min-height: 100vh;\r\n \/*background-color: #f5f5f5;*\/\r\n font-family: Arial, sans-serif;\r\n perspective: 1200px;\r\n overflow: hidden;\r\n }\r\n\r\n .container {\r\n width: 100%;\r\n max-width: 500px;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n padding: 20px;\r\n }\r\n\r\n .logo-container {\r\n width: 100%;\r\n position: relative;\r\n transform-style: preserve-3d;\r\n animation: rotate 10s infinite linear;\r\n transform-origin: center center;\r\n }\r\n\r\n .logo {\r\n width: 100%;\r\n height: auto;\r\n transform-style: preserve-3d;\r\n transform: translateZ(0);\r\n backface-visibility: visible;\r\n transition: transform 0.5s ease;\r\n }\r\n\r\n @keyframes rotate {\r\n 0% {\r\n transform: rotateX(0deg) rotateY(0deg);\r\n }\r\n\r\n 25% {\r\n transform: rotateX(90deg) rotateY(90deg);\r\n }\r\n\r\n 50% {\r\n transform: rotateX(180deg) rotateY(180deg);\r\n }\r\n\r\n 75% {\r\n transform: rotateX(270deg) rotateY(270deg);\r\n }\r\n\r\n 100% {\r\n transform: rotateX(360deg) rotateY(360deg);\r\n }\r\n }\r\n\r\n \/* Enhanced 3D effect *\/\r\n .logo-container {\r\n transform-origin: center center;\r\n }\r\n\r\n \/* Glow effect for the AIE letters *\/\r\n .glow {\r\n filter: drop-shadow(0 0 8px rgba(0, 195, 255, 0.8));\r\n }\r\n\r\n \/* Glow effect for the AIE letters *\/\r\n .glow {\r\n filter: drop-shadow(0 0 10px rgba(0, 195, 255, 0.9));\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .container {\r\n max-width: 250px;\r\n }\r\n\r\n @keyframes rotate {\r\n 0% {\r\n transform: rotateY(0) rotateX(0);\r\n }\r\n\r\n 25% {\r\n transform: rotateY(90deg) rotateX(0);\r\n }\r\n\r\n 50% {\r\n transform: rotateY(90deg) rotateX(5deg);\r\n }\r\n\r\n 75% {\r\n transform: rotateY(0) rotateX(5deg);\r\n }\r\n\r\n 100% {\r\n transform: rotateY(0) rotateX(0);\r\n }\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .container {\r\n max-width: 250px;\r\n }\r\n\r\n .logo-container {\r\n animation-duration: 10s;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n\r\n<body>\r\n <div class=\"moving-canvas\">\r\n <div class=\"container\">\r\n <div class=\"logo-container\">\r\n <img decoding=\"async\" src=\"https:\/\/giorgiovalenton.wp-warriors.com\/wp-content\/uploads\/2025\/05\/Untitled-design-4.png\"\r\n alt=\"AIE Realty\" class=\"logo\">\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <script>\r\n document.addEventListener('DOMContentLoaded', function () {\r\n \/\/ This function enhances the 3D effect by adding additional rotation\r\n \/\/ in response to mouse movement for desktop devices\r\n const logoContainer = document.querySelector('.logo-container');\r\n const logo = document.querySelector('.logo');\r\n const container = document.querySelector('.container');\r\n\r\n \/\/ Only apply this effect on non-touch devices\r\n if (window.matchMedia('(hover: hover)').matches) {\r\n container.addEventListener('mousemove', function (e) {\r\n const x = e.clientX;\r\n const y = e.clientY;\r\n\r\n const centerX = window.innerWidth \/ 2;\r\n const centerY = window.innerHeight \/ 2;\r\n\r\n \/\/ Calculate the slight rotation based on mouse position\r\n const rotateX = (y - centerY) * 0.005;\r\n const rotateY = (x - centerX) * 0.005;\r\n\r\n \/\/ Apply additional rotation based on mouse position\r\n \/\/ This adds to the main rotation animation\r\n logo.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;\r\n });\r\n\r\n container.addEventListener('mouseleave', function () {\r\n logo.style.transform = '';\r\n });\r\n }\r\n });\r\n <\/script>\r\n<\/body>\r\n\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e0ffa9f elementor-widget__width-inherit elementor-hidden-desktop elementor-hidden-tablet elementor-hidden-mobile elementor-widget elementor-widget-html\" data-id=\"e0ffa9f\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Network Visualization<\/title>\r\n <style>\r\n \/* body {\r\n margin: 0;\r\n overflow: hidden;\r\n background-color: white;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n height: 100vh;\r\n } *\/\r\n .moving-canvas {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n \/* align-content: center; *\/\r\n }\r\n\r\n canvas {\r\n display: block;\r\n }\r\n <\/style>\r\n<\/head>\r\n\r\n<body>\r\n <div class=\"moving-canvas\">\r\n <canvas id=\"networkCanvas\"><\/canvas>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ Initialize canvas\r\n const canvas = document.getElementById('networkCanvas');\r\n const ctx = canvas.getContext('2d');\r\n\r\n \/\/ Set canvas size\r\n const resize = () => {\r\n const size = Math.min(window.innerWidth, window.innerHeight) * 0.8;\r\n canvas.width = size;\r\n canvas.height = size;\r\n };\r\n\r\n window.addEventListener('resize', resize);\r\n resize();\r\n\r\n \/\/ Network parameters\r\n const nodeCount = 200; \/\/ More nodes for density\r\n const mainNodes = 50; \/\/ Primary visible nodes on the perimeter\r\n const connectionDensity = 1.5; \/\/ Higher density of connections\r\n\r\n \/\/ Create nodes - two types:\r\n \/\/ 1. Main visible nodes on the icosahedron corners\r\n \/\/ 2. Internal nodes that add to the network density\r\n const nodes = [];\r\n\r\n \/\/ Create the main nodes (vertices of a icosahedron\/dodecahedron for the geometric shape)\r\n for (let i = 0; i < mainNodes; i++) {\r\n \/\/ Place on the vertices of an icosahedron-like shape\r\n const phi = Math.PI * (3 - Math.sqrt(5)); \/\/ golden angle\r\n const y = 1 - (i \/ (mainNodes - 1)) * 2; \/\/ y goes from 1 to -1\r\n const radius = Math.sqrt(1 - y * y); \/\/ radius at y\r\n\r\n const theta = phi * i; \/\/ golden angle increment\r\n\r\n const x = Math.cos(theta) * radius;\r\n const z = Math.sin(theta) * radius;\r\n\r\n nodes.push({\r\n x: x,\r\n y: y,\r\n z: z,\r\n connections: [],\r\n size: 2,\r\n isMajor: true\r\n });\r\n }\r\n\r\n \/\/ Add interior nodes for density\r\n for (let i = 0; i < nodeCount - mainNodes; i++) {\r\n \/\/ Random positions within the sphere\r\n const u = Math.random();\r\n const v = Math.random();\r\n const theta = 2 * Math.PI * u;\r\n const phi = Math.acos(2 * v - 1);\r\n const radius = Math.random() * 0.7; \/\/ Smaller radius to keep inside main nodes\r\n\r\n const x = radius * Math.sin(phi) * Math.cos(theta);\r\n const y = radius * Math.sin(phi) * Math.sin(theta);\r\n const z = radius * Math.cos(phi);\r\n\r\n nodes.push({\r\n x: x,\r\n y: y,\r\n z: z,\r\n connections: [],\r\n size: 0.3 + Math.random() * 0.7,\r\n isMajor: false\r\n });\r\n }\r\n\r\n \/\/ Create connections - denser between main nodes, sparser elsewhere\r\n \/\/ Connect main nodes to each other\r\n for (let i = 0; i < mainNodes; i++) {\r\n for (let j = i + 1; j < mainNodes; j++) {\r\n \/\/ Higher probability of connection between main nodes\r\n if (Math.random() < 0.35) {\r\n nodes[i].connections.push(j);\r\n nodes[j].connections.push(i);\r\n }\r\n }\r\n }\r\n\r\n \/\/ Connect internal nodes\r\n for (let i = mainNodes; i < nodes.length; i++) {\r\n \/\/ Connect to some main nodes\r\n for (let j = 0; j < mainNodes; j++) {\r\n if (Math.random() < 0.08) {\r\n nodes[i].connections.push(j);\r\n nodes[j].connections.push(i);\r\n }\r\n }\r\n\r\n \/\/ Connect to other internal nodes\r\n for (let j = mainNodes; j < nodes.length; j++) {\r\n if (i !== j && Math.random() < 0.02) {\r\n nodes[i].connections.push(j);\r\n nodes[j].connections.push(i);\r\n }\r\n }\r\n }\r\n\r\n \/\/ Add additional cross-connections for the web effect\r\n for (let i = 0; i < nodes.length; i++) {\r\n const connectionCount = Math.floor(Math.random() * 7); \/\/ Random number of extra connections\r\n for (let c = 0; c < connectionCount; c++) {\r\n const target = Math.floor(Math.random() * nodes.length);\r\n if (i !== target && !nodes[i].connections.includes(target)) {\r\n nodes[i].connections.push(target);\r\n nodes[target].connections.push(i);\r\n }\r\n }\r\n }\r\n\r\n \/\/ Initial rotation\r\n let rotationX = Math.PI * 0.1;\r\n let rotationY = Math.PI * 0.3;\r\n let rotationZ = 0;\r\n const rotationSpeed = 0.0003;\r\n\r\n \/\/ Animation function\r\n function animate() {\r\n requestAnimationFrame(animate);\r\n\r\n \/\/ Clear canvas\r\n ctx.clearRect(0, 0, canvas.width, canvas.height);\r\n\r\n \/\/ Update rotation\r\n rotationY += rotationSpeed;\r\n\r\n \/\/ Center coordinates\r\n const centerX = canvas.width \/ 2;\r\n const centerY = canvas.height \/ 2;\r\n const scale = canvas.width * 0.38;\r\n\r\n \/\/ Calculate projected node positions\r\n const positions = nodes.map(node => {\r\n \/\/ Apply rotation matrices\r\n let x = node.x;\r\n let y = node.y;\r\n let z = node.z;\r\n\r\n \/\/ Rotate around X axis\r\n const tempY1 = y;\r\n const tempZ1 = z;\r\n y = tempY1 * Math.cos(rotationX) - tempZ1 * Math.sin(rotationX);\r\n z = tempY1 * Math.sin(rotationX) + tempZ1 * Math.cos(rotationX);\r\n\r\n \/\/ Rotate around Y axis\r\n const tempX2 = x;\r\n const tempZ2 = z;\r\n x = tempX2 * Math.cos(rotationY) + tempZ2 * Math.sin(rotationY);\r\n z = -tempX2 * Math.sin(rotationY) + tempZ2 * Math.cos(rotationY);\r\n\r\n \/\/ Project 3D to 2D (perspective projection)\r\n const perspective = 1.5; \/\/ Perspective factor\r\n const depth = 2 - z; \/\/ Depth from viewer\r\n\r\n return {\r\n x: centerX + (x * scale \/ depth),\r\n y: centerY + (y * scale \/ depth),\r\n z: z,\r\n size: node.size,\r\n isMajor: node.isMajor,\r\n depth: depth\r\n };\r\n });\r\n\r\n \/\/ Sort connections by depth for better rendering\r\n const connections = [];\r\n for (let i = 0; i < nodes.length; i++) {\r\n const node = nodes[i];\r\n const pos1 = positions[i];\r\n\r\n for (const j of node.connections) {\r\n if (i < j) { \/\/ Avoid duplicate connections\r\n const pos2 = positions[j];\r\n connections.push({\r\n from: pos1,\r\n to: pos2,\r\n depth: (pos1.z + pos2.z) \/ 2,\r\n isMajor: pos1.isMajor && pos2.isMajor\r\n });\r\n }\r\n }\r\n }\r\n\r\n \/\/ Sort connections by depth (back to front)\r\n connections.sort((a, b) => b.depth - a.depth);\r\n\r\n \/\/ Draw connections (lines) from back to front\r\n for (const conn of connections) {\r\n \/\/ Further increased line thickness\r\n ctx.lineWidth = conn.isMajor ? 1.0 : 0.6;\r\n\r\n \/\/ Opacity based on depth and connection type\r\n const opacity = conn.isMajor ?\r\n 0.18 :\r\n 0.09 + Math.max(0, (1.5 - conn.depth) * 0.06);\r\n\r\n ctx.strokeStyle = `rgba(0, 0, 0, ${opacity})`;\r\n ctx.beginPath();\r\n ctx.moveTo(conn.from.x, conn.from.y);\r\n ctx.lineTo(conn.to.x, conn.to.y);\r\n ctx.stroke();\r\n }\r\n\r\n \/\/ No nodes are drawn - removed the node drawing code\r\n }\r\n\r\n \/\/ Start animation\r\n animate();\r\n <\/script>\r\n<\/body>\r\n\r\n<\/html>\t\t\t\t<\/div>\n\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>AIE Realty 3D Animation AIE Realty 3D Animation Network Visualization<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-7","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/giorgiovalenton.wp-warriors.com\/index.php?rest_route=\/wp\/v2\/pages\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/giorgiovalenton.wp-warriors.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/giorgiovalenton.wp-warriors.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/giorgiovalenton.wp-warriors.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/giorgiovalenton.wp-warriors.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=7"}],"version-history":[{"count":61,"href":"https:\/\/giorgiovalenton.wp-warriors.com\/index.php?rest_route=\/wp\/v2\/pages\/7\/revisions"}],"predecessor-version":[{"id":122,"href":"https:\/\/giorgiovalenton.wp-warriors.com\/index.php?rest_route=\/wp\/v2\/pages\/7\/revisions\/122"}],"wp:attachment":[{"href":"https:\/\/giorgiovalenton.wp-warriors.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}