Hubbestaiskill.com

Home / All Skills / Content & Media Creation / motion-background

Content & Media Creation · iart-ai/motion-design-skills

motion-background

This skill should be used when the user asks to "add an animated background", "build a mesh/gradient background", "make an aurora/shader background", "add constellation/particle background", "animated hero background", or "a subtle looping background behind content". Covers CSS mesh gradients, GLSL shader gradients (Three.js), canvas particle constellations, seamless loops, and reduced-motion/performance handling — fully self-contained.

L4 High-Privilege · Graded auth & full auditV1 Commit-PinnedExecute CommandNetwork AccessWrite FileDual-pass Audit

Author iart-aiGitHub iart-ai/motion-design-skills ↗Stars 28License MIT（仓库根 LICENSE：Copyright (c) 2026 iart.ai；.claude-plugin marketplace.json/plugin.json 同声明）Commit 3c129f769d

Control levels describe skill capabilities and suggested control measures; they do not represent quality or safety certifications, nor do they dictate usability. Usage decisions rest entirely with users and administrators. Different agent hosts apply varying constraints; do not assume hosts provide automatic protection. Third-party skill copyrights belong to their original authors. Use at your own risk.

1How It Works & Mechanism

A "batteries-included runnable code" skill: SKILL.md inlines full, runnable implementations for three technologies (CSS gradient keyframes, GLSL fragment shaders via Three.js, and 2D canvas particles). Agents can copy them directly into deliverables—capabilities stem from inlined code rather than external services.

skills/motion-background/SKILL.md

This skill is self-contained: every technique below ships its own runnable code — CSS, GLSL, and canvas — with no external dependencies beyond Three.js where a shader is involved.

Design rule: 'Default to CSS if a gradient suffices'—cost tiering (CSS free < canvas CPU < shader GPU) guides selection; code blocks are core assets.

Seamless looping is a rigorous technical requirement: CSS relies on matching start and end keyframes; canvas/JS uses loop phase=(t%PERIOD)/PERIOD×2π to drive sin/cos for precise end-of-period rewinding; shaders map noise scrolling to a closed circle in noise space.

skills/motion-background/SKILL.md

Any motion built only from `sin`/`cos` of `phase` (or integer multiples) loops seamlessly.

The reference aurora trick using uPhase around a circle (vec2(cos(uPhase), sin(uPhase)) returning to the origin at 2π) turns "visually seamless" into deterministic mathematics rather than trial and error.

Performance and accessibility are codified disciplines: devicePixelRatio is capped at 2, O(n²) particle connections switch to spatial hashing above 120 points, prefers-reduced-motion falls back to static frames, and visibilitychange + IntersectionObserver pause rendering when offscreen or hidden.

skills/motion-background/SKILL.md

honor `prefers-reduced-motion`, and pause when offscreen or the tab is hidden.

Section 5 of the 5 core techniques in SKILL.md and the attachLifecycle controller in reference unify running state toggles; 'render one static frame, then stop' ensures reduced-motion users still get a static background.

Delivery contract = single-file HTML: background + sample foreground text + single animation driver + deterministic frame-capture ?t=N freeze harness are fully inlined and ready to open immediately.

skills/motion-background/SKILL.md

A motion background ships as **one `.html` file that opens directly in a browser** — markup, the background, and (for shader/canvas) Three.js or canvas JS from CDN, all inline.

The freeze harness uses the URL ?t=N parameter to pin CSS animation-delay/play-state or shader uTime to a specific timestamp, enabling deterministic verification via headless screenshots.

Built-in verification loop: the repo's scripts/ directory provides seek-shot.sh (npx playwright capturing ?t=N frames) and contact-sheet.sh (ffmpeg stitching contact sheets). SKILL.md mandates start/mid/end three-frame captures to inspect fidelity, artifacts, and loop seams.

skills/motion-background/SKILL.md

**Packaged helper** (`scripts/`): `scripts/seek-shot.sh anim.html 0 1.5 3` freezes the `?t=N` harness and screenshots each moment; `scripts/contact-sheet.sh sheet.png frame-*.png` tiles them for one-glance review. See `scripts/README.md`.

This is the repo's most engineered skill: delivery does not rely on visual guesswork, but on deterministic frame capture + contact sheet inspection; scripts/ resides at the repo root (shared repo-level asset, not inside the skill folder).

Deep-dive implementations live in references/background-recipes.md: multi-blob CSS mesh (blur + screen blending), full aurora with mouse parallax and true seamless loops, grid-optimized constellations with mouse repulsion, closed-path noise scrolling, and a unified lifecycle manager.

skills/motion-background/SKILL.md

references/background-recipes.md — fuller drop-in implementations: a richer multi-blob CSS mesh with blur, the complete Three.js aurora shader with mouse parallax and a true seamless-loop time wrap

SKILL.md provides the "good-enough version" while recipes provides the "production-ready version" (including exportable functions and cleanup routines), offering a two-tier depth design.

2Core Capabilities

01CSS mesh gradient backgrounds (zero JS, background-position keyframes, seamless loops, reduced-motion animation disabling)

02GLSL aurora/noise gradient shaders (Three.js full-screen quad, fbm value noise, uTime-driven)

03Canvas particle constellations (distance connecting lines, boundary bouncing, O(n²) to spatial hashing optimization guidance)

