ノート

Claude、Three.js、GSAPを使ったスクロール式ストーリーテリングウェブサイトのワークフロー

フリーのプロンプト百科事典 Wikiprompt より

FHILY👑

2026年5月26日

Claude、Three.js、GSAPを使ったスクロール式ストーリーテリングウェブサイトのワークフロー Claudeがコードを生成し、Three.js、GSAP ScrollTrigger、Lenisのスムーズスクロールでスタイリングする、スクロール駆動のストーリーテリングウェブサイトを構築するステップバイステップのワークフロー。

関連メディア

プロンプト内容保存

英語から翻訳 ·

ステップ1、Claudeへのプロンプト:「各スクロールセクションが流れるような色の遷移で新しい章を明らかにするストーリーテリングウェブサイトを構築してください。」 ステップ2:Three.jsを使用して、カーソルに反応するペイントされたテクスチャ背景を作成します。 ステップ3、Claudeへのプロンプト:「GSAP ScrollTriggerを追加して、各セクションが映画的なシーンとしてアニメーションするようにしてください。」 ステップ4:Lenis.jsを使用して、プレミアムサイトが持つバターのように滑らかなスクロールを実現します。

ログインしてこのプロンプトをコピーし、コレクションに保存

ログイン

使い方

このプロンプトは coding 向けに設計されています。上の内容をコピーして、お好みの AI ツールに貼り付けてください。

最良の結果を得るには、プレースホルダー(角括弧や大文字で示された部分)を具体的な要件に置き換えてください。

参考資料

カテゴリ:coding| twitter| claude| web-development

ノート