無料GitHub で公開日本語紹介

paper-shaders

WebGLシェーダーを使い、ブランドカラーの背景や質感、ロゴ演出を動画向けに作成します。HyperFramesやRemotionで同じフレームを再現できます。

原文原文の説明を見る

Turns Paper Shaders (30 WebGL shaders: mesh and grain gradients, god rays, liquid metal, smoke ring, dithering, halftone, paper texture and more) into frame-exact backgrounds, textures and logo stings for HyperFrames or Remotion videos, in brand colors, with nine tested presets. Every frame is drawn from timeline time, so renders are seekable, parallel and repeatable, and spend no varg credits. Use when a video needs an animated shader background, a grain, dither, halftone or paper look on graphics or stills, or a logo reveal or sting. NOT for generating footage (use varg-ai), grading or film grain on real footage (HyperFrames media treatments), warping existing layers (HyperFrames data-vfx-chain), 3D scenes (a Three.js skill) or shaders for websites.

hashgraph-online/awesome-codex-pluginsスター 1,440(GitHub 1,440 + cccskills 0)

実行スコア未検証

インストール方法を見る

こんなときに便利

動画に動く背景を加えたいとき
静止画に紙やドットの質感を加えたいとき
ブランドカラーでロゴ演出を作りたいとき
再現性のある動画フレームを描画したいとき

日本語での紹介

できること

Paper ShadersのWebGLシェーダーを、HyperFramesまたはRemotionの動画に背景、画像の質感、ロゴ演出として組み込みます。メッシュや粒子のグラデーション、光線、液体金属、煙の輪、ドット表現、紙の質感などを使えます。用意されたプリセットを選び、ブランドカラーを反映して静止画を確認しながら調整し、動画として書き出します。各フレームはタイムラインの時刻から描画されるため、同じ時刻の画を再現できます。

こんなときに便利

タイトルの背後に動く背景を置きたいときや、静止画に印刷物や紙のような質感を加えたいときに向いています。ロゴの登場演出や短い場面転換にも使えます。HyperFramesまたはRemotionで動画を作っていて、レンダリングするたびに画がずれない演出を加えたい場合にも役立ちます。

使い方の例

「ブランドカラーでタイトル用の動く背景を作って」
「この静止画にハーフトーンの質感を加えて」
「ロゴが光線の中から現れる短い動画を作って」

注意点

HyperFrames 0.8またはRemotion 4とNode 22、ffmpegが必要です。Remotionでは--gl=angleを指定します。Paper Shadersは0.0.82を使用します。画像用のプリセットに使うロゴや静止画は、利用者自身が権利を持つ素材か、使用許諾のある素材に限られます。実写映像への色調補正や粒子追加、映像素材の生成には対応しません。

この紹介文は、公開されている SKILL.md をもとに AI（OpenAI Codex）が作成しました。正確な仕様は下の原文を確認してください。

含まれるファイル（157）

