デザインツール「pen.dev Vibe Shaders」の30秒紹介動画

pen.devはエージェントと一緒に使うデザインのキャンバスで、Vibe Shadersはそこで光や動きの効果をシェーダーとして作る機能です。フレームの塗りにシェーダーを選ぶと入力の値が並び、キャンバス上で調整できます。シェーダーは.penファイルの隣にWebGL 1.0のGLSLファイルとして置かれます。

0〜2秒　ペン先のロゴと「Vibe Shaders」、pen.devの説明が出ます。

2〜4.5秒　暗いエディタの中で、デザイナーとエージェントのカーソルが告知ページを作っています。

4.5〜7.75秒　別の道具で書き出した平たいPNGが背景に置かれ、「STATIC PNG」の判が押されます。

7.75〜11秒　シェーダーのコードの値を変えては書き出して読み込み直し、画像の版が増えていきます。

11〜13秒　書き出した画像が積み上がり、「Still a flat hero.」と出ます。

13〜15秒　全面にライブのシェーダーが広がり、ペン先と「Shaders made by talking to the canvas」が出ます。

15〜20秒　エージェントに効果を言葉で頼むと、フレームの中心からシェーダーが描かれ、塗りにGLSLファイルが入ります。

20〜25秒　シェーダーの入力の値をカーソルで動かすと、その場で光り方と色が変わります。

25〜27.5秒　.penファイルとGLSLファイルが並び、「Plain GLSL, right next to the .pen file」と出ます。

27.5〜30秒　シェーダーの背景にペン先と「Make it glow by asking.」、サイトのURLで締めます。

pen.devの暗いテーマのエディタの見た目にし、左上のファイル名の帯や右のプロパティ、青い選択枠と名前付きのカーソルを置きました。日食のような光の輪のシェーダーを使い、困りごとでは同じシェーダーの時間を止めて色と階調を落とし、書き出した画像に見せています。困りごとと解決では同じフレームの背景と同じ入力の値を対応させました。

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