本文へ移動
cccskills
無料GitHub で公開

brand-launch-video-star

Create fast, high-impact 15-30 second brand and product marketing videos from an official company website, verified brand sources, or user-uploaded product imagery. Use for launch films, website motion videos, AI/SaaS demos, product promos, and Vibe Motion/Remotion productions that require exact logos, authentic imagery, English-first copy, product-feature storytelling, strong visual impact, smooth transitions, and deterministic frame-based animation.

インストール方法を見る

含まれるファイル(11)

  • SKILL.md8.8 KB
  • agents/openai.yaml269 B
  • assets/burger-king-flame-shift.gif221.2 KB
  • assets/moonshot-product-hypercut.gif228.2 KB
  • references/asset-authenticity.md2.4 KB
  • references/asset-manifest.example.json910 B
  • references/motion-quality.md1.9 KB
  • references/story-patterns.md1.6 KB
  • references/timeline.example.json875 B
  • scripts/validate-assets.mjs4.2 KB
  • scripts/validate-timeline.mjs3.3 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

Brand Launch Video Star

Create an authentic launch film, not a generic motion template. Verify the brand, tell a product-specific story, and render a fast, polished sequence with exact assets and deterministic motion.

Release blockers

  1. Use authentic assets. Never invent, redraw, approximate, trace, or generate a logo, wordmark, product, interface, mascot, packaging, person, or brand scene.
  2. Make the logo exact. Download the current official file or use the user's original. Never typeset a wordmark or rebuild a logo with CSS/SVG primitives.
  3. Research beyond uploads. Treat uploads as usable source material, not the asset ceiling. Find additional official or licensed material when the story needs it.
  4. Show the product. Demonstrate actual features, interactions, scenarios, outputs, and proof. Do not hide a weak product story behind abstract effects.
  5. Default to English. Use another language only when explicitly requested.
  6. Keep motion deterministic. Compute every state from frame/time and explicit inputs. Never depend on render order or unseeded randomness.
  7. Verify claims. Confirm current names, features, metrics, slogans, and CTAs against official sources.

If an identity-bearing asset cannot be authenticated, stop and ask for an authorized original. Do not render a plausible substitute.

Use procedural graphics only as non-representational motion layers: masks, gradients, color fields, grids, glows, particles, trails, typography, verified-data charts, and transition geometry.

Quick start

Install the skill:

npx skills add vibe-motion/skills

Invoke it with a concrete brief:

Use $brand-launch-video-star to create a 15-second 16:9 English launch film
for https://example.com. Research official assets, show the core product
workflow, and deliver a Vibe Motion/Remotion MP4 plus provenance files.

Work inside the user's existing Vibe Motion or Remotion project. If none exists, initialize a Vibe Motion project with npx create-vibe-motion, then follow the generated project's own install and render commands.

Before implementation:

  1. Copy references/asset-manifest.example.json into the project and replace every example value.
  2. Copy references/timeline.example.json into the project and adapt its duration and shots.
  3. Validate both files:
node <skill-dir>/scripts/validate-assets.mjs path/to/asset-manifest.json
node <skill-dir>/scripts/validate-timeline.mjs path/to/timeline.json

Use --schema-only only to inspect the bundled manifest template:

node <skill-dir>/scripts/validate-assets.mjs \
  <skill-dir>/references/asset-manifest.example.json --schema-only

Workflow

1. Resolve the brief

Determine:

  • Company/product and official URL
  • Product or campaign focus
  • Audience and distribution
  • Duration; default to 15 seconds, normally support 15-30 seconds
  • Aspect ratio; default to 16:9
  • Language; default to English
  • Required claims, CTA, and disclaimer needs
  • Whether the user owns or may publish supplied assets

Ask only questions that materially change the film.

2. Build the brand truth sheet

Browse current official sources and extract:

  • Exact logo variants and usage
  • Official fonts or webfonts
  • Primary, secondary, and dynamic colors
  • Brand principles, tone, and visual motifs
  • Current product names, features, scenarios, metrics, and CTA
  • Official photography, renders, UI screenshots, footage, press assets, and media kits

