まったくゼロから、コピペ一発でAntigravityにRemotionをセットアップして、【MVテロップ自動挿入プロンプト】も使えるようになるプロンプト！ 🌟Remotionを使うとAI動画編集がめちゃくちゃ簡単でハイクオリティになります。画像のようにプレビューもできるので効率もめちゃくちゃアップします！ Remotionを全く使ったことがない人でも、このプロンプトをAntigravityに投げるだけで、**ワークフローファイルの自動生成から**環境構築、MV完成まで辿り着けるように設計しました。 👇以下の「プロンプト本文」をコピーしてAntigravityのチャット欄に貼り付けるだけで、あとはAntigravityがガイドしてくれます。 --- ## プロンプト本文 (ここからコピー) ```markdown あなたは「世界最高峰のWebフロントエンドエンジニア」かつ「映像クリエイター」です。 私はRemotionを初めて使います。以下の要件に従って、環境構築からMV作成までを**完全サポート**してください。 ## ゴール - React (Remotion) を使って、提供する動画と歌詞から高品質なMVを作成する。 - 最終的に `mp4` ファイルを書き出す。 - **重要**: 今後のために、私が手元で使える「ワークフロー定義ファイル」も自動で作ってください。 ## 手順の概要 1. **環境チェック**: Node.js, npm が使えるか確認する。 2. **ワークフロー保存**: 以下の定義ファイルを私の環境（`.agent`フォルダ）に保存する。 3. **プロジェクト作成**: 保存したワークフローに従って、Remotionプロジェクトを立ち上げる。 4. **実装 & レンダリング**: ワークフローを完遂させる。 --- ## 必須アクション 1：定義ファイルの作成 まず最初に、`.agent/workflows` と `.agent/knowledge` ディレクトリを作成し、以下の2つのファイルを作成してください。 ### File 1: `.agent/knowledge/mv_production_guidelines.md` (内容は以下の通り) ````markdown # MV Production Guidelines & User Preferences このドキュメントは、MV制作における「ユーザーの好み」「成功した演出」「技術的な注意点」をまとめたナレッジベースです。 `create_remotion_mv.md` を実行する際は、必ずこのファイルを参照して方針を決定してください。 ## 1. デザイン・フォント選定 (Typography) ### ❌ 避けるべきフォント・設定 * **Dela Gothic One**: インパクトはあるが、極太すぎて画数の多い漢字（「引」「越」など）が潰れやすい。特に縁取り（Stroke）をつけると致命的。 * **Potta One**: 可愛い文字だが、小さいサイズや太字設定で少し読みづらくなる場合がある。 ### ✅ 推奨フォント * **RocknRoll One**: 「元気・インパクト」枠。Dela Gothicより少し細身で、漢字の可読性が非常に高い。 * **Mochiy Pop One**: 「ポップ・可愛い」枠。Potta Oneより丸みが整理されており、歌詞テロップに最適。 ### 🎨 配色・可読性 * **文字色と縁取り**: 同系色で明度差がない組み合わせは避ける。（例: 黄色文字にオレンジ縁取りは×。黄色なら黒や紺、赤などコントラストをつける） ## 2. 演出・エフェクト (Visual Effects) ### 💮 デカ判子スタンプ (Stamp Effect) * **用途**: 「だいじょうぶ」「よいしょ！」「カンペキ」などのキメ台詞で使用。 * **配置**: 画面中央は避け、**下部（Top: 70%〜80%）** に配置する。キャラクターの顔を隠さないため。 * **スタイル**: * **背景色**: **透明 (Transparent)**。白背景にすると動画を隠してしまうためNG。 * **枠線**: 文字色と同じ色 (`currentColor`) の太枠推奨。 * **改行**: 長いフレーズ（「だいじょうぶ」等）は改行を入れること。`white-space: pre-wrap` を忘れない。 ### 📦 絵文字シャワー (Emoji Particle) *   歌詞の内容に合わせた絵文字（📦, 🚚, 🌸, 💨）を降らせる演出は非常に効果が高い。 * `EffectRouter` に組み込み、Lyricデータで簡単に呼び出せるように設計すると良い。 ### 🥁 ビート・シェイク (Beat Shaker) *   サビのリズムに合わせて背景動画自体を `scale` / `translate` で振動させる。 * **効果**: 動画全体の一体感・迫力が劇的に向上する。 ## 3. Remotion 技術的Tips ### ⏳ レンダリング・パフォーマンス * `google-fonts` の大量リクエスト（Weights/Subsetsの読み込みすぎ）はタイムアウトの原因になる。 *   レンダリングが重い場合は `--concurrency=1` を試す。 *   動画の長さと `durationInFrames` の不一致は、末尾でのフリーズやエラーの原因になる。「Fin」などの演出が切れないよう、尺管理を徹底する。 ### 📝 コード設計 * `lyrics.ts` ですべての演出（Effect type, Timing, Text）を管理するアプローチは正解。 * `EffectRouter` でコンポーネントを振り分ける設計を維持する。 ```` ### File 2: `.agent/workflows/create_remotion_mv.md` (内容は以下の通り) ````markdown --- description: Remotion (React) を使用して、超高品質なMV/AMVを作成するワークフロー --- # ROLE あなたは「世界最高峰のWebフロントエンドエンジニア」であり、 同時に「天才的な映像クリエイター」です。 React, TypeScript, CSS, Remotion を駆使し、 Python(MoviePy)では到達不可能な、滑らかでリッチなMVを作成します。 ================================================== # INPUTS - 音声入り動画（歌あり） - 歌詞テキスト（全文） - 本ワークフロー ================================================== # PRE-FLIGHT CHECK (Knowledge Base) **作業を開始する前に、以下のナレッジベースを必ず参照してください。** ユーザーの過去のフィードバック（フォントの好み、スタンプ演出のルールなど）が記載されています。 `view_file .agent/knowledge/mv_production_guidelines.md` ================================================== # WORKFLOW STEP 0: INITIALIZATION (Remotion Setup) **【重要】既存のPython環境ではなく、新規Remotionプロジェクトを作成します。** 1. **プロジェクト作成**: \`\`\`bash npx create-remotion@latest mv-project --template=blank cd mv-project npm install @remotion/media @remotion/google-fonts \`\`\` 2. **フォントセットアップ**: \`src/Root.tsx\` 等で、以下のGoogle Fontsをロードする設定を行います。 **(※ Remotion v4以降は GoogleFontLoader コンポーネントは廃止されました。\`loadFont\` 関数を使用してください)** - \`Dela Gothic One\` - \`RocknRoll One\` - \`Potta One\` - \`Mochiy Pop One\` - \`Zen Maru Gothic\` - \`Shippori Mincho\` - \`DotGothic16\` **(※ 具体的な使い分けや推奨設定については、Guidelinesを参照してください)** Example: \`\`\`tsx import { loadFont as loadDelaGothicOne } from "@remotion/google-fonts/DelaGothicOne"; // コンポーネント外でロード loadDelaGothicOne(); export const RemotionRoot: React.FC = () => { // ... } \`\`\` ================================================== # WORKFLOW STEP 1: ANALYSIS & DATA STRUCTURE **動画をプログラムで制御するため、歌詞とタイミングを「データ化」します。** 1. **音声解析**: 従来通り Whisper 等でタイミングを取得しますが、 **出力形式は必ず \`src/data/lyrics.ts\` (TypeScript Object) とします。** Target Format (\`src/data/lyrics.ts\`): \`\`\`ts export type LyricLine = { time: number; // 秒 (またはフレーム) text: string; duration: number; type: "lyric" | "title" | "credit"; effect: "bounce" | "fade" | "glitch" | "typewriter" | "neon"; // 適用したいエフェクト名 style?: React.CSSProperties; // 個別のスタイル上書き }; // ★重要: このファイルが「編集指示書」を兼ねます。 // コメントで演出意図（サビ、強調、感情など）を記載し、人間が読んで理解できるようにしてください。 export const lyrics: LyricLine[] = [ { time: 0.5, text: "Song Title", duration: 3, type: "title", effect: "glitch" }, { time: 5.2, text: "First line of song", duration: 2.5, type: "lyric", effect: "fade" }, // ... ]; \`\`\` ================================================== # WORKFLOW STEP 2: EFFECT COMPONENT LIBRARY **Pythonの関数 \`make_xxx_text\` の代わりに、Reactコンポーネントを作成します。** \`src/components/effects/\` ディレクトリに、再利用可能なエフェクトを作成してください。 **必須実装コンポーネント:** 1. **\`<BounceText>\`** (pyon pyon): - \`spring\` 関数を使用し、各文字を遅延させてバウンスさせる。 2. **\`<GlitchText>\`** (biribiri): - \`random()\` と \`Math.sin()\` を使い、\`transform: translate(...)\` をランダムに振らす。 - \`clip-path\` でノイズを入れる。 3. **\`<NeonText>\`** (kira kira): - \`text-shadow\` を重ね掛けし、\`opacity\` をフリッカー（明滅）させる。 4. **\`<TypewriterText>\`** (kata kata): - 経過フレームに応じて \`text.slice(0, current)\` で表示文字を増やす。 5. **\`<DropText>\`** (dosun): - Y座標を画面外から \`interpolate\` で落下させ、\`spring\` で着地させる。 **推奨拡張エフェクト (create_mv.md 互換):** - **\`<ShakeText>\`**: \`Math.sin(frame)\` で位置をランダムに震わせる（恐怖・叫び）。 - **\`<ZoomText>\`**: \`scale\` を \`interpolate(frame, [0, 5], [2, 1])\` で縮小させながら着地（インパクト）。 - **\`<WaveText>\`**: \`Math.sin(frame index)\` で各文字を波打たせる（浮遊感）。 - **\`<RollText>\`**: \`rotate\` を使って回転しながら出現させる（コミカル）。 - **\`<StepText>\`**: 階段状（Y座標を文字ごとにずらす）に配置する。 - **\`<TurboText>\`**: 横方向へ高速スライド（疾走感）。 - **\`<WarpText>\`**: 手前から奥へ（またはその逆）急激にスケール変化。 - **\`<CrashText>\`**: 落下と同時に画面全体を \`useVideoConfig().width\` で少しずらして衝撃を表現。 **実装のコツ (Remotion Best Practices):** - \`useCurrentFrame()\`, \`useVideoConfig()\` を必ず使う。 - トランジションは \`interpolate(frame, [0, 20], [0, 1])\` のように制御する。 - 物理挙動には \`spring()\` を使い、滑らかな動きにする。 ================================================== # WORKFLOW STEP 3: COMPOSITION ASSEMBLY \`src/Composition.tsx\` で動画全体を組み立てます。 \`\`\`tsx import { Sequence, Audio, AbsoluteFill } from "remotion"; import { lyrics } from "./data/lyrics"; import { BounceText } from "./components/effects/BounceText"; // ... imports export const MyVideo = () => { return ( <AbsoluteFill style={{ backgroundColor: "black" }}> <BeatShaker> {/* Background Video */} <Video src={staticFile("audio.mp3")} /> </BeatShaker> {lyrics.map((line, index) => { // time(秒) を frame に変換 const startFrame = Math.round(line.time * 30); const durationFrames = Math.round(line.duration * 30); return ( <Sequence from={startFrame} durationInFrames={durationFrames} key={index}> {/* effect指定に応じてコンポーネントを切り替えるSwitch文 */} <EffectRouter line={line} /> </Sequence> ); })} </AbsoluteFill> ); }; \`\`\` ================================================== # WORKFLOW STEP 4: PREVIEW & REFINE **Remotionの最大の強みである「リアルタイムプレビュー」を活用します。** 1. **プレビュー起動**: \`\`\`bash npm start \`\`\` ブラウザが開くので、再生しながらタイミングやエフェクトの微調整を行います。 2. **調整項目**: - **Timing**: 歌詞の表示が早すぎないか？遅すぎないか？ - **Position**: キャラクター（中央）と被っていないか？ - 原則 **歌詞は下部 (\`top: undefined, bottom: 100\`)**、**タイトルは上部**、**クレジットは右下**。 - **デカ判子スタンプ**は**下部 (Top 70~80%)**。 - **Color**: 背景動画に埋没していないか？ \`text-shadow\` や \`backdrop-filter\` で視認性を確保する。 ================================================== # WORKFLOW STEP 5: RENDERING 調整が完了したら、MP4として書き出します。 \`\`\`bash npx remotion render src/index.ts MyComp out/video.mp4 --pixel-format=yuv420p \`\`\` ================================================== # QUALITY ASSURANCE (QA) CHECKLIST - [ ] **Frame Perfect**: 歌詞がリップシンク（歌のタイミング）と完全に合っているか？ - [ ] **No Overlap**: 重要な被写体（キャラクターの顔など）の上に文字が被っていないか？ - [ ] **Aesthetics**: フォント選定、色使い、エフェクトは「プロのMV」として恥ずかしくない品質か？ - [ ] **Performance**: レンダリングエラーが出ていないか？ ================================================== # FINAL RESPONSE RULE このワークフローを実行する準備ができたら、 「**承知しました。それでは音声入りの動画と、歌詞全文を貼り付けてください。**」 と応答して、ユーザーからの入力を待ってください。 （すでに動画と歌詞が提供されている場合は、直ちにセットアップ作業を開始してください） ```` --- ## あなたへの指示 1. 上記の `File 1` と `File 2` を指定のパスに作成してください。 2. ファイル作成が完了したら、`create_remotion_mv.md` を読み込み、Remotionのセットアップを開始してください。 3. まず最初に、**「現在の環境で Node.js が使えるか（`node -v`, `npm -v`）」** をチェックし、結果を報告してください。 ```

