
Neoconda
ペンテスト用ハードウェアの分解ビューをスクロールで見せる製品サイト。3D表現の実体は事前レンダリングのwebm動画。
- サイトURL
- https://neoconda.com/
- クレジット
- Parentheses
- 使用技術
- Webflowスクロール連動WebM動画プロダクト3D
Neoconda LLC が開発中のAI搭載サイバーセキュリティデバイス Neoconda のティザー兼ウェイトリストサイト。RF信号の解読、BLE・Sub-GHz・NFC/RFID・LoRa・IR のスキャン、BadUSB、ウォードライビング、C2フレームワークなど16機能をカードで並べ、Defence Mode、RF Protection、ハードウェア仕様、ウェイトリスト登録へと進む構成です。制作は Parentheses。
3Dの見せ場は本体の分解(exploded view)アニメーションですが、実装はリアルタイムWebGLではなく、ファイル名に 3dtest を含む .webm 動画をスクロールに同期させて再生する方式でした。サイト自体は Webflow で組まれており、アセットは cdn.prod.website-files.com から配信されています。配色はネオングリーン #56FF8E と #0E0E0E のほぼ2色で通しています。
【参考になるポイント】
・スクロール連動の3Dは動画で代替できるという実例。ページ内に .glb も .gltf も見当たらず、Three.js の実体も確認できない
・Webflow のインタラクションと事前レンダリング動画の組み合わせだけで、Awwwards の 3D タグと Honorable Mention に到達している
・16個の機能カードを1画面ずつ送る構成にして、ハードウェア製品の情報量をスクロールの長さに逃がしている
・※Awwwards のタグには Three.js と GSAP が入っているが、取得できた HTML からは裏が取れなかった。JSバンドルは未解析
・※Awwwards スコアは 7.60/10(コミュニティ投票)
