Dragonfly Redux

暗号資産に特化した投資ファンド Dragonfly のサイトを Studio Freight がリニューアルしたもの。ポートフォリオ企業、リサーチ、チームというVCサイトとして標準的な情報を、独特の絵作りで見せています。2026年7月22日に Awwwards の Site of the Day、スコア7.39。 Awwwards が Redux 版に付けている技術タグは WebGL / GSAP / Vue.js です。Studio Freight が Awwwards に出している Dragonfly のケーススタディ（React / Next.js 版）では、Aniso と名付けた自作の ASCII アート生成器を WebGL シェーダとして実装し、.glb / .jpg / .mp4 のどれを入力しても同じ ASCII 変換を通せるようにした、と説明されています。キャンバスは1枚に統一して tunnel-rat で各コンポーネントが同じキャンバスに描き込み、split composition とカスタムのポストプロセスで負荷を抑える設計。スクロールは自社製の Lenis、セクションの折り込み演出は GSAP ScrollTrigger の scrub と clip-path。 【参考になるポイント】 ・入力フォーマットを問わない ASCII 変換をシェーダで1本用意し、それをサイト全体のビジュアル言語にしている ・キャンバス1枚 + tunnel-rat で WebGL コンテキストの増殖を避ける構成は、フレームワークが変わっても効く考え方 ・Lenis はネイティブのスクロールAPIを残す方針なので、WebGL と DOM の位置合わせがずれにくい ・og:image は cdn.sanity.io から配信されており、現行のCMSは Sanity に見える（ケーススタディ当時は Contentful） ・※ケーススタディは React / Next.js 版の記述。Redux 版のタグは Vue.js なので、実装は差し替わっている可能性が高い ・※実サイトのHTMLからは Three.js やシェーダの直接の痕跡は取れていない