すんごいポストみて横転 引用元のリツトさんのプロンプトとその引用元のポストURLをAntigravityに渡してください。 あとはAntigravityがRemotionのスキルをインストールしてくれます。 私の【MV自動作成プロンプト】も、動画レンダリングの前にプレビューで確認できるから効率が超絶アップしました！ クオリティも安定性も超絶アップ！ Remotion用に調整したMV自動作成プロンプトはこちら👇 Remotionの準備が整ったらAntigravityに渡してください。 ✅プロンプト # ROLE あなたは「世界最高峰のWebフロントエンドエンジニア」であり、 同時に「天才的な映像クリエイター」です。 React, TypeScript, CSS, Remotion を駆使し、 Python(MoviePy)では到達不可能な、滑らかでリッチなMVを作成します。 ================================================== # INPUTS - 音声入り動画（歌あり） - 歌詞テキスト（全文） - 本ワークフロー ================================================== # WORKFLOW STEP 0: INITIALIZATION (Remotion Setup) **【重要】既存のPython環境ではなく、新規Remotionプロジェクトを作成します。** 1. **プロジェクト作成**: ```bash npx create-remotion@latest mv-project --template=blank cd mv-project npm install @remotion/media @remotion/google-fonts ``` 2. **フォントセットアップ**: `src/Root.tsx` 等で、以下のGoogle Fontsをロードする設定を行います。 **(※ Remotion v4以降は GoogleFontLoader コンポーネントは廃止されました。`loadFont` 関数を使用してください)** - `Dela Gothic One` (タイトル・衝撃) - `Potta One` (ポップ・元気) - `Zen Maru Gothic` (歌詞・標準) - `Shippori Mincho` (シリアス) - `DotGothic16` (デジタル) Example: ```tsx import { loadFont as loadDelaGothicOne } from "@remotion/google-fonts/DelaGothicOne"; // コンポーネント外でロード loadDelaGothicOne(); export const RemotionRoot: React.FC = () => { // ... } ``` ================================================== # WORKFLOW STEP 1: ANALYSIS & DATA STRUCTURE **動画をプログラムで制御するため、歌詞とタイミングを「データ化」します。** 1. **音声解析**: 従来通り Whisper 等でタイミングを取得しますが、 **出力形式は必ず `src/data/lyrics.ts` (TypeScript Object) とします。** Target Format (`src/data/lyrics.ts`): ```ts export type LyricLine = { time: number; // 秒 (またはフレーム) text: string; duration: number; type: "lyric" | "title" | "credit"; effect: "bounce" | "fade" | "glitch" | "typewriter" | "neon"; // 適用したいエフェクト名 style?: React.CSSProperties; // 個別のスタイル上書き }; export const lyrics: LyricLine[] = [ { time: 0.5, text: "Song Title", duration: 3, type: "title", effect: "glitch" }, { time: 5.2, text: "First line of song", duration: 2.5, type: "lyric", effect: "fade" }, // ... ]; ``` ================================================== # WORKFLOW STEP 2: EFFECT COMPONENT LIBRARY **Pythonの関数 `make_xxx_text` の代わりに、Reactコンポーネントを作成します。** `src/components/effects/` ディレクトリに、再利用可能なエフェクトを作成してください。 **必須実装コンポーネント:** 1. **`<BounceText>`** (pyon pyon): - `spring` 関数を使用し、各文字を遅延させてバウンスさせる。 2. **`<GlitchText>`** (biribiri): - `random()` と `Math.sin()` を使い、`transform: translate(...)` をランダムに振らす。 - `clip-path` でノイズを入れる。 3. **`<NeonText>`** (kira kira): - `text-shadow` を重ね掛けし、`opacity` をフリッカー（明滅）させる。 4. **`<TypewriterText>`** (kata kata): - 経過フレームに応じて `text.slice(0, current)` で表示文字を増やす。 5. **`<DropText>`** (dosun): - Y座標を画面外から `interpolate` で落下させ、`spring` で着地させる。 **実装のコツ (Remotion Best Practices):** - `useCurrentFrame()`, `useVideoConfig()` を必ず使う。 - トランジションは `interpolate(frame, [0, 20], [0, 1])` のように制御する。 - 物理挙動には `spring()` を使い、滑らかな動きにする。 ================================================== # WORKFLOW STEP 3: COMPOSITION ASSEMBLY `src/Composition.tsx` で動画全体を組み立てます。 ```tsx import { Sequence, Audio, AbsoluteFill } from "remotion"; import { lyrics } from "./data/lyrics"; import { BounceText } from "./components/effects/BounceText"; // ... imports export const MyVideo = () => { return ( <AbsoluteFill style={{ backgroundColor: "black" }}> <Audio src={staticFile("audio.mp3")} /> {lyrics.map((line, index) => { // time(秒) を frame に変換 const startFrame = Math.round(line.time * 30); const durationFrames = Math.round(line.duration * 30); return ( <Sequence from={startFrame} durationInFrames={durationFrames} key={index}> {/* effect指定に応じてコンポーネントを切り替えるSwitch文 */} <EffectRouter line={line} /> </Sequence> ); })} </AbsoluteFill> ); }; ``` ================================================== # WORKFLOW STEP 4: PREVIEW & REFINE **Remotionの最大の強みである「リアルタイムプレビュー」を活用します。** 1. **プレビュー起動**: ```bash npm start ``` ブラウザが開くので、再生しながらタイミングやエフェクトの微調整を行います。 2. **調整項目**: - **Timing**: 歌詞の表示が早すぎないか？遅すぎないか？ - **Position**: キャラクター（中央）と被っていないか？ - Python版と同様、原則 **歌詞は下部 (`top: undefined, bottom: 100`)**、**タイトルは上部**、**クレジットは右下**。 - CSS Flexbox/Grid を使えるので、配置は非常に簡単かつ正確です。 - **Video Layout**: 縦長/横長動画を扱う際は、`<Video>` タグに `style={{ objectFit: "cover", width: "100%", height: "100%" }}` を適用して余白が出ないようにする。 - **Color**: 背景動画に埋没していないか？ `text-shadow` や `backdrop-filter` で視認性を確保する。 ================================================== # WORKFLOW STEP 5: RENDERING 調整が完了したら、MP4として書き出します。 ```bash npx remotion render src/index.ts MyComp out/video.mp4 --pixel-format=yuv420p ``` ================================================== # QUALITY ASSURANCE (QA) CHECKLIST - [ ] **Frame Perfect**: 歌詞がリップシンク（歌のタイミング）と完全に合っているか？ - [ ] **No Overlap**: 重要な被写体（キャラクターの顔など）の上に文字が被っていないか？ - [ ] **Aesthetics**: フォント選定、色使い、エフェクトは「プロのMV」として恥ずかしくない品質か？ - [ ] **Performance**: レンダリングエラーが出ていないか？ ================================================== # FINAL RESPONSE RULE このワークフローを実行する準備ができたら、 「**Remotionプロジェクトのセットアップを開始します。**」 と宣言して作業を開始してください。

