<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Interactive Social UI</title> <style> :root { --purple-bg: #6a1b9a; --card-shadow: 0 15px 35px rgba(0,0,0,0.3); --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); } body, html { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; font-family: 'Segoe UI', system-ui, sans-serif; background-color: var(--purple-bg); color: #333; } #canvas-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; } .main-container { position: relative; z-index: 1; width: 100vw; height: 100vh; perspective: 1000px; display: flex; justify-content: center; align-items: center; } /* --- UI Elements --- */ .card { background: white; border-radius: 16px; box-shadow: var(--card-shadow); position: absolute; transition: var(--transition); cursor: pointer; user-select: none; } .card:hover { transform: scale(1.05) translateZ(20px) !important; box-shadow: 0 25px 50px rgba(0,0,0,0.4); z-index: 10; } /* Main Center Image Card */ .center-post { width: 320px; height: 460px; padding: 12px; display: flex; flex-direction: column; } .img-container { position: relative; width: 100%; height: 85%; overflow: hidden; border-radius: 10px; } .center-post img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .center-post:hover img { transform: scale(1.1); } /* Heart Interaction */ .heart-btn { position: absolute; bottom: 10px; right: 10px; background: rgba(255,255,255,0.9); border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; font-size: 20px; border: none; cursor: pointer; transition: var(--transition); } .heart-btn.active { color: #e91e63; transform: scale(1.2); } /* Secondary Card */ .left-post { width: 160px; height: 200px; left: 15%; top: 20%; padding: 8px; } .left-post img { width: 100%; height: 75%; object-fit: cover; border-radius: 6px; } /* Chat Bubbles */ .bubble { background: white; padding: 14px 22px; border-radius: 20px; box-shadow: var(--card-shadow); display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 600; position: absolute; transition: var(--transition); cursor: pointer; } .bubble:hover { transform: scale(1.1) translateX(10px) !important; background: #fdfdfd; } .avatar { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; } .bubble-1 { top: 18%; right: 18%; } .bubble-2 { top: 38%; right: 12%; } .bubble-3 { bottom: 22%; left: 12%; } .tag { color: #1e88e5; text-decoration: none; font-weight: bold; } /* UI Placeholder Lines */ .ui-line { height: 6px; background: #eee; border-radius: 3px; margin-top: 8px; } .ui-line.short { width: 40%; } .ui-line.long { width: 85%; } </style> </head> <body> <div id="canvas-container"> <canvas id="webgl-canvas"></canvas> </div> <div class="main-container" id="parallax-scene"> <div class="card left-post" data-depth="0.2" style="transform: rotate(-8deg);"> <img src="https://images.unsplash.com/photo-1529156069898-49953e39b3ac?auto=format&fit=crop&w=300&q=80" alt="Friends"> <div class="ui-line long"></div> <div class="ui-line short"></div> </div> <div class="card center-post" data-depth="0.1" style="transform: rotate(-2deg);"> <div class="img-container"> <img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&w=500&q=80" alt="Main Model"> <button class="heart-btn" onclick="this.classList.toggle('active')">❤</button> </div> <div style="display: flex; align-items: center; gap: 10px; margin-top: 15px;"> <div class="avatar" style="background: #9c27b0;"></div> <div style="flex-grow: 1;"> <div class="ui-line long"></div> <div class="ui-line short"></div> </div> </div> </div> <div class="bubble bubble-1" data-depth="0.3"> <div class="avatar" style="background: linear-gradient(45deg, #f093fb, #f5576c);"></div> <span>This video is us hahaha</span> </div> <div class="bubble bubble-2" data-depth="0.4"> <div class="avatar" style="background: linear-gradient(45deg, #2196F3, #3F51B5);"></div> <span>I feel seen lol</span> </div> <div class="bubble bubble-3" data-depth="0.25"> <div class="avatar" style="background: #0d47a1;"></div> <span><span class="tag">@friend</span> please tell me you saw this!</span> </div> </div> <script id="vs" type="x-shader/x-vertex"> attribute vec2 position; void main() { gl_Position = vec4(position, 0.0, 1.0); } </script> <script id="fs" type="x-shader/x-fragment"> precision highp float; uniform float u_time; uniform vec2 u_resolution; uniform vec2 u_mouse; float noise(vec2 uv) { return fract(sin(dot(uv, vec2(12.9898, 78.233))) * 43758.5453); } void main() { vec2 uv = gl_FragCoord.xy / u_resolution.xy; vec2 m = u_mouse / u_resolution.xy; // Subtle movement based on mouse vec3 color = vec3(0.35 + (m.x * 0.1), 0.08, 0.55 + (m.y * 0.1)); // Abstract Background Shapes float d1 = distance(uv, vec2(0.8 + sin(u_time*0.5)*0.05, 0.5)); float d2 = distance(uv, vec2(0.2, 0.8)); color = mix(color, vec3(0.5, 0.15, 0.7), smoothstep(0.45, 0.44, d1) * 0.6); color = mix(color, vec3(0.45, 0.1, 0.65), smoothstep(0.3, 0.29, d2) * 0.4); // Grain color += (noise(uv + u_time * 0.05) - 0.5) * 0.07; gl_FragColor = vec4(color, 1.0); } </script> <script> // 1. WebGL Background Logic const canvas = document.getElementById('webgl-canvas'); const gl = canvas.getContext('webgl'); let mouseX = 0, mouseY = 0; function initWebGL() { const program = gl.createProgram(); const addShader = (type, source) => { const s = gl.createShader(type); gl.shaderSource(s, source); gl.compileShader(s); gl.attachShader(program, s); }; addShader(gl.VERTEX_SHADER, document.getElementById('vs').text); addShader(gl.FRAGMENT_SHADER, document.getElementById('fs').text); gl.linkProgram(program); gl.useProgram(program); const buffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, buffer); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1,-1,1,-1,-1,1,-1,1,1,-1,1,1]), gl.STATIC_DRAW); const pos = gl.getAttribLocation(program, "position"); gl.enableVertexAttribArray(pos); gl.vertexAttribPointer(pos, 2, gl.FLOAT, false, 0, 0); const timeLoc = gl.getUniformLocation(program, "u_time"); const resLoc = gl.getUniformLocation(program, "u_resolution"); const mouseLoc = gl.getUniformLocation(program, "u_mouse"); function render(time) { canvas.width = window.innerWidth; canvas.height = window.innerHeight; gl.viewport(0, 0, canvas.width, canvas.height); gl.uniform1f(timeLoc, time * 0.001); gl.uniform2f(resLoc, canvas.width, canvas.height); gl.uniform2f(mouseLoc, mouseX, mouseY); gl.drawArrays(gl.TRIANGLES, 0, 6); requestAnimationFrame(render); } requestAnimationFrame(render); } // 2. Parallax & Mouse Interactivity const scene = document.getElementById('parallax-scene'); const elements = document.querySelectorAll('[data-depth]'); window.addEventListener('mousemove', (e) => { mouseX = e.clientX; mouseY = e.clientY; // Calculate offset from center const x = (window.innerWidth / 2 - e.pageX) / 25; const y = (window.innerHeight / 2 - e.pageY) / 25; elements.forEach(el => { const depth = el.getAttribute('data-depth'); const moveX = x * depth; const moveY = y * depth; // Maintain the original rotation while adding parallax const currentRotation = el.style.transform.match(/rotate$(.*?)$/); const rot = currentRotation ? currentRotation[0] : 'rotate(0deg)'; el.style.transform = `${rot} translate3d(${moveX}px, ${moveY}px, 0)`; }); }); // Initialize everything initWebGL(); </script> </body> </html>

Code & assets

Design System