Prioritize:

  1. User-provided original
  2. Company website, static bundle, newsroom, brand portal, media kit, or official repository
  3. Company-controlled media library
  4. Licensed stock or authorized partner kit

Read references/asset-authenticity.md before acquiring assets.

3. Create the asset manifest

Record every identity-bearing asset in asset-manifest.json:

  • Stable ID and role
  • Local path
  • Exact source URL
  • Source type
  • Official verification page/file
  • Rights/licensing note
  • Authenticity status
  • Optional SHA-256 checksum

The validator checks manifest structure, declared provenance, local file existence, and optional checksums. It does not independently grant usage rights or prove a remote source is truthful; manually perform the official-source comparison.

Do not start final rendering while validation fails.

4. Choose the story spine

Present 2-3 concise directions and recommend one:

  • AI/SaaS: intent -> thinking/planning -> capabilities -> execution -> output -> proof -> logo
  • Physical product: hero -> interaction -> feature macro -> usage context -> result -> logo
  • Service/company: context -> process -> evidence -> outcome -> promise -> logo
  • Image-led brand: authentic imagery -> visual motif -> benefit -> emotional payoff -> logo

Read references/story-patterns.md for duration patterns.

5. Plan exact frames

Use 30fps unless the project requires otherwise. Convert every boundary to an integer frame.

For 15 seconds, target 5-8 major beats; for 30 seconds, target 8-12. Give every beat:

  • Start/end frame
  • Visual owner and authentic asset IDs
  • Primary action
  • Anticipation, commitment, impact, brake, and settle
  • Copy and readable hold
  • Color state
  • Incoming/outgoing transition

Use 6-12 frame overlaps when continuity benefits. One shot owns velocity; the next owns the destination.

6. Build intensity with control

  • Use product motion, cursor paths, light, scrolling content, object edges, or matched geometry to drive transitions.
  • Use 2-5 deliberate color states with strong contrast.
  • Keep one primary action per beat; delay secondary layers by 2-6 frames.
  • Establish 2-3 high-energy peaks and quieter braking moments.
  • Preserve readable silhouettes, copy, and logo clear space.
  • Avoid fake HUDs, arbitrary glass cards, decorative text walls, unverified metrics, and identical easing everywhere.

Read references/motion-quality.md before implementation.

7. Demonstrate cause and effect

Include at least one readable chain:

user intent -> product action -> system response -> useful output

For AI products:

prompt -> planning -> parallel capabilities -> generated result -> proof

Use actual UI captures, recordings, source code, or officially supplied screenshots. If actual UI is unavailable, use clearly conceptual abstract motion; never fabricate a branded interface and present it as real.

8. Implement and render

For Remotion:

  • Define state = f(frame, fps, inputs, constants).
  • Keep shot boundaries in one timeline/constants module.
  • Seed procedural variation with stable IDs.
  • Preserve fractional values when deriving velocity.
  • Keep image dimensions and aspect ratios explicit.
  • Preserve previous compositions/outputs during iteration.

Prefer the project's local CLI. Typical discovery and render commands are:

pnpm exec remotion compositions <entry-file>
pnpm exec remotion render <entry-file> <composition-id> out/launch-film.mp4

Default preview:

  • 1920x1080
  • 30fps
  • H.264 MP4
  • Exact requested duration
  • Visual-first V1; add sound only when requested or available

9. Verify

  • Run asset-manifest and timeline validation.
  • Run composition discovery/build and targeted lint/type checks.
  • Verify media duration, frame rate, dimensions, and file integrity.
  • Inspect representative frames and the complete render.
  • Ask for timecoded feedback on pace, clarity, impact, authenticity, and smoothness.

10. Deliver provenance

Provide:

  • Rendered video
  • Composition/source path
  • Exact specs and duration
  • Asset manifest
  • Brand/product source links
  • Rights/disclaimer note
  • Version identifier