SKILL.md10.3 KB
assets/paper-shaders.params.json34.2 KB
assets/presets/brand-mesh.json787 B
assets/presets/god-rays-reveal.json997 B
assets/presets/grain-blob.json809 B
assets/presets/halftone-overlay.json1.1 KB
assets/presets/liquid-metal-sting.json1015 B
assets/presets/paper-finish.json1.3 KB
assets/presets/paper/paper-color-panels-default.json923 B
assets/presets/paper/paper-color-panels-glass.json875 B
assets/presets/paper/paper-color-panels-gradient.json913 B
assets/presets/paper/paper-color-panels-opening.json831 B
assets/presets/paper/paper-dithering-bugs.json720 B
assets/presets/paper/paper-dithering-default.json730 B
assets/presets/paper/paper-dithering-ripple.json728 B
assets/presets/paper/paper-dithering-sine-wave.json735 B
assets/presets/paper/paper-dithering-swirl.json726 B
assets/presets/paper/paper-dithering-warp.json722 B
assets/presets/paper/paper-dot-grid-default.json827 B
assets/presets/paper/paper-dot-grid-tree-line.json835 B
assets/presets/paper/paper-dot-grid-triangles.json835 B
assets/presets/paper/paper-dot-grid-wallpaper.json834 B
assets/presets/paper/paper-dot-orbit-bubbles.json725 B
assets/presets/paper/paper-dot-orbit-default.json786 B
assets/presets/paper/paper-dot-orbit-hallucinatory.json741 B
assets/presets/paper/paper-dot-orbit-shine.json752 B
assets/presets/paper/paper-fluted-glass-abstract.json1.0 KB
assets/presets/paper/paper-fluted-glass-default.json1.0 KB
assets/presets/paper/paper-fluted-glass-folds.json1.0 KB
assets/presets/paper/paper-fluted-glass-waves.json1.0 KB
assets/presets/paper/paper-gem-smoke-default.json878 B
assets/presets/paper/paper-gem-smoke-fire.json886 B
assets/presets/paper/paper-gem-smoke-fluorescent.json902 B
assets/presets/paper/paper-gem-smoke-infrared.json929 B
assets/presets/paper/paper-god-rays-default.json850 B
assets/presets/paper/paper-god-rays-ether.json825 B
assets/presets/paper/paper-god-rays-linear.json834 B
assets/presets/paper/paper-god-rays-warp.json817 B
assets/presets/paper/paper-grain-gradient-blob.json773 B
assets/presets/paper/paper-grain-gradient-default.json802 B
assets/presets/paper/paper-grain-gradient-dots.json784 B
assets/presets/paper/paper-grain-gradient-ripple.json782 B
assets/presets/paper/paper-grain-gradient-truchet.json777 B
assets/presets/paper/paper-grain-gradient-wave.json770 B
assets/presets/paper/paper-halftone-cmyk-default.json1.0 KB
assets/presets/paper/paper-halftone-cmyk-drops.json1.0 KB
assets/presets/paper/paper-halftone-cmyk-newspaper.json1.0 KB
assets/presets/paper/paper-halftone-cmyk-vintage.json1.0 KB
assets/presets/paper/paper-halftone-dots-default.json885 B
assets/presets/paper/paper-halftone-dots-led-screen.json891 B
assets/presets/paper/paper-halftone-dots-mosaic.json877 B
assets/presets/paper/paper-halftone-dots-round-and-square.json910 B
assets/presets/paper/paper-heatmap-default.json851 B
assets/presets/paper/paper-heatmap-sepia.json765 B
assets/presets/paper/paper-image-dithering-default.json856 B
assets/presets/paper/paper-image-dithering-natural.json855 B
assets/presets/paper/paper-image-dithering-noise.json853 B
assets/presets/paper/paper-image-dithering-retro.json849 B
assets/presets/paper/paper-lens-distortion-default.json1.0 KB
assets/presets/paper/paper-lens-distortion-duotone.json1.0 KB
assets/presets/paper/paper-lens-distortion-fisheye.json1.0 KB
assets/presets/paper/paper-lens-distortion-smoke.json1.0 KB
assets/presets/paper/paper-liquid-metal-backdrop.json833 B
assets/presets/paper/paper-liquid-metal-default.json833 B
assets/presets/paper/paper-liquid-metal-noir.json818 B
assets/presets/paper/paper-liquid-metal-stripes.json827 B
assets/presets/paper/paper-mesh-gradient-beach.json765 B
assets/presets/paper/paper-mesh-gradient-default.json768 B
assets/presets/paper/paper-mesh-gradient-ink.json721 B
assets/presets/paper/paper-mesh-gradient-purple.json729 B
assets/presets/paper/paper-metaballs-background.json726 B
assets/presets/paper/paper-metaballs-default.json746 B
assets/presets/paper/paper-metaballs-ink-drops.json685 B
assets/presets/paper/paper-metaballs-solar.json705 B
assets/presets/paper/paper-neuro-noise-bloodstream.json724 B
assets/presets/paper/paper-neuro-noise-default.json709 B
assets/presets/paper/paper-neuro-noise-ghost.json701 B
assets/presets/paper/paper-neuro-noise-sensation.json716 B
assets/presets/paper/paper-paper-texture-creased.json1.1 KB
assets/presets/paper/paper-paper-texture-default.json1.1 KB
assets/presets/paper/paper-paper-texture-flat.json1.1 KB
assets/presets/paper/paper-paper-texture-spread.json1.1 KB
assets/presets/paper/paper-perlin-noise-default.json756 B
assets/presets/paper/paper-perlin-noise-moss.json766 B
assets/presets/paper/paper-perlin-noise-nintendo-water.json778 B
assets/presets/paper/paper-perlin-noise-worms.json749 B
assets/presets/paper/paper-pulsing-border-circle.json1.0 KB
assets/presets/paper/paper-pulsing-border-default.json1.0 KB
assets/presets/paper/paper-pulsing-border-northern-lights.json1.1 KB
assets/presets/paper/paper-pulsing-border-solid-line.json994 B
assets/presets/paper/paper-simplex-noise-bubblegum.json731 B
assets/presets/paper/paper-simplex-noise-default.json744 B
assets/presets/paper/paper-simplex-noise-first-contact.json760 B
assets/presets/paper/paper-simplex-noise-spots.json702 B
assets/presets/paper/paper-smoke-ring-cloud.json757 B
assets/presets/paper/paper-smoke-ring-default.json762 B
assets/presets/paper/paper-smoke-ring-line.json769 B
assets/presets/paper/paper-smoke-ring-solar.json801 B
assets/presets/paper/paper-spiral-default.json780 B
assets/presets/paper/paper-spiral-droplet.json795 B
assets/presets/paper/paper-spiral-jungle.json787 B
assets/presets/paper/paper-spiral-swirl.json783 B
assets/presets/paper/paper-static-mesh-gradient-1960s.json874 B
assets/presets/paper/paper-static-mesh-gradient-default.json880 B
assets/presets/paper/paper-static-mesh-gradient-sea.json869 B
assets/presets/paper/paper-static-mesh-gradient-sunset.json877 B
assets/presets/paper/paper-static-radial-gradient-cross-section.json985 B
assets/presets/paper/paper-static-radial-gradient-default.json960 B
assets/presets/paper/paper-static-radial-gradient-lo-fi.json950 B
assets/presets/paper/paper-static-radial-gradient-radial.json947 B
assets/presets/paper/paper-swirl-007.json749 B
assets/presets/paper/paper-swirl-candy.json794 B
assets/presets/paper/paper-swirl-default.json804 B
assets/presets/paper/paper-swirl-opening.json802 B
assets/presets/paper/paper-voronoi-bubbles.json738 B
assets/presets/paper/paper-voronoi-cells.json736 B
assets/presets/paper/paper-voronoi-default.json757 B
assets/presets/paper/paper-voronoi-lights.json771 B
assets/presets/paper/paper-warp-cauldron-pot.json798 B
assets/presets/paper/paper-warp-default.json796 B
assets/presets/paper/paper-warp-kelp.json769 B
assets/presets/paper/paper-warp-live-ink.json808 B
assets/presets/paper/paper-warp-nectar.json780 B
assets/presets/paper/paper-warp-passion.json783 B
assets/presets/paper/paper-water-abstract.json745 B
assets/presets/paper/paper-water-default.json752 B
assets/presets/paper/paper-water-slow-mo.json745 B
assets/presets/paper/paper-water-streaming.json751 B
assets/presets/paper/paper-waves-default.json734 B
assets/presets/paper/paper-waves-groovy.json733 B
assets/presets/paper/paper-waves-ride-the-wave.json752 B
assets/presets/paper/paper-waves-tangled-up.json750 B
assets/presets/retro-dither.json720 B
assets/presets/smoke-ring-loader.json835 B
assets/presets/warp-transition.json859 B
assets/previews/paper-gallery.webp144.3 KB
assets/previews/preset-reel.webp212.7 KB
assets/refs.manifest.json64.4 KB
evals/trigger_eval.json1.4 KB
examples/paper-gallery/index.html8.5 KB
examples/preset-reel/index.html12.7 KB
LICENSE-paper-shaders11.1 KB
NOTICE762 B
references/brand-mapping.md2.8 KB
references/determinism.md7.0 KB
references/licensing.md1.8 KB
references/shaders.md7.3 KB
scripts/apply-brand.mjs2.5 KB
scripts/build-manifest.mjs2.1 KB
scripts/check-determinism.mjs3.0 KB
scripts/new-project.mjs3.9 KB
scripts/refresh-params.mjs3.0 KB
scripts/validate-presets.mjs4.8 KB
templates/hyperframes/shader-background.html3.0 KB
templates/paper-preset.d.ts2.4 KB
templates/paper-preset.js9.6 KB
templates/remotion/ShaderBackground.tsx2.7 KB

