Interactive Sniper Scope
緑に光るミルドット・レティクルの全画面スコープ。呼吸による揺れと反動つき。木の棚に並んだガラス瓶を撃つと、本物のように割れた破片が跳ねて落ち着きます。HOMEの的でホームへ、RESETで瓶を並べ直し。描画はすべてcanvas、効果音もコードで合成しています。
React · Tailwind CSS · Motion
21st.devで入手Coffee Pour Menu
細かく描いたSVGのカップと手書きの物理演算で動くコーヒーメニュー。ドリンクにカーソルを合わせるとカップが滑り込み、コーヒーとミルクが注がれて跳ね、混ざり合い、前のカップは傾いて落ちていきます。
React · Tailwind CSS · Motion
21st.devで入手Nearby Walk Menu
ホテルから近くの名所やNソウルタワーまでを線画で描いた散歩シーン。名所がせり上がり、歩く人がルートをたどり、ホバーで所要時間と距離が切り替わります。ページ全体のテーマは4種類、カーソルには提灯のような灯り。
React · Tailwind CSS · Motion
21st.devで入手Retro Slide to Unlock
2010年代初めのスマホを思わせるスキューモーフィックなロック画面。動く時計、描画した水の壁紙、光る「スライドでロック解除」、カメラのチラ見せ、音楽コントロールつきの使えるホーム・スリープボタン。クラシックな本体フレームは任意。すべてpropsで設定でき、キーボード操作にも対応。
React · Tailwind CSS · Motion
21st.devで入手Liquid Glass Button
ドラッグできるリキッドグラスのホームボタン。スネルの法則に基づくディスプレイスメントマップで背景の光を曲げ、縁には色収差のにじみ。SafariとFirefoxではすりガラス風の表示になります。
React · Tailwind CSS · Motion
21st.devで入手
Holographic Business Card
ポインターの方へ傾き、ホバーで浮き上がり、クリックで裏返るインタラクティブな名刺。ホログラム箔は9種類（Shards、Rainbow、Stars、Cosmos、Hearts、Shapes、Gold、Silver、Aurora）で、effectとintensityのpropsで設定します。
React · Tailwind CSS · Motion
21st.devで入手
Disc Reveal List
ホバーで中身が現れるリスト。タイトルの文字が散らばり、ほかの行は暗くなり、回転する色縁のCDやポラロイド写真が選んだ行のまわりに弾むように現れます。
React · Tailwind CSS · Motion
21st.devで入手