function ScrollBar() {
  const p = useScrollProgress();
  return (
    <>
      <div className="scrollbar" aria-hidden="true">
        <div className="scrollbar__fill" style={{ transform: `scaleX(${p})` }} />
      </div>
      <div className="flowline" aria-hidden="true">
        <div className="flowline__fill" style={{ height: `${p * 100}%` }} />
      </div>
    </>
  );
}

function App() {
  return (
    <>
      <ScrollBar />
      <Nav />
      <main>
        <Hero />
        <Runs />
        <Connect />
      </main>
      <Tweaks />
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById("app"));
root.render(<App />);