タップルのサイトの背景動画？の実装方法を知りたいです。

Question

タップルという会社のデザインが気になりました。
背景の動画のような、gifのような動いているデザインはどうやって実装するのでしょうか？
デベロッパーツールで確認したCSSにはそれっぽいのは見当たらず。
JavascriptかjQueryで実装しているのでしょうか？

https://www.matchingagent.co.jp/

body {
    margin: 0;
    font-family: NotoSansCJKjp,sans-serif;
    font-weight: 500;
    background-color: #fff;
    -webkit-font-smoothing: subpixel-antialiased;
    -moz-osx-font-smoothing: auto;
    -webkit-font-kerning: normal;
    font-kerning: normal;
}

.index .page__bg {
    position: absolute;
    z-index: -1;
    top: 0;
    top: calc(100vh + 150px);
    right: 0;
    bottom: 0;
    left: 0;
    background: -webkit-gradient(linear,left top,left bottom,from(rgba(255,255,255,0)),color-stop(10%,rgba(255,255,255,.6)),to(rgba(255,255,255,.8)));
    background: linear-gradient(to bottom,rgba(255,255,255,0) 0,rgba(255,255,255,.6) 10%,rgba(255,255,255,.8) 100%);
}

Answer 1

当該のサイトでも利用されていますが、Three.jsとかpostprocessing使えば出来るかと。
unityとかで作って、jsでエクスポートとかもできるかと思いますが。

Three.js
関連(https://twitter.com/misaki_mofu/status/849254334046978052)
参考(https://codepen.io/mnmxmx/pen/VjjvEq)

Comments

[退会済みユーザー]

思っていたよりも結構奥が深そうな技術使ってたんですね。ちょっと試してみます。回答ありがとうございます。