SKILL.md（原文）

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

Paper Shaders for video

Paper Shaders draws designer-tuned WebGL shaders into a canvas. Left alone it animates from the wall clock, which flickers and drifts in a video render. This skill mounts every shader at speed 0 and draws each frame from the timeline, so the same frame always gives the same picture.

Gates

Pin @paper-design/shaders@0.0.82. Use that exact version everywhere. Never use 0.0.47–0.0.76: they are PolyForm Shield, not open source. Bumping the version follows references/licensing.md.
Speed 0, time from the timeline. Mount shaders only through templates/paper-preset.js. Never set speed above 0, and never let scene code read Date.now(), performance.now(), requestAnimationFrame or unseeded Math.random().
No credits here. Shader layers render locally for free. If the video also needs generated footage, voice or music, that is the varg-ai skill: call estimate_cost and wait for the user's approval before any generation.
Rights. Logos and stills fed to image presets must be the user's own or licensed. Do not apply a shader to another company's logo.
Stills, not footage. Paper's image filters take images only. Grade and add grain to footage with HyperFrames media treatments instead.

Workflow

A person approves at each checkpoint (looks, stills, motion) before the next step. Commands run from the skill folder; HF stands for the pinned CLI, npx --yes hyperframes@0.8.206.

Pick the look. Match the request to a preset below or to a shader in references/shaders.md. Say which one and why in one line; that is checkpoint 1.

