onetake について
onetakeは、製品そのものを素材に短いプロダクト動画を作るスキルです。HTMLコンポジション、モーションツール、実画面の撮影またはUIの再構築、サウンドを使い、参考映像の分析からレンダリングまでを案内し、リズムと連続性も確認します。
主な機能
- 01参考動画の動きの分析
- 02異なるビジュアルコンセプトの作成
- 03実際のUIの撮影または再構築
- 04時間ベースのHTMLアニメーション制作
- 05モーションブラー付き動画のレンダリング
- 06統一感のあるサウンドパレットの作成
活用シーン
- 01製品ローンチ用ティーザーの制作
- 02ナレーション付き機能デモの制作
- 03参考映像に合わせた動画の制作
- 04アニメーションUIによるアプリ紹介
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ feitangyuan/ onetake --skill onetakeインストール後、Claude Code で/onetakeを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
.gitignoreLICENSEREADME.mdcases/clawd-desktop-19s/README.mdcases/clearing-15s/README.mdcases/domino-25s/README.mdcases/ebb-15s/README.mdcases/infra-25s/README.mdcases/knockon-15s/README.mdcases/motion-web-15s/README.mdcases/one-dot-15s/README.mdcases/onetake-launch-30s/README.mdcases/overlap-15s/README.mdcases/pith-21s/README.mdcases/skill-demo-15s/README.mdcases/unbroken-15s/README.mdgallery/gallery.htmllib/ui_kit.jsmotion.jslooks/looks.jsonlooks/fonts/LICENSES.txtreferences/reference-deconstruction.mdproduct-demo.mdmotion-library.mdsound.mdrhythm.mdcomposition.md3d.mdscripts/frame_diff.pyanalyze_ref.py詳細
onetake
製品そのものを使って作る、製品を紹介する短いモーションフィルムです。動画編集ツールでも、スライドショー生成ツールでもありません。コンポジション(1つの HTML ファイル、window.__seek(t))、モーションライブラリ(lib/motion.js)、実物を撮影した映像素材、ひとつの空間を共有するサウンドパレット、そしてカットにリズムがあるか、見る人を引きつけるかを、人間が視聴する前に判定するオラクルで構成されています。
6本のフィルムから学びました。motion-webは3回カットしました。1回目と2回目は、一定のテンポで「PPT 式一个一个展示」として却下されました。これがリズムの側面です。Pocket Weather Clubにはリズムがありましたが、それでもPPTでした。v1はすべてのリズムチェックに合格したにもかかわらず却下されました。各ビートが、その前のビートを置き換えていたからです。すべてのビートが直前のビートから発展するようになったv3が採用されました。キャラクターが見出しの上に着地し、カードからページが広がり、キャラクターを起点にステージが開きます。これがつながりの側面です。One dotはカメラワークを加えました。カメラを固定すると「就缺灵动的跟踪运镜」でしたが、各ビートのフレーム内の対象を追いかけるカメラでは、遅れて追従し、傾き、落ち着く動きが加わり、「运镜、镜头和物理都没问题」と評価されました。knockonは因果関係でつながりました。すべてのビートが、次の動きを始める衝突となる、光を使った卓上機械です。clearingはスケールでつながりました。1年から自由な30分へ、そしてまた戻るワンテイクで、画面上のアンカーを追いかけるカメラにより、1×でも300×でも同じ位置に着地します。overlapは意味の教訓でした。最初のカットは「美術挺棒但没看出来啥意思」でした。ラベル付きカーソルを追加すると、さらに悪化しました。2枚のノイズプレートに隠された「&」が、パスが重なった瞬間に現れるというアイデアが作品そのものに組み込まれて、初めて意味が伝わりました。ここにあるものはすべて、次のフィルムがこれらのフィルムの到達点から始まるためのものです。
このスキルを使う場合と、使わない場合
- アプリ、ページ、スキル、機能のローンチ/ティーザー/イントロ動画 — はい。
- 製品の使い方を紹介するナレーション付き機能デモ(30〜60秒)。複数言語に対応する場合もあります — はい:録画する代わりに UI を再構築します(§4、
references/product-demo.md)。 - ユーザーが参考動画の雰囲気を再現したい場合 — はい。§1から始めてください。
- 長尺動画、トークヘッド、既存映像にトランジションを加える編集 — いいえ。
- ユーザーが HyperFrames または Remotion を明示した場合 — 指定されたものを使ってください。それ以外はこのパイプラインを使います。
プロトコル — この順序を守り、省略しないこと
1 · 何かに取りかかる前に参考資料を分析する(厳守ルール)
python3 scripts/analyze_ref.py ref.mp4 --out ana/ # energy map, cuts, stillness, contact sheets, motion line
エネルギーマップとシートを読み、フィルムが合わせるべき数値を書き留めてください。エネルギーマップはフィルムがいつ動くかを示し、motion: の行はどのように動くかを示します。t80 の中央値(スナップまたはS字カーブ)と、ブラーの有無(モーションブラーを使ってレンダリングするかどうか)です。motion-web のフィルムで動きの決め手となったのは、参考資料の34 % が静止したままで、2つのバーストに分かれた7つのハードカットがあり、すべての要素が小さく、多くの余白を保っていたことです。一度見ただけでは、これらはどれも明らかではありません。計測せずに作られたフィルムは、2回とも一定のテンポになりました。references/reference-deconstruction.md。
2 · コンセプト — ビートシートを書く前に考える3つの中心的なアイデア(厳守)
コンセプトは、プロダクトではなく「映像」についての1文です。つまり、その映像を形作る唯一のアイデアです。同じカードで語るストーリーを3つ作るのではなく、アイデアが異なるものを3つ書きます。
- 1つの要素が全体を通して変形する — ドットがキャレットになり、スキル一覧へ分かれ、くぼんでローディングリングになり、ほどけてスプリング曲線になり、最後にワードマークの「i」のドットとして着地します。
- スケールをまたぐ1つのカメラ移動 — キャレットの内側から始め、引いて入力欄を映し、送信ボタンをくぐって作業の中へ入り、完成した映像を抜けて戻ります(
cases/clearing-15s:1年 → 1日 → 30分 → 戻る)。 - ビフォー/アフターの分割画面 — 左側では同じビートをスライドショーとして見せ、右側では連続させ、最後に右側が左側へと崩れ込みます。
- 連鎖反応 — 各ビートが、次のビートを始動させる衝突です(
cases/knockon-15s)。 - または、物理的なメタファー、途切れない1つの面、タイポグラフィのシステムなど。
それぞれについて、フックとなるフレーム、境界を越えて受け継がれるもの、採用しない要素(カードなし? カットなし?)、そしてルックを示します。ルックは、looks/のプリセット(python3 scripts/look.py sheet → gallery/sheets/looks.png:紙、夕暮れ、テーブルトップ、ウルトラマリン、リソグラフ、残り火。いずれも採用済みの映像を基に調整されています)、プロダクト独自の色(look.py from-shot shots/*.png --out look.json)、またはこの映像のために作成したものから選びます。3案を提示し、ユーザーに選んでもらいます。テンプレートのストーリー — 動きのある単語 → 入力されるプロンプト → 刻々と進むチェックリスト → 結果 → 歯切れのよいヒット音 → 黒地のワードマーク — は、数あるコンセプトの1つにすぎず、決してデフォルトではありません。この構成で作った操作デモは、すべてのオラクル評価項目をクリア(carry 1.00)したものの、「和 motion web 很像…没有创造力」と評価され、差し戻されました。
3 · リズムと連続性を兼ね備えたストーリーボード
選んだコンセプトをビートシートとして書きます:t · beat · what moves · what is still · what carries into the next beat。
リズム。 ショットの長さに4倍以上の差をつけます(0.25秒の単語のショットと、2.5秒の静止ショットを並べます)。映像と音がほぼ無音になる区間を少なくとも1つ入れます。描くのは1つのストーリー、つまりコンセプトのストーリーであり、単なるカタログではありません。小さな要素、大きな地盤。
連続性。 セクションの境界ごとに、何が残り、動き続けるのかを明記します。手、被写体、次のシーンになるコンテナ(morphRect)、被写体から開くステージ(iris)、カードの中へ押し進み、カード自体をシーンにするカメラ(zoomThrough)、ロックアップの形へ折りたたまれるキャスト(gather → seal)などです。何も残らないなら、リズムがどうであれ、それはスライドの切り替えです。何もつながらないカットは、ヒット音の連続部分とエンドカードに限ります。コンセプトにそうしたカットがある場合です。references/rhythm.md。
4 · 実物の映像、またはスクリーンショットから再構築した UI
python3 scripts/record_footage.py footage.json --out footage/
Playwright で実際のページをリアルタイムに操作し(実時間に合わせたスイープ、ホイール操作、クリック)、表示するサイズで録画します。入力が始まった瞬間にマゼンタのマーカーを挿入するため、あとからアクションのフレームを見つけられます。フレームは 30 fps の JPEG で出力され、ポインターの軌跡も保存されるため、コンポジションで手の動きを再現できます。視聴者には結果だけでなく、その原因も見せる必要があります。設定形式はスクリプトの docstring を参照してください。
または、再構築します。 映像でアプリの機能を紹介する場合(特にナレーションや他言語がある場合)、ユーザーは参考用のテイクだけをスクリーンショットまたは録画し、UI は参考映像と同じピクセルフレーム内に HTML で再構築します。すべての文字列はテーブルに格納し、各状態は純粋関数 set(state) で記述します。レプリカはカメラが任意のズームで寄れる平面上に配置します。ハイライトの位置は DOM から測定します(lib/ui_kit.js)。ナレーションには scripts/vo_tools.py を使用します。試聴、セリフ、単語のタイミング、字幕を扱えます。2 つ目の言語は、同じコンポジションで ?lang= を指定します。その VO は、同じ意味の単語に設定した UIK.timeWarp のノットを使って作成済みのタイムラインにマッピングし、scripts/frame_diff.py でソース言語とピクセル単位で一致することを確認します。コンテンツには製品の実際の出力を使います。手法、数値、対象となる要素については references/product-demo.md を参照してください。これは見た目ではなく技法です。パレット、ステージ、カメラの文法、トランジションは、毎回 §2 で新たに選びます。
5 · コンポジション — 1 つのファイル、時間の純粋関数、ライブラリの動き
mkdir -p cases/my-film && cp templates/comp.html lib/motion.js cases/my-film/ # the template loads motion.js → window.OM
python3 scripts/probe.py my-film/comp.html # as soon as it plays end to end: what carries each boundary, each move's curve
gallery/sheets/<move>.png を見て、動きのスピード曲線に沿った 6 フレームから動きを選びます。ライブラリには 39 種類あります。登場、運搬、接触とリアルタイムシミュレーション、カメラとその投影ヘルパー、流体セット(ライトフィールド、波紋、シルク、ベルト、SwiftUI のスプリング)を含み、それぞれ DOM の変換または canvas の呼び出しに使う数値を返す時間関数です。スプリングやイージングを固定定数で再実装しないでください。テンプレートはモーションウェブ映像(キネティックな文字、入力されるプロンプト、カチカチと進むチェックリスト、フライスルー、リアルタイムシミュレーション、ホールド、スタッカートのヒット、すべてのシミュレーションが参照する連続した 1 つの手の軌跡)です。§2 で選んだコンセプトに合う場合に限り、そのビートをコピーしてください。そうでなければ、契約とヘルパーはそのまま使い、コンセプト独自のビートを作成します。すべてが f(t) です。シミュレーションは 240 Hz で一度だけ事前シミュレーションし、サンプリングします。?play でプレビューし、?t=6.4&hud で固定します。references/motion-library.md と references/composition.md を参照してください。
見た目はコンポジションと一緒に提供されます。 python3 scripts/look.py apply ember cases/my-film/comp.html(または look.json)を実行すると、隣に look.js が作成されます。8 色が CSS 変数と LOOK.color として設定され、コンポジションで使われるグリフに絞った OFL フォント 3 種がインライン化されるため、file:// でのレンダリングでも実際の書体が使えます。コンポジションのスクリプトより先に読み込み、var(--ink) / var(--display) または LOOK.font('display', 96) を使って記述し、window.__ready で LOOK.ready をチェーンします。コピーに変更を加えた後は、もう一度実行してください。フォントにない文字があれば、その文字を表示します(中国語/日本語/韓国語には --cjk <font>)。
カメラ:キーで制御し、オペレーターのように動かします。 OM.camera(t, keys) で各ビートに必要な場所へカメラを配置します。オペレーターらしい動きは、キーの配置によって生まれます。対象を追うには、sineInOut で対象より約 0.1 秒早くキーを設定します。スナップ前に着地点へキーを設定し、expoInOut で素早く移動させます。手の動き(ゆっくりした 2 つのサイン波による浮遊。ホールド中はゼロ)と、着地するたびの OM.shake を加えます。奥の方に薄い OM.lattice を描くか、動きが伝わりにくい場合は何もない地面に描きます。カメラがある場合、__track は画面上のボックス(OM.projectBox)を返し、__motion は render.py に移動情報を渡し、__meta.inFrame はフレームから絶対に出してはいけないものを指定します。コード付きの手法については references/composition.md → カメラ を参照してください。
6 · レンダリング — 1080p30 のドラフト、4K60 は承認後のみ
python3 scripts/stills.py comp.html --times 0.7,2.4,3.8,6.2,9.9,12.7 --out stills.png # look before you render
python3 scripts/render.py comp.html --out draft.mp4 --sfx sfx.wav # 1920×1080 · 30 fps · 180° shutter
python3 scripts/render.py comp.html --out film.mp4 --final --sfx sfx.wav # 3840×2160 · 60 fps, once the cut is accepted
シャッターは実際のモーションブラーです。動いている各フレームで、開いたシャッターの間に何度もシークして平均化し、静止状態は検出して処理を省略します。キャプチャは Chrome のスクリーンショット(約 150 ms。ページ自体の描画は 1 ms 未満)なので、render.py は --workers 個のブラウザーを並列プロセスで実行します(デフォルトはコア数 − 2、最大 8)。window.__motion(t0, t1) を定義するページでは、画面上で移動するもの(カメラを含む)の最大移動距離に応じて、フレームごとのキャプチャ数を決めます。間隔は keep コピーが 6 px になるようにし(4〜48 回)、固定の 8 回では、one-dot film の 633 px/フレームの開口が縞模様になりました。所要時間の目安:one-dot camera cut は 8 ワーカーで 2,480 回のキャプチャに 103 秒かかりました(ブラウザー 1 つでは 1 回約 0.2 秒、約 8.5 分)。長時間のレンダリングを始める前に、ユーザーに所要時間を伝えてください。WebGL のコンポジションは --gpu を指定してレンダリングします(ANGLE/Metal 上の Chromium)。指定しない場合、ヘッドレス Chrome は SwiftShader で描画し、約 4 倍のコストがかかります(references/3d.md)。
7 · サウンド — 音のパレットを空間に広げ、イベントごとにビープ音を鳴らさない
python3 scripts/sfx_palette.py --demo demo.wav # quick pass: the synthetic palette (see templates/sfx_score.example.py)
python3 dump_events.py && python3 score.py # the films since one-dot: the comp's __events() → recorded + synthesised mix
方法は 2 つですが、ルールは 1 つです。パレットは、1 つのリバーブ内で合成した 5 種類の素材(空気、木、ガラス、サブ、バブル)で、ピークは −8 dBFS に設定されているため、音楽を上に重ねられます。ドラフトにはこれで十分です。one-dot 以降の承認済み作品ではすべて score.py を使用しています。録音素材(Kenney の CC0 パック、UIowa MIS、Voxengo IR。ここには同梱されていないため、自分でダウンロードしてください)に合成音を重ね、window.__events() に基づいてタイミングと定位を調整し、コンボリューションリバーブをかけ、ヒット音の下で音楽をダッキングします。−16 LUFS にマスタリングし、AAC レンダリングが verify の −3 dBFS を超えないよう、ピーク上限を十分低く(−3.5〜−4 dBTP)設定します。どちらの方法でも、イベント数はビート数より少なくします。最初の motion-web の試行では、すべてのイベントに生のサイン波のポップ音を付け、1 分も経たないうちに低品質として却下されました。製品に録音素材を含めて出荷する前に、ライセンスを確認してください(Mixkit のライセンスではファイルの再配布は許可されていません)。references/sound.md。
音楽はデフォルトでロイヤリティフリーにします。 再利用が許可されたライセンスのトラック(NCS、Pixabay Music、YouTube Audio Library、または利用を許可する CC ライセンスの Free Music Archive など)を探し、その出典とライセンスをスコアと一緒に保管してください。商用曲または著作権のある曲を使うのは、ユーザーから提供され、使用するよう明示された場合に限ります。自分の判断で取り込んではいけません。
8 · 提示する前に検証する
python3 scripts/verify_promo.py draft.mp4 --comp comp.html --ref ref.mp4 --shots 0,1.6,3.0,4.8,7.0,9.6,12.1,13.25,14.3
Rhythm は、ショットの長さが一様、完全に静止した区間がある、音声がクリップしている、または静寂になる箇所がない場合に失敗します。burst は --ref が指定されていて、フィルムにそれがない場合にのみ失敗します。参照がなければ警告です。ヒットのないコンセプトも間違いではありません。continuity は、あるビートが別のビートに置き換わる場合(引き継ぎスコア < 0.5)に失敗します。却下された Pocket Weather のカット 2 本(v1 は 0.00、v2 は 0.40)で失敗し、承認済み作品(v3 は 0.75、motion-web は 0.56 で警告)では通過した唯一の項目です。curves は、フィルムにシャッターのブラーがない状態で速く動く箇所(> 80 px/frame)がある場合に失敗します。framing は、__meta.inFrame 内の ID が画面外にあるフレーム(または 'whole' と指定されているのに切れているフレーム)があると失敗します。one-dot film の最初のカメラレンダリングでは、ドットがスナップの後ろに隠れてしまいましたが、ほかの検査では検出できませんでした。--ref を指定すると、参照のエネルギーマップとモーションラインも一緒に表示されます。
厳守ルール(違反するたびに減点)
- テンプレートのストーリーを安易に使わないでください。 中心となるアイデアが異なる3つのコンセプトを提示し、ユーザーに選んでもらいます (§2)。テンプレートの展開に沿った新作は、どれほど完成度が高くてもテンプレートのように見えます。
- 前の作品のルックを次の作品に持ち込まないでください。 パレット、舞台、カメラ文法、トランジションについて、ツール
(レプリカ、ナレーション、タイムワープ)は再利用できますが、ルックは再利用できません。コンセプトを決める段階で、これらの選択を明示してください。
looks/のプリセットをその段階で名前を挙げて選ぶのは問題ありませんが、何も言わずにデフォルトを使うのは不可です。 - 言語を追加しても、コンポジションを分岐させないでください。
?lang=、タイムワープ、ソースカットのピクセルは完全に一致させます。コンポジションを複製すると、以後の修正もすべて二重になります。 - メトロノームのようにカットしないでください。 各ショットが同じ長さだと、ショットごとの出来がどれほど良くてもスライドのように見えます。
- ビートを置き換えず、つなげてください。 画面上の何かを各セクションの境界を越えて残し、次のビートへ目に見える形で移動または拡大縮小させます。シーンを相互排他的に切り替える(
display:noneによる切り替え)と、リズムが完璧でもスライドになります。例外は、ハードカットの連打とエンドカードです。 - 動きが伝わると思って、ページをサムネイルで見せないでください。 手とともに全画面で見せるか、そのページのコンポーネントをカード内で動かします。ページ全体を小さなカードに入れても何も伝わりませんでした。
- フレームを常に動かし続けないでください。 動きが収まる時間があるからこそ、勢いのある動きが映えます。参考映像は3分の1の時間で静止しています。
- 小さな要素、大きな余白。 このジャンルではフレームの70%が白です。フルブリードの映像は、落ち着いた静止を1回入れる場合に限ります。基本にはしません。
- 原因を見せてください。 録画した軌跡から描いた手、またはコンセプト固有のモチーフ、たとえば分裂する点や着地するボールを見せます。何にも反応せずページが変化するだけでは、スクリーンセーバーのように見えます。
- 動きはライブラリから選び、カーブは t80 で決めてください。 どこでも手作りの smootherstep を使うと、すべての動きが同じ柔らかな S 字カーブになります。決め手になるのは、スナップ(
ease.expoOut、t80 .23)やスプリングです。 - 速い動きにはシャッターが必要です。 モーションブラーなしで1フレームあたり80 pxを超えて動くと、残像が複数に分かれてストロボのようになります。解決策は render.py のデフォルトのシャッターです。CSS のぼかしではありません。
- 被写体を追い、決して見失わないカメラにしてください。 カメラが静止した1ドットの映像では「就缺灵动的跟踪运镜」と評されました。各ビートでフレーミングする対象を追うカメラは受け入れられました。
__meta.inFrameを宣言し、スナップでは動き始める前に着地点をキー指定します。 - ドラフトは1080p30で作成してください。 カットが承認される前に4K60でレンダリングしないでください。
- パーティクルや紙吹雪、細かな粒子のバーストは使わないでください。 テンプレートのように見えます。ビートに華やかさが必要なら、文字そのものをスクワッシュさせ、揺らして着地させます。
- サウンドには1つの素材セット、1つの空間を使ってください。 イベントごとに別々のシンセ音を鳴らすのは、音声版のスライドショーです。
- すべてを決定論的にしてください。
__seek(t)を2回呼び出したときに同じフレームが返る必要があります。シャッターはこれを前提とします。シミュレーションは固定シードで事前計算し、レンダリング経路ではMath.random()(OM.rng(seed))を使いません。
ファイル
| パス | 内容 |
|---|---|
lib/motion.js | 動きのライブラリ → window.OM:カーブ、スプリング、登場、運搬、接触、シミュレーション、カメラ、流体 |
looks/looks.json | 採用作品から測定した、最初に使える6つのルック(カラー・トークン8個、各3種類の書体);looks/fonts/ はOFL書体とそのライセンス |
scripts/look.py | ルックの list / sheet / check、製品スクリーンショットからルックを作る from-shot、書体のサブセットをインライン化した look.js への apply |
lib/ui_kit.js | → window.UIK:平面上に再構築したUI(stage、domLocal、rectCache、flow)、内容に合わせて伸縮する glowRing、読みやすさ(screenPx、zoomFor)、言語(tr、loadFont)、ナレーションと作成済みタイムラインの間の timeWarp、subAt |
gallery/gallery.html | 動きごとのライブデモ1本(?demo=ribbon&play);gallery/sheets/<move>.png は6フレームと速度グラフ;gallery/sheets/looks.png はルック |
scripts/analyze_ref.py | 参照素材 → エネルギーマップ、カット、静止区間、コンタクトシート、動きの線(t80、残像)、JSON |
scripts/record_footage.py | 設定 → アクションマーカー付きのリアルタイム録画 → 30 fpsのフレームとパス |
scripts/probe.py | コンポジション → フレームごとの画面表示内容 → 境界ごとの連続性、動きごとのカーブ |
scripts/render.py | コンポジション → mp4:デフォルトは1080p30のドラフト、--final は4K60、__motion に応じたシャッター・モーションブラー、並列処理の --workers、WebGL用の --gpu、.render.json |
scripts/stills.py | コンポジション → 選択した時刻のコンタクトシート |
scripts/vo_tools.py | ナレーション:tts(Kokoro、英語と、かな読みを使った日本語、試聴)、words(faster-whisper)、plan(行の開始時刻)、subs(分割され、時間指定された字幕) |
scripts/frame_diff.py | 指定した時刻の2つのコンポジション(または ?lang= を指定した1つ) → 一致するかどうかと差分画像 |
scripts/sfx_palette.py | 音の素材、部屋、Score ヘルパー、--demo |
scripts/verify_promo.py | 合格判定の基準:リズムの要素に加え、--comp で連続性、カーブ、フレーミングを検証 |
scripts/gallery.py | ギャラリーのデモ → シート |
scripts/test_motion.js | node scripts/test_motion.js — ライブラリの数値 |
templates/comp.html | ライブラリを使ったコンポジションの骨組み(モーションウェブの映像) |
templates/footage.example.json | モーションウェブの映像で使うフッテージ設定 |
templates/sfx_score.example.py | モーションウェブのサウンドスコア |
references/reference-deconstruction.md | 参照素材を数値で読み解く方法 |
references/rhythm.md | リズム(モーションウェブの3つのカット)と運搬(Pocket Weatherの3つのカット) |
references/motion-library.md | すべての動き、DOMまたはキャンバスへの適用、カーブ表、境界ごとに使う運搬 |
references/composition.md | f(t) アーキテクチャ、プリミティブ、手の軌跡、プローブ、レンダリング、シャッター |
references/sound.md | パレット、部屋、レベル、安っぽく聞こえたもの |
references/product-demo.md | 録画なしの機能デモ:レプリカ、読みやすさ、DOMからのハイライト、ナレーション、言語とタイムワープ、ブランドのエンドクリップ、問題点 |
references/3d.md | 3D映像:Blender(MCP)のモデル → GLB → コンポジション内のthree.js、file:// 用のIIFEバンドル、--gpu(これでレンダリング:SwiftShaderは約4倍の時間がかかる)、インスタンス化したLOD、物理演算なしで f(t) として表すチェーン、3Dカメラ、読める必要がある空間内のテキスト |
cases/motion-web-15s/README.md | ケース1:リズム映像 — ビートシートと数値 |
cases/one-dot-15s/README.md | ケース3:1つの点が映像のすべて — コンセプトの段階、撮影者のカメラ、録音音声と合成音声 |
cases/knockon-15s/README.md | ケース4:光の連鎖反応を描く映像 — 因果関係のある運搬、影による高さの表現、コンポジションの __events() に基づく音の配置 |
cases/clearing-15s/README.md | ケース5:スケールを駆け抜けるワンカット — それぞれの単位で描いたレベル、1×~300×に対応するスクリーン空間のカメラ、ズーム速度に連動する音 |
cases/pith-21s/README.md | ケース6:逆方向へのダイブ — 1つの蛍光体ピクセルから440× → 0.52×へ、映像唯一の切り替えとして製品本来のダーク→ライトのテーマ切り替えを使用、リズムの変化点にマスコットのクローズアップを使用、すでに画面にある7つのオブジェクトから主張を構築 |
cases/ebb-15s/ | ケース7:光のフィールドに導かれ、5つの場所を巡るワンカット — 手と連動するキー入力式カメラ、揺れと奥行き、距離計の数字、次のシーンへ向かってリング状に引いていく洪水、3つの奥行きに配置したベルト上のシルクカード |
cases/domino-25s/README.md | ケース9:12,346台のスマートフォン、それぞれが1ピクセル — 実測したBlenderモデルをthree.jsでインスタンス化、音楽のグリッドに合わせたトリガー時刻、ビートに合わせたFPV走行と段階的なズームアウト、密なチェーンを表現するフォーリーの群れ |
cases/infra-25s/README.md | ケース10:すべての画像は熱から始まる — 参照素材独自の動きの言語で描く2D映像、実写写真にSVGフィルター(キャンバス不使用)で適用するサーマル擬似カラーとピクセルごとの冷却、実測した音楽グリッドに合わせた映像、測定に基づいて調整したミックス(141 msのフラム、その後はフォーリーとトラックが低音域を共有) |
cases/clawd-desktop-19s/README.md | ケース11:マスコットがポインターになる — three.jsでガラスの卓上として表現したmacOSデスクトップ、透過で描くLiquid Glassウィンドウ、キャラクターの体が引き起こすすべてのUI操作(クリック、入力、ドラッグ、ウィンドウの「いいえ」)、Dockに沿って移動し、Mission Controlに合わせて上昇するカメラ、ドロップ前の息継ぎとして使うトラック自体のドロップアウト |
cases/<film>/ | このスキルで制作したすべての映像:映像とREADME(ビートシート、数値、却下した案とその理由)。ほかに、overlap、unbroken、skill-demo、そしてonetake独自のローンチ映像があります。映像のソースコードは含まれていません |
必要なもの:playwright(chromium)、numpy、scipy、Pillow、matplotlib、fonttools と brotli(見た目用)を含む python3、モーションライン用の opencv-python、ffmpeg/ffprobe、ライブラリのテスト用の node です。ナレーションには、~/.cache/kokoro/venv にある faster-whisper(python3)と Kokoro(kokoro-onnx、soundfile に加え、日本語用の misaki[ja] と unidic-lite)を使用します。 |