ウォーターフォール

左に起点の棒、続いて項目ごとに宙に浮いた棒。増えた分は緑で上へ、減った分は斜線で下へ伸び、棒どうしを点線がつなぎ、最後の棒が結果に着地します。ゼロを下回ってマイナスにもなれます。「AからBへ、お金はどう動いたか」を見せるページに。予算から残高、売上から利益など。

データ図解1080×1080 · 30 fps · 5 秒出典：9:16 解説動画 · Waterfall無料

ソースコード

ログインすると、ソースコード全体の表示、コピー、パッケージのダウンロードができます。無料です。

必要なもの：Node.js 18以上、Remotion 4、React 19。Claude Code、Codex、Cursorなど、ファイルの読み書きとコマンド実行ができるAIアシスタントを使うのが一番ラクです。