HowToCode/liquidglasscontemplarium
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>LiquidGlassContemplarium</title>7 <link rel="icon" type="image/x-icon" href="/static/favicon.ico">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://unpkg.com/feather-icons"></script>10 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>11 <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>12 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>13 <script src="https://unpkg.com/@barba/core"></script>14 <style>15 @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700&display=swap');16 17 * {18 margin: 0;19 padding: 0;20 box-sizing: border-box;21 }22 23 html, body {24 width: 100%;25 height: 100%;26 overflow: hidden;27 font-family: 'Montserrat', sans-serif;28 background: #0a0a0f;29 color: rgba(255, 255, 255, 0.92);30 scroll-behavior: smooth;31 }32 33 .section {34 width: 100%;35 height: 100vh;36 position: relative;37 overflow: hidden;38 }39 40 .liquid-glass {41 background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));42 backdrop-filter: blur(20px) saturate(180%);43 -webkit-backdrop-filter: blur(20px) saturate(180%);44 border: 1px solid rgba(255, 255, 255, 0.12);45 border-radius: 24px;46 box-shadow: 47 0 8px 32px rgba(0, 0, 0, 0.36),48 inset 0 1px 1px rgba(255, 255, 255, 0.1),49 0 0 40px rgba(78, 205, 196, 0.05);50 position: relative;51 overflow: hidden;52 transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);53 }54 55 .liquid-glass::before {56 content: '';57 position: absolute;58 top: 0;59 left: -100%;60 width: 100%;61 height: 100%;62 background: linear-gradient(63 90deg,64 transparent,65 rgba(255, 255, 255, 0.1),66 transparent67 );68 transition: 0.5s;69 }70 71 .liquid-glass:hover::before {72 left: 100%;73 }74 75 .ripple-effect {76 position: absolute;77 border-radius: 50%;78 background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 70%);79 transform: scale(0);80 pointer-events: none;81 opacity: 0;82 }83 84 @keyframes float {85 0%, 100% { transform: translateY(0) rotate(0deg); }86 50% { transform: translateY(-20px) rotate(5deg); }87 }88 89 @keyframes liquid-shimmer {90 0% { transform: translateX(-100%) rotate(15deg); }91 100% { transform: translateX(200%) rotate(15deg); }92 }93 94 .particle {95 position: absolute;96 background: rgba(255, 255, 255, 0.6);97 border-radius: 50%;98 pointer-events: none;99 box-shadow: 0 0 10px rgba(120, 220, 255, 0.5);100 }101 102 canvas {103 position: fixed;104 top: 0;105 left: 0;106 z-index: -1;107 }108 109 .fade-in {110 opacity: 0;111 transform: translateY(30px);112 transition: opacity 1.8s ease, transform 1.8s ease;113 }114 115 .visible {116 opacity: 1;117 transform: translateY(0);118 }119 120 .liquid-overlay {121 position: absolute;122 top: 0;123 left: 0;124 width: 100%;125 height: 100%;126 background: linear-gradient(45deg, 127 rgba(120, 220, 255, 0.03) 0%, 128 rgba(160, 220, 255, 0.05) 50%, 129 rgba(200, 220, 255, 0.03) 100%);130 pointer-events: none;131 z-index: 1;132 }133 134 .glass-refraction {135 position: absolute;136 width: 150%;137 height: 40px;138 background: linear-gradient(90deg, 139 transparent, 140 rgba(255, 255, 255, 0.1), 141 rgba(255, 255, 255, 0.2), 142 rgba(255, 255, 255, 0.1), 143 transparent);144 transform: rotate(-5deg);145 animation: liquid-shimmer 8s linear infinite;146 opacity: 0.4;147 pointer-events: none;148 }149 150 .scroll-hint {151 position: fixed;152 bottom: 30px;153 left: 50%;154 transform: translateX(-50%);155 z-index: 10;156 color: rgba(255, 255, 255, 0.6);157 font-size: 14px;158 letter-spacing: 2px;159 text-transform: uppercase;160 animation: pulse 2s infinite;161 }162 163 @keyframes pulse {164 0%, 100% { opacity: 0.6; }165 50% { opacity: 0.3; }166 }167 </style>168</head>169<body class="bg-black text-white overflow-x-hidden">170 <!-- Three.js Canvas -->171 <canvas id="three-canvas"></canvas>172 173 <!-- Navigation Progress -->174 <div class="fixed top-0 left-0 w-full h-1 z-50">175 <div class="h-full bg-gradient-to-r from-cyan-400 to-blue-500 transition-all duration-300" style="width: 0%"></div>176 </div>177 178 <!-- Sections -->179 <section id="intro" class="section flex items-center justify-center">180 <div class="glass-panel p-12 max-w-2xl mx-4 text-center">181 <h1 class="text-5xl md:text-7xl font-thin mb-6 tracking-wider fade-in">LiquidGlass</h1>182 <p class="text-xl font-light opacity-80 mb-8 fade-in">An immersive digital contemplation of fluid forms and light</p>183 <div class="w-12 h-12 mx-auto border-t-2 border-white rounded-full animate-spin fade-in"></div>184 </div>185 </section>186 187 <section id="fluid-universe" class="section flex items-center justify-center">188 <div class="absolute inset-0 opacity-20" id="particles-container"></div>189 <div class="glass-panel p-8 max-w-3xl mx-4 text-center">190 <h2 class="text-3xl md:text-5xl font-thin mb-6 tracking-wide fade-in">Fluid Universe</h2>191 <p class="text-lg font-light opacity-80 mb-6 fade-in">Where translucent forms dance with light in harmonious motion</p>192 <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-10">193 <div class="glass-panel p-6 fade-in">194 <i data-feather="droplet" class="w-10 h-10 mx-auto mb-4"></i>195 <h3 class="text-xl font-light mb-2">Fluidity</h3>196 <p class="text-sm opacity-70">The essence of continuous motion</p>197 </div>198 <div class="glass-panel p-6 fade-in">199 <i data-feather="sun" class="w-10 h-10 mx-auto mb-4"></i>200 <h3 class="text-xl font-light mb-2">Light</h3>201 <p class="text-sm opacity-70">Subtle reflections and transparency</p>202 </div>203 <div class="glass-panel p-6 fade-in">204 <i data-feather="wind" class="w-10 h-10 mx-auto mb-4"></i>205 <h3 class="text-xl font-light mb-2">Motion</h3>206 <p class="text-sm opacity-70">Organic, weightless movement</p>207 </div>208 </div>209 </div>210 </section>211 212 <section id="contemplative-space" class="section flex items-center justify-center">213 <div class="text-center max-w-2xl mx-4">214 <h2 class="text-4xl md:text-6xl font-thin mb-8 tracking-wider fade-in">Contemplative Space</h2>215 <p class="text-xl font-light opacity-80 mb-10 fade-in">A moment of stillness amidst the fluid motion</p>216 <div class="w-64 h-64 mx-auto glass-panel rounded-full flex items-center justify-center fade-in" style="animation: float 8s ease-in-out infinite;">217 <div class="w-48 h-48 rounded-full bg-gradient-to-br from-cyan-400/20 to-blue-500/20 backdrop-blur-lg"></div>218 </div>219 </div>220 </section>221 222 <section id="closure" class="section flex items-center justify-center">223 <div class="text-center max-w-2xl mx-4">224 <h2 class="text-3xl md:text-5xl font-thin mb-6 tracking-wide fade-in">Return to Stillness</h2>225 <p class="text-lg font-light opacity-80 mb-8 fade-in">Forms dissolve back into the void</p>226 <div class="w-32 h-32 mx-auto glass-panel rounded-full flex items-center justify-center mb-10 fade-in">227 <i data-feather="moon" class="w-16 h-16"></i>228 </div>229 <p class="text-sm opacity-60 fade-in">LiquidGlassContemplarium © 2023</p>230 </div>231 </section>232 233 <!-- Audio Element (Optional) -->234 <audio id="ambient-sound" loop>235 <source src="https://assets.mixkit.co/active_storage/sfx/251/251-preview.mp3" type="audio/mpeg">236 </audio>237 238 <script>239 // Initialize Feather Icons240 feather.replace();241 242 // Create ripple effect on click243 document.addEventListener('click', function(e) {244 const ripple = document.createElement('div');245 ripple.classList.add('ripple-effect');246 document.body.appendChild(ripple);247 248 const size = Math.max(e.clientX, e.clientY);249 const posX = e.clientX - size/2;250 const posY = e.clientY - size/2;251 252 ripple.style.width = ripple.style.height = size + 'px';253 ripple.style.left = posX + 'px';254 ripple.style.top = posY + 'px';255 256 // Play subtle sound on interaction257 const sound = new Audio('https://assets.mixkit.co/active_storage/sfx/250/250-preview.mp3');258 sound.volume = 0.2;259 sound.play();260 261 // Animate ripple262 gsap.to(ripple, {263 scale: 2,264 opacity: 0,265 duration: 1,266 ease: "power2.out",267 onComplete: () => ripple.remove()268 });269 });270 271 // Three.js initialization272 let scene, camera, renderer, objects = [];273 274 function initThree() {275 // Scene setup276 scene = new THREE.Scene();277 camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);278 renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('three-canvas'), alpha: true });279 renderer.setSize(window.innerWidth, window.innerHeight);280 281 // Add ambient light282 const ambientLight = new THREE.AmbientLight(0x333333);283 scene.add(ambientLight);284 285 // Add directional light286 const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);287 directionalLight.position.set(1, 1, 1);288 scene.add(directionalLight);289 290 // Create floating glass objects291 const geometry = new THREE.SphereGeometry(1, 32, 32);292 const material = new THREE.MeshPhysicalMaterial({293 color: 0x88ccee,294 metalness: 0.1,295 roughness: 0.05,296 transmission: 0.9,297 transparent: true,298 opacity: 0.7,299 clearcoat: 1.0,300 clearcoatRoughness: 0.1301 });302 303 for (let i = 0; i < 5; i++) {304 const sphere = new THREE.Mesh(geometry, material);305 sphere.position.x = Math.random() * 10 - 5;306 sphere.position.y = Math.random() * 10 - 5;307 sphere.position.z = Math.random() * -10;308 sphere.scale.setScalar(Math.random() * 0.5 + 0.5);309 scene.add(sphere);310 objects.push(sphere);311 }312 313 // Position camera314 camera.position.z = 5;315 316 // Handle window resize317 window.addEventListener('resize', () => {318 camera.aspect = window.innerWidth / window.innerHeight;319 camera.updateProjectionMatrix();320 renderer.setSize(window.innerWidth, window.innerHeight);321 });322 323 // Start animation324 animate();325 }326 327 function animate() {328 requestAnimationFrame(animate);329 330 // Animate objects331 objects.forEach(obj => {332 obj.rotation.x += 0.01;333 obj.rotation.y += 0.02;334 obj.position.y += Math.sin(Date.now() * 0.001) * 0.005;335 });336 337 renderer.render(scene, camera);338 }339 340 // Create particles341 function createParticles() {342 const container = document.getElementById('particles-container');343 for (let i = 0; i < 50; i++) {344 const particle = document.createElement('div');345 particle.classList.add('particle');346 347 const size = Math.random() * 4 + 1;348 particle.style.width = `${size}px`;349 particle.style.height = `${size}px`;350 351 particle.style.left = `${Math.random() * 100}%`;352 particle.style.top = `${Math.random() * 100}%`;353 354 container.appendChild(particle);355 356 // Animate particle357 gsap.to(particle, {358 x: `+=${Math.random() * 100 - 50}`,359 y: `+=${Math.random() * 100 - 50}`,360 duration: Math.random() * 10 + 10,361 repeat: -1,362 yoyo: true,363 ease: "sine.inOut"364 });365 }366 }367 368 // Handle scroll animations369 function handleScroll() {370 const progressBar = document.querySelector('.fixed.h-1 div');371 const sections = document.querySelectorAll('.section');372 const fadeElements = document.querySelectorAll('.fade-in');373 374 // Update progress bar375 const scrollPercent = (window.scrollY / (document.documentElement.scrollHeight - window.innerHeight)) * 100;376 progressBar.style.width = `${scrollPercent}%`;377 378 // Handle element visibility on scroll379 fadeElements.forEach(el => {380 const elementTop = el.getBoundingClientRect().top;381 if (elementTop < window.innerHeight * 0.85) {382 el.classList.add('visible');383 }384 });385 386 // Play/pause ambient sound based on scroll position387 const ambientSound = document.getElementById('ambient-sound');388 if (scrollPercent > 10 && scrollPercent < 90 && ambientSound.paused) {389 ambientSound.volume = 0.1;390 ambientSound.play().catch(e => console.log("Audio play failed:", e));391 } else if ((scrollPercent <= 10 || scrollPercent >= 90) && !ambientSound.paused) {392 gsap.to(ambientSound, {volume: 0, duration: 2, onComplete: () => ambientSound.pause()});393 }394 }395 396 // Initialize everything when page loads397 window.addEventListener('load', () => {398 initThree();399 createParticles();400 handleScroll(); // Initial check401 402 // Add smooth scrolling behavior403 window.addEventListener('scroll', handleScroll);404 405 // Gradually reveal elements on load406 gsap.to('body', { opacity: 1, duration: 1.5 });407 408 // Animate first section elements409 gsap.to('.fade-in', {410 opacity: 1,411 y: 0,412 stagger: 0.2,413 delay: 1,414 duration: 1.5,415 ease: "power2.out"416 });417 });418 </script>419</body>420</html>421