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

archive-broll

Find, preview, cut and credit archival B-roll from the Internet Archive (archive.org) for a Helios video — public-domain, CC BY and CC BY-SA film plus Prelinger Archives. Use when a Helios composition needs real footage as a plate, cutaway, masked fill or texture. Not for generating footage or editing the user's own camera video.

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

BintzGavin/heliosスター 123(GitHub 123 + cccskills 0)

実行スコア 未検証

インストール方法を見る

含まれるファイル(2)

  • SKILL.md4.4 KB
  • scripts/archive-broll.mjs12.0 KB

SKILL.md(原文)

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

Archive B-roll

The Internet Archive holds millions of films: Prelinger Archives (industrial, educational, advertising), NASA, newsreels, home movies and Creative Commons uploads. No API key is needed. scripts/archive-broll.mjs (Node 18+, ffmpeg for clip) wraps three endpoints:

CommandEndpointDoes
searchadvancedsearch.phpLists movie items with reusable rights
inspectmetadata/<id>Picks the best MP4, saves thumbnails named by second offset
clipdownload/<id>/<file>Cuts only the seconds you need over HTTP, writes credits

1. Search

node <this-skill>/scripts/archive-broll.mjs search "factory assembly line" --rows 12
node <this-skill>/scripts/archive-broll.mjs search "city traffic" --collection prelinger --years 1945-1965
node <this-skill>/scripts/archive-broll.mjs search 'title:(rocket launch)' --collection nasa --json

Terms use Archive search syntax (title:(...), subject:(...), AND, OR); results are ranked by relevance (--sort downloads for popularity). Every result carries a rights label:

LabelMeaning
public-domainPublic-domain mark or CC0. Credit anyway.
cc-byCredit required.
cc-by-saCredit required, and the finished video must use the same license. Tell the user before using it in a commercial video.
collection-policyNo item license; the collection publishes a rights statement (Prelinger Archives). Credit the collection and link the statement.

Non-commercial, no-derivatives and unknown-rights items are left out. --include-unknown shows unknown items; use one only after the user confirms they hold the rights. Labels come from uploader metadata: they're a filter, not legal advice. Flag anything that looks like a commercial film, TV show or trademark-heavy footage even when it's labelled public domain.

2. Preview

node <this-skill>/scripts/archive-broll.mjs inspect <identifier> --out videos/<slug>/broll --thumbs 16

Writes item.json and thumbnails named by offset (00450s.jpg = 7:30 in). Open them with your image tool and pick start times. --large grabs sharper 640 px frames with ffmpeg when the archive's 160 px thumbnails aren't enough.

3. Cut

node <this-skill>/scripts/archive-broll.mjs clip <identifier> --start 450 --duration 3 \
  --out videos/<slug>/broll --name traffic-01.mp4

Output is H.264, no audio (--audio keeps it), short keyframe interval so per-frame seeking stays cheap; --width 1920 upscales. Cut about 0.5 s extra on each side for transitions. Each clip appends to CREDITS.md and credits.json in the output folder.

4. Use in the page

The renderer seeks every <video> to (t - data-helios-offset) + data-helios-seek before each frame and waits for it.

DOM page: place it and style it.

<video id="plate" src="broll/traffic-01.mp4" muted playsinline preload="auto"
       data-helios-offset="4.0" data-helios-seek="0.5"></video>

Canvas page: keep the same hidden <video> (style="display:none"), and wait for its seek inside renderAt before drawing:

const plate = document.getElementById('plate');
const settled = (v) => (v.seeking || v.readyState < 2)
  ? new Promise((r) => { v.addEventListener('seeked', r, { once: true }); v.addEventListener('canplay', r, { once: true }); })
  : null;

window.renderAt = async (t) => {
  await ready;
  if (t >= 4.0) { await settled(plate); ctx.drawImage(plate, 0, 0, W, H); }
  // ...
};

Make the footage belong to the look: grade it with an SVG colour matrix, mix-blend-mode, or by drawing it into the style's plates (duotone, halftone, ink density). Most archive film is 4:3 SD from the 1940s–70s: masks, frames and collage suit it better than full-bleed. Check a sheet to confirm the clip moves between frames.

5. Credit

Keep CREDITS.md with the video, and put credits in the end card, description or project docs as the license requires (always for CC BY and CC BY-SA). List the clips and their rights when you hand over.

レビュー

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

コメント

ログインなしで書き込めます。使ってみた感想、質問、動かなかった環境などを気軽にどうぞ。

まだコメントはありません。最初のコメントを書いてみませんか。

送信するとすぐに公開されます。メールアドレスや電話番号などの個人情報は書かないでください。URL は 2 つまでです。

0 / 1000 文字

このフォームは reCAPTCHA で保護されており、Google のプライバシーポリシーと利用規約が適用されます。

同じリポジトリのスキル

Story-first motion design philosophy for animated video: motion must earn its place; arc (establish, complicate, resolve); show vs tell; shots as units of thought; quiet vs loud motion; Disney principles with restraint; timing heuristics; composition; grammar by medium (product demos, logos, data viz, explainers); technical commitments (deterministic time, scrubbability, refs); cutting discipline; explicit anti-patterns. Use when planning, storyboarding, critiquing, or implementing programmatic or motion-driven video (Helios, Remotion, explainers, loops, UI capture, logo reveals), or when the user asks for motion direction, pacing, or visual-story structure.

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

BintzGavin/helios1232026年10月26日 更新

End-to-end production plan template for feeling-first cinematic product promos: brief interrogation, 45s beat structure (cold open through brand), hero-element metaphor, storyboard fidelity ladder, visual system (palette, type, camera, texture), motion mix and easing vocabulary, audio and captions, tooling (animatic through HTML or AE), deliverables matrix, accessibility, review milestones, and compromises to accept or refuse. Use when planning, pitching, storyboarding, or producing polished brand films for any SaaS or consumer product—not category-specific; pair with skills/design/animated-video-philosophy for broader motion principles.

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

BintzGavin/helios1232026年10月26日 更新

Workflow for creating a new Helios composition. Use when building a new animation project or converting an existing animation to run in Helios.

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

BintzGavin/helios1232026年10月26日 更新

Patterns for using Helios with Vanilla Canvas API. Use when building high-performance 2D/3D animations without frameworks.

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

BintzGavin/helios1232026年10月26日 更新

Chart.js integration patterns for Helios. Use when creating animated data visualizations with Chart.js.

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

BintzGavin/helios1232026年10月26日 更新

Learn how to use D3.js with Helios for data visualization. Use when creating charts, graphs, or data-driven animations.

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

BintzGavin/helios1232026年10月26日 更新

BintzGavin のスキルをすべて見る

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