Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                From
    <a
      href="https://pie6k.github.io/motionblur/"
      rel="noreferrer"
      target="_blank"
      >https://pie6k.github.io/motionblur/</a
    >

To see better code fomrat, please go to <a href="https://codesandbox.io/s/motion-blur-test-yreqf?from-embed=&file=/src/domUtils.ts:0-177" rel="noreferrer"
      target="_blank" >Code sandbox</a>

    <div id="content">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur
        malesuada maximus mi. Aenean pretium consequat nunc, eget convallis
        lacus vulputate sed. Mauris euismod eleifend rutrum. Curabitur metus
        orci, mollis sed neque eget, scelerisque ornare nisi. Proin lobortis
        finibus ipsum, vel feugiat velit venenatis nec. Donec id lorem mauris.
        Cras id cursus ligula. Donec sollicitudin sollicitudin lectus et mattis.
        Etiam eleifend laoreet arcu, ac suscipit lacus. Etiam urna felis, semper
        a laoreet id, dictum ut odio. Vivamus lobortis ac odio ac efficitur.
        Etiam vel ex tristique, elementum purus feugiat, egestas lectus. Cras
        eget ante vitae quam rutrum efficitur in a lectus. Morbi at pretium dui.
        Aenean laoreet pulvinar dignissim. Curabitur lacinia placerat quam, et
        tincidunt mi elementum ac.
      </p>
      <img src="https://placekitten.com/200/300" />
      <p>
        Cras sagittis vestibulum scelerisque. Quisque arcu ligula, maximus at
        libero a, eleifend dapibus arcu. In risus elit, pellentesque sit amet
        ipsum sit amet, dignissim rhoncus nibh. Donec rutrum, ipsum sed blandit
        malesuada, orci augue egestas felis, quis viverra elit felis ac risus.
        Proin velit dolor, fermentum et tortor quis, iaculis porta orci. Ut sit
        amet lacinia nunc, sed vehicula massa. Aliquam id risus sollicitudin,
        faucibus elit sed, luctus ex. Aliquam ultricies elementum tellus at
        euismod. Phasellus rutrum fermentum ultricies. Donec a rutrum urna. Nam
        elementum magna eget blandit viverra.
      </p>
      <p>
        Nullam a dolor purus. Fusce posuere libero a gravida suscipit. Aenean
        rutrum ultricies lacus, sit amet consectetur dui vestibulum in. Aliquam
        erat volutpat. Integer quis lobortis dui. Aliquam erat volutpat. Nunc
        pellentesque luctus urna, vitae ultrices quam tristique vel. Vestibulum
        posuere, enim vel euismod vestibulum, mauris leo pellentesque erat, et
        convallis nulla ante vitae sem. In hac habitasse platea dictumst.
        Suspendisse ut risus vehicula, tempus enim vitae, imperdiet lorem.
        Nullam non nibh quis sapien rhoncus tristique. Fusce dui eros, accumsan
        non ultrices vel, cursus vel neque. Aenean luctus dui purus, non
        lobortis massa porttitor id. Donec rhoncus, felis vel dictum venenatis,
        arcu metus tempor massa, sed finibus augue magna vel nisi. Sed vel diam
        ultricies, ultricies diam quis, aliquam ex. Pellentesque ut metus sit
        amet justo dapibus porta.
      </p>
      <p>
        Vivamus quis eros non augue lacinia dictum. Duis eu metus nec lectus
        aliquet pharetra. Sed euismod luctus turpis non sodales. Vivamus eu urna
        felis. Integer vestibulum risus sit amet elementum gravida. Suspendisse
        ligula nisi, accumsan vitae eros sed, luctus consectetur risus. Donec a
        dui id lacus finibus imperdiet et eget sapien.
      </p>
      <p>
        Cras quis ultricies augue, id posuere lectus. Praesent nec aliquet
        lorem, ac fermentum nibh. Suspendisse quis egestas mi, nec accumsan
        elit. Curabitur commodo id neque nec pellentesque. Aliquam ultricies,
        risus porttitor congue suscipit, eros sapien interdum libero, vitae
        molestie nisi metus eu massa. Vivamus luctus massa nec nulla facilisis
        convallis. Aliquam efficitur magna arcu.
      </p>
      <p>
        Vivamus dui quam, blandit non justo a, dapibus gravida velit. Phasellus
        tincidunt, nibh eu aliquam ullamcorper, magna ligula aliquet purus, ut
        imperdiet erat dolor a erat. In molestie vestibulum facilisis. Aenean
        eget turpis quis mauris interdum luctus vitae ut lorem. Vivamus bibendum
        dapibus ipsum, quis rutrum tellus faucibus vel. Nam ac arcu consequat,
        porta ex nec, aliquet libero. Integer porttitor lectus quis odio
        elementum rhoncus. Nulla ultrices venenatis mauris vestibulum faucibus.
        Nunc et nulla vitae arcu rhoncus luctus id ut nulla. Phasellus sed odio
        vulputate, hendrerit ante eget, tincidunt lacus. In eros quam, rhoncus
        eget commodo sit amet, interdum id est.
      </p>
      <p>
        Aliquam nec ipsum ante. Maecenas risus justo, malesuada nec ultrices eu,
        elementum vel nibh. Duis et diam sit amet enim pulvinar tempor.
        Curabitur leo tellus, vestibulum a auctor non, fringilla id nulla.
        Quisque maximus mollis sapien. Integer fringilla libero nec ante
        consequat varius. Ut tristique justo id dolor volutpat, non mattis sem
        cursus. Duis fringilla dolor eget lacinia faucibus. Etiam molestie enim
        eget velit tincidunt, vitae rhoncus enim suscipit. Quisque ut ante diam.
        In tincidunt ante in lacinia pulvinar. Etiam placerat ante eget justo
        congue, vitae ultricies dolor semper. Praesent condimentum scelerisque
        felis eget dictum.
      </p>
      <p>
        Vivamus sapien tortor, vehicula nec finibus vel, volutpat nec augue.
        Aenean efficitur pharetra ex, ut gravida nulla faucibus ornare. Morbi ac
        lorem et eros viverra tincidunt sit amet eu diam. Aenean quis tellus
        varius, faucibus lectus ut, luctus enim. Nullam et lobortis purus, at
        consectetur sem. Mauris vel dui eleifend, posuere nisi id, eleifend
        turpis. Cras at tempor mauris, id faucibus enim. Donec quis ornare
        tortor, eu tincidunt arcu. Aliquam viverra magna vel tellus commodo
        suscipit iaculis vitae dui. Donec quis convallis sem. Aliquam erat
        volutpat. Maecenas nulla lectus, semper at metus pretium, tincidunt
        sagittis lorem.
      </p>
      <p>
        Morbi tempus nisi ante, ac luctus libero convallis a. In non urna ac
        dolor efficitur ornare. Maecenas et nulla id elit pellentesque
        ultricies. Suspendisse nisi odio, tincidunt vel fringilla in, ultricies
        sed dui. Etiam orci nisi, auctor vel quam id, rhoncus sagittis arcu. Sed
        vestibulum nunc sit amet ligula blandit consectetur. Quisque eu volutpat
        felis. Ut at convallis sem, mattis elementum turpis. Duis pharetra,
        augue ullamcorper tincidunt mollis, ante diam blandit mi, quis maximus
        ipsum ipsum vitae mi. Nam vehicula pharetra tortor et condimentum.
        Mauris egestas elementum ex, sit amet fringilla est sagittis
        pellentesque.
      </p>
      <p>
        Integer ultrices volutpat laoreet. Pellentesque cursus turpis nec
        molestie facilisis. Morbi eget arcu aliquam, fermentum ligula quis,
        ullamcorper erat. Aliquam nec semper justo, eu viverra leo. Integer
        venenatis, augue sed posuere finibus, nisi metus volutpat ante, ac
        elementum nulla felis sed elit. Sed pulvinar nunc nisl, ut aliquam velit
        aliquam at. Sed eget viverra purus. Nam ut diam justo. Nunc bibendum
        quam vitae nibh placerat, ac vestibulum metus vulputate. Nunc ornare
        risus lectus, sit amet efficitur nisi consectetur ac. Curabitur nisi
        magna, elementum a interdum sit amet, dapibus nec ante. Cras quam erat,
        vestibulum sit amet eleifend ac, tempor et tellus.
      </p>
      <p>
        Aliquam eget nunc at nibh dictum tincidunt ac at arcu. Nulla accumsan
        ante et vehicula scelerisque. Vestibulum consequat pellentesque ipsum,
        vitae accumsan lacus efficitur eget. Cras vulputate magna non maximus
        facilisis. Praesent ac congue mauris. Aliquam erat volutpat. In
        porttitor tellus nec dapibus tincidunt. Maecenas fringilla metus eget
        elit accumsan, in euismod sapien fringilla. Aenean nec est sit amet
        velit tempor varius non convallis urna. Vivamus non risus in urna
        efficitur semper. Nullam quam justo, aliquam in finibus sit amet,
        volutpat eget libero. Ut augue ante, viverra a tortor quis, rhoncus
        faucibus mi.
      </p>
      <p>
        Integer neque odio, auctor nec tellus in, volutpat euismod nisl. Vivamus
        aliquet laoreet felis, vel rhoncus dui pellentesque malesuada. Vivamus
        ultricies egestas ligula sed pulvinar. Morbi dapibus tellus eu velit
        tristique, ut mollis urna pulvinar. Sed non massa nec nulla molestie
        elementum. Integer vel tristique ex, ac convallis libero. Vivamus ornare
        ex eget nulla aliquet egestas. Nullam aliquet dui non lacinia fermentum.
        Curabitur imperdiet commodo placerat. Ut viverra eu elit eu rutrum.
        Aenean laoreet arcu ut venenatis egestas. Maecenas ullamcorper eros
        nunc, sed tincidunt purus convallis et. Nunc ut blandit mauris, ut
        consectetur erat. Morbi varius enim non lorem molestie congue. Fusce
        rutrum tristique tincidunt. Etiam vulputate dignissim neque quis
        maximus.
      </p>
      <p>
        Pellentesque eros diam, ultrices nec maximus vel, molestie sit amet
        erat. Sed consequat, ex tempus gravida rutrum, purus nulla sollicitudin
        nibh, a posuere magna nibh sed ligula. Nulla vulputate nisl metus,
        pretium auctor nisi pretium vitae. Maecenas dignissim eros sit amet
        turpis sodales, a varius elit viverra. Nullam enim lacus, tempor a orci
        in, suscipit mollis nisi. In hac habitasse platea dictumst. Proin eu
        massa nisl.
      </p>
      <p>
        Nullam odio orci, dictum quis porta eu, tincidunt sit amet tellus. Donec
        eget urna sit amet libero hendrerit semper vitae ut eros. Proin tempus
        erat leo, id volutpat sapien lacinia et. Cras lacinia laoreet pulvinar.
        Sed vestibulum lacus nisl, et suscipit leo ultrices in. Donec et quam
        vitae felis fermentum varius. Duis sed aliquam risus. Nulla vel molestie
        lorem. Integer elementum venenatis condimentum. Vestibulum eget commodo
        ante. Curabitur est diam, tincidunt sed lacus id, iaculis dapibus
        sapien. Quisque tincidunt vitae dolor sit amet ultrices. Nam scelerisque
        ligula vitae tellus cursus tempus. Nullam non imperdiet eros. Curabitur
        aliquam tempus elementum. Nam congue ante sed iaculis tristique.
      </p>
      <p>
        Aliquam eu commodo urna. Curabitur posuere accumsan mauris eget
        malesuada. Sed diam est, convallis at augue non, vulputate aliquam leo.
        Donec quis sapien ut diam tristique placerat. Duis laoreet tincidunt
        ultricies. Nullam pellentesque dapibus dignissim. Aenean ac condimentum
        nulla. Ut cursus velit sit amet eleifend sodales. Proin odio magna,
        tincidunt id sapien eu, eleifend aliquam metus. Pellentesque finibus
        convallis tellus, a imperdiet lacus dignissim non. Curabitur varius
        posuere ipsum, sed maximus lectus molestie vel. Ut et ex ac urna mollis
        vulputate. Aliquam vehicula a velit et gravida. Integer dictum magna
        viverra tellus sodales ultricies. Maecenas mollis iaculis malesuada.
        Nullam ac faucibus ligula.
      </p>
      <p>
        Duis sed faucibus lacus. Cras faucibus egestas mi ut egestas. Aenean
        quis est in enim egestas eleifend. Donec faucibus neque vel faucibus
        tristique. Donec nec justo augue. Sed convallis tellus lectus, in
        eleifend purus rutrum id. Sed vitae lacus quis lacus congue consequat
        quis in ante. Nunc semper volutpat metus, eget pellentesque leo. Etiam
        hendrerit arcu quis risus pellentesque lacinia. Integer eget rhoncus
        ante. Cras tristique turpis in molestie fringilla. Maecenas id ornare
        metus, consequat egestas nulla. Integer sodales sed erat at elementum.
        Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
        inceptos himenaeos. Aliquam eget diam scelerisque nunc posuere feugiat
        ut sed risus. Morbi orci mauris, gravida at consectetur non, imperdiet
        sit amet neque.
      </p>
      <p>
        In aliquet, mauris at finibus porttitor, dui justo commodo nunc,
        vehicula vestibulum lacus nunc nec purus. Nullam scelerisque, sem ut
        vehicula maximus, risus diam auctor felis, sed interdum libero nisi ac
        ligula. Pellentesque habitant morbi tristique senectus et netus et
        malesuada fames ac turpis egestas. Sed vestibulum viverra vehicula.
        Vestibulum iaculis eu nibh ultricies aliquam. Pellentesque massa urna,
        scelerisque in placerat a, lacinia id arcu. Phasellus congue augue nec
        libero tempus, eu faucibus eros sollicitudin. Vestibulum sed quam id
        neque sagittis hendrerit. Pellentesque vel libero ullamcorper lectus
        tincidunt molestie aliquam a nibh. Nulla quam erat, interdum in
        tincidunt quis, aliquam in nulla. Mauris id lacus quis nunc tincidunt
        sollicitudin.
      </p>
      <p>
        Integer elementum ornare suscipit. Cras ligula augue, sodales sit amet
        urna id, blandit imperdiet lectus. Curabitur rhoncus diam vitae sem
        bibendum tincidunt lacinia ut erat. Ut sit amet lorem vel magna
        porttitor ultricies. Ut laoreet, mi quis feugiat interdum, metus lacus
        accumsan quam, vitae viverra odio risus a nisi. Integer in viverra est.
        Pellentesque cursus tristique mauris, ut eleifend libero semper eu.
        Quisque scelerisque condimentum eleifend. In euismod faucibus elit, ut
        vestibulum metus mattis in. Donec dictum diam nibh, vitae faucibus nisl
        blandit id. Aliquam facilisis nibh sit amet nisi cursus, eu commodo nisi
        rhoncus. Nunc vehicula sagittis nisi, a interdum erat tincidunt eget.
        Orci varius natoque penatibus et magnis dis parturient montes, nascetur
        ridiculus mus. In mattis tincidunt felis vel finibus. Cras facilisis
        vestibulum bibendum.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce venenatis
        convallis nisl eu tempor. Integer nibh libero, condimentum nec convallis
        vel, vestibulum ut urna. Nulla fermentum risus nec tincidunt dapibus.
        Cras rhoncus quam id nulla convallis elementum. Fusce non congue tortor,
        eu laoreet augue. Vestibulum sed porttitor orci. Pellentesque sit amet
        finibus elit.
      </p>
      <p>
        Nullam vulputate auctor mauris, pharetra interdum dolor fermentum sit
        amet. Quisque id fermentum nunc, non lacinia dolor. Sed eget semper
        eros, ac sagittis erat. Quisque risus leo, gravida vitae sapien at,
        consectetur fringilla ligula. Nullam libero lorem, dapibus a tortor et,
        pellentesque iaculis turpis. Quisque ut fringilla ante, eu vulputate
        neque. Pellentesque lacinia, erat et auctor egestas, sem elit volutpat
        orci, ac fringilla sapien lacus et velit. Nunc quis nisi vehicula,
        rhoncus turpis nec, scelerisque ante. Nam sed justo gravida, tincidunt
        lectus in, faucibus nisl. Aliquam tristique nulla et ipsum lobortis
        fermentum.
      </p>
      <p>
        Sed suscipit faucibus euismod. Duis sit amet elit eget neque pharetra
        porttitor. Etiam non felis egestas, pellentesque felis eget, fringilla
        massa. Proin vehicula tortor velit. Sed maximus sapien lacus, id
        suscipit quam viverra nec. Sed vel odio sit amet nunc sagittis posuere.
        Donec scelerisque et arcu sed finibus.
      </p>
      <p>
        Sed elit risus, imperdiet vitae dolor vitae, blandit fringilla lacus.
        Curabitur a dignissim dui, ut gravida turpis. Etiam varius velit sed
        orci porta, id condimentum nunc sagittis. Pellentesque ipsum elit,
        consequat ut nibh et, scelerisque dapibus nunc. Duis nisl felis,
        tincidunt non viverra et, lacinia quis felis. Sed porta scelerisque
        iaculis. In id neque eleifend, maximus libero et, faucibus dui. Morbi
        vehicula urna nulla, id porttitor velit feugiat et. Sed quam odio,
        suscipit a massa vehicula, pulvinar blandit felis. Fusce scelerisque
        lectus nec sem iaculis porta. Etiam risus ante, tincidunt ut sapien
        bibendum, facilisis interdum enim. Nullam ante est, interdum eu lectus
        sed, vulputate iaculis elit.
      </p>
      <p>
        Donec blandit, odio ut pretium sagittis, est arcu bibendum nisl, a
        egestas mi tellus eu tellus. Maecenas tristique nisi sed ornare
        molestie. Pellentesque mollis suscipit magna, vel dapibus felis
        elementum ac. Quisque malesuada odio nec orci placerat, sed dignissim
        orci consectetur. Vivamus eget varius mi. Nulla facilisi. Aliquam id
        nisl enim. Pellentesque a elit at tellus euismod maximus.
      </p>
      <p>
        Suspendisse blandit tempor metus ac convallis. Sed quis lacus libero.
        Aliquam erat volutpat. Sed nisl arcu, tincidunt vel lacus sit amet,
        scelerisque porta libero. Curabitur a turpis vestibulum, ullamcorper
        lacus sed, convallis ipsum. Suspendisse commodo ante velit, vel
        scelerisque quam volutpat ac. Praesent vel est in orci consequat
        faucibus. Duis ultricies nibh a dictum ultricies.
      </p>
      <p>
        Vestibulum egestas sit amet nisi eget fringilla. Maecenas egestas, eros
        sit amet consectetur accumsan, sapien risus rutrum nisl, sit amet
        viverra augue ligula at libero. Nulla ut facilisis urna. Curabitur ut
        lobortis mauris. Quisque iaculis vitae justo eu ullamcorper.
        Pellentesque eget elit feugiat, iaculis orci non, sollicitudin nibh.
        Nunc varius tincidunt mauris sed viverra. Vestibulum pellentesque
        scelerisque sapien a commodo. Aliquam nec metus id ex porta varius.
        Mauris interdum tristique ipsum vitae placerat. Etiam non hendrerit est.
        Praesent fermentum scelerisque ante a fermentum. Duis a urna augue.
        Nulla urna magna, dictum vel molestie ac, euismod vitae quam.
      </p>
      <p>
        Etiam malesuada diam sed nisi egestas, et tristique libero suscipit.
        Mauris dapibus nec felis eu faucibus. Aenean sed condimentum nunc. Morbi
        sit amet sapien nec massa tristique semper. Nunc pharetra lorem auctor
        eros fringilla, a cursus augue tincidunt. Suspendisse eu suscipit leo.
        Proin sagittis tortor ac leo iaculis suscipit. Aenean tincidunt at ante
        faucibus commodo. Donec eleifend vel erat quis pulvinar. Sed id iaculis
        dui, non placerat metus. In a suscipit nibh, vel mollis erat. Vivamus
        efficitur ante eu tellus blandit, in condimentum lectus luctus. Nam
        dapibus mollis ex scelerisque tristique. Donec mattis ligula sit amet
        luctus vehicula. Sed non orci dolor. Nullam elementum ex id sapien
        dictum sollicitudin.
      </p>
      <p>
        Pellentesque habitant morbi tristique senectus et netus et malesuada
        fames ac turpis egestas. Donec volutpat nisi ex, eu pulvinar tortor
        finibus nec. Phasellus ultricies ut turpis quis vehicula. Nulla a
        molestie nunc. Aliquam a ligula vel velit suscipit tincidunt.
        Suspendisse vitae pellentesque ex. Integer faucibus ipsum aliquet lorem
        scelerisque tincidunt. Sed imperdiet diam et leo lobortis, in dignissim
        risus semper.
      </p>
      <p>
        In vel suscipit mi. Mauris non vehicula magna. Praesent ut ipsum a mi
        dapibus molestie a a felis. Vivamus ac mauris enim. Proin convallis
        tellus ut quam pellentesque interdum. Proin tempor dignissim suscipit.
        In placerat luctus venenatis. Curabitur turpis ipsum, rutrum vel lectus
        ac, tempor tristique massa. Suspendisse mauris nisi, viverra a rutrum
        sed, fringilla eget magna. Nulla elit mauris, volutpat sed tempus
        posuere, suscipit id eros. Aenean at sapien ac nisi blandit efficitur ut
        non erat. Fusce tristique ex est, vitae aliquam risus ornare id.
      </p>
      <p>
        Suspendisse feugiat lacinia dolor, quis porttitor purus ultricies eget.
        Donec maximus lectus nec urna efficitur sollicitudin. Suspendisse
        viverra imperdiet bibendum. Ut rutrum mattis congue. Phasellus lacinia
        mi sed nunc efficitur, nec hendrerit enim eleifend. Mauris posuere
        tortor vel luctus iaculis. Aliquam id orci felis. Cras gravida fringilla
        magna, sit amet porta eros blandit maximus. Nulla vehicula massa eget
        nisi fermentum condimentum. Quisque vestibulum tincidunt efficitur.
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </p>
      <p>
        Ut ultrices nibh a diam tincidunt fermentum. Aliquam venenatis sapien
        non vulputate vehicula. Donec laoreet magna a tellus gravida
        consectetur. Sed id nisi eget turpis rhoncus pulvinar sit amet ut urna.
        Donec nisi est, malesuada eget eros nec, maximus finibus nunc. Nam
        feugiat, libero eu pharetra vehicula, tellus enim fermentum ante, et
        interdum nibh ante mattis velit. Morbi dictum viverra tempus. Orci
        varius natoque penatibus et magnis dis parturient montes, nascetur
        ridiculus mus. Nulla facilisi. Phasellus purus nulla, blandit id elit
        et, aliquet venenatis risus. Nulla sed enim non dui pretium pharetra
        dapibus nec mi.
      </p>
    </div>
              
            