Scaffold, or add to a project.

node scripts/new-project.mjs ./video                 # new HyperFrames project from the template
node scripts/new-project.mjs ./existing --add        # paper-preset.js and presets/ only

Brand it. Get the palette from the user or their brand kit. Never invent colors. Write the branded preset into the project, then import it in index.html. Image presets take { image: "assets/logo.png" }; serve images from the project.
```
node scripts/apply-brand.mjs assets/presets/brand-mesh.json palette.json --out ./video/presets/brand-mesh.json
node scripts/validate-presets.mjs ./video/presets/brand-mesh.json
```
Stills (checkpoint 2). $HF snapshot ./video --at 0.5,2,4 writes PNGs and a contact sheet. Show them; change one param at a time until approved.
Motion (checkpoint 3). (cd ./video && $HF render --quality draft --output draft.mp4). Tune motion.timeScale for pace.

Final.

node scripts/check-determinism.mjs ./video                        # must print "deterministic"
(cd ./video && $HF check && $HF render --output final.mp4)        # or: npm run check, npm run render

A shader layer in HyperFrames

The host is a timed clip with its own composition id and no GSAP timeline. HyperFrames calls render(seconds) for every frame it captures, in any order.

<div id="bg" class="clip" data-composition-id="bg" data-start="0" data-duration="6"
     data-track-index="0" data-no-timeline data-layout-allow-overflow></div>

<script type="module">
  import * as PS from "https://cdn.jsdelivr.net/npm/@paper-design/shaders@0.0.82/dist/index.js";
  import { paperFrameSource } from "./paper-preset.js";
  import preset from "./presets/god-rays-reveal.json" with { type: "json" };

  const ramp = (t) => 1 - Math.pow(1 - Math.min(t / 1.2, 1), 3);
  window.__hyperframes.registerFrameSource(
    paperFrameSource(PS, document.getElementById("bg"), preset, {
      paramsAt: (t) => ({ intensity: 0.8 * ramp(t), bloom: 0.4 * ramp(t) }), // a reveal, as a pure function of time
    }),
  );
</script>

Register at the top level of a module script, before any await; HyperFrames boots on DOMContentLoaded.
Each shader scene needs its own host. Keep a composition under about 12 shader hosts; Chrome drops WebGL contexts past 16. For more looks in a row, use paperSequenceSource: one host, one context, any number of presets (see examples/paper-gallery).
Text, logos and other DOM elements go on higher tracks and animate with the GSAP timeline as usual.
templates/hyperframes/shader-background.html is a complete composition to start from.

