' + lines([r[0]]) + '

' + lines(r[1].map(esc)) + '

'; }).join(''); revEl.innerHTML = f.reviews.map(function (rv) { return '

' + holes(rv.stars) + '

' + '

' + lines([esc(rv.outlet)]) + '

' + lines(rv.quote.map(esc)) + '

'; }).join(''); indexEl.setAttribute('aria-label', 'Reel ' + (i + 1) + ' of ' + N + ': ' + f.label); } function groups() { var g = [], rows = metaEl.querySelectorAll('.hero__row'), revs = revEl.querySelectorAll('.review'); g.push({ els: titleEl.querySelectorAll('.l') }); [].forEach.call(rows, function (row) { g.push({ els: row.querySelector('.hero__rule'), rule: true }); g.push({ els: row.querySelectorAll('dt .l') }); g.push({ els: row.querySelectorAll('dd .l') }); }); // the study order: title, rule, label, value, rule, label, value, rule, label, starring lines, then the two reviews [].forEach.call(revs, function (rv) { g.push({ els: rv.querySelectorAll('.review__stars') }); g.push({ els: rv.querySelectorAll('.review__outlet .l') }); g.push({ els: rv.querySelectorAll('.review__quote .l') }); }); return g; } var swapTl = null; function enter(delay) { var gs = groups(), tl = gsap.timeline({ delay: delay || 0 }); gs.forEach(function (g, i) { if (g.rule) { gsap.set(g.els, { scaleX: 0, transformOrigin: 'left center' }); tl.to(g.els, { scaleX: 1, duration: uichemy_controller_bridge.hero_line_duration, ease: 'energy' }, ENTER_POS[i]); } else { gsap.set(g.els, { yPercent: 120 }); tl.to(g.els, { yPercent: 0, duration: uichemy_controller_bridge.hero_line_duration, ease: 'energy', stagger: uichemy_controller_bridge.hero_line_stagger }, ENTER_POS[i]); } }); return tl; } function swap(to) { if (swapTl) swapTl.kill(); if (L.reduced) { swapTl = gsap.timeline(); swapTl.to([titleEl, metaEl, revEl], { opacity: 0, duration: .15 }).add(function () { render(to); }).to([titleEl, metaEl, revEl], { opacity: 1, duration: .25 }); return; } var gs = groups(), oldH = titleEl.offsetHeight; swapTl = gsap.timeline(); gs.forEach(function (g, i) { if (g.rule) swapTl.to(g.els, { scaleX: 0, transformOrigin: 'right center', duration: .4, ease: 'energy' }, i * EXIT_STEP); else swapTl.to(g.els, { yPercent: -120, duration: .4, ease: 'energy', stagger: .016 }, i * EXIT_STEP); }); swapTl.add(function () { gsap.set(titleEl, { height: 'auto' }); render(to); var newH = titleEl.offsetHeight; gsap.fromTo(titleEl, { height: oldH }, { height: newH, duration: .5, ease: 'energy', clearProps: 'height' }); enter(); }, '+=0.02'); } function updateIndex(animate) { var n = active + 1; reels.tens.set(Math.floor(n / 10), animate); reels.ones.set(n % 10, animate); api.index = active; } render(0); updateIndex(false); gsap.set(section.querySelectorAll('.hero__info .l, .hero__reviews .l'), { yPercent: 120 }); gsap.set(section.querySelectorAll('.hero__rule'), { scaleX: 0 }); // ---------- WebGL ---------- var gl = L.webglOK(), renderer, scene, camera, rootG, discs = [], labelMats = []; var glide = { v: 1 }, aFrom = -7, aTo = -7, prevA = -7, wob = 0, visible = true, needs = true; function currentA() { return aFrom + (aTo - aFrom) * glide.v; } /* speed-test copy: the disc wheel sits behind the ticket gate until a sound choice is made, so its WebGL (renderer, environment map, label textures, render loop) is built on the visitor's first input instead of at load (L.whenGL, lantern-35-fast-chrome.js). The editor, ?skip-intro and reduced motion build it at once, as before. */ var labelImgs = gl ? films.map(function (f) { return L.loadImage(f.img, true); }) : []; // label art still requested at load if (gl) (L.whenGL || function (fn) { fn(); })(function () { renderer = new THREE.WebGLRenderer({ canvas: canvas, antialias: true, alpha: true, powerPreference: 'high-performance' }); renderer.setPixelRatio(L.dpr()); renderer.outputColorSpace = THREE.SRGBColorSpace; renderer.toneMapping = THREE.ACESFilmicToneMapping; renderer.toneMappingExposure = 0.86; scene = new THREE.Scene(); scene.environment = makeEnv(renderer); camera = new THREE.PerspectiveCamera(40, 1, 0.1, 100); camera.position.set(0, 0, 4.4); scene.add(new THREE.AmbientLight(0xffffff, 0.25)); var d1 = new THREE.DirectionalLight(0xfff9e8, 0.75); d1.position.set(3.5, -8, 6); scene.add(d1); var d2 = new THREE.DirectionalLight(0xffffff, 0.3); d2.position.set(-5, -2, 4); scene.add(d2); var d3 = new THREE.DirectionalLight(0xdfe6ef, 0.6); d3.position.set(0, 3, -6); scene.add(d3); var d4 = new THREE.DirectionalLight(0xffffff, 0.9); d4.position.set(0, 3.2, 3); scene.add(d4); rootG = new THREE.Group(); rootG.rotation.set(-0.5236, -0.5236, 0); rootG.scale.setScalar(1.08); scene.add(rootG); // geometry (units: disc radius 1 = 60 mm) var gLabel = new THREE.RingGeometry(0.24, 0.974, 160, 1); var gBack = new THREE.RingGeometry(0.24, 0.974, 160, 1); var rimPts = [[0.974, 0.0056], [0.994, 0.0056], [1.0, 0.002], [1.0, -0.002], [0.994, -0.0056], [0.974, -0.0056]].map(function (p) { return new THREE.Vector2(p[0], p[1]); }); var gRim = new THREE.LatheGeometry(rimPts, 180); gRim.rotateX(Math.PI / 2); var lipPts = [[0.214, -0.0051], [0.214, 0.0051], [0.222, 0.0045], [0.232, 0.005], [0.24, 0.0045], [0.24, -0.0045], [0.232, -0.005], [0.222, -0.0045], [0.214, -0.0051]].map(function (p) { return new THREE.Vector2(p[0], p[1]); }); var gLip = new THREE.LatheGeometry(lipPts, 120); gLip.rotateX(Math.PI / 2); var gHub = new THREE.RingGeometry(0.174, 0.214, 120, 1); var gInner = new THREE.RingGeometry(0.14, 0.174, 120, 1); var hubTex = new THREE.CanvasTexture(paintHub()); hubTex.colorSpace = THREE.SRGBColorSpace; var mBack = new THREE.MeshPhysicalMaterial({ color: 0x1a1e2a, metalness: 1, roughness: 0.23, clearcoat: 0.34, clearcoatRoughness: 0.06, iridescence: 1, iridescenceIOR: 1.3, iridescenceThicknessRange: [120, 420], envMapIntensity: 1.5 }); var mRim = new THREE.MeshPhysicalMaterial({ color: 0xffffff, metalness: 0.55, roughness: 0.04, clearcoat: 0.7, clearcoatRoughness: 0.05, envMapIntensity: 1.8 }); var mLip = new THREE.MeshPhysicalMaterial({ color: 0xf4f6f9, metalness: 0, roughness: 0.3, clearcoat: 1, clearcoatRoughness: 0.04, transparent: true, opacity: 0.55, envMapIntensity: 1.3 }); var mHub = new THREE.MeshPhysicalMaterial({ color: 0xffffff, map: hubTex, metalness: 0.82, roughness: 0.28, clearcoat: 0.7, clearcoatRoughness: 0.12, envMapIntensity: 1.45, side: THREE.DoubleSide }); var mInner = new THREE.MeshPhysicalMaterial({ color: 0xeef1f5, metalness: 0, roughness: 0.547, clearcoat: 0.4, clearcoatRoughness: 0.3, transparent: true, opacity: 0.6, envMapIntensity: 0.9, side: THREE.DoubleSide }); films.forEach(function (f, i) { var t = new THREE.CanvasTexture(paintLabel(f, null)); t.colorSpace = THREE.SRGBColorSpace; t.anisotropy = renderer.capabilities.getMaxAnisotropy(); var mLabel = new THREE.MeshPhysicalMaterial({ map: t, metalness: 0.48, roughness: 0.42, clearcoat: 0.8, clearcoatRoughness: 0, envMapIntensity: 0.85 }); labelMats.push(mLabel); var g = new THREE.Group(); var label = new THREE.Mesh(gLabel, mLabel); label.position.z = 0.0056; var back = new THREE.Mesh(gBack, mBack); back.position.z = -0.0056; back.rotation.y = Math.PI; var rim = new THREE.Mesh(gRim, mRim); var lip = new THREE.Mesh(gLip, mLip); var hub = new THREE.Mesh(gHub, mHub); hub.position.z = 0.0046; var hubB = new THREE.Mesh(gHub, mHub); hubB.position.z = -0.0046; hubB.rotation.y = Math.PI; var inner = new THREE.Mesh(gInner, mInner); inner.position.z = 0.003; g.add(label, back, rim, lip, hub, hubB, inner); g.visible = false; rootG.add(g); discs.push(g); // swap in the real label art once it loads (skipped if the browser taints file:// images) labelImgs[i].then(function (img) { if (!L.imageUsable(img)) return; t.image = paintLabel(f, img); t.needsUpdate = true; needs = true; }); }); var resize = function () { var w = canvas.clientWidth, h = canvas.clientHeight; if (!w || !h) return; renderer.setSize(w, h, false); camera.aspect = w / h; var tanH = Math.tan(THREE.MathUtils.degToRad(20)); camera.position.z = Math.max(4.4, 2.35 / (2 * tanH * camera.aspect * 0.92)); if (camera.aspect < 1) { rootG.rotation.set(-0.5236, -0.72, 0); camera.position.y = -0.1; } else { rootG.rotation.set(-0.5236, -0.5236, 0); camera.position.y = 0; } camera.updateProjectionMatrix(); needs = true; placeGlow(); }; // safelight glow: sits behind the transparent canvas at the active slot, sized to the disc on screen var glowEl = section.querySelector('.hero__glow'); function placeGlow() { if (!glowEl) return; rootG.updateMatrixWorld(true); camera.updateMatrixWorld(true); var c0 = new THREE.Vector3(0, 0.06, 0).applyMatrix4(rootG.matrixWorld).project(camera); var c1 = new THREE.Vector3(1, 0.06, 0).applyMatrix4(rootG.matrixWorld).project(camera); var w = canvas.clientWidth, h = canvas.clientHeight; var x = (c0.x + 1) / 2 * w + canvas.offsetLeft, y = (1 - c0.y) / 2 * h + canvas.offsetTop; var r = Math.hypot((c1.x - c0.x) / 2 * w, (c1.y - c0.y) / 2 * h); var k = w < 768 ? 1.55 : 2.1; // halo reach past the rim (smaller on phones, where the disc fills the width) glowEl.style.transform = 'translate(' + (x - r * k).toFixed(1) + 'px,' + (y - r * k).toFixed(1) + 'px)'; glowEl.style.width = glowEl.style.height = (r * k * 2).toFixed(1) + 'px'; } window.addEventListener('resize', resize); resize(); L.watch(section, function (v) { visible = v; if (v) needs = true; }); var drewEmpty = false; gsap.ticker.add(function (time, dtMs) { if (!visible) return; var dt = Math.min(0.05, dtMs / 1000) || 0.016, shown = 0; var a = currentA(); var vel = (a - prevA) / dt; prevA = a; wob = L.clamp(L.damp(wob, vel, 6, dt), -3, 3); if (!needs && Math.abs(wob) < 1e-4 && glide.v >= 1 && L.reduced) return; for (var i = 0; i < discs.length; i++) { var dsc = discs[i], k = i - a; if (k < -2.6 || k > 6.6) { dsc.visible = false; continue; } dsc.visible = true; shown++; var ang = k * PHI, ak = Math.abs(k); dsc.position.set(R_X * Math.sin(ang), 0.06 * Math.max(0, 1 - ak) - Math.abs(wob) * 0.014, R_Z * (1 - Math.cos(ang))); dsc.rotation.set(0, -ang + wob * 0.034, 0); dsc.scale.setScalar(scaleFor(ak)); } /* speed-test copy: while no disc is on the wheel (behind the ticket gate, before the throw-in) the frame is empty; draw it once, then skip the identical empty renders */ if (shown || !drewEmpty) { renderer.render(scene, camera); drewEmpty = !shown; } needs = false; if (glowEl) { var dip = Math.sin(Math.PI * L.clamp(glide.v, 0, 1)); glowEl.style.opacity = (a < -0.5 ? 0 : 1 - 0.65 * dip).toFixed(3); } }); }); else { canvas.style.display = 'none'; } // ---------- navigation ---------- function go(i) { i = L.clamp(i, 0, N - 1); if (i === active) return false; var a = currentA(); aFrom = a; aTo = i; glide.v = 0; if (L.reduced) glide.v = 1; else gsap.to(glide, { v: 1, duration: uichemy_controller_bridge.hero_glide_duration, ease: 'discGlide', overwrite: true }); swap(i); active = i; updateIndex(true); return true; } api.go = go; api.intro = function () { aFrom = -7; aTo = 0; glide.v = 0; if (L.reduced) glide.v = 1; else gsap.to(glide, { v: 1, duration: uichemy_controller_bridge.hero_throw_duration, ease: 'power3.out', overwrite: true }); enter(L.reduced ? 0 : 0.55); gsap.fromTo(section.querySelector('.hero__foot'), { autoAlpha: 0 }, { autoAlpha: 1, duration: .8, delay: 1.1 }); }; // wheel / trackpad: one disc per gesture while the page sits at the top var topSince = 0, lastWheel = 0, lastMag = 0, lastStep = 0; function onScroll() { var y = window.scrollY || document.documentElement.scrollTop; if (y < 4) { if (topSince === Infinity) topSince = performance.now(); } else topSince = Infinity; } window.addEventListener('scroll', onScroll, { passive: true }); window.addEventListener('wheel', function (e) { if (L.gateOpen || e.ctrlKey) return; if (topSince === Infinity || performance.now() - topSince < 260) return; var dy = Math.abs(e.deltaY) >= Math.abs(e.deltaX) ? e.deltaY : e.deltaX; var dir = dy > 0 ? 1 : dy < 0 ? -1 : 0; if (!dir) return; if (active + dir > N - 1) return; // last disc: hand the wheel back to the page e.preventDefault(); e.stopPropagation(); if (active + dir < 0) return; var now = performance.now(), mag = Math.abs(dy); var fresh = now - lastWheel > 200 || (mag > lastMag * 1.8 && mag > 14); lastWheel = now; lastMag = mag; if (!fresh || now - lastStep < 380 || mag < 3) return; if (go(active + dir)) lastStep = now; }, { passive: false, capture: true }); // drag / swipe (horizontal) var dragX = null, dragId = null; canvas.addEventListener('pointerdown', function (e) { dragX = e.clientX; dragId = e.pointerId; }); window.addEventListener('pointermove', function (e) { if (dragX === null || e.pointerId !== dragId) return; var dx = e.clientX - dragX; if (Math.abs(dx) > 46) { go(active + (dx < 0 ? 1 : -1)); dragX = e.clientX; } }); window.addEventListener('pointerup', function () { dragX = null; }); window.addEventListener('pointercancel', function () { dragX = null; }); section.querySelectorAll('.hero__arrow').forEach(function (b) { b.addEventListener('click', function () { go(active + (+b.dataset.dir)); }); }); window.addEventListener('keydown', function (e) { if (L.gateOpen || /input|textarea|select/i.test(document.activeElement.tagName)) return; var r = section.getBoundingClientRect(); if (r.bottom < 80 || r.top > window.innerHeight * .5) return; if (e.key === 'ArrowRight') { go(active + 1); e.preventDefault(); } if (e.key === 'ArrowLeft') { go(active - 1); e.preventDefault(); } }); return api; }; })(); } function go() { L35R.widget("03-hero", define); } if (window.L35R && L35R.widget) go(); else (window.__L35_PENDING = window.__L35_PENDING || []).push(go); })();

The vault — 28 titles from the Lantern 35 catalogue

Booth log

Tonight in the booth

Tonight the lamp is lit in