Azure Sands | Luxury Reimagined<\/title>\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/three.js\/r128\/three.min.js\"><\/script>\r\n <style>\r\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Plus+Jakarta+Sans:wght@200;400;600&display=swap');\r\n \r\n :root { --accent: #fcd34d; --bg: #020617; }\r\n\r\n body { margin: 0; overflow-x: hidden; background: var(--bg); font-family: 'Plus Jakarta Sans', sans-serif; color: white; }\r\n canvas { position: fixed; top: 0; left: 0; outline: none; z-index: 1; pointer-events: none; }\r\n \r\n #scroll-container { height: 1100vh; position: relative; pointer-events: none; z-index: 2; }\r\n \r\n .overlay {\r\n position: fixed; top: 0; left: 0; width: 100%; height: 100%;\r\n display: flex; align-items: center; justify-content: center;\r\n pointer-events: none; opacity: 0; transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1);\r\n }\r\n .overlay.active { opacity: 1; pointer-events: auto; }\r\n\r\n .magazine-panel {\r\n max-width: 700px;\r\n padding: 4rem;\r\n transform: translateY(40px);\r\n transition: transform 1.5s cubic-bezier(0.16, 1, 0.3, 1);\r\n }\r\n .active .magazine-panel { transform: translateY(0); }\r\n\r\n h1 { font-family: 'Playfair Display', serif; font-size: clamp(4rem, 12vw, 8rem); line-height: 0.85; letter-spacing: -0.05em; font-style: italic; }\r\n h2 { font-family: 'Playfair Display', serif; font-size: 3.5rem; line-height: 1; margin-bottom: 2rem; }\r\n\r\n .glass-button {\r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n background: rgba(255, 255, 255, 0.02);\r\n backdrop-filter: blur(20px);\r\n padding: 1.5rem 3rem;\r\n text-transform: uppercase;\r\n letter-spacing: 0.4em;\r\n font-size: 0.65rem;\r\n font-weight: 600;\r\n transition: all 0.4s;\r\n }\r\n .glass-button:hover { background: white; color: black; border-color: white; }\r\n\r\n .nav-vertical {\r\n position: fixed; right: 4rem; top: 50%; transform: translateY(-50%);\r\n z-index: 100; display: flex; flex-direction: column; gap: 2rem;\r\n font-size: 0.6rem; letter-spacing: 0.3em; text-transform: uppercase; opacity: 0.4;\r\n }\r\n\r\n #audio-indicator {\r\n position: fixed; bottom: 3rem; left: 4rem; z-index: 100;\r\n display: flex; align-items: center; gap: 1rem; cursor: pointer;\r\n pointer-events: auto;\r\n }\r\n .sound-bar { width: 2px; height: 12px; background: white; transition: 0.3s; }\r\n\r\n .poi-tag {\r\n position: absolute; background: white; color: black; padding: 6px 16px;\r\n font-size: 10px; font-weight: 700; text-transform: uppercase; border-radius: 1px;\r\n pointer-events: none; transform: translate(-50%, -100%); margin-top: -40px;\r\n opacity: 0; transition: 0.5s; letter-spacing: 0.1em;\r\n z-index: 200;\r\n }\r\n .poi-tag.visible { opacity: 1; }\r\n\r\n .scroll-progress {\r\n position: fixed; left: 3rem; top: 50%; transform: translateY(-50%);\r\n height: 150px; width: 1px; background: rgba(255,255,255,0.1); z-index: 100;\r\n }\r\n .scroll-fill {\r\n position: absolute; top: 0; left: 0; width: 100%; height: 0%;\r\n background: #38bdf8; transition: height 0.1s linear;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <div class=\"scroll-progress\"><div class=\"scroll-fill\" id=\"progress-fill\"><\/div><\/div>\r\n\r\n <nav class=\"nav-vertical\">\r\n <span>01 Horizon<\/span>\r\n <span>02 Interior<\/span>\r\n <span>03 Estate<\/span>\r\n <\/nav>\r\n\r\n <div id=\"audio-indicator\" onclick=\"toggleAudio()\">\r\n <div class=\"flex gap-1 h-4 items-end\" id=\"audio-bars\">\r\n <div class=\"sound-bar\" style=\"height: 4px;\"><\/div>\r\n <div class=\"sound-bar\" style=\"height: 10px;\"><\/div>\r\n <div class=\"sound-bar\" style=\"height: 6px;\"><\/div>\r\n <\/div>\r\n <span class=\"text-[9px] uppercase tracking-widest opacity-60\">Ambient Audio<\/span>\r\n <\/div>\r\n\r\n <div id=\"scroll-container\">\r\n \r\n <section class=\"overlay active\" id=\"sec-1\">\r\n <div class=\"magazine-panel text-center\">\r\n <p class=\"uppercase tracking-[0.6em] text-[10px] mb-8 opacity-40 font-bold\">Azure Sands \u2022 Private Reserve<\/p>\r\n <h1>Quiet<br>Luxury<\/h1>\r\n <div class=\"w-1 px-8 h-24 border-l border-white\/10 mx-auto my-12\"><\/div>\r\n <p class=\"text-sm font-light text-slate-400 max-w-sm mx-auto leading-relaxed italic\">A dialogue between raw Atlantic shores and modern organic brutalism.<\/p>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"overlay\" id=\"sec-2\" style=\"justify-content: flex-end; padding-right: 8%;\">\r\n <div class=\"magazine-panel max-w-[500px]\">\r\n <h2 class=\"italic\">The<br>Threshold<\/h2>\r\n <p class=\"text-slate-400 font-light mb-12 leading-relaxed\">Cross the boundary where the coastal wind meets curated stillness. Our architecture is designed to frame the void.<\/p>\r\n <div class=\"grid grid-cols-2 gap-8 mb-12\">\r\n <div class=\"border-t border-white\/10 pt-4\">\r\n <span class=\"text-[9px] uppercase opacity-30 block\">Availability<\/span>\r\n <span class=\"text-xs\">Summer \/ Autumn '26<\/span>\r\n <\/div>\r\n <div class=\"border-t border-white\/10 pt-4\">\r\n <span class=\"text-[9px] uppercase opacity-30 block\">Access<\/span>\r\n <span class=\"text-xs\">Private Aviation Required<\/span>\r\n <\/div>\r\n <\/div>\r\n <button \r\n onmouseenter=\"setReact(true)\"\r\n onmouseleave=\"setReact(false)\"\r\n class=\"glass-button w-full\">\r\n Check Availability\r\n <\/button>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"overlay\" id=\"sec-3\" style=\"justify-content: flex-start; padding-left: 8%;\">\r\n <div class=\"magazine-panel\">\r\n <p class=\"uppercase tracking-[0.4em] text-[9px] mb-6 opacity-40\">Private Suite 10<\/p>\r\n <h2 class=\"italic\">Oceanic<br>Silence<\/h2>\r\n <p class=\"text-slate-400 font-light max-w-sm leading-relaxed mb-12\">Sunken living spaces designed with native stone and floor-to-ceiling glass. Total immersion in the horizon.<\/p>\r\n <div class=\"flex items-center gap-4 text-[9px] uppercase tracking-[0.3em] font-bold text-amber-200\">\r\n <div class=\"w-1.5 h-1.5 rounded-full bg-amber-200 animate-ping\"><\/div>\r\n Drag to observe the light\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"overlay\" id=\"sec-4\">\r\n <div class=\"magazine-panel text-center\">\r\n <h2 class=\"italic mb-4\">The Estate<\/h2>\r\n <p class=\"text-[10px] uppercase tracking-[0.5em] opacity-40\">Architectural Interactive<\/p>\r\n <\/div>\r\n <\/section>\r\n <\/div>\r\n\r\n <div id=\"poi-pool\" class=\"poi-tag\">Infinity Edge<\/div>\r\n <div id=\"poi-spa\" class=\"poi-tag\">Thermal Spa<\/div>\r\n <div id=\"poi-beach\" class=\"poi-tag\">Beach Club<\/div>\r\n\r\n <script id=\"sky-v\" type=\"x-shader\/x-vertex\">\r\n varying vec2 vUv;\r\n void main() {\r\n vUv = uv;\r\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\r\n }\r\n <\/script>\r\n <script id=\"sky-f\" type=\"x-shader\/x-fragment\">\r\n uniform float uScroll;\r\n varying vec2 vUv;\r\n void main() {\r\n vec3 dTop = vec3(0.01, 0.05, 0.12);\r\n vec3 dBot = vec3(0.1, 0.15, 0.25);\r\n vec3 sTop = vec3(0.05, 0.02, 0.1);\r\n vec3 sBot = vec3(0.95, 0.4, 0.15);\r\n vec3 col = mix(mix(dBot, dTop, vUv.y), mix(sBot, sTop, vUv.y), uScroll);\r\n float sunY = 0.9 - (uScroll * 0.9);\r\n float d = distance(vUv, vec2(0.5, sunY));\r\n col += smoothstep(0.12, 0.0, d) * vec3(1.0, 0.8, 0.6);\r\n gl_FragColor = vec4(col, 1.0);\r\n }\r\n <\/script>\r\n\r\n <script id=\"sand-f\" type=\"x-shader\/x-fragment\">\r\n uniform float uTime;\r\n uniform float uScroll;\r\n uniform float uReact;\r\n varying vec2 vUv;\r\n varying vec3 vWorldPos;\r\n float hash(vec2 p) { return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453123); }\r\n void main() {\r\n float n = hash(vUv * 900.0);\r\n if(n < (uScroll * 2.6 - 1.0)) discard;\r\n vec3 sand = vec3(0.1, 0.12, 0.15); \r\n float s = uTime * (1.0 + uReact * 5.0);\r\n float c = sin(vWorldPos.x * 3.0 + s) * cos(vWorldPos.z * 3.0 + s * 0.5);\r\n sand += c * 0.08 * (1.0 - uScroll);\r\n sand = mix(sand, vec3(0.4, 0.2, 0.1), uScroll * 0.6);\r\n gl_FragColor = vec4(sand, 1.0);\r\n }\r\n <\/script>\r\n\r\n <script>\r\n let scene, camera, renderer, clock, skyMat, sandMat, raycaster;\r\n let resort, palms = [], poiMarkers = [], cocktail, chair;\r\n let scroll = 0, targetScroll = 0;\r\n let mouse = new THREE.Vector2(), targetMouse = new THREE.Vector2();\r\n let uReact = 0, targetReact = 0;\r\n let audioCtx, waveGain, isAudioInit = false;\r\n\r\n init();\r\n\r\n function init() {\r\n scene = new THREE.Scene();\r\n camera = new THREE.PerspectiveCamera(35, window.innerWidth \/ window.innerHeight, 0.1, 5000);\r\n \r\n renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true, logarithmicDepthBuffer: true });\r\n renderer.setSize(window.innerWidth, window.innerHeight);\r\n renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));\r\n renderer.toneMapping = THREE.ACESFilmicToneMapping;\r\n renderer.toneMappingExposure = 0.8;\r\n document.body.appendChild(renderer.domElement);\r\n\r\n clock = new THREE.Clock();\r\n raycaster = new THREE.Raycaster();\r\n\r\n scene.add(new THREE.AmbientLight(0xffffff, 0.2));\r\n const sun = new THREE.DirectionalLight(0xffffff, 2.0);\r\n sun.position.set(40, 80, 40);\r\n scene.add(sun);\r\n\r\n createSky();\r\n createSand();\r\n createArchitecture();\r\n createHeroSet();\r\n createMapPOIs();\r\n\r\n window.addEventListener('scroll', onScroll);\r\n window.addEventListener('mousemove', onMouseMove);\r\n window.addEventListener('resize', onResize);\r\n animate();\r\n }\r\n\r\n function toggleAudio() {\r\n if (!isAudioInit) {\r\n audioCtx = new (window.AudioContext || window.webkitAudioContext)();\r\n const n = audioCtx.createScriptProcessor(4096, 1, 1);\r\n n.onaudioprocess = (e) => {\r\n const out = e.outputBuffer.getChannelData(0);\r\n for (let i = 0; i < 4096; i++) out[i] = Math.random() * 2 - 1;\r\n };\r\n const filter = audioCtx.createBiquadFilter();\r\n filter.type = 'lowpass'; filter.frequency.value = 400;\r\n waveGain = audioCtx.createGain();\r\n waveGain.gain.value = 0.05;\r\n n.connect(filter); filter.connect(waveGain); waveGain.connect(audioCtx.destination);\r\n isAudioInit = true;\r\n }\r\n if (audioCtx.state === 'suspended') {\r\n audioCtx.resume();\r\n document.getElementById('audio-bars').style.opacity = '1';\r\n } else {\r\n audioCtx.suspend();\r\n document.getElementById('audio-bars').style.opacity = '0.3';\r\n }\r\n }\r\n\r\n function createSky() {\r\n skyMat = new THREE.ShaderMaterial({\r\n uniforms: { uScroll: { value: 0 } },\r\n vertexShader: document.getElementById('sky-v').textContent,\r\n fragmentShader: document.getElementById('sky-f').textContent,\r\n side: THREE.BackSide\r\n });\r\n scene.add(new THREE.Mesh(new THREE.SphereGeometry(3000, 32, 32), skyMat));\r\n }\r\n\r\n function createSand() {\r\n sandMat = new THREE.ShaderMaterial({\r\n uniforms: { uTime: { value: 0 }, uScroll: { value: 0 }, uReact: { value: 0 } },\r\n vertexShader: `\r\n varying vec2 vUv;\r\n varying vec3 vWorldPos;\r\n void main() {\r\n vUv = uv;\r\n vWorldPos = (modelMatrix * vec4(position, 1.0)).xyz;\r\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\r\n }\r\n `,\r\n fragmentShader: document.getElementById('sand-f').textContent,\r\n transparent: true\r\n });\r\n const m = new THREE.Mesh(new THREE.PlaneGeometry(2500, 2500), sandMat);\r\n m.rotation.x = -Math.PI \/ 2;\r\n scene.add(m);\r\n }\r\n\r\n function createHeroSet() {\r\n const group = new THREE.Group();\r\n const wood = new THREE.MeshPhysicalMaterial({ color: 0x111111, roughness: 0.5 });\r\n const seat = new THREE.Mesh(new THREE.BoxGeometry(4.5, 0.4, 12), wood);\r\n group.add(seat);\r\n \r\n const cocktailGroup = new THREE.Group();\r\n const glass = new THREE.Mesh(\r\n new THREE.CylinderGeometry(0.5, 0.4, 1.8, 32),\r\n new THREE.MeshPhysicalMaterial({ transmission: 1, thickness: 1, roughness: 0.02, color: 0xffffff })\r\n );\r\n cocktailGroup.add(glass);\r\n \r\n const liquid = new THREE.Mesh(\r\n new THREE.CylinderGeometry(0.45, 0.35, 1.4, 32),\r\n new THREE.MeshStandardMaterial({ color: 0xffaa00, emissive: 0xff5500, emissiveIntensity: 0.5 })\r\n );\r\n liquid.position.y = -0.1;\r\n cocktailGroup.add(liquid);\r\n\r\n cocktailGroup.position.set(3.5, 1.2, 2);\r\n group.add(cocktailGroup);\r\n group.position.set(0, 0, 30);\r\n scene.add(group);\r\n }\r\n\r\n function createArchitecture() {\r\n resort = new THREE.Group();\r\n const concrete = new THREE.MeshStandardMaterial({ color: 0x333333, roughness: 0.9 });\r\n const towerBase = new THREE.Mesh(new THREE.BoxGeometry(60, 240, 30), concrete);\r\n towerBase.position.y = 120;\r\n resort.add(towerBase);\r\n\r\n for(let i=0; i<6; i++) {\r\n const slab = new THREE.Mesh(new THREE.BoxGeometry(80, 2, 40), concrete);\r\n slab.position.set(Math.sin(i)*5, 40 + i*30, 0);\r\n resort.add(slab);\r\n const glass = new THREE.Mesh(\r\n new THREE.BoxGeometry(78, 28, 1),\r\n new THREE.MeshPhysicalMaterial({ transmission: 0.9, transparent: true, opacity: 0.2 })\r\n );\r\n glass.position.set(Math.sin(i)*5, 54 + i*30, 20);\r\n resort.add(glass);\r\n }\r\n\r\n suite = new THREE.Group();\r\n suite.add(new THREE.Mesh(new THREE.BoxGeometry(60, 40, 60), new THREE.MeshStandardMaterial({ color: 0x111111, side: THREE.BackSide })));\r\n suite.position.set(0, 130, -40);\r\n resort.add(suite);\r\n\r\n resort.position.set(0, 0, -250);\r\n scene.add(resort);\r\n\r\n \/\/ Pool\r\n const pool = new THREE.Mesh(new THREE.BoxGeometry(60, 0.5, 40), concrete);\r\n pool.position.set(80, 0, -180);\r\n const water = new THREE.Mesh(new THREE.PlaneGeometry(55, 35), new THREE.MeshStandardMaterial({color: 0x0ea5e9, roughness: 0}));\r\n water.rotation.x = -Math.PI\/2; water.position.set(80, 0.4, -180);\r\n scene.add(pool); scene.add(water);\r\n\r\n \/\/ Spa\r\n const spa = new THREE.Mesh(new THREE.BoxGeometry(30, 15, 30), new THREE.MeshPhysicalMaterial({transmission: 1, opacity: 0.2, transparent: true}));\r\n spa.position.set(-100, 7.5, -160);\r\n scene.add(spa);\r\n \r\n \/\/ Beach Cabanas\r\n for(let i=0; i<3; i++) {\r\n const cabana = new THREE.Mesh(new THREE.BoxGeometry(8, 6, 8), concrete);\r\n cabana.position.set(-40 + i*20, 3, -80);\r\n scene.add(cabana);\r\n }\r\n }\r\n\r\n function createMapPOIs() {\r\n const pts = [{ id: 'pool', p: [80, 5, -180] }, { id: 'spa', p: [-100, 15, -160] }, { id: 'beach', p: [0, 1, -80] }];\r\n pts.forEach(pt => {\r\n const m = new THREE.Mesh(new THREE.SphereGeometry(2, 24, 24), new THREE.MeshBasicMaterial({ color: 0xfcd34d }));\r\n m.position.set(...pt.p);\r\n m.userData.id = pt.id;\r\n poiMarkers.push(m);\r\n scene.add(m);\r\n });\r\n }\r\n\r\n function setReact(v) { targetReact = v ? 1 : 0; }\r\n \r\n function onMouseMove(e) {\r\n targetMouse.x = (e.clientX \/ window.innerWidth) - 0.5;\r\n targetMouse.y = (e.clientY \/ window.innerHeight) - 0.5;\r\n mouse.x = (e.clientX \/ window.innerWidth) * 2 - 1;\r\n mouse.y = -(e.clientY \/ window.innerHeight) * 2 + 1;\r\n }\r\n\r\n function onScroll() {\r\n targetScroll = window.scrollY \/ (document.body.scrollHeight - window.innerHeight);\r\n const fill = document.getElementById('progress-fill');\r\n if (fill) fill.style.height = (targetScroll * 100) + '%';\r\n }\r\n\r\n function animate() {\r\n requestAnimationFrame(animate);\r\n const time = clock.getElapsedTime();\r\n scroll += (targetScroll - scroll) * 0.08;\r\n uReact += (targetReact - uReact) * 0.06;\r\n \r\n skyMat.uniforms.uScroll.value = scroll;\r\n sandMat.uniforms.uScroll.value = scroll;\r\n sandMat.uniforms.uTime.value = time;\r\n sandMat.uniforms.uReact.value = uReact;\r\n\r\n if(waveGain) {\r\n let v = scroll < 0.3 ? 0.08 * (1-scroll) : (scroll > 0.85 ? 0.12 * (scroll-0.85) : 0.005);\r\n waveGain.gain.setTargetAtTime(v, audioCtx.currentTime, 0.1);\r\n }\r\n\r\n if (scroll < 0.25) {\r\n camera.position.set(targetMouse.x * 6, 6 + (-targetMouse.y * 4), 60);\r\n camera.lookAt(0, 2, 0);\r\n updateUI(0);\r\n } else if (scroll < 0.85) {\r\n const p = (scroll - 0.25) \/ 0.6;\r\n camera.position.set(Math.sin(p * Math.PI) * 15, 6 + (p * 124), 60 - (p * 360));\r\n camera.lookAt(0, 10 + (p * 130), -280);\r\n updateUI(1);\r\n } else {\r\n const p = (scroll - 0.85) \/ 0.15;\r\n camera.position.set(targetMouse.x * 15, 130 + (p * 600), -280 + (p * 800));\r\n camera.lookAt(0, 0, -250);\r\n updateUI(scroll > 0.95 ? 3 : 2);\r\n }\r\n\r\n if(scroll > 0.9) {\r\n raycaster.setFromCamera(mouse, camera);\r\n const hits = raycaster.intersectObjects(poiMarkers);\r\n document.querySelectorAll('.poi-tag').forEach(l => l.classList.remove('visible'));\r\n if(hits.length > 0) {\r\n const id = hits[0].object.userData.id;\r\n const label = document.getElementById('poi-' + id);\r\n if (label) {\r\n const p = hits[0].object.position.clone().project(camera);\r\n label.style.left = (p.x * 0.5 + 0.5) * window.innerWidth + 'px';\r\n label.style.top = (-(p.y * 0.5 - 0.5) * window.innerHeight) + 'px';\r\n label.classList.add('visible');\r\n }\r\n }\r\n }\r\n renderer.render(scene, camera);\r\n }\r\n\r\n function updateUI(idx) {\r\n document.querySelectorAll('.overlay').forEach((sec, i) => sec.classList.toggle('active', i === idx));\r\n }\r\n\r\n function onResize() {\r\n camera.aspect = window.innerWidth \/ window.innerHeight;\r\n camera.updateProjectionMatrix();\r\n renderer.setSize(window.innerWidth, window.innerHeight);\r\n }\r\n <\/script>\r\n<\/body>\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>Azure Sands | Luxury Reimagined 01 Horizon 02 Interior 03 Estate Ambient Audio Azure Sands \u2022 Private Reserve QuietLuxury A dialogue between raw Atlantic shores and modern organic brutalism. TheThreshold Cross the boundary where the coastal wind meets curated stillness. Our architecture is designed to frame the void. Availability Summer \/ Autumn ’26 Access Private […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-4784","page","type-page","status-publish","hentry"],"yoast_head":"\n<title>Beach Hotel - Denisa Alla<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/denisaalla.com\/sq\/beach-hotel\/\" \/>\n<meta property=\"og:locale\" content=\"sq_AL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Beach Hotel - Denisa Alla\" \/>\n<meta property=\"og:description\" content=\"Azure Sands | Luxury Reimagined 01 Horizon 02 Interior 03 Estate Ambient Audio Azure Sands \u2022 Private Reserve QuietLuxury A dialogue between raw Atlantic shores and modern organic brutalism. TheThreshold Cross the boundary where the coastal wind meets curated stillness. Our architecture is designed to frame the void. Availability Summer \/ Autumn ’26 Access Private […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/denisaalla.com\/sq\/beach-hotel\/\" \/>\n<meta property=\"og:site_name\" content=\"Denisa Alla\" \/>\n<meta property=\"article:modified_time\" content=\"2026-05-04T11:21:31+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minut\u00eb\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/denisaalla.com\\\/beach-hotel\\\/\",\"url\":\"https:\\\/\\\/denisaalla.com\\\/beach-hotel\\\/\",\"name\":\"Beach Hotel - Denisa Alla\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/denisaalla.com\\\/#website\"},\"datePublished\":\"2026-05-04T11:20:23+00:00\",\"dateModified\":\"2026-05-04T11:21:31+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/denisaalla.com\\\/beach-hotel\\\/#breadcrumb\"},\"inLanguage\":\"sq\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/denisaalla.com\\\/beach-hotel\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/denisaalla.com\\\/beach-hotel\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/denisaalla.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Beach Hotel\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/denisaalla.com\\\/#website\",\"url\":\"https:\\\/\\\/denisaalla.com\\\/\",\"name\":\"Denisa Alla\",\"description\":\"Website Designer \\\/ Programmer\",\"publisher\":{\"@id\":\"https:\\\/\\\/denisaalla.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/denisaalla.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"sq\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/denisaalla.com\\\/#organization\",\"name\":\"Denisa Alla\",\"url\":\"https:\\\/\\\/denisaalla.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"sq\",\"@id\":\"https:\\\/\\\/denisaalla.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/denisaalla.com\\\/wp-content\\\/uploads\\\/2026\\\/03\\\/cropped-denisaalla-pink-logo.png\",\"contentUrl\":\"https:\\\/\\\/denisaalla.com\\\/wp-content\\\/uploads\\\/2026\\\/03\\\/cropped-denisaalla-pink-logo.png\",\"width\":800,\"height\":758,\"caption\":\"Denisa Alla\"},\"image\":{\"@id\":\"https:\\\/\\\/denisaalla.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n","yoast_head_json":{"title":"Beach Hotel - Denisa Alla","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/denisaalla.com\/sq\/beach-hotel\/","og_locale":"sq_AL","og_type":"article","og_title":"Beach Hotel - Denisa Alla","og_description":"Azure Sands | Luxury Reimagined 01 Horizon 02 Interior 03 Estate Ambient Audio Azure Sands \u2022 Private Reserve QuietLuxury A dialogue between raw Atlantic shores and modern organic brutalism. TheThreshold Cross the boundary where the coastal wind meets curated stillness. Our architecture is designed to frame the void. Availability Summer \/ Autumn ’26 Access Private […]","og_url":"https:\/\/denisaalla.com\/sq\/beach-hotel\/","og_site_name":"Denisa Alla","article_modified_time":"2026-05-04T11:21:31+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minut\u00eb"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/denisaalla.com\/beach-hotel\/","url":"https:\/\/denisaalla.com\/beach-hotel\/","name":"Beach Hotel - Denisa Alla","isPartOf":{"@id":"https:\/\/denisaalla.com\/#website"},"datePublished":"2026-05-04T11:20:23+00:00","dateModified":"2026-05-04T11:21:31+00:00","breadcrumb":{"@id":"https:\/\/denisaalla.com\/beach-hotel\/#breadcrumb"},"inLanguage":"sq","potentialAction":[{"@type":"ReadAction","target":["https:\/\/denisaalla.com\/beach-hotel\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/denisaalla.com\/beach-hotel\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/denisaalla.com\/"},{"@type":"ListItem","position":2,"name":"Beach Hotel"}]},{"@type":"WebSite","@id":"https:\/\/denisaalla.com\/#website","url":"https:\/\/denisaalla.com\/","name":"Denisa Alla","description":"Website Designer \/ Programmer","publisher":{"@id":"https:\/\/denisaalla.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/denisaalla.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"sq"},{"@type":"Organization","@id":"https:\/\/denisaalla.com\/#organization","name":"Denisa Alla","url":"https:\/\/denisaalla.com\/","logo":{"@type":"ImageObject","inLanguage":"sq","@id":"https:\/\/denisaalla.com\/#\/schema\/logo\/image\/","url":"https:\/\/denisaalla.com\/wp-content\/uploads\/2026\/03\/cropped-denisaalla-pink-logo.png","contentUrl":"https:\/\/denisaalla.com\/wp-content\/uploads\/2026\/03\/cropped-denisaalla-pink-logo.png","width":800,"height":758,"caption":"Denisa Alla"},"image":{"@id":"https:\/\/denisaalla.com\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/denisaalla.com\/sq\/wp-json\/wp\/v2\/pages\/4784","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/denisaalla.com\/sq\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/denisaalla.com\/sq\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/denisaalla.com\/sq\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/denisaalla.com\/sq\/wp-json\/wp\/v2\/comments?post=4784"}],"version-history":[{"count":4,"href":"https:\/\/denisaalla.com\/sq\/wp-json\/wp\/v2\/pages\/4784\/revisions"}],"predecessor-version":[{"id":4788,"href":"https:\/\/denisaalla.com\/sq\/wp-json\/wp\/v2\/pages\/4784\/revisions\/4788"}],"wp:attachment":[{"href":"https:\/\/denisaalla.com\/sq\/wp-json\/wp\/v2\/media?parent=4784"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Azure Sands | Luxury Reimagined<\/title>\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/three.js\/r128\/three.min.js\"><\/script>\r\n <style>\r\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Plus+Jakarta+Sans:wght@200;400;600&display=swap');\r\n \r\n :root { --accent: #fcd34d; --bg: #020617; }\r\n\r\n body { margin: 0; overflow-x: hidden; background: var(--bg); font-family: 'Plus Jakarta Sans', sans-serif; color: white; }\r\n canvas { position: fixed; top: 0; left: 0; outline: none; z-index: 1; pointer-events: none; }\r\n \r\n #scroll-container { height: 1100vh; position: relative; pointer-events: none; z-index: 2; }\r\n \r\n .overlay {\r\n position: fixed; top: 0; left: 0; width: 100%; height: 100%;\r\n display: flex; align-items: center; justify-content: center;\r\n pointer-events: none; opacity: 0; transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1);\r\n }\r\n .overlay.active { opacity: 1; pointer-events: auto; }\r\n\r\n .magazine-panel {\r\n max-width: 700px;\r\n padding: 4rem;\r\n transform: translateY(40px);\r\n transition: transform 1.5s cubic-bezier(0.16, 1, 0.3, 1);\r\n }\r\n .active .magazine-panel { transform: translateY(0); }\r\n\r\n h1 { font-family: 'Playfair Display', serif; font-size: clamp(4rem, 12vw, 8rem); line-height: 0.85; letter-spacing: -0.05em; font-style: italic; }\r\n h2 { font-family: 'Playfair Display', serif; font-size: 3.5rem; line-height: 1; margin-bottom: 2rem; }\r\n\r\n .glass-button {\r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n background: rgba(255, 255, 255, 0.02);\r\n backdrop-filter: blur(20px);\r\n padding: 1.5rem 3rem;\r\n text-transform: uppercase;\r\n letter-spacing: 0.4em;\r\n font-size: 0.65rem;\r\n font-weight: 600;\r\n transition: all 0.4s;\r\n }\r\n .glass-button:hover { background: white; color: black; border-color: white; }\r\n\r\n .nav-vertical {\r\n position: fixed; right: 4rem; top: 50%; transform: translateY(-50%);\r\n z-index: 100; display: flex; flex-direction: column; gap: 2rem;\r\n font-size: 0.6rem; letter-spacing: 0.3em; text-transform: uppercase; opacity: 0.4;\r\n }\r\n\r\n #audio-indicator {\r\n position: fixed; bottom: 3rem; left: 4rem; z-index: 100;\r\n display: flex; align-items: center; gap: 1rem; cursor: pointer;\r\n pointer-events: auto;\r\n }\r\n .sound-bar { width: 2px; height: 12px; background: white; transition: 0.3s; }\r\n\r\n .poi-tag {\r\n position: absolute; background: white; color: black; padding: 6px 16px;\r\n font-size: 10px; font-weight: 700; text-transform: uppercase; border-radius: 1px;\r\n pointer-events: none; transform: translate(-50%, -100%); margin-top: -40px;\r\n opacity: 0; transition: 0.5s; letter-spacing: 0.1em;\r\n z-index: 200;\r\n }\r\n .poi-tag.visible { opacity: 1; }\r\n\r\n .scroll-progress {\r\n position: fixed; left: 3rem; top: 50%; transform: translateY(-50%);\r\n height: 150px; width: 1px; background: rgba(255,255,255,0.1); z-index: 100;\r\n }\r\n .scroll-fill {\r\n position: absolute; top: 0; left: 0; width: 100%; height: 0%;\r\n background: #38bdf8; transition: height 0.1s linear;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <div class=\"scroll-progress\"><div class=\"scroll-fill\" id=\"progress-fill\"><\/div><\/div>\r\n\r\n <nav class=\"nav-vertical\">\r\n <span>01 Horizon<\/span>\r\n <span>02 Interior<\/span>\r\n <span>03 Estate<\/span>\r\n <\/nav>\r\n\r\n <div id=\"audio-indicator\" onclick=\"toggleAudio()\">\r\n <div class=\"flex gap-1 h-4 items-end\" id=\"audio-bars\">\r\n <div class=\"sound-bar\" style=\"height: 4px;\"><\/div>\r\n <div class=\"sound-bar\" style=\"height: 10px;\"><\/div>\r\n <div class=\"sound-bar\" style=\"height: 6px;\"><\/div>\r\n <\/div>\r\n <span class=\"text-[9px] uppercase tracking-widest opacity-60\">Ambient Audio<\/span>\r\n <\/div>\r\n\r\n <div id=\"scroll-container\">\r\n \r\n <section class=\"overlay active\" id=\"sec-1\">\r\n <div class=\"magazine-panel text-center\">\r\n <p class=\"uppercase tracking-[0.6em] text-[10px] mb-8 opacity-40 font-bold\">Azure Sands \u2022 Private Reserve<\/p>\r\n <h1>Quiet<br>Luxury<\/h1>\r\n <div class=\"w-1 px-8 h-24 border-l border-white\/10 mx-auto my-12\"><\/div>\r\n <p class=\"text-sm font-light text-slate-400 max-w-sm mx-auto leading-relaxed italic\">A dialogue between raw Atlantic shores and modern organic brutalism.<\/p>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"overlay\" id=\"sec-2\" style=\"justify-content: flex-end; padding-right: 8%;\">\r\n <div class=\"magazine-panel max-w-[500px]\">\r\n <h2 class=\"italic\">The<br>Threshold<\/h2>\r\n <p class=\"text-slate-400 font-light mb-12 leading-relaxed\">Cross the boundary where the coastal wind meets curated stillness. Our architecture is designed to frame the void.<\/p>\r\n <div class=\"grid grid-cols-2 gap-8 mb-12\">\r\n <div class=\"border-t border-white\/10 pt-4\">\r\n <span class=\"text-[9px] uppercase opacity-30 block\">Availability<\/span>\r\n <span class=\"text-xs\">Summer \/ Autumn '26<\/span>\r\n <\/div>\r\n <div class=\"border-t border-white\/10 pt-4\">\r\n <span class=\"text-[9px] uppercase opacity-30 block\">Access<\/span>\r\n <span class=\"text-xs\">Private Aviation Required<\/span>\r\n <\/div>\r\n <\/div>\r\n <button \r\n onmouseenter=\"setReact(true)\"\r\n onmouseleave=\"setReact(false)\"\r\n class=\"glass-button w-full\">\r\n Check Availability\r\n <\/button>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"overlay\" id=\"sec-3\" style=\"justify-content: flex-start; padding-left: 8%;\">\r\n <div class=\"magazine-panel\">\r\n <p class=\"uppercase tracking-[0.4em] text-[9px] mb-6 opacity-40\">Private Suite 10<\/p>\r\n <h2 class=\"italic\">Oceanic<br>Silence<\/h2>\r\n <p class=\"text-slate-400 font-light max-w-sm leading-relaxed mb-12\">Sunken living spaces designed with native stone and floor-to-ceiling glass. Total immersion in the horizon.<\/p>\r\n <div class=\"flex items-center gap-4 text-[9px] uppercase tracking-[0.3em] font-bold text-amber-200\">\r\n <div class=\"w-1.5 h-1.5 rounded-full bg-amber-200 animate-ping\"><\/div>\r\n Drag to observe the light\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"overlay\" id=\"sec-4\">\r\n <div class=\"magazine-panel text-center\">\r\n <h2 class=\"italic mb-4\">The Estate<\/h2>\r\n <p class=\"text-[10px] uppercase tracking-[0.5em] opacity-40\">Architectural Interactive<\/p>\r\n <\/div>\r\n <\/section>\r\n <\/div>\r\n\r\n <div id=\"poi-pool\" class=\"poi-tag\">Infinity Edge<\/div>\r\n <div id=\"poi-spa\" class=\"poi-tag\">Thermal Spa<\/div>\r\n <div id=\"poi-beach\" class=\"poi-tag\">Beach Club<\/div>\r\n\r\n <script id=\"sky-v\" type=\"x-shader\/x-vertex\">\r\n varying vec2 vUv;\r\n void main() {\r\n vUv = uv;\r\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\r\n }\r\n <\/script>\r\n <script id=\"sky-f\" type=\"x-shader\/x-fragment\">\r\n uniform float uScroll;\r\n varying vec2 vUv;\r\n void main() {\r\n vec3 dTop = vec3(0.01, 0.05, 0.12);\r\n vec3 dBot = vec3(0.1, 0.15, 0.25);\r\n vec3 sTop = vec3(0.05, 0.02, 0.1);\r\n vec3 sBot = vec3(0.95, 0.4, 0.15);\r\n vec3 col = mix(mix(dBot, dTop, vUv.y), mix(sBot, sTop, vUv.y), uScroll);\r\n float sunY = 0.9 - (uScroll * 0.9);\r\n float d = distance(vUv, vec2(0.5, sunY));\r\n col += smoothstep(0.12, 0.0, d) * vec3(1.0, 0.8, 0.6);\r\n gl_FragColor = vec4(col, 1.0);\r\n }\r\n <\/script>\r\n\r\n <script id=\"sand-f\" type=\"x-shader\/x-fragment\">\r\n uniform float uTime;\r\n uniform float uScroll;\r\n uniform float uReact;\r\n varying vec2 vUv;\r\n varying vec3 vWorldPos;\r\n float hash(vec2 p) { return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453123); }\r\n void main() {\r\n float n = hash(vUv * 900.0);\r\n if(n < (uScroll * 2.6 - 1.0)) discard;\r\n vec3 sand = vec3(0.1, 0.12, 0.15); \r\n float s = uTime * (1.0 + uReact * 5.0);\r\n float c = sin(vWorldPos.x * 3.0 + s) * cos(vWorldPos.z * 3.0 + s * 0.5);\r\n sand += c * 0.08 * (1.0 - uScroll);\r\n sand = mix(sand, vec3(0.4, 0.2, 0.1), uScroll * 0.6);\r\n gl_FragColor = vec4(sand, 1.0);\r\n }\r\n <\/script>\r\n\r\n <script>\r\n let scene, camera, renderer, clock, skyMat, sandMat, raycaster;\r\n let resort, palms = [], poiMarkers = [], cocktail, chair;\r\n let scroll = 0, targetScroll = 0;\r\n let mouse = new THREE.Vector2(), targetMouse = new THREE.Vector2();\r\n let uReact = 0, targetReact = 0;\r\n let audioCtx, waveGain, isAudioInit = false;\r\n\r\n init();\r\n\r\n function init() {\r\n scene = new THREE.Scene();\r\n camera = new THREE.PerspectiveCamera(35, window.innerWidth \/ window.innerHeight, 0.1, 5000);\r\n \r\n renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true, logarithmicDepthBuffer: true });\r\n renderer.setSize(window.innerWidth, window.innerHeight);\r\n renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));\r\n renderer.toneMapping = THREE.ACESFilmicToneMapping;\r\n renderer.toneMappingExposure = 0.8;\r\n document.body.appendChild(renderer.domElement);\r\n\r\n clock = new THREE.Clock();\r\n raycaster = new THREE.Raycaster();\r\n\r\n scene.add(new THREE.AmbientLight(0xffffff, 0.2));\r\n const sun = new THREE.DirectionalLight(0xffffff, 2.0);\r\n sun.position.set(40, 80, 40);\r\n scene.add(sun);\r\n\r\n createSky();\r\n createSand();\r\n createArchitecture();\r\n createHeroSet();\r\n createMapPOIs();\r\n\r\n window.addEventListener('scroll', onScroll);\r\n window.addEventListener('mousemove', onMouseMove);\r\n window.addEventListener('resize', onResize);\r\n animate();\r\n }\r\n\r\n function toggleAudio() {\r\n if (!isAudioInit) {\r\n audioCtx = new (window.AudioContext || window.webkitAudioContext)();\r\n const n = audioCtx.createScriptProcessor(4096, 1, 1);\r\n n.onaudioprocess = (e) => {\r\n const out = e.outputBuffer.getChannelData(0);\r\n for (let i = 0; i < 4096; i++) out[i] = Math.random() * 2 - 1;\r\n };\r\n const filter = audioCtx.createBiquadFilter();\r\n filter.type = 'lowpass'; filter.frequency.value = 400;\r\n waveGain = audioCtx.createGain();\r\n waveGain.gain.value = 0.05;\r\n n.connect(filter); filter.connect(waveGain); waveGain.connect(audioCtx.destination);\r\n isAudioInit = true;\r\n }\r\n if (audioCtx.state === 'suspended') {\r\n audioCtx.resume();\r\n document.getElementById('audio-bars').style.opacity = '1';\r\n } else {\r\n audioCtx.suspend();\r\n document.getElementById('audio-bars').style.opacity = '0.3';\r\n }\r\n }\r\n\r\n function createSky() {\r\n skyMat = new THREE.ShaderMaterial({\r\n uniforms: { uScroll: { value: 0 } },\r\n vertexShader: document.getElementById('sky-v').textContent,\r\n fragmentShader: document.getElementById('sky-f').textContent,\r\n side: THREE.BackSide\r\n });\r\n scene.add(new THREE.Mesh(new THREE.SphereGeometry(3000, 32, 32), skyMat));\r\n }\r\n\r\n function createSand() {\r\n sandMat = new THREE.ShaderMaterial({\r\n uniforms: { uTime: { value: 0 }, uScroll: { value: 0 }, uReact: { value: 0 } },\r\n vertexShader: `\r\n varying vec2 vUv;\r\n varying vec3 vWorldPos;\r\n void main() {\r\n vUv = uv;\r\n vWorldPos = (modelMatrix * vec4(position, 1.0)).xyz;\r\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\r\n }\r\n `,\r\n fragmentShader: document.getElementById('sand-f').textContent,\r\n transparent: true\r\n });\r\n const m = new THREE.Mesh(new THREE.PlaneGeometry(2500, 2500), sandMat);\r\n m.rotation.x = -Math.PI \/ 2;\r\n scene.add(m);\r\n }\r\n\r\n function createHeroSet() {\r\n const group = new THREE.Group();\r\n const wood = new THREE.MeshPhysicalMaterial({ color: 0x111111, roughness: 0.5 });\r\n const seat = new THREE.Mesh(new THREE.BoxGeometry(4.5, 0.4, 12), wood);\r\n group.add(seat);\r\n \r\n const cocktailGroup = new THREE.Group();\r\n const glass = new THREE.Mesh(\r\n new THREE.CylinderGeometry(0.5, 0.4, 1.8, 32),\r\n new THREE.MeshPhysicalMaterial({ transmission: 1, thickness: 1, roughness: 0.02, color: 0xffffff })\r\n );\r\n cocktailGroup.add(glass);\r\n \r\n const liquid = new THREE.Mesh(\r\n new THREE.CylinderGeometry(0.45, 0.35, 1.4, 32),\r\n new THREE.MeshStandardMaterial({ color: 0xffaa00, emissive: 0xff5500, emissiveIntensity: 0.5 })\r\n );\r\n liquid.position.y = -0.1;\r\n cocktailGroup.add(liquid);\r\n\r\n cocktailGroup.position.set(3.5, 1.2, 2);\r\n group.add(cocktailGroup);\r\n group.position.set(0, 0, 30);\r\n scene.add(group);\r\n }\r\n\r\n function createArchitecture() {\r\n resort = new THREE.Group();\r\n const concrete = new THREE.MeshStandardMaterial({ color: 0x333333, roughness: 0.9 });\r\n const towerBase = new THREE.Mesh(new THREE.BoxGeometry(60, 240, 30), concrete);\r\n towerBase.position.y = 120;\r\n resort.add(towerBase);\r\n\r\n for(let i=0; i<6; i++) {\r\n const slab = new THREE.Mesh(new THREE.BoxGeometry(80, 2, 40), concrete);\r\n slab.position.set(Math.sin(i)*5, 40 + i*30, 0);\r\n resort.add(slab);\r\n const glass = new THREE.Mesh(\r\n new THREE.BoxGeometry(78, 28, 1),\r\n new THREE.MeshPhysicalMaterial({ transmission: 0.9, transparent: true, opacity: 0.2 })\r\n );\r\n glass.position.set(Math.sin(i)*5, 54 + i*30, 20);\r\n resort.add(glass);\r\n }\r\n\r\n suite = new THREE.Group();\r\n suite.add(new THREE.Mesh(new THREE.BoxGeometry(60, 40, 60), new THREE.MeshStandardMaterial({ color: 0x111111, side: THREE.BackSide })));\r\n suite.position.set(0, 130, -40);\r\n resort.add(suite);\r\n\r\n resort.position.set(0, 0, -250);\r\n scene.add(resort);\r\n\r\n \/\/ Pool\r\n const pool = new THREE.Mesh(new THREE.BoxGeometry(60, 0.5, 40), concrete);\r\n pool.position.set(80, 0, -180);\r\n const water = new THREE.Mesh(new THREE.PlaneGeometry(55, 35), new THREE.MeshStandardMaterial({color: 0x0ea5e9, roughness: 0}));\r\n water.rotation.x = -Math.PI\/2; water.position.set(80, 0.4, -180);\r\n scene.add(pool); scene.add(water);\r\n\r\n \/\/ Spa\r\n const spa = new THREE.Mesh(new THREE.BoxGeometry(30, 15, 30), new THREE.MeshPhysicalMaterial({transmission: 1, opacity: 0.2, transparent: true}));\r\n spa.position.set(-100, 7.5, -160);\r\n scene.add(spa);\r\n \r\n \/\/ Beach Cabanas\r\n for(let i=0; i<3; i++) {\r\n const cabana = new THREE.Mesh(new THREE.BoxGeometry(8, 6, 8), concrete);\r\n cabana.position.set(-40 + i*20, 3, -80);\r\n scene.add(cabana);\r\n }\r\n }\r\n\r\n function createMapPOIs() {\r\n const pts = [{ id: 'pool', p: [80, 5, -180] }, { id: 'spa', p: [-100, 15, -160] }, { id: 'beach', p: [0, 1, -80] }];\r\n pts.forEach(pt => {\r\n const m = new THREE.Mesh(new THREE.SphereGeometry(2, 24, 24), new THREE.MeshBasicMaterial({ color: 0xfcd34d }));\r\n m.position.set(...pt.p);\r\n m.userData.id = pt.id;\r\n poiMarkers.push(m);\r\n scene.add(m);\r\n });\r\n }\r\n\r\n function setReact(v) { targetReact = v ? 1 : 0; }\r\n \r\n function onMouseMove(e) {\r\n targetMouse.x = (e.clientX \/ window.innerWidth) - 0.5;\r\n targetMouse.y = (e.clientY \/ window.innerHeight) - 0.5;\r\n mouse.x = (e.clientX \/ window.innerWidth) * 2 - 1;\r\n mouse.y = -(e.clientY \/ window.innerHeight) * 2 + 1;\r\n }\r\n\r\n function onScroll() {\r\n targetScroll = window.scrollY \/ (document.body.scrollHeight - window.innerHeight);\r\n const fill = document.getElementById('progress-fill');\r\n if (fill) fill.style.height = (targetScroll * 100) + '%';\r\n }\r\n\r\n function animate() {\r\n requestAnimationFrame(animate);\r\n const time = clock.getElapsedTime();\r\n scroll += (targetScroll - scroll) * 0.08;\r\n uReact += (targetReact - uReact) * 0.06;\r\n \r\n skyMat.uniforms.uScroll.value = scroll;\r\n sandMat.uniforms.uScroll.value = scroll;\r\n sandMat.uniforms.uTime.value = time;\r\n sandMat.uniforms.uReact.value = uReact;\r\n\r\n if(waveGain) {\r\n let v = scroll < 0.3 ? 0.08 * (1-scroll) : (scroll > 0.85 ? 0.12 * (scroll-0.85) : 0.005);\r\n waveGain.gain.setTargetAtTime(v, audioCtx.currentTime, 0.1);\r\n }\r\n\r\n if (scroll < 0.25) {\r\n camera.position.set(targetMouse.x * 6, 6 + (-targetMouse.y * 4), 60);\r\n camera.lookAt(0, 2, 0);\r\n updateUI(0);\r\n } else if (scroll < 0.85) {\r\n const p = (scroll - 0.25) \/ 0.6;\r\n camera.position.set(Math.sin(p * Math.PI) * 15, 6 + (p * 124), 60 - (p * 360));\r\n camera.lookAt(0, 10 + (p * 130), -280);\r\n updateUI(1);\r\n } else {\r\n const p = (scroll - 0.85) \/ 0.15;\r\n camera.position.set(targetMouse.x * 15, 130 + (p * 600), -280 + (p * 800));\r\n camera.lookAt(0, 0, -250);\r\n updateUI(scroll > 0.95 ? 3 : 2);\r\n }\r\n\r\n if(scroll > 0.9) {\r\n raycaster.setFromCamera(mouse, camera);\r\n const hits = raycaster.intersectObjects(poiMarkers);\r\n document.querySelectorAll('.poi-tag').forEach(l => l.classList.remove('visible'));\r\n if(hits.length > 0) {\r\n const id = hits[0].object.userData.id;\r\n const label = document.getElementById('poi-' + id);\r\n if (label) {\r\n const p = hits[0].object.position.clone().project(camera);\r\n label.style.left = (p.x * 0.5 + 0.5) * window.innerWidth + 'px';\r\n label.style.top = (-(p.y * 0.5 - 0.5) * window.innerHeight) + 'px';\r\n label.classList.add('visible');\r\n }\r\n }\r\n }\r\n renderer.render(scene, camera);\r\n }\r\n\r\n function updateUI(idx) {\r\n document.querySelectorAll('.overlay').forEach((sec, i) => sec.classList.toggle('active', i === idx));\r\n }\r\n\r\n function onResize() {\r\n camera.aspect = window.innerWidth \/ window.innerHeight;\r\n camera.updateProjectionMatrix();\r\n renderer.setSize(window.innerWidth, window.innerHeight);\r\n }\r\n <\/script>\r\n<\/body>\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>Azure Sands | Luxury Reimagined 01 Horizon 02 Interior 03 Estate Ambient Audio Azure Sands \u2022 Private Reserve QuietLuxury A dialogue between raw Atlantic shores and modern organic brutalism. TheThreshold Cross the boundary where the coastal wind meets curated stillness. Our architecture is designed to frame the void. Availability Summer \/ Autumn ’26 Access Private […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-4784","page","type-page","status-publish","hentry"],"yoast_head":"\n<title>Beach Hotel - Denisa Alla<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/denisaalla.com\/sq\/beach-hotel\/\" \/>\n<meta property=\"og:locale\" content=\"sq_AL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Beach Hotel - Denisa Alla\" \/>\n<meta property=\"og:description\" content=\"Azure Sands | Luxury Reimagined 01 Horizon 02 Interior 03 Estate Ambient Audio Azure Sands \u2022 Private Reserve QuietLuxury A dialogue between raw Atlantic shores and modern organic brutalism. TheThreshold Cross the boundary where the coastal wind meets curated stillness. Our architecture is designed to frame the void. Availability Summer \/ Autumn ’26 Access Private […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/denisaalla.com\/sq\/beach-hotel\/\" \/>\n<meta property=\"og:site_name\" content=\"Denisa Alla\" \/>\n<meta property=\"article:modified_time\" content=\"2026-05-04T11:21:31+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minut\u00eb\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/denisaalla.com\\\/beach-hotel\\\/\",\"url\":\"https:\\\/\\\/denisaalla.com\\\/beach-hotel\\\/\",\"name\":\"Beach Hotel - Denisa Alla\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/denisaalla.com\\\/#website\"},\"datePublished\":\"2026-05-04T11:20:23+00:00\",\"dateModified\":\"2026-05-04T11:21:31+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/denisaalla.com\\\/beach-hotel\\\/#breadcrumb\"},\"inLanguage\":\"sq\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/denisaalla.com\\\/beach-hotel\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/denisaalla.com\\\/beach-hotel\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/denisaalla.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Beach Hotel\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/denisaalla.com\\\/#website\",\"url\":\"https:\\\/\\\/denisaalla.com\\\/\",\"name\":\"Denisa Alla\",\"description\":\"Website Designer \\\/ Programmer\",\"publisher\":{\"@id\":\"https:\\\/\\\/denisaalla.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/denisaalla.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"sq\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/denisaalla.com\\\/#organization\",\"name\":\"Denisa Alla\",\"url\":\"https:\\\/\\\/denisaalla.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"sq\",\"@id\":\"https:\\\/\\\/denisaalla.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/denisaalla.com\\\/wp-content\\\/uploads\\\/2026\\\/03\\\/cropped-denisaalla-pink-logo.png\",\"contentUrl\":\"https:\\\/\\\/denisaalla.com\\\/wp-content\\\/uploads\\\/2026\\\/03\\\/cropped-denisaalla-pink-logo.png\",\"width\":800,\"height\":758,\"caption\":\"Denisa Alla\"},\"image\":{\"@id\":\"https:\\\/\\\/denisaalla.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n","yoast_head_json":{"title":"Beach Hotel - Denisa Alla","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/denisaalla.com\/sq\/beach-hotel\/","og_locale":"sq_AL","og_type":"article","og_title":"Beach Hotel - Denisa Alla","og_description":"Azure Sands | Luxury Reimagined 01 Horizon 02 Interior 03 Estate Ambient Audio Azure Sands \u2022 Private Reserve QuietLuxury A dialogue between raw Atlantic shores and modern organic brutalism. TheThreshold Cross the boundary where the coastal wind meets curated stillness. Our architecture is designed to frame the void. Availability Summer \/ Autumn ’26 Access Private […]","og_url":"https:\/\/denisaalla.com\/sq\/beach-hotel\/","og_site_name":"Denisa Alla","article_modified_time":"2026-05-04T11:21:31+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minut\u00eb"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/denisaalla.com\/beach-hotel\/","url":"https:\/\/denisaalla.com\/beach-hotel\/","name":"Beach Hotel - Denisa Alla","isPartOf":{"@id":"https:\/\/denisaalla.com\/#website"},"datePublished":"2026-05-04T11:20:23+00:00","dateModified":"2026-05-04T11:21:31+00:00","breadcrumb":{"@id":"https:\/\/denisaalla.com\/beach-hotel\/#breadcrumb"},"inLanguage":"sq","potentialAction":[{"@type":"ReadAction","target":["https:\/\/denisaalla.com\/beach-hotel\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/denisaalla.com\/beach-hotel\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/denisaalla.com\/"},{"@type":"ListItem","position":2,"name":"Beach Hotel"}]},{"@type":"WebSite","@id":"https:\/\/denisaalla.com\/#website","url":"https:\/\/denisaalla.com\/","name":"Denisa Alla","description":"Website Designer \/ Programmer","publisher":{"@id":"https:\/\/denisaalla.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/denisaalla.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"sq"},{"@type":"Organization","@id":"https:\/\/denisaalla.com\/#organization","name":"Denisa Alla","url":"https:\/\/denisaalla.com\/","logo":{"@type":"ImageObject","inLanguage":"sq","@id":"https:\/\/denisaalla.com\/#\/schema\/logo\/image\/","url":"https:\/\/denisaalla.com\/wp-content\/uploads\/2026\/03\/cropped-denisaalla-pink-logo.png","contentUrl":"https:\/\/denisaalla.com\/wp-content\/uploads\/2026\/03\/cropped-denisaalla-pink-logo.png","width":800,"height":758,"caption":"Denisa Alla"},"image":{"@id":"https:\/\/denisaalla.com\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/denisaalla.com\/sq\/wp-json\/wp\/v2\/pages\/4784","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/denisaalla.com\/sq\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/denisaalla.com\/sq\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/denisaalla.com\/sq\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/denisaalla.com\/sq\/wp-json\/wp\/v2\/comments?post=4784"}],"version-history":[{"count":4,"href":"https:\/\/denisaalla.com\/sq\/wp-json\/wp\/v2\/pages\/4784\/revisions"}],"predecessor-version":[{"id":4788,"href":"https:\/\/denisaalla.com\/sq\/wp-json\/wp\/v2\/pages\/4784\/revisions\/4788"}],"wp:attachment":[{"href":"https:\/\/denisaalla.com\/sq\/wp-json\/wp\/v2\/media?parent=4784"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}