Redgevity Master — Luminous Labs
プロダクトを軸に据えたスクロールテリング型のLP。GSAP と Lenis による滑らかな慣性スクロールに WebGL の演出を重ねている。
- クレジット
- Embacy
- 使用技術
- GSAPLenisWebGLWebflowスクロールテリング
ヘルスケアブランド Luminous Labs のプロダクト「Redgevity Master」のランディングページ。制作は Embacy。
ページ全体がひとつのストーリーとして構成され、スクロールの進行に合わせてプロダクトのカット、質感の寄り、効能の説明が順番に立ち上がっていきます。GSAP を中心にした大量のタイムライン制御と、Lenis による慣性スクロールを組み合わせることで、映像に近い連続性を作っているのが特徴です。
【参考になるポイント】
・スクロールを「章立て」として扱い、1画面につき1メッセージに絞っている
・慣性スクロール（Lenis）とタイムライン（GSAP）を組み合わせた減速の気持ちよさ
・Webflow ベースでもここまで作り込めるという実例として参考になる