CNAR — Retro-Futuristic Logo Reveal

:root { --bg-color: #000007; --blue-1: #00aaff; --blue-2: #00d4ff; --magenta: #ff4db8; --red-accent: #ff3b3b; } html, body { height: 100%; margin: 0; background: radial-gradient(ellipse at center, rgba(8,12,20,1) 0%, rgba(0,0,0,1) 60%); overflow: hidden; font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } #canvas-container { position: absolute; inset: 0; z-index: 2; } #stars { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 1; } #overlay { position: absolute; inset: 0; z-index: 3; pointer-events: none; display: flex; align-items: center; justify-content: center; } /* initial thin scanline used in 00:00 - 00:01 */ #scanline { position: absolute; top: 50%; left: 100%; transform: translateY(-50%); width: 2px; height: 2px; background: linear-gradient(90deg, rgba(0,212,255,0.0), rgba(0,212,255,1), rgba(0,212,255,0.0)); box-shadow: 0 0 18px rgba(0,212,255,0.35), 0 0 60px rgba(0,160,255,0.12); border-radius: 2px; opacity: 0; } /* subtle film grain glow overlay */ #overlay::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 10% 20%, rgba(255,20,147,0.02), transparent 6%), radial-gradient(ellipse at 90% 80%, rgba(0,212,255,0.02), transparent 8%); mix-blend-mode: screen; pointer-events: none; } /* Fallback center message for very small screens */ .fallback { position: absolute; z-index: 10; color: rgba(255,255,255,0.8); font-size: 12px; left: 12px; bottom: 12px; font-family: monospace; } import * as THREE from 'https://unpkg.com/three@0.154.0/build/three.module.js'; let renderer, scene, camera, container; let slatGroup, letterGroup, flashMesh; let clock = new THREE.Clock(); let startTime = performance.now(); let timelineStart = startTime; const TOTAL_SLATS = 36; init(); animate(); function init() { container = document.getElementById('canvas-container'); renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); renderer.setPixelRatio(window.devicePixelRatio || 1); renderer.setSize(window.innerWidth, window.innerHeight); renderer.toneMapping = THREE.ACESFilmicToneMapping; renderer.outputEncoding = THREE.sRGBEncoding; container.appendChild(renderer.domElement); scene = new THREE.Scene(); camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.set(0, 0, 24); // Ambient environment const ambient = new THREE.AmbientLight(0x204060, 0.8); scene.add(ambient); // Directional rim light to get dramatic god-ray-ish highlights const rim = new THREE.DirectionalLight(0x9bdcff, 1.2); rim.position.set(-1, 1, 2); scene.add(rim); // Starfield canvas initStars(); // Create slats (horizontal glowing bands) slatGroup = new THREE.Group(); scene.add(slatGroup); buildSlats(); // Create final letters (blocky, slatted-style logo) letterGroup = new THREE.Group(); scene.add(letterGroup); buildLogoLetters(); // Flash plane for the burst at reveal const flashGeo = new THREE.PlaneGeometry(80, 40); const flashMat = new THREE.MeshBasicMaterial({ color: 0xffffff, transparent: true, opacity: 0, blending: THREE.AdditiveBlending, depthWrite: false }); flashMesh = new THREE.Mesh(flashGeo, flashMat); flashMesh.position.set(0, 0, 10); scene.add(flashMesh); window.addEventListener('resize', onResize); onResize(); // initial overlay scanline animation runScanlineIntro(); } function initStars() { const canvas = document.getElementById('stars'); const ctx = canvas.getContext('2d'); function resizeCanvas() { canvas.width = innerWidth * devicePixelRatio; canvas.height = innerHeight * devicePixelRatio; canvas.style.width = innerWidth + 'px'; canvas.style.height = innerHeight + 'px'; draw(); } function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = '#000012'; ctx.fillRect(0, 0, canvas.width, canvas.height); // draw scattered stars for (let i = 0; i < 800; i++) { const x = Math.random() * canvas.width; const y = Math.random() * canvas.height; const r = Math.random() * 1.6 * devicePixelRatio; const g = Math.random() * 0.6 + 0.4; ctx.beginPath(); ctx.fillStyle = `rgba(255,255,255,${g})`; ctx.arc(x, y, r, 0, Math.PI * 2); ctx.fill(); } } resizeCanvas(); window.addEventListener('resize', resizeCanvas); } function buildSlats() { const slatMaterial = new THREE.MeshStandardMaterial({ color: 0x00d4ff, emissive: 0x00aaff, emissiveIntensity: 1.2, metalness: 0.2, roughness: 0.1, side: THREE.DoubleSide }); const slatHeight = 0.5; const slatGap = 0.2; const totalHeight = TOTAL_SLATS * (slatHeight + slatGap); for (let i = 0; i < TOTAL_SLATS; i++) { const w = 40; const geom = new THREE.BoxGeometry(w, slatHeight, 0.4); const mesh = new THREE.Mesh(geom, slatMaterial.clone()); mesh.position.y = (i - TOTAL_SLATS / 2) * (slatHeight + slatGap) + slatHeight / 2; mesh.position.x = 40; // start off-screen to the right mesh.userData = { index: i }; slatGroup.add(mesh); } } function buildLogoLetters() { // Create four blocky letters by assembling thick slotted blocks to resemble "CNAR" // We'll use simplified block shapes and a small red accent on the 'C' const blockMat = new THREE.MeshStandardMaterial({ color: 0x00aaff, emissive: 0x00b7ff, emissiveIntensity: 0.9, metalness: 0.25, roughness: 0.12 }); const redMat = new THREE.MeshStandardMaterial({ color: 0xff3b3b, emissive: 0xff6b6b, emissiveIntensity: 0.6, metalness: 0.15, roughness: 0.2 }); // Parameters for the logo blocks const letterWidth = 3.2; const letterHeight = 6.2; const letterDepth = 1.2; const spacing = 1.2; const startX = -((letterWidth * 4 + spacing * 3) / 2) + letterWidth / 2; // C: approximated by a thick hollow block (we'll just use a rounded rectangle composition) const cGroup = new THREE.Group(); const cOuter = new THREE.BoxGeometry(letterWidth, letterHeight, letterDepth); const cMeshOuter = new THREE.Mesh(cOuter, blockMat.clone()); cGroup.add(cMeshOuter); // carve middle by adding a darker inner block (visually simulating cut) const cInner = new THREE.BoxGeometry(letterWidth * 0.6, letterHeight * 0.7, letterDepth + 0.02); const cMeshInner = new THREE.Mesh(cInner, new THREE.MeshStandardMaterial({ color: 0x001420, metalness: 0.2, roughness: 0.3 })); cMeshInner.position.x = 0.6; cGroup.add(cMeshInner); cGroup.position.x = startX; letterGroup.add(cGroup); // Add small red rectangle on upper-left of C const redAcc = new THREE.Mesh(new THREE.BoxGeometry(letterWidth * 0.28, letterHeight * 0.16, letterDepth + 0.02), redMat.clone()); redAcc.position.set(startX - letterWidth * 0.32, letterHeight * 0.22, 0.51); letterGroup.add(redAcc); // N: diagonal connection - approximated with two vertical bars and a diagonal box const nGroup = new THREE.Group(); const nLeft = new THREE.Mesh(new THREE.BoxGeometry(letterWidth * 0.28, letterHeight, letterDepth), blockMat.clone()); nLeft.position.x = -letterWidth * 0.36; const nRight = new THREE.Mesh(new THREE.BoxGeometry(letterWidth * 0.28, letterHeight, letterDepth), blockMat.clone()); nRight.position.x = letterWidth * 0.36; const diag = new THREE.Mesh(new THREE.BoxGeometry(letterWidth * 0.12, Math.sqrt(letterHeight * letterHeight + letterWidth * letterWidth), letterDepth), blockMat.clone()); diag.rotation.z = -Math.atan(letterHeight / letterWidth); nGroup.add(nLeft, nRight, diag); nGroup.position.x = startX + (letterWidth + spacing) * 1; letterGroup.add(nGroup); // A: two legs and a crossbar const aGroup = new THREE.Group(); const aLeft = new THREE.Mesh(new THREE.BoxGeometry(letterWidth * 0.18, letterHeight, letterDepth), blockMat.clone()); aLeft.rotation.z = Math.PI * -0.08; aLeft.position.x = -letterWidth * 0.22; const aRight = new THREE.Mesh(new THREE.BoxGeometry(letterWidth * 0.18, letterHeight, letterDepth), blockMat.clone()); aRight.rotation.z = Math.PI * 0.08; aRight.position.x = letterWidth * 0.22; const aBar = new THREE.Mesh(new THREE.BoxGeometry(letterWidth * 0.6, letterHeight * 0.12, letterDepth), blockMat.clone()); aBar.position.y = -letterHeight * 0.08; aGroup.add(aLeft, aRight, aBar); aGroup.position.x = startX + (letterWidth + spacing) * 2; letterGroup.add(aGroup); // R: vertical, curved top (approx by block) and diagonal leg const rGroup = new THREE.Group(); const rVert = new THREE.Mesh(new THREE.BoxGeometry(letterWidth * 0.22, letterHeight, letterDepth), blockMat.clone()); rVert.position.x = -letterWidth * 0.28; const rTop = new THREE.Mesh(new THREE.BoxGeometry(letterWidth * 0.7, letterHeight * 0.46, letterDepth), blockMat.clone()); rTop.position.set(letterWidth * 0.1, letterHeight * 0.22, 0); const rLeg = new THREE.Mesh(new THREE.BoxGeometry(letterWidth * 0.14, letterHeight * 0.6, letterDepth), blockMat.clone()); rLeg.rotation.z = -Math.PI * 0.22; rLeg.position.set(letterWidth * 0.36, -letterHeight * 0.12, 0); rGroup.add(rVert, rTop, rLeg); rGroup.position.x = startX + (letterWidth + spacing) * 3; letterGroup.add(rGroup); // initially invisible (we'll fade them in) letterGroup.children.forEach(c => { c.traverse(n => { if (n.isMesh) { n.material.transparent = true; n.material.opacity = 0; } }); }); // Slight scale down before reveal letterGroup.scale.set(0.8, 0.8, 0.8); letterGroup.position.z = -2; } function onResize() { const w = window.innerWidth; const h = window.innerHeight; renderer.setSize(w, h); camera.aspect = w / h; camera.updateProjectionMatrix(); } function runScanlineIntro() { const scan = document.getElementById('scanline'); // animate left-moving thin bright scanline from right to left and fade out between 0s and 1s scan.animate([ { left: '100%', opacity: 0 }, { left: '50%', opacity: 1 }, { left: '0%', opacity: 0 } ], { duration: 1000, easing: 'cubic-bezier(.2,.9,.2,1)', fill: 'forwards' }); } function animate(time) { requestAnimationFrame(animate); const t = (performance.now() - timelineStart) / 1000; // seconds from start updateTimeline(t); renderer.render(scene, camera); } function updateTimeline(t) { // 00:00 - 00:01: single thin horizontal line appears -> we used DOM scanline // 00:01 - 00:03: expand into horizontal slats (venetian blinds) // 00:03 - 00:05: camera plunge forward through slatted tunnel // 00:05 - 00:08: slats coalesce into the logo blocks (fade slats out, fade letters in) // 00:08 - 00:11: flash and god-ray burst // 00:11 - 00:16: final hold with glow // Slats initial entrance (1s -> 2.8s) if (t < 2.8) { const entranceProgress = easeOutCubic(clamp((t - 1.0) / 1.8, 0, 1)); // bring slats from right into view and settle into parallel blinds slatGroup.children.forEach((mesh, i) => { const idx = i; const stagger = idx / TOTAL_SLATS * 0.6; const p = clamp((entranceProgress - stagger) / (1 - stagger), 0, 1); // x from 40 -> 0 mesh.position.x = THREE.MathUtils.lerp(40, 0, p); // subtle Z parallax and slight scale on entrance mesh.scale.x = THREE.MathUtils.lerp(0.02, 1, p); mesh.material.emissiveIntensity = THREE.MathUtils.lerp(0.2, 1.2, p); }); } // camera plunge (3s -> 5s) if (t >= 3.0 && t < 5.0) { const p = easeInOutQuad(clamp((t - 3.0) / 2.0, 0, 1)); camera.position.z = THREE.MathUtils.lerp(24, 6, p); camera.position.y = THREE.MathUtils.lerp(0, -0.6, p); // slight lens of slats to create tunnel feel by rotating group slightly slatGroup.rotation.x = THREE.MathUtils.lerp(0, 0.06, p); } // coalesce into logo: 5s -> 8s if (t >= 5.0 && t < 8.0) { const p = easeInOutCubic(clamp((t - 5.0) / 3.0, 0, 1)); // slats move inward and fade slatGroup.children.forEach((mesh, i) => { const targetX = 0; const targetZ = THREE.MathUtils.lerp(0, -2.8, p); mesh.position.x = THREE.MathUtils.lerp(mesh.position.x, targetX, 0.06 + p * 0.12); mesh.position.z = targetZ; mesh.scale.x = THREE.MathUtils.lerp(mesh.scale.x, 0.18, p); mesh.material.emissiveIntensity = THREE.MathUtils.lerp(mesh.material.emissiveIntensity, 0.25, p); mesh.material.opacity = THREE.MathUtils.lerp(1, 0.0, p); mesh.material.transparent = true; }); // fade in letters and scale them slightly letterGroup.children.forEach(c => { c.traverse(n => { if (n.isMesh) { n.material.opacity = THREE.MathUtils.lerp(n.material.opacity, p, 0.06); } }); }); letterGroup.scale.set(THREE.MathUtils.lerp(0.8, 1.02, p), THREE.MathUtils.lerp(0.8, 1.02, p), 1); letterGroup.position.z = THREE.MathUtils.lerp(-2, 0, p); } // final settle and flash: 8s -> 11s if (t >= 8.0 && t < 11.0) { const p = easeOutExpo(clamp((t - 8.0) / 3.0, 0, 1)); // subtle final camera pullback and flash at start of this window camera.position.z = THREE.MathUtils.lerp(6, 8, p); // flash pulse at 8.0 - 8.4 const flashTime = t - 8.0; if (flashTime < 0.5) { const fp = easeOutQuad(clamp(flashTime / 0.5, 0, 1)); flashMesh.material.opacity = THREE.MathUtils.lerp(0, 1.0, fp); flashMesh.scale.set(1 + fp * 0.4, 1 + fp * 0.4, 1); // temporary bright emissive boost on letters letterGroup.children.forEach(c => { c.traverse(n => { if (n.isMesh) { n.material.emissiveIntensity = THREE.MathUtils.lerp(n.material.emissiveIntensity || 0.9, 3.2, fp); } }); }); } else { const fadeFP = easeOutCubic(clamp((flashTime - 0.5) / 1.8, 0, 1)); flashMesh.material.opacity = THREE.MathUtils.lerp(1.0, 0.0, fadeFP); letterGroup.children.forEach(c => { c.traverse(n => { if (n.isMesh) { n.material.emissiveIntensity = THREE.MathUtils.lerp(3.2, 1.0, fadeFP); } }); }); } } // final hold glow: 11s onwards (keep logo steady, soft pulsing) if (t >= 11.0) { const p = clamp((t - 11.0) / 5.0, 0, 1); // gentle pulsing emissive glow and slow rotation const pulse = 0.9 + Math.sin((t - 11.0) * 2.2) * 0.06; letterGroup.children.forEach(c => { c.traverse(n => { if (n.isMesh) { n.material.emissiveIntensity = THREE.MathUtils.lerp(n.material.emissiveIntensity, pulse, 0.04); } }); }); // add subtle magenta rim on the left side during hold // handled by a tiny left-side light } } // Utility easing & helpers function clamp(v, a = 0, b = 1) { return Math.min(b, Math.max(a, v)); } function easeOutCubic(x) { return 1 - Math.pow(1 - x, 3); } function easeInOutCubic(x) { return x < 0.5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2; } function easeInOutQuad(x) { return x < 0.5 ? 2 * x * x : 1 - Math.pow(-2 * x + 2, 2) / 2; } function easeOutExpo(x) { return x === 1 ? 1 : 1 - Math.pow(2, -10 * x); }