Scrolltideとは
Scrolltideは、AIを使ってサイトを組み立てるワークフロー向けの素材集です。Figmaファイルを渡すのではなく、AIにそのまま食わせられるプロンプトを配っているのが肝。プロンプトをコピーしてClaudeやCursor、その他のコーディングAIに貼れば、スクロールに連動する動きが組み込まれたページがそのまま出てきます。
掲げているのは「AIが作ったと分かるサイトにしない」ということ。これは実際よくある話で、生成されたランディングページの多くは、中央寄せの大きな見出しとカード3枚という同じ形に落ち着いてしまいます。Scrolltideはそこを崩すために作られています。
ライブラリの中身
サイトは現在3つのカテゴリに分かれています。
- ページテンプレート：143点。Heroセクション、ランディングページ全体、ポートフォリオ、EC、3Dのサイト背景などをカバーし、多くはPremium表記です。
- コンポーネント：85点。既存のプロジェクトに単体で持ち込めるパーツで、ガラス調のタブ、モーフィングするナビゲーションバー、カードアコーディオン、パーティクルの地球儀、光るリングのボタンなどがあります。
- シェーダー：55点のGPUアニメーション背景。グラデーション、オーロラ、リキッドメタル、炎といったテイストで、MP4、静止画、埋め込み可能なコンポーネントという形で提供されます。
どれもライブプレビューが付いているので、動きを確認してから使うかどうかを決められます。
技術スタックと提供形式
テンプレートはReact、Vite、Next.js、Tailwind CSSがベースで、動きの部分はFramer Motion、GSAP、Lenisによるスムーズスクロールが担っています。3Dと背景はThree.js、WebGL、独自のShaderで作られています。買い切りで受け取れるのは読めるソースコードで、圧縮されたブラックボックスではありません。
向いている人
個人開発者、デザインエンジニア、受託チーム、とくに「質感のある」マーケティングページを短時間で出したいけれど、アニメーションを一から調整したくない人に向いています。静的なページしか作らない場合や、パフォーマンスの予算がかなり厳しいプロジェクトでは、スクロール演出のコストを自分で見極める必要があります。
