開発者向けブロック集「beUI Pro」の30秒紹介動画
ReactとNext.js向けのアニメーション付きブロック集「beUI Pro」の30秒の紹介動画です。セクションごとに動きを手で作る手間から、コマンド1つで入るブロックと11のテンプレートまでをターミナルの画面で見せています。
FablessBridgeによる自主制作の紹介動画
概要
ReactとNext.js向けのアニメーション付きブロック集「beUI Pro」の30秒の紹介動画です。セクションごとに動きを手で作る手間から、コマンド1つで入るブロックと11のテンプレートまでをターミナルの画面で見せています。
動画の要点
- セクションごとに動きを手で作る手間を、ターミナルに「motion: not done」の赤い行が3つ並ぶ様子で見せました。
- 1つずつ作る代わりに、shadcnのコマンド1行でブロックが入ることを公式のInstall欄を囲んで見せました。
- ページ全体を組む手間には、blocks・pages・templateをつなぐ線から公式のテンプレート一覧へ移って応えました。
動画の流れ
- 00:00「Still hand-animating every section?」と出て、ターミナルで開発サーバーを起動すると「motion: not done」の赤い行が3つ並び、窓が揺れます。
- 00:03「One command per block」と出て、「bunx --bun shadcn add @beui-pro/animated-modal」が打たれます。公式のInstall欄を囲み、「real files land in your codebase」と続きます。
- 00:08崩れた文字が「215 animated blocks」にそろい、公式のブロック一覧に寄って4つのブロックを順に囲みます。
- 00:14「11 full Next.js templates」と出て、blocks・pages・templateの箱が点線でつながり、公式のテンプレート一覧の3つを囲みます。
- 00:20作図線の中から公式のマークと「beUI Pro」の文字が組み上がり、Product Huntでの公開の告知画像が出ます。
- 00:26「open https://pro.beui.dev」が打たれ、pro.beui.devを大きく出して締めます。