State when the film is an unofficial concept and when commercial publication requires permission.

Failure recovery

  • Wrong logo: remove it, locate the current official file, record provenance, and rerender.
  • Fake-looking product/UI: replace it with official, user-supplied, or licensed media; do not improve the imitation.
  • Fast but chaotic: reduce simultaneous actions, assign a visual owner, and preserve matched motion across cuts.
  • Beautiful but generic: add a complete product interaction, verified claims, and real outputs.
  • Smooth but slow: shorten holds, overlap transitions, and brake only around key messages.
  • Asset unavailable: ask for an authorized original; never guess.

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

Clone or update https://github.com/nolangz/3D-Chladni and export deterministic 3D Chladni particle motion as MP4 or transparent ProRes MOV. Use when users ask for 3D 克拉尼, 克拉尼粒子动画, Chladni motion, sound-reactive sand or cosmic-web visuals, audio-to-motion, music visualizer video, or rendering Dynamic Sand, Modal Sand, Cosmic Web, or Dynamic Cosmic.

日本語の概要は準備中です。原文の説明を表示しています。

vibe-motion/skills1,3482026年10月6日 更新

Render a Claude-style prompt typing animation video by calling Remotion CLI against the remote site https://www.laosunwendao.com. Use when the user asks for "做一个 claude 的提示词打字机动画", "做 Claude 打字动画", "创建提示词动画", or similar requests that convert a text prompt into a typing-animation video.

日本語の概要は準備中です。原文の説明を表示しています。

vibe-motion/skills1,3482026年10月6日 更新

colorize

無料

Turn photos, videos, and Live Photos into a black-and-white to color reveal clip (单彩渐变 + 动感模糊 + 丁达尔旋焦). The frame starts monochrome and spun, color sweeps in from the left under a horizontal motion blur, and the spin settles from the center outward into a softly glowing full-color frame. Use when users ask for 上色效果, 黑白变彩色, 丁达尔旋焦, 旋焦上色, 剪映上色特效, color reveal, colorize transition, or want this effect on images, iPhone Live Photos (HEIC/JPG + MOV), Android motion photos, or video clips. Outputs H.264 MP4.

日本語の概要は準備中です。原文の説明を表示しています。

vibe-motion/skills1,3482026年10月6日 更新

Apply Disney's 12 principles as practical design and engineering rules for procedural animation. Use when creating, improving, reviewing, or debugging code-driven motion in web, SVG, canvas, React, Remotion, game, UI, character, camera, or 3D scenes; especially when motion feels stiff, weightless, mechanical, unclear, or physically correct but visually weak.

日本語の概要は準備中です。原文の説明を表示しています。

vibe-motion/skills1,3482026年10月6日 更新

制作屏摄风格的鱼眼畸变效果与聚焦动画:桶形鱼眼畸变 + 细扫描线/摩尔纹干涉 + 四周暗角, 可对任意图片/视频做「推镜聚焦到某处 + 黄色标注块滑入」的 Remotion 视频输出。 核心是 clone https://github.com/vibe-motion/fisheye-motion 项目并按需改参数渲染。 触发词:鱼眼、fisheye、屏摄、摩尔纹、moire、扫描线、CRT、暗角、vignette、 聚焦推镜、高亮标注动画、screen-photo effect。

日本語の概要は準備中です。原文の説明を表示しています。

vibe-motion/skills1,3482026年10月6日 更新

Generate a swinging spotlight text-reveal HTML animation with configurable text, swing angle, lamp scale, glow, and colors. Use when users ask for 聚光灯扫字动画, spotlight text reveal, light logo reveal, 发光文字揭示动画, or want a reusable HTML animation instead of a static image.

日本語の概要は準備中です。原文の説明を表示しています。

vibe-motion/skills1,3482026年10月6日 更新

vibe-motion のスキルをすべて見る

このスキルの問題を報告する