{"id":220,"date":"2026-03-01T01:31:38","date_gmt":"2026-03-01T01:31:38","guid":{"rendered":"https:\/\/grossenoix.com\/?page_id=220"},"modified":"2026-03-08T16:02:15","modified_gmt":"2026-03-08T16:02:15","slug":"220-2","status":"publish","type":"page","link":"https:\/\/grossenoix.com\/","title":{"rendered":"WTM"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n\n\n<meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Grosse Noix &#8211; Interactive Entry<\/title>\n    <style>\n        body, html { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background-color: #000; }\n        #fade-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: black; opacity: 0; pointer-events: none; z-index: 100; transition: opacity 0.4s ease-in-out; }\n        canvas { display: block; cursor: pointer; }\n    <\/style>\n\n\n\n    <div id=\"fade-overlay\"><\/div>\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/three.js\/r128\/three.min.js\"><\/script>\n    <script>\n        document.addEventListener('DOMContentLoaded', () => {\n            const scene = new THREE.Scene();\n            const camera = new THREE.PerspectiveCamera(75, window.innerWidth \/ window.innerHeight, 0.1, 1000);\n            const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });\n            const fadeOverlay = document.getElementById('fade-overlay');\n\n            renderer.setSize(window.innerWidth, window.innerHeight);\n            renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));\n            document.body.appendChild(renderer.domElement);\n\n            const textureLoader = new THREE.TextureLoader();\n            textureLoader.setCrossOrigin('anonymous');\n\n            const imageUrl = 'https:\/\/grossenoix.com\/wp-content\/uploads\/2026\/03\/logo_lines3.png';\n            const targetUrl = 'https:\/\/grossenoix.com\/index.php\/entrypoint\/';\n\n            let isRedirecting = false;\n            let plane;\n            let baseScale = 2.8; \/\/ The overall size of the logo\n\n            textureLoader.load(imageUrl, (texture) => {\n                \/\/ CALCULATE ASPECT RATIO TO PREVENT STRETCHING\n                const aspect = texture.image.width \/ texture.image.height;\n                \n                \/\/ Create geometry based on image aspect ratio\n                \/\/ If wide, width = baseScale * aspect. If tall, height = baseScale \/ aspect.\n                const planeGeometry = new THREE.PlaneGeometry(baseScale * aspect, baseScale);\n                const planeMaterial = new THREE.MeshBasicMaterial({ map: texture, transparent: true, side: THREE.DoubleSide });\n                \n                plane = new THREE.Mesh(planeGeometry, planeMaterial);\n\n                \/\/ Initial state for animation\n                plane.userData.originalScale = { x: 1, y: 1 };\n                plane.scale.set(0, 0, 0);\n                plane.rotation.z = Math.PI * 2;\n                \n                scene.add(plane);\n                camera.position.z = 5;\n\n                \/\/ Entrance Animation\n                let entranceProgress = 0;\n                const entranceInterval = setInterval(() => {\n                    entranceProgress += 0.03;\n                    if (entranceProgress <= 1) {\n                        const s = Math.pow(entranceProgress, 0.5);\n                        plane.scale.set(s, s, s);\n                        plane.rotation.z = (1 - entranceProgress) * Math.PI * 2;\n                    } else {\n                        plane.scale.set(1, 1, 1);\n                        plane.rotation.z = 0;\n                        clearInterval(entranceInterval);\n                    }\n                }, 16);\n\n                animate();\n            }, undefined, (err) => {\n                console.error(\"Texture Load Failed. Check CORS settings.\");\n            });\n\n            const handleMove = (e) => {\n                if (isRedirecting || !plane) return;\n                const x = e.touches ? e.touches[0].clientX : e.clientX;\n                const y = e.touches ? e.touches[0].clientY : e.clientY;\n                plane.rotation.y = ((x \/ window.innerWidth) * 2 - 1) * 0.4;\n                plane.rotation.x = (-(y \/ window.innerHeight) * 2 + 1) * 0.4;\n            };\n\n            window.addEventListener('mousemove', handleMove);\n            window.addEventListener('touchmove', handleMove);\n\n            window.addEventListener('click', () => {\n                if (isRedirecting || !plane) return;\n                isRedirecting = true;\n                fadeOverlay.style.opacity = '1';\n\n                let currentScale = 1;\n                const zoomOut = setInterval(() => {\n                    currentScale -= 0.07;\n                    if (currentScale > 0) {\n                        plane.scale.set(currentScale, currentScale, currentScale);\n                        plane.rotation.z += 0.2;\n                    } else {\n                        clearInterval(zoomOut);\n                        window.location.href = targetUrl;\n                    }\n                }, 20);\n            });\n\n            function animate() {\n                requestAnimationFrame(animate);\n                renderer.render(scene, camera);\n            }\n\n            window.addEventListener('resize', () => {\n                renderer.setSize(window.innerWidth, window.innerHeight);\n                camera.aspect = window.innerWidth \/ window.innerHeight;\n                camera.updateProjectionMatrix();\n            });\n        });\n    <\/script>\n\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-blank-landingpage.php","meta":{"footnotes":""},"class_list":["post-220","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/grossenoix.com\/index.php\/wp-json\/wp\/v2\/pages\/220","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/grossenoix.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/grossenoix.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/grossenoix.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/grossenoix.com\/index.php\/wp-json\/wp\/v2\/comments?post=220"}],"version-history":[{"count":24,"href":"https:\/\/grossenoix.com\/index.php\/wp-json\/wp\/v2\/pages\/220\/revisions"}],"predecessor-version":[{"id":773,"href":"https:\/\/grossenoix.com\/index.php\/wp-json\/wp\/v2\/pages\/220\/revisions\/773"}],"wp:attachment":[{"href":"https:\/\/grossenoix.com\/index.php\/wp-json\/wp\/v2\/media?parent=220"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}