Framer用の部品「ScrollSync Showcase」の30秒紹介動画

ScrollSync Showcaseは、Framerでスクロールに合わせて画像と文章を切り替えるセクションを作るコンポーネントで、Framer Marketplaceで公開されています。スクロールのターゲットとバリアントがつながった状態のリミックスを開き、セクションを写して画像と文章を差し替えるだけで、8つの状態が同期します。デスクトップ・タブレット・スマホの配置も含まれます。

0〜3秒　「ScrollSync Showcase」の名前が記号から組み上がり、ログ画面に「x scroll targets lost」など赤い失敗の行が打たれます。右には赤い「SCROLL SYNC [ off ]」の枠が出ます。

3〜6秒　「Merging breaks the scroll switch.」と出て、「COMPONENT A」と「COMPONENT B」の箱が1つに寄ります。4つの「scroll target」へつながっていた線が、赤い「x」とともに切れます。

6〜9秒　「Start from the remix.」と出て、カーソルが「[ REMIX NOW ]」のボタンを押します。ログに「ok project opened」が出ます。

9〜14秒　「Everything comes pre-wired.」と出て、「target 01」から「target 08」が「variant 01」から「variant 08」へ青い線で1本ずつつながり、点が流れます。ログには「ok scroll targets」「ok variants」「ok responsive layouts」が並びます。

14〜20秒　「Text and visuals switch together.」と出て、掲載ページの公式のプレビュー画像が約6秒ぶん再生されます。途中から窓の右の列をぼかし、「Demo logos blurred」と添えます。

20〜23秒　「No code. Swap in」の下で、「product screens」「portfolios」「photography」「case studies」が入れ替わります。「Desktop, tablet and phone layouts included」と、3つの手順のチェックが順に付きます。

23〜26秒　ASCIIの枠が上下から開き、「ScrollSync Showcase」の名前が組み上がります。出品者のアバターと名前が添えられます。

26〜30秒　ログの1行に製品ページのアドレスが打たれ、出品者のアバターと名前、「ScrollSync Showcase」を出して締めます。

窓の中は掲載ページの公式のプレビュー画像をそのまま再生し、見本に他社のロゴが写る後半は、窓の右の列をぼかして「Demo logos blurred」と注記しました。窓の外はターミナルのログ画面に見立て、生成りの紙に黒の等幅文字を置いて、赤は失敗、緑は成功、青はつながりに使っています。書体はJetBrains MonoとInter Tightで、背景の点の方眼を上へ流し続け、場面は縦にスクロールするようにつないでいます。

製品サイトで公開されている情報だけをもとに、製品の見た目に合わせて制作しています。ナレーションは入れず、画面の動きと音楽で伝える構成です。