04Deterministic seamless loops: phase rewinding + periodic function driving + integer noise grid scrolling

05Power-saving for reduced-motion/offscreen/hidden tabs: static frame fallback + IntersectionObserver/visibilitychange pausing

06Performance caps: devicePixelRatio min(dpr, 2), particle count scaled down on mobile

07Delivery verification: single-file HTML + ?t=N freeze harness + seek-shot/contact-sheet frame-capture contact sheet loop

08Production-ready reference recipes: parallax aurora, mouse-repulsion constellations, lifecycle managers, noise flow loops

3External Dependencies

Kind	Dependency / Endpoint
package	three.js（交付 HTML 运行时依赖；仅 shader 路线，CDN 或 bundler 引入）
cli	npx playwright screenshot（验证闭环；seek-shot.sh 内部调用，首次运行自动拉取 Chromium）
cli	ffmpeg（contact-sheet.sh 依赖，本地拼图）
cli	仓库 scripts/seek-shot.sh、contact-sheet.sh（POSIX bash 本地工具）

4Recommended Governance & Evidence

Suggested Controls for Safe Operation

For Agent Runtime

Graded/per-use authorization, sandbox recommended

For Administrators

Approval workflow, rollback support, full audit

Evidence & Triggers (File Paths & Excerpts)

scripts/: Execute local scripts or commands: SKILL.md instructs the agent to run repository scripts: `scripts/seek-shot.sh anim.html <t...>` (internally runs npx playwright)
网络端点: Declare external network access: The skill execution path makes no outbound network requests (screenshots target local file:// HTML); Playwright may download Chromium on first run (seek-shot)
本地工作目录: File read/write and artifact output: Writes deliverable bg.html to the working directory (single-file output contract)

Audit Notes: Behavior = local read/write + local CLI: The agent generates a single-file HTML based on inlined code (local write) and validates it using repository bash scripts (Playwright capturing local file://, FFmpeg stitching contact sheets); no credential reading, no proactive external network egress, and no destructive operations. Note: 1) Delivered shader pages load Three.js via CDN when opened—supply chain dependencies fall on the client browser side and should be pinned to fixed versions; 2) Playwright downloads Chromium binaries on its first run (one-time, local); 3) If only the skill directory is installed without the repository root scripts/, references to seek-shot/contact-sheet will break (installation must include the full repository). Does not meet yellow (no regular outbound network) or orange criteria.

5Second-Pass Verification

[ok] 脚本引用真实性 — SKILL.md 引用的 scripts/seek-shot.sh、contact-sheet.sh、scripts/README.md 在仓库根存在；seek-shot.sh 输出 frame-<t>.png 与 SKILL.md 用法一致。
[ok] 『no external dependencies beyond Three.js』反查 — SKILL.md/recipes 未出现其他 import/外部 URL 请求（CDN 仅以文字提及 three.js）；CSS/canvas 路线零依赖属实。
[ok] 无凭证/无隐藏网络调用 — token/curl/exec 类扫描零命中；playwright 只访问 file:// 本地页；唯一网络相关=playwright 首跑下载 Chromium（一次性工具安装）与交付页打开时 CDN 加载。
[discrepancy] 打包粒度风险（scripts/ 不在 skill 目录） — skill 自述依赖的验证脚本位于仓库根 scripts/；若通过 skills.sh 只安装单个 skill 目录（不含 repo 根），scripts/ 引用与 .claude-plugin 打包关系悬空——从源码无法确认各安装方式的粒度，展示层应提示按整 repo/pack 安装。
[ok] 代码正确性抽查（无缝循环/暂停逻辑） — phase 回卷公式、首尾关键帧一致、uPhase=2π 圆环回原点、IntersectionObserver running 逻辑在 SKILL.md 与 recipes 中一致；未发现逻辑矛盾。

6Verdict & Scenarios

Truly self-contained: runnable code for all three technologies is inlined in SKILL.md for agents to copy-paste directly, with no reliance on external generation services

Seamless looping implemented via deterministic math (phase rewinding, identical start/end frames, noise circles) rather than trial and error

Performance, accessibility, and battery disciplines enforced at the code level (dpr ≤ 2, reduced-motion static frames, offscreen pause)

Engineered verification loop: ?t=N freeze + Playwright capture + FFmpeg contact sheet allows headless reproducible checks

Best for: Ideal for agents or frontend developers creating subtle looping animated backgrounds for landing pages, login screens, or empty states who need copy-ready code across CSS/canvas/shader tiers and verification workflows; especially suited for production sites requiring reduced-motion and battery efficiency.

Not for: Not suitable for workflows requiring external asset generation services (this is a purely local code approach); not suitable for headless environments lacking a browser/Playwright if full verification is required (can deliver without verifying); not suitable for complex 3D scenes or model backgrounds (this skill covers only full-screen quad shaders and 2D particles).

Install Agent-Ready

① Verified Mirror 2026-09-09

Option A · Direct DownloadDownload motion-background.tar.gz

sha256: 6e74dc92e650a613…

Option B · Copy Guide for Agent

Agents automatically download and verify mirrors from this JSON guide.

② Upstream GitHub

GitHub Repo ↗

Pinned to commit 3c129f769d.