Neon text #neon #neonart #neonsign #neontext #art #traditionalart

#0day #Wordpress #Neontext Plugin - Stored #XSS #Vulnerability 0day.today/exploit/descripti…

[webapps] Neontext Wordpress Plugin - Stored XSS dlvr.it/T3dHMH

I am excited to announce my newest animation template for Final Cut Pro - Neon Text! Add some neon magic to your videos with customizable text and vibrant colors. Keep an eye out for its release soon! 🙂 #FinalCutPro #NeonText #video #digitalmarketing #videoedit

Create Better Neon Text with @GIMP_Official - new video tutorial out now! #TextEffects #NeonText #Neon #GraphicDesign #GIMPTutorial daviesmediadesign.com/projec…

Day - 90 to 95/ #100daysofcode Successfully Implemented - ✅ UiColor for Navbar ✅ UiColor for Text ✅Toggle switch for Neon ⏳ Pricing card With pricing card implemented and a taking care of the last minute inspection and cherry on the top, NeonText (V2) is out. 🤩

Day - 82 to 85 / #100DaysOfCode Successfully implemented two major functionality of the NeonText (v2) app! (2/3) 🥳 ✅ User text ✅ User font (most challenging was to activate btn) ⏳ User Color here is a little demo of where it is at this point.

In het begin 70 hing er aan de voorkant een lichtreclame van 22T-Fords met daar onder de neontext TufTuf als je naar binnen liep ging het ver naar achteren naar rechts en kwam je uit bij de Karrebar waar je ook weer meteen naar buiten kon en in de Vlaamse Gas terrecht kwam.

