(function(){ "use strict"; if (window.__osmi) return; var defs = {}, live = {}, order = []; var api = { v: 1, booted: false, hydrated: false, route: null, define: function(name, def){ if (!defs[name]) order.push(name); defs[name] = def; }, /* class writes only, and idempotent: this is the half that may run before paint. */ gate: function(name){ var d = defs[name]; if (!d || !d.gate) return; try { d.gate(); } catch (e) {} }, /* the route is recorded here rather than in arm() because this pass is the one that runs first on the way into a page. window.__osmi.route then reads as the route the live drivers were built for, which is the one thing worth knowing from a console when a driver looks wrong. */ gateAll: function(route){ if (route) api.route = route; for (var i = 0; i < order.length; i++) api.gate(order[i]); }, stop: function(name){ var t = live[name]; delete live[name]; if (typeof t !== 'function') return; try { t(); } catch (e) {} }, /* always tears down first, so calling this twice on one DOM cannot leave two sets of listeners behind. a driver with nothing to do on this route hands back no teardown and is simply not live. */ start: function(name){ var d = defs[name]; if (!d) return; api.stop(name); try { var t = d.init(); if (typeof t === 'function') live[name] = t; } catch (e) {} }, arm: function(route){ api.hydrated = true; api.gateAll(route); for (var i = 0; i < order.length; i++) api.start(order[i]); }, disarm: function(){ for (var i = 0; i < order.length; i++) api.stop(order[i]); }, /* what is currently attached to the DOM on screen. debugging only. */ armed: function(){ var out = []; for (var i = 0; i < order.length; i++) if (live[order[i]]) out.push(order[i]); return out; }, /* the first-load path. the eager drivers cannot wait for React: the CSS hides every .reveal the moment the js class is set, so an observer that only arrives with hydration leaves the hero blank for the whole window. The rest wait for DriverBoot, whose first effect is the honest "React has hydrated" signal. The timeout is the safety net for a page where React never hydrates at all. */ boot: function(){ if (api.booted) return; api.booted = true; api.gateAll(); function eager(){ for (var i = 0; i < order.length; i++) { if (defs[order[i]].eager) api.start(order[i]); } } if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', eager, {once: true}); } else { eager(); } window.setTimeout(function(){ if (!api.hydrated) api.arm(); }, 3000); } }; window.__osmi = api; })(); window.__osmi.define('reveal', { eager: true, gate: function(){ document.documentElement.classList.add('js'); }, init: function(){ var els = document.querySelectorAll('.reveal'); if (!els.length) return null; if (window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches) { for (var i = 0; i < els.length; i++) els[i].classList.add('in'); return null; } if (!('IntersectionObserver' in window)) { for (var j = 0; j < els.length; j++) els[j].classList.add('in'); return null; } var io = new IntersectionObserver(function(entries){ for (var k = 0; k < entries.length; k++) { if (entries[k].isIntersecting) { entries[k].target.classList.add('in'); io.unobserve(entries[k].target); } } }, { rootMargin: '0px 0px -10% 0px', threshold: 0.05 }); var watched = 0; for (var m = 0; m < els.length; m++) { if (els[m].classList.contains('in')) continue; io.observe(els[m]); watched++; } if (!watched) { io.disconnect(); return null; } return function(){ io.disconnect(); }; } }); window.__osmi.define('demo', { gate: function(){ if (!document.querySelector('[data-demo-track]')) return; if (document.querySelectorAll('[data-demo-layer]').length < 2) return; document.documentElement.classList.add('demo-pin'); }, init: function(){ if (!window.matchMedia || !window.requestAnimationFrame) return null; var track = document.querySelector('[data-demo-track]'); var sticky = document.querySelector('[data-demo-sticky]'); var layers = document.querySelectorAll('[data-demo-layer]'); var notes = document.querySelectorAll('[data-demo-note]'); var steps = document.querySelectorAll('[data-demo-step]'); if (!track || layers.length < 2) return null; /* the device itself, and every floating callout, cached once: the turn writes transforms straight onto these and never touches a custom property, so a frame costs four writes plus ten, and invalidates nothing else. */ var phones = document.querySelectorAll('[data-demo-layer] .mock-phone'); var cards = document.querySelectorAll('[data-demo-note] .demo-note'); /* the flow cards, parsed ONCE into plain numbers. seven sets of data attributes read inside the scroll loop would be the only expensive thing in it, and the rotation is baked into the string here so a frame writes no var() lookups. */ var flowEls = document.querySelectorAll('[data-flow-card]'); var flowBox = document.querySelector('[data-flow]'); var flow = []; for (var fi = 0; fi < flowEls.length; fi++) { var fel = flowEls[fi]; flow.push({ el: fel, s: parseFloat(fel.getAttribute('data-s')) || 0, e: parseFloat(fel.getAttribute('data-e')) || 1, run: parseFloat(fel.getAttribute('data-run')) || 0.3, dir: fel.getAttribute('data-dir') === 'out' ? 1 : -1, rot: (fel.style.getPropertyValue('--rot') || '0deg').replace(/^\s+|\s+$/g, ''), max: 0 }); } var N = layers.length; /* THE BAND: one state's share of the track. The turn's envelope and the flow's windows were both tuned on the three-state tour, so both are carried here as multiples of the band they were tuned against, and neither needs retuning when a state is added or dropped above. */ var BAND = 1 / (N - 1); /* the flow's own windows are written against the three-state track (band .5), so they are rescaled to this tour's band once, here, rather than every frame. */ var FLOW_K = BAND / 0.5; /* the pin's own gate is MOTION only: below 768 the composition is different (one device, no rail, one caption) but it pins on this same driver over a shorter track. The query matches the stylesheet's exactly, so the two can never disagree. */ var PINNED = window.matchMedia('(prefers-reduced-motion: no-preference)'); /* WIDE is the second gate: the one that says a viewport has gutters wide enough for something to TRAVEL through, and the flow and the callout counter-shift hang off it. The turn does not: it never leaves the device's own footprint, so it runs on both. The query matches the stylesheet's exactly, so the two can never disagree. */ var WIDE = window.matchMedia('(min-width: 768px)'); var wasWide = null; var raf = null; var dead = false; /* the pinned box's own laid-out height, read on resize only. see update(). */ var stickyH = 0; /* the device's laid-out width, read on resize only (offsetWidth ignores the turn). the callout counter-shift is a RATIO of it rather than a fixed pixel nudge. */ var phoneW = 0; var measured = false; var root = document.documentElement; function clamp(v){ return v < 0 ? 0 : (v > 1 ? 1 : v); } /* the same smootherstep the crossfade runs on, so the turn and the swap share one easing family and neither can feel like a different animation. */ function ease(v){ var u = clamp(v); return u * u * u * (u * (u * 6 - 15) + 10); } /* ONE layout read per resize, never per frame. max is the room a card actually has between the bezel it is anchored to and the edge of the stage, MEASURED rather than assumed: the run is capped by it, so no viewport can send a card past the clip or out towards the step rail. */ function measure(){ stickyH = sticky ? sticky.offsetHeight : 0; phoneW = phones.length ? phones[0].offsetWidth : 0; var boxW = flowBox ? flowBox.clientWidth : 0; for (var i = 0; i < flow.length; i++) { var c = flow[i]; var w = c.el.offsetWidth, h = c.el.offsetHeight; var room = c.dir < 0 ? c.el.offsetLeft : (boxW - c.el.offsetLeft - w); /* a tilted card is wider than it is laid out: the corner sticks out by half of what the rotation adds. take that off the room, or the card that leans the furthest loses a corner to the clip at the end of its run. */ var rad = Math.abs(parseFloat(c.rot) || 0) * Math.PI / 180; room -= (w * Math.cos(rad) + h * Math.sin(rad) - w) / 2; c.max = room > 0 ? room : 0; } measured = true; } /* everything the WIDE composition writes, handed back to the stylesheet. under reduced motion this is what parks every flow card at mid travel, fully up, and never moves it again; below 768 it is what guarantees no stale turn or callout nudge survives a crossing of the breakpoint. */ function clearWide(){ for (var q = 0; q < phones.length; q++) phones[q].style.removeProperty('transform'); for (var c = 0; c < cards.length; c++) cards[c].style.removeProperty('transform'); for (var f = 0; f < flow.length; f++) { flow[f].el.style.removeProperty('transform'); flow[f].el.style.removeProperty('opacity'); } } function reset(){ for (var i = 0; i < N; i++) layers[i].style.removeProperty('opacity'); for (var n = 0; n < notes.length; n++) notes[n].style.removeProperty('opacity'); for (var j = 0; j < steps.length; j++) steps[j].classList.toggle('on', j === 0); clearWide(); wasWide = null; } function update(){ if (dead) return; if (!PINNED.matches) { reset(); return; } if (!measured) measure(); var rect = track.getBoundingClientRect(); /* the pin lasts exactly (track - sticky) of scroll, so the sticky box's OWN height is what the driver divides by, never the window's. on a phone the box is laid out in svh and window.innerHeight grows past it the moment the address bar hides, which would leave the last state permanently short of arriving. */ var travel = rect.height - (stickyH || window.innerHeight); var progress = travel > 0 ? clamp(-rect.top / travel) : 0; var wide = WIDE.matches; if (wide !== wasWide) { if (!wide) clearWide(); wasWide = wide; } /* a COVER crossfade, not a dissolve between two half-transparent screens: the devices are opaque and stacked in source order, so every state at or below the one being left stays at a solid 1 underneath while only the arriving state fades in over it. that is why nothing ever ghosts through a settled screen. */ var f = progress / BAND; var k = Math.min(N - 2, Math.max(0, Math.floor(f))); var frac = clamp(f - k); var u = clamp((frac - 0.35) / 0.3); var cover = u * u * u * (u * (u * 6 - 15) + 10); for (var i = 0; i < N; i++) { layers[i].style.opacity = i <= k ? '1' : (i === k + 1 ? String(cover) : '0'); } var nearest = cover >= 0.5 ? Math.min(N - 1, k + 1) : k; for (var n = 0; n < notes.length; n++) notes[n].style.opacity = n === nearest ? '1' : '0'; for (var j = 0; j < steps.length; j++) steps[j].classList.toggle('on', j === nearest); /* THE FLOW and the callout counter-shift are the two things that need gutters, and they are the two things gated on WIDE. */ if (wide) { /* Home's own band, finished before the cover to Scan starts at .35 of a band: what goes in and what comes back out is a statement about the home screen, and a card still drifting while the scan sheet arrives would be narrating the wrong screen. every card owns a window inside Home's band and the windows overlap, so the run never has a hole in it. fade up over the first fifth, hold for the middle half, fade out over the last quarter: a card is a thing passing through, never a thing that parks. */ for (var fx = 0; fx < flow.length; fx++) { var fc = flow[fx]; var t = clamp((progress - fc.s * FLOW_K) / ((fc.e - fc.s) * FLOW_K)); var d = fc.run * phoneW; if (d > fc.max) d = fc.max; var x = fc.dir < 0 ? -d * (1 - ease(t)) : d * ease(t); var a = Math.min(ease(t / 0.20), 1 - ease((t - 0.74) / 0.26)); fc.el.style.transform = 'translate3d(' + x.toFixed(1) + 'px,0,0) rotate(' + fc.rot + ')'; fc.el.style.opacity = a < 0.002 ? '0' : a.toFixed(3); } } /* THE TURN. The scan state is the one you are meant to look into rather than read, so the device turns toward the page while it is up: in over the first third of the scan band, held while the read sits there, and back to face-on by the time the next state arrives. One 0..1..0 envelope drives all of it, so there is no state machine to fall out of sync with the crossfade. Transform only, and every constant is a multiple of the band rather than a fixed point on the track. */ var turn = ease((progress - 0.52 * BAND) / (0.32 * BAND)) * (1 - ease((progress - 1.20 * BAND) / (0.36 * BAND))); /* ONE envelope, TWO magnitudes. The wide one swings 26 degrees and swells 2%, which needs a gutter to swing into. The mobile one swings 16 and SHRINKS 2%, and that sign flip is the whole trick: through the 1000px perspective the mobile stylesheet sets, the turned silhouette is NARROWER than the flat one, so the device turns inside its own box. */ var ry = wide ? -26 : -16; var rx = wide ? 3 : 2; var ds = wide ? 0.02: -0.02; var tr = turn > 0.002 ? 'rotateY(' + (ry * turn).toFixed(2) + 'deg) rotateX(' + (rx * turn).toFixed(2) + 'deg) scale(' + (1 + ds * turn).toFixed(4) + ')' : ''; for (var q = 0; q < phones.length; q++) phones[q].style.transform = tr; /* below 768 nothing is standing beside the bezel: the caption sits under the device, in the page plane, and the turn does not reach it. */ if (!wide) return; /* the callouts stay in the page plane and step aside instead. at 26 degrees the far (left) edge swings a long way in and the near (right) edge barely moves: the left edge comes in by ~6.6% of the device width while the right edge's furthest point is only ~0.7% out. one constant cannot track an edge that is a trapezoid, and it does not have to. */ if (cards.length) { var sl = (0.0658 * phoneW * turn).toFixed(2) + 'px'; var sr = (0.0068 * phoneW * turn).toFixed(2) + 'px'; for (var c = 0; c < cards.length; c++) { cards[c].style.transform = turn > 0.002 ? 'translateX(' + (cards[c].classList.contains('l') ? sl : sr) + ')' : ''; } } } function onScroll(){ if (dead || raf !== null) return; raf = window.requestAnimationFrame(function(){ raf = null; update(); }); } /* a resize, or a gate change, can move the sticky box's height, the device's width and the room a flow card has, so every cached measurement is dropped before the next frame reads them. */ function onGate(){ measured = false; onScroll(); } try { /* the CSS gate. set only now that the elements are all accounted for, and set here as well as in gate(), because a route reached by a client-side navigation never ran the markup's own gate call. */ root.classList.add('demo-pin'); /* NOTHING IS WRITTEN UNTIL REACT HAS HYDRATED. The gate class had to land before first paint, but no inline style did: the stylesheet already gives the first layer opacity 1 and the rest 0, which is exactly what this driver would write at rest. Writing it anyway, while React was still hydrating, produced a mismatch on elements React owns and patched nothing. So the registry only calls init() from DriverBoot's effect, or from its own 3s safety net. One frame of delay so sticky layout has settled before the first measurement. */ window.requestAnimationFrame(update); window.addEventListener('scroll', onScroll, {passive: true}); window.addEventListener('resize', onGate, {passive: true}); if (PINNED.addEventListener) { PINNED.addEventListener('change', onGate); WIDE.addEventListener('change', onGate); } else if (PINNED.addListener) { PINNED.addListener(onGate); WIDE.addListener(onGate); } } catch (e) { /* the gate is only honest while something is driving it: hand the page back its stacked fallback rather than a pinned build that never moves. */ dead = true; root.classList.remove('demo-pin'); return null; } return function(){ dead = true; if (raf !== null) { window.cancelAnimationFrame(raf); raf = null; } window.removeEventListener('scroll', onScroll); window.removeEventListener('resize', onGate); if (PINNED.removeEventListener) { PINNED.removeEventListener('change', onGate); WIDE.removeEventListener('change', onGate); } else if (PINNED.removeListener) { PINNED.removeListener(onGate); WIDE.removeListener(onGate); } }; } }); window.__osmi.define('more', { gate: function(){ if (!document.querySelector('[data-more-track]')) return; if (document.querySelectorAll('[data-more-layer]').length < 2) return; document.documentElement.classList.add('more-pin'); }, init: function(){ if (!window.matchMedia || !window.requestAnimationFrame) return null; var track = document.querySelector('[data-more-track]'); var sticky = document.querySelector('[data-more-sticky]'); var layers = document.querySelectorAll('[data-more-layer]'); var labels = document.querySelectorAll('[data-more-label]'); if (!track || layers.length < 2) return null; var N = layers.length; /* MOTION is the only gate here. Below 768 the composition differs (one label line over the device instead of a list beside it, per the stylesheet) but it pins on this identical driver, so there is no width query to keep in step. */ var PINNED = window.matchMedia('(prefers-reduced-motion: no-preference)'); var raf = null; var dead = false; /* the pinned box's own laid-out height, read on resize only. on a phone it is laid out in svh and window.innerHeight grows past it the moment the address bar hides, which would leave the last screen permanently short of arriving. */ var stickyH = 0; var root = document.documentElement; function clamp(v){ return v < 0 ? 0 : (v > 1 ? 1 : v); } function reset(){ for (var i = 0; i < N; i++) layers[i].style.removeProperty('opacity'); for (var j = 0; j < labels.length; j++) labels[j].classList.toggle('on', j === 0); } function update(){ if (dead) return; if (!PINNED.matches) { reset(); return; } if (!stickyH) stickyH = sticky ? sticky.offsetHeight : 0; var rect = track.getBoundingClientRect(); /* the pin lasts exactly (track - sticky) of scroll, so the sticky box's OWN height is what the driver divides by, never the window's. */ var travel = rect.height - (stickyH || window.innerHeight); var progress = travel > 0 ? clamp(-rect.top / travel) : 0; /* a COVER crossfade, not a dissolve between two half-transparent screens: the devices are opaque and stacked in source order, so every screen at or below the one being left stays at a solid 1 underneath while only the arriving screen fades in over it. the ramp holds flat for the first third of the handover and eases the rest, on the same smootherstep the hero demo swaps on. */ var band = 1 / (N - 1); var f = progress / band; var k = Math.min(N - 2, Math.max(0, Math.floor(f))); var frac = clamp(f - k); var u = clamp((frac - 0.35) / 0.3); var cover = u * u * u * (u * (u * 6 - 15) + 10); for (var i = 0; i < N; i++) { layers[i].style.opacity = i <= k ? '1' : (i === k + 1 ? String(cover) : '0'); } /* the label lights with the screen it names, turning over at the crossfade's own halfway point so the words and the glass never disagree about which is up. */ var nearest = cover >= 0.5 ? Math.min(N - 1, k + 1) : k; for (var j = 0; j < labels.length; j++) labels[j].classList.toggle('on', j === nearest); } function onScroll(){ if (dead || raf !== null) return; raf = window.requestAnimationFrame(function(){ raf = null; update(); }); } /* a resize, or a gate change, can move the sticky box's height, so the cached measurement is dropped before the next frame reads it. */ function onGate(){ stickyH = 0; onScroll(); } try { /* the CSS gate. set only now that the elements are all accounted for, and set here as well as in gate(), because a route reached by a client-side navigation never ran the markup's own gate call. */ root.classList.add('more-pin'); /* Same deferral as the hero's driver, and for the same reason: the gate class had to land before first paint, the inline opacities did not, and the stylesheet already holds the resting state. See demoScript.ts and DriverBoot.tsx. One frame of delay so sticky layout has settled before the first measurement. */ window.requestAnimationFrame(update); window.addEventListener('scroll', onScroll, {passive: true}); window.addEventListener('resize', onGate, {passive: true}); if (PINNED.addEventListener) { PINNED.addEventListener('change', onGate); } else if (PINNED.addListener) { PINNED.addListener(onGate); } } catch (e) { dead = true; root.classList.remove('more-pin'); return null; } return function(){ dead = true; if (raf !== null) { window.cancelAnimationFrame(raf); raf = null; } window.removeEventListener('scroll', onScroll); window.removeEventListener('resize', onGate); if (PINNED.removeEventListener) { PINNED.removeEventListener('change', onGate); } else if (PINNED.removeListener) { PINNED.removeListener(onGate); } }; } }); window.__osmi.define('rose', { gate: function(){ if (!document.querySelector('[data-rose-track]')) return; if (!document.querySelector('[data-rose-fig]')) return; document.documentElement.classList.add('rose-pin'); }, init: function(){ if (!window.matchMedia || !window.requestAnimationFrame) return null; var track = document.querySelector('[data-rose-track]'); var sticky = document.querySelector('[data-rose-sticky]'); var fig = document.querySelector('[data-rose-fig]'); var calm = document.querySelector('[data-rose-calm]'); var wave = document.querySelector('[data-rose-wave]'); var sectionEl = document.querySelector('[data-rose-root]'); if (!track || !fig || !calm || !wave || !sectionEl) return null; /* MOTION is the only gate. Below 768 the composition is stacked and the character is smaller, but it pins on this identical driver over a shorter track, so there is no width query here to keep in step with the sheet. */ var PINNED = window.matchMedia('(prefers-reduced-motion: no-preference)'); var raf = null; var dead = false; /* the pinned box's own laid-out height, read on resize only. on a phone it is laid out in svh and window.innerHeight grows past it the moment the address bar hides, which would leave the last state permanently out of reach. */ var stickyH = 0; var measured = false; var root = document.documentElement; /* -1 means "not yet classified": the first update() after hydration always writes the attribute once, whatever state it lands on. */ var state = -1; function clamp(v){ return v < 0 ? 0 : (v > 1 ? 1 : v); } function measure(){ stickyH = sticky ? sticky.offsetHeight : 0; measured = true; } /* the state boundaries. UP is the threshold p has to reach to enter the next state; DOWN is the threshold it has to drop below to leave it, a fixed margin under UP, so a value sitting exactly on a boundary cannot flip the attribute back and forth. */ var UP = [0.25, 0.55]; var DOWN = [0.22, 0.52]; function stateFor(p, prev){ var s = prev < 0 ? 0 : prev; while (s < 2 && p >= UP[s]) s++; while (s > 0 && p < DOWN[s - 1]) s--; return s; } /* everything this driver owns, handed back to the stylesheet. under reduced motion that is what leaves the static, awake composition standing, and drops the classification so a later re-enable starts clean. */ function reset(){ sectionEl.removeAttribute('data-rose'); state = -1; } function update(){ if (dead) return; if (!PINNED.matches) { reset(); return; } if (!measured) measure(); var rect = track.getBoundingClientRect(); /* the pin lasts exactly (track - sticky) of scroll, so the sticky box's OWN height is what the driver divides by, never the window's. */ var travel = rect.height - (stickyH || window.innerHeight); var p = travel > 0 ? clamp(-rect.top / travel) : 0; var next = stateFor(p, state); if (next !== state) { state = next; sectionEl.setAttribute('data-rose', String(state)); } } function onScroll(){ if (dead || raf !== null) return; raf = window.requestAnimationFrame(function(){ raf = null; update(); }); } function onGate(){ measured = false; onScroll(); } try { /* set here as well as in gate(), because a route reached by a client-side navigation never ran the markup's own gate call. */ root.classList.add('rose-pin'); /* NOTHING IS WRITTEN UNTIL REACT HAS HYDRATED: the gate class had to land before first paint, but no attribute did. The stylesheet already parks the pinned build on the sleeping state with both lines down, which is what state 0 looks like anyway. The registry only calls init() from DriverBoot's effect, or from its own safety net. One frame of delay so the sticky layout has settled before the first measurement. */ window.requestAnimationFrame(update); window.addEventListener('scroll', onScroll, {passive: true}); window.addEventListener('resize', onGate, {passive: true}); if (PINNED.addEventListener) { PINNED.addEventListener('change', onGate); } else if (PINNED.addListener) { PINNED.addListener(onGate); } } catch (e) { dead = true; root.classList.remove('rose-pin'); return null; } return function(){ dead = true; if (raf !== null) { window.cancelAnimationFrame(raf); raf = null; } window.removeEventListener('scroll', onScroll); window.removeEventListener('resize', onGate); if (PINNED.removeEventListener) { PINNED.removeEventListener('change', onGate); } else if (PINNED.removeListener) { PINNED.removeListener(onGate); } }; } }); window.__osmi.gateAll();

Who advises Osmi

Dr. Kate Masterson, DC