!

CSS

              
                body {
  font-family: sans-serif;
}

              
            
!

JS

              
                // From https://pie6k.github.io/motionblur/
// better format https://codesandbox.io/s/motion-blur-test-yreqf?from-embed=&file=/src/domUtils.ts:0-177


function createTimeout(callback: () => void, time: number) {
  const timeout = setTimeout(callback, time);

  return function clear() {
    clearTimeout(timeout);
  };
}


function getElementScrollPosition(element: HTMLElement): Point {
  console.log(element.scrollTop);
  return {
    x: element.scrollLeft,
    y: element.scrollTop
  };
}

function initializeScrollSpeedWatcher(
  element: HTMLElement,
  onChange: (speed: Point) => void
) {
  let lastPosition = getElementScrollPosition(element);
  let currentPosition = copyPoint(lastPosition);

  function updateSpeed(newSpeed: Point) {
    onChange(newSpeed);
  }

  function clearSpeed() {
    updateSpeed({ x: 0, y: 0 });
  }

  let clearSpeedTimeout = createTimeout(() => {}, 100);

  function handleScroll() {
    clearSpeedTimeout();
    lastPosition = currentPosition;
    currentPosition = getElementScrollPosition(element);

    const newSpeed = subtractPoints(currentPosition, lastPosition);

    updateSpeed(newSpeed);

    clearSpeedTimeout = createTimeout(clearSpeed, 50);
  }

  document.addEventListener("scroll", handleScroll);

  function destroy() {
    document.removeEventListener("scroll", handleScroll);
  }

  return destroy;
}