A shader layer in Remotion

npm i @paper-design/shaders@0.0.82
# copy templates/paper-preset.js, templates/paper-preset.d.ts, templates/remotion/ShaderBackground.tsx and the presets

<ShaderBackground preset={brandMesh}>
  <h1>Headline</h1>
</ShaderBackground>
<ShaderBackground preset={liquidMetal} image={staticFile("logo.svg")} />

Render with npx remotion render <id> out.mp4 --gl=angle. Do not use Paper's React components for renders; see references/determinism.md.

Presets

Two sets ship. Nine varg presets in assets/presets/, in varg colors with brand roles. And all 124 of Paper's own presets in assets/presets/paper/ (paper-<shader>-<name>, for example paper-mesh-gradient-beach, paper-warp-passion), with the colors and speeds shown on shaders.paper.design. When the user wants "the look from Paper's site", start from those. All are validated against Paper's documented ranges; five of Paper's own go past the editor's slider ranges and stay as Paper ships them.

Varg preset	Shader	Use
`brand-mesh`	MeshGradient	Background behind titles, product cards and lower thirds
`grain-blob`	GrainGradient	Soft grainy blob behind a quote, a product or a speaker
`retro-dither`	Dithering	Two-ink texture for interstitials and end cards
`warp-transition`	Warp	0.5–1 s full-frame interstitial between scenes
`god-rays-reveal`	GodRays	Rays behind a logo as it appears (ramp with `paramsAt`)
`liquid-metal-sting`	LiquidMetal	1–2 s chrome logo sting; needs a transparent logo
`smoke-ring-loader`	SmokeRing	Ring around a countdown, a loader or a mark
`halftone-overlay`	HalftoneDots	Print look for a still (needs the still)
`paper-finish`	PaperTexture	Paper grain and folds over a still or title card

A preset is JSON: shader, motion (timeScale, frame), optional mount and image notes, roles for brand mapping, and every param. paper-preset.js refuses a preset that leaves a uniform unset rather than render a wrong frame.

Read this when

When	Read
Choosing a shader, writing a new preset, working with footage	`references/shaders.md`
Frames flicker, go black or differ between workers; offline, 4K or Docker renders; Remotion details	`references/determinism.md`
Applying a palette, text contrast over a shader	`references/brand-mapping.md`
Bumping the Paper Shaders version, vendoring it, credits, client work	`references/licensing.md`

Scripts

All run with node or bun, make no network calls of their own, and touch only the paths you give them.

Script	Does
`new-project.mjs <dir> [--example preset-reel\|paper-gallery] [--add]`	Scaffolds a HyperFrames project, or adds `paper-preset.js` and `presets/` to one
`validate-presets.mjs [files]`	Checks presets against the documented params, ranges, enums and color limits
`apply-brand.mjs <preset> <palette>`	Maps a palette onto a preset through its `roles`
`check-determinism.mjs <project> [--at …] [--software]`	Snapshots forwards and backwards in two runs and compares pixels (uses `npx hyperframes`)
`build-manifest.mjs`	Rewrites `assets/refs.manifest.json` after a preset changes
`refresh-params.mjs <llms.txt> <version>`	Rebuilds `assets/paper-shaders.params.json` when the pinned version changes

Output contract

