おしゃれなWebサイト

Keita Yamada 氏
I used three.js to write WebGL faster and the background effect is written in glsl.
フロントとWebGL/glslはここでFAQでフロントは↓で学んだって書いてた。
three.js examples
The Book of Shaders
three.js journey
Codrops
使ってるのはこれらしい↓

GSAP: アニメーション制作

three.jp: WebGL

Tweakpane: パラメータチューニング

Alpine.js: js framework

seoink

Github
noteでUI実装のメンタルモデルとしておすすめしてた書籍↓
融けるデザイン ―ハード×ソフト×ネット時代の新たな設計論

seoink

threejsについて書いとった
https://ics.media/entry/250501/

seoink

引用

そういえば喋ってなかった、俺がよくやるスクロール連動アニメーションの話。ブラウザデフォルトのスクロールは発生しないようにしつつ、gsapのtimeline機能を使って画像とかテキスト切り替えのアニメーションを作る。timelineのpausedプロパティをtrueにしておいて、自動で再生されないようにする。例えば作ったアニメーションの総再生時間が30秒なら30 * 1000px = 30000pxのスクロール領域を作って、スクロール位置でアニメーションの再生位置を制御するようにすると普通のスクロールでは達成できないスクロールアニメーションも作れる。ようするに動画のシークバーをスクロールバーに置き換えるような実装。（絶対こんなテキスト量では伝えられないけど...)

実装例
emuniさんのTopページ
https://emuni.co.jp

ふにゃさんの実績の画像部分
https://obake.blue/works/bpm285ex/