const DEFAULT_ALPHABET = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';

function getRandomCharFromAlphabet(alphabet: string): string {
  return alphabet.charAt(Math.floor(Math.random() * alphabet.length));
}

function generateId(idDesiredLength: number = 5, alphabet = DEFAULT_ALPHABET): string {
  /**
   * Create n-long array and map it to random chars from given alphabet.
   * Then join individual chars as string
   */
  return Array.from({length: idDesiredLength}).map(() => {
    return getRandomCharFromAlphabet(alphabet);
  }).join('');
}


interface Point {
  x: number;
  y: number;
}

function copyPoint(point: Point): Point {
  return {
    ...point,
  };
}

function subtractPoints(a: Point, b: Point): Point {
  return {
    x: a.x - b.x,
    y: a.y - b.y,
  };
}


const SVG_NS = 'http://www.w3.org/2000/svg';

function createSvgElement(type: string) {
  return document.createElementNS(SVG_NS, type);
}

function createBlurSvg() {
  // const svg = document.createElement('svg') as SVGElement;

  const svg = createSvgElement('svg');

  svg.setAttribute('version', '1.1');
  svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
  svg.classList.add('motionblur-svg');

  const defs = createSvgElement('defs');
  const filter = createSvgElement('filter');

  const filterId = generateId();

  filter.id = filterId;

  const blurFilter = createSvgElement('feGaussianBlur');

  blurFilter.setAttribute('stdDeviation', '0,0');
  blurFilter.setAttribute('edgeMode', 'duplicate');
  blurFilter.setAttribute('in', 'SourceGraphic');

  filter.appendChild(blurFilter);

  defs.appendChild(filter);

  svg.appendChild(defs);

  document.body.appendChild(svg);

  function destroy() {}

  function setBlur({ x, y }: Point) {
    blurFilter.setAttribute('stdDeviation', `${x},${y}`);
  }

  function getId() {
    return filterId;
  }

  function applyTo(element: HTMLElement) {
    element.style.filter = `url(#${filterId})`;
    element.style.transform = 'translate3d(0,0,0)';
    element.style.willChange = 'filter, transform';

    return function cancel() {};
  }

  return {
    destroy,
    setBlur,
    getId,
    applyTo,
  };
}


function initializeBodyScrollMotionBlur() {
  const bodyBlur = createBlurSvg();
  bodyBlur.applyTo(document.body);

  initializeScrollSpeedWatcher(document.documentElement, (speed) => {
    bodyBlur.setBlur({ x: 0, y: Math.abs(speed.y / 2) });
  });
}


initializeBodyScrollMotionBlur();

              
            
!
999px

Console