https://estimote.com/javascript/hero-stories.js?v=5

1(() => {
2  const screen = document.querySelector('.hero-phone-screen');
3  const next = document.querySelector('.hero-story-next');
4  if (!screen || !next) return;
5  const source = screen.getAttribute('src').split('#')[0];
6  const duration = 11703.815;
7  // Halfway through typing each question (24, 17 and 23 characters).
8  const typingMidpoints = [1212.5, 950, 1175];
9  const reducedMotion = matchMedia('(prefers-reduced-motion: reduce)');
10  let phase = 0;
11  let selected = 0;
12  let started = 0;
13  let revision = 0;
14  function currentStory() {
15    const elapsed = Math.max(0, performance.now() - started);
16    return reducedMotion.matches ? selected : (selected + Math.floor(elapsed / duration)) % typingMidpoints.length;
17  }
18  function restart(index, fromTyping = true) {
19    selected = index;
20    phase = fromTyping ? typingMidpoints[index] : 0;
21    started = performance.now() - phase;
22    // A fresh SVG document synchronizes every layer at the chosen entry point.
23    screen.src = `${source}&play=${++revision}#hero-${fromTyping ? 'open' : 'story'}-${index}`;
24  }
25  screen.addEventListener('load', () => { started = performance.now() - phase; });
26  next.addEventListener('click', () => restart((currentStory() + 1) % typingMidpoints.length));
27  reducedMotion.addEventListener('change', () => restart(selected));
28  next.hidden = false;
29  restart(0, false);
30})();