Day - 74, 75, 76, 77 / #100DaysOfCode Project: NeonText V2 Status : Transferring functionality from vanilla JS (V1) to React (V2). There is no way to do this without thinking purely in React.

Day - 71, 72, 73 / #100DaysOfCode Done with my React course I was going through. Now I am on my own. Implementing all those that I have learned on my NeonText project. So, this is the major update for NeonText (v1) and some minor fixes. Super excited ! 😄

Stills for Jaana (Freeverse) by @bowdumofficial #stills #colourgrading #davinciresolve #filmmaking #filmmakerslife #musicvideo #music #artistsoninstagram #neontext #neonfont #photoshop #bowdum #weatetougheggs #oneshot #singletake #creative #photography

Det är helt sjukt faktiskt att män på första dejten säger "jag kommer misshandla dig om några år, lugnt eller?". Eller de som har de där speciella tröjorna med "KVINNOMISSHANDLARE" i neontext. Sjukt.

Day - [ 41, 42 ]/#100DaysOfCode 👉🏼Been fixing random BSOD on my windows OS. Getting really flexible on looking for reasons and solution. Worth the thirst! 👉🏼 Working on pricing section and performance of of my neonText app. Going good!Wonder what is up with other Devs? 💭

Jag kommer osökt att tänka på en boktitel, “De är inte kloka, de där ryssarna”, den har återkommit som en blinkande neontext över var och varannan nyhet sen i torsdags.

Neontext with special heart ❤️

#neontext #neon #graphicsdesign #photoshop

Playing with neon text effects in Photoshop. This will be available as a print on my website by the weekend ❤️💕💙🌈 #neon #neontext #neontexteffects #photoshop

🔆Throwback Thursday is here! Save 35% on our plugin ProNeon! store.pixelfilmstudios.com/p… #fcpx #finalcutprox #pixelfilmstudios #plugin #plugins #sale #ThrowbackThursday #visualeffects #effects #editing #film #production #neon #lighteffects #neontext