開発者向けブロック集「beUI Pro」の30秒紹介動画

beUI Proは、ReactとNext.jsでランディングページを作る開発者向けの、アニメーション付きブロックとテンプレートの集まりです。Hero・Pricing・FAQ・Statsなど215のブロックがあり、コマンド1つで実際のファイルとしてコードベースに入ります。導入はAgent Skill・MCP・registryから選べます。

0〜3秒　「Still hand-animating every section?」と出て、ターミナルで開発サーバーを起動すると「motion: not done」の赤い行が3つ並び、窓が揺れます。

3〜8秒　「One command per block」と出て、「bunx --bun shadcn add @beui-pro/animated-modal」が打たれます。公式のInstall欄を囲み、「real files land in your codebase」と続きます。

8〜14秒　崩れた文字が「215 animated blocks」にそろい、公式のブロック一覧に寄って4つのブロックを順に囲みます。

14〜20秒　「11 full Next.js templates」と出て、blocks・pages・templateの箱が点線でつながり、公式のテンプレート一覧の3つを囲みます。

20〜26秒　作図線の中から公式のマークと「beUI Pro」の文字が組み上がり、Product Huntでの公開の告知画像が出ます。

26〜30秒　「open https://pro.beui.dev」が打たれ、pro.beui.devを大きく出して締めます。

窓の外はASCIIの文字の地紋と青焼きのような作図線で組み、ターミナルの物語に仕立てました。色は製品のアクセントのティールと紫のグラデーションに合わせ、見出しはGeist、端末の文字はIBM Plex Monoにしています。公式の画面には地紋を掛けず、ロゴの見本が並ぶ画像やトップの協賛の表示は使っていません。

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