Project: index.html, paper-preset.js, presets/*.json (the branded presets actually used), package.json and hyperframes.json with the HyperFrames version pinned.
Stills: the snapshot folder with its contact-sheet.jpg, shown at checkpoint 2.
Video: renders/<name>.mp4 or the --output path; 1920×1080 at 30 fps unless asked otherwise.
Report: the video path, duration and size; which presets ran with which changed params; and the check-determinism.mjs result.

Examples

examples/paper-gallery/ plays all 124 of Paper's presets, 2 s each, full frame, through one host (--example paper-gallery, about 4 minutes of video).

examples/preset-reel/ shows all nine varg presets, 2.5 s each, at 1920×1080 and 30 fps, with a frame counter that is itself a frame source. Posters and the logo are drawn in code, so it needs no outside media. A contact sheet is in assets/previews/preset-reel.webp.

node scripts/new-project.mjs ./preset-reel --example preset-reel
cd preset-reel && npm run render -- --output preset-reel.mp4   # pinned HyperFrames; about 22 s on an M1 Pro

hyperframes check passes; lint's structure warnings come from keeping the reel in one file to read.

レビュー

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

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

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

同じリポジトリのスキル

accelerate-local-work

無料概要あり

複数の独立したローカル作業を安全性と依存関係を確認して実行計画にまとめ、対応環境では並列化やAppleシリコン向け処理の選択を支援します。

ビルドやテストの独立した処理を並列化したいとき
複数段階の作業計画を安全に実行したいとき
Appleシリコン向け処理の候補を確認したいとき

hashgraph-online/awesome-codex-plugins1,4362026年10月27日更新

ad-creative-testing

無料概要あり

TikTokやMeta広告の勝ちパターンを分解し、異なる切り口のテスト案や予算、評価時期を整理して、数値から継続・修正・停止を判断するスキルです。

勝ち広告を分解して次のテスト案を作りたいとき
広告の本数やテスト予算を決めたいとき
似た広告案の成果が変わらない原因を探したいとき

hashgraph-online/awesome-codex-plugins1,4402026年10月30日更新

add

無料概要あり

将来の読み手が理由を知りたくなる未決定や暫定対応を、技術的負債として登録し、後から項目ごとに整理できるスキルです。

暫定対応を負債として記録したいとき
TODOや未完了作業を管理したいとき
負債の影響箇所や解消条件を残したいとき

hashgraph-online/awesome-codex-plugins1,4402026年10月30日更新

adk-framework-adapters

無料概要あり

LangChain、EINO、AutoGen、AgentScope、CrewAI向けのコード雛形やAPI対応、プロジェクト構成を参照し、バージョン確認を踏まえてAIエージェント開発を支援します。

指定したフレームワークで雛形を作りたいとき
複数のエージェントフレームワークを比較したいとき
ツール定義やメモリ設定の例を参照したいとき

hashgraph-online/awesome-codex-plugins1,4362026年10月26日更新

agent-debug-fixer

無料概要あり

エラーやテスト失敗、画面の異常などを再現して原因を特定し、テストで確認しながら影響を絞った修正を進めるデバッグ用スキルです。

テスト失敗の根本原因を調べたいとき
画面や機能の不具合を小さく修正したいとき
再発防止のテストを先に用意したいとき

hashgraph-online/awesome-codex-plugins1,4402026年10月30日更新

agent-dev-workshop

無料概要あり

対話を通じてAI Agentの要件整理から設計、ツール定義、コード生成、動作確認まで6段階で進め、実行可能なプロジェクトを作ります。

Agentの要件と設計を整理したいとき
実行可能なAgentの試作品を作りたいとき
ツールやPromptの構成を決めたいとき

hashgraph-online/awesome-codex-plugins1,4362026年10月26日更新

hashgraph-online のスキルをすべて見る

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

インストール

コマンドで入れる

npx skills add https://github.com/hashgraph-online/awesome-codex-plugins --skill paper-shaders

ターミナルに貼り付けて実行します（Node.js が必要です）。Claude Code・Codex など、入れる先のエージェントを選べます。

エージェントに頼む

次の Agent Skill をインストールしてください。
https://github.com/hashgraph-online/awesome-codex-plugins/tree/main/plugins/vargHQ/skills/paper-shaders

まず SKILL.md と付属ファイルの中身を確認し、不審な処理（外部への送信、認証情報の読み取りなど）がないことを確かめてから、Claude Code なら ~/.claude/skills/paper-shaders/、Codex なら ~/.agents/skills/paper-shaders/ に配置してください。

この文章をそのまま Claude Code や Codex に送ると、中身を確認してから入れてくれます。

GitHub でソースを見る

リポジトリ: hashgraph-online/awesome-codex-plugins
スター: 1,440
フォーク: 415
カテゴリ: デザイン
ライセンス: Apache-2.0
本文の言語: 英語
最終更新: 2026年10月30日

スキルはエージェントへの指示とスクリプトの集まりです。cccskills は内容の安全性を保証していません。入れる前に中身を確認してください。