В основном для таких эффектов используется canvas с применением различных фильтров и хардкода на js, либо на pure css (зависит от опыта и упорства). Так же можно использовать WebGL/threejs (тот же canvas и js, только 3d), это если надо совсем заморочиться и получить супер-эффект.
Как именно делать подобные эффекты под веб нативно (js/css) - тут вряд ли есть какое-то универсальное решение, один плагин или подход, так как все круто выглядящие моушн-эффекты в основном создаются в специальных программах, по типу after effects, где есть куча всяких специализированных настроек, масок, эффектов, эквалайзеров, и затем все это долго (или не очень) рендерится в видеоряд. Увы, непосредственно для веба таких программ пока нет (может я не в курсе), поэтому тут либо вставлять готовое видео/гиф, либо пытаться интерпретировать эффекты самому (собственно, как и сделаны примеры на codeopen), внимательно изучая кадры, слои, анимацию, в общем импровизировать, так как моушн-дизайн в вэбе - это отдельное искусство, и такие специалисты очень-очень востребованы.
Так что если это интересует, могу посоветовать начать с готовых примеров на codeopen, как вам написали выше, а дальше можно освоить after effects для понимания всех тонкостей моушн-графики, можно посмотреть в сторону adobe animate, unity, unreal, ну и, конечно, быть js ninja :)
Простой
