Create animated backgrounds, graphic textures, and logo reveals for HyperFrames or Remotion videos with Paper Shaders. Apply brand colors and tested presets, then render frames deterministically so previews and final renders stay consistent.
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.
Run score Not tested
See how to installReview the instructions the agent will receive before you install.
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.
@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.templates/paper-preset.js. Never set speed above 0, and never let scene code read Date.now(), performance.now(), requestAnimationFrame or unseeded Math.random().estimate_cost and wait for the user's approval before any generation.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.
references/shaders.md. Say which one and why in one line; that is checkpoint 1.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
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
$HF snapshot ./video --at 0.5,2,4 writes PNGs and a contact sheet. Show them; change one param at a time until approved.(cd ./video && $HF render --quality draft --output draft.mp4). Tune motion.timeScale for pace.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
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>
await; HyperFrames boots on DOMContentLoaded.paperSequenceSource: one host, one context, any number of presets (see examples/paper-gallery).templates/hyperframes/shader-background.html is a complete composition to start from.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.
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.
| 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 |
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 |
index.html, paper-preset.js, presets/*.json (the branded presets actually used), package.json and hyperframes.json with the HyperFrames version pinned.contact-sheet.jpg, shown at checkpoint 2.renders/<name>.mp4 or the --output path; 1920×1080 at 30 fps unless asked otherwise.check-determinism.mjs result.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.
No reviews yet. Tell others what you thought.
No login needed. Share how it worked for you, ask a question, or note where it did not run.
No comments yet. Be the first to write one.
Plan worthwhile local tasks by checking dependencies, effects, resources, and platform boundaries, then execute the exact approved plan. It can use safe parallel work or suitable Apple-silicon backends when the project exposes them.
Turn a winning TikTok or Meta ad into a structured creative test plan. Identify what made it work, plan distinct concepts, set test budgets and review timing, and use funnel metrics to decide whether to stop, iterate, or scale each ad.
Record deferred engineering decisions and temporary workarounds in a debt registry, with context such as effort, ongoing cost, affected area, and payoff trigger. Entries receive short labels so they can be reviewed or dropped later.
Generate or compare AI agent code for LangChain, EINO, AutoGen, AgentScope, and CrewAI using framework-specific templates, API mappings, conventions, and project structures. Reference files include verification dates to help identify potentially outdated guidance.
Investigate a reproducible bug, test failure, or unexpected page behavior, then make a narrowly scoped fix. The workflow calls for a regression test before changing code, verifies the fix, and reports remaining risks and evidence while avoiding unrelated refactoring or feature work.
Build an AI agent project through six collaborative stages, from requirements and architecture to tools, prompts, code generation, and verification. Start framework-independent, then generate a runnable project for frameworks such as LangChain, EINO, AutoGen, AgentScope, or CrewAI.