JavaScript で作るリッチな表現
JavaScript を使って、ブラウザで描ける表現を並べる。3DCG には three.js（MIT ライセンス）を使っている。それ以外は、ライブラリを使わずに書いている。CSS と SVG だけで作れるものは、CSS と SVG だけでできるリッチな表現 にまとめた。
どのデモも、画面に見えているあいだだけ動く。スクロールして離れると止まる。
3D の物体
金属の結び目のまわりを、色の付いた球が回っている。ドラッグすると、視点を好きな方向に回せる。
結び目の材質は、鏡のような金属に、シャボン玉のような虹色の膜（iridescence）と、透明な上塗り（clearcoat）を重ねたもの。見る角度によって色が変わる。周りの映り込みには、部屋の照明を模した環境マップ（RoomEnvironment）を使っている。
銀河
4万個の点を、4本の腕を持つ渦巻きの形に並べている。中心ほどオレンジ、外側ほど青になるように色を付け、重なった点ほど明るくなるように加算合成している（AdditiveBlending）。銀河全体がゆっくり回転し、カーソルを動かすと視点が少し動く。
シェーダー（レイマーチング）
ポリゴンを使わず、画面の1ピクセルごとに GPU で計算して描いている。各ピクセルから視線を飛ばし、物体の表面に当たるまで少しずつ進める「レイマーチング」という方法だ。
物体は4つの球で、そのうちの1つはカーソルに付いてくる。球同士は、距離が近づくと、なめらかにくっつく（smooth minimum）。表面の色は、面の向きによって変わる玉虫色にしている。
粒子
数百個の点が、見えない流れに沿って動いている。カーソルや指を近づけると、点が逃げる。<canvas> に1コマずつ描いている。
ボールの物理演算
重力で落ちて、床や壁で跳ね返り、ボール同士でぶつかる。ボールはつかんで投げられる。
1コマごとに、速度に重力を足して位置を動かし、重なったボールを押し戻してから、ぶつかった向きに速度を交換している。大きいボールほど重くして、小さいボールのほうが大きく弾かれるようにしている。
スポットライト
カーソルの位置を CSS 変数に渡し、各カードの背景に、その位置を中心にした円形のグラデーションを描いている。隣のカードにも同じ座標を渡しているので、光がカードの境目をまたいで続いて見える。
傾くカード
カーソルの位置に合わせて、カードを3D で傾けている。perspective で奥行きを付け、カードの中の文字を translateZ で少し手前に浮かせているので、傾けると文字だけ浮いて見える。表面の光も、カーソルの位置に合わせて動く。
文字のスクランブル
Hello, World
文字が一度でたらめな記号に崩れ、少しずつ次の単語に置き換わる。1文字ごとに、崩れ始める時刻と元に戻る時刻をランダムに決めているので、端から順番ではなく、ばらばらに切り替わる。
鳴る鍵盤
押すと音が鳴る。パソコンでは、この枠をクリックしてから、キーボードの A〜K でも弾ける。音が出るので、音量に注意。
音は、録音したものではなく、ブラウザの中で作っている（Web Audio API）。三角波に、1オクターブ上の正弦波を少し混ぜ、鳴らした瞬間に大きく、あとはだんだん小さくなるように音量を動かしている。少しだけディレイ（やまびこ）を足している。上の線は、いま出ている音の波形だ。
おわりに
three.js 本体と追加のモジュールは、外部の配信サービスからではなく、このサイトに置いたものを読み込んでいる。
OS の設定で「視差効果を減らす」や「アニメーションを減らす」をオンにしている場合は、3D のデモなどは止まった状態で表示される。