motion-frames

A collection of looping CSS animation patterns for a webpage hero section, the prominent visual area at the top of a page. It combines rotating text, an animated globe or geometric shape, a timer, and floating labels.

In plain words
What is it for?
Use it to create a cinematic hero animation or title frame with pure CSS motion, a neon accent, and optional JavaScript for the timer.
Why use it?
It provides a reusable visual concept for adding continuous motion to a page introduction or video opening.

Skill for Claude CodeCodex

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

agentmods
npx agentmods add skills/nexu-io/html-anything/motion-frames
Any agent
npx skills add nexu-io/html-anything --skill motion-frames
Clone the repo
git clone --depth 1 https://github.com/nexu-io/html-anything

Made for: Claude Code, Codex.

Per session 27 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 210 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. Scan, not verified.
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5 $0.00027 $0.00210
Opus 5 $0.00014 $0.00105
Sonnet 5 $0.00005 $0.00042
Haiku 4.5 $0.00003 $0.00021

Measured 3d ago against content hash bd0fa6fda4e2, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

motion-frames scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 3d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

next/src/lib/templates/skills/motion-frames/SKILL.md · 24 lines

What it actually says

【模板: Motion 帧 / Hero Loop】 【意图】一帧带循环动效的 hero, 可作为视频片头或落地页大图。 【布局】

  • Rotating type ring (SVG + transform)
  • Animated globe / 抽象几何
  • Ticking timer (mono 字体, JS 可有可无)
  • Parallax labels 浮动 【设计细节】
  • 纯 CSS 动效, 流畅可循环
  • 电影感调色 + 1 个霓虹 accent
Files

What ships with it

1 file beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 3d ago First seen · 24 lines · 27 tokens per session scan A bd0fa6fda4e2

Subscribe to this mod's changes

motion-frames is a skill published in the GitHub repository nexu-io/html-anything (8,598 stars, last pushed 10d ago), licensed Apache-2.0. It adds 27 tokens to every session and 210 once invoked, about $0.0001 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.

Related

Other skills, from other repositories

contact-widget

Self-contained floating chat widget with welcome screen, social links, meeting button, and message input. Single HTML file, zero dependencies.

nexu-io/open-design · 29 tokens

magazine-web-ppt

For marketing and gtm work: bind launches, campaigns, events, and brand plans to growth and pipeline outcomes. Built around the core query "annual-marketing-plan", with GTM strategy lead judgment, buyer-ready proof, and this outcome: approve launch plan, campaign budget, or GTM motion.

nexu-io/open-design · 67 tokens

od-contribute

One-click contribution flow for OpenDesign (nexu-io/open-design) — even for non-coders. Pick one of four cards (ship a Skill or Design System you made with OD; translate docs; fix a typo / write a blog; report a bug), the agent validates and opens a PR (or issue) for you. Trigger words contribute to open design, ship…

nexu-io/open-design · 104 tokens

clinical-case-report

Structured medical case presentation for clinical rounds, conferences, and documentation. Generates SOAP-format or narrative case reports with physiologically accurate vitals, labs, and evidence-based plans. Use when the brief mentions "case report", "case presentation", "SOAP note", "clinical case", "ward rounds"…

nexu-io/open-design · 73 tokens

critique

Run a 5-dimension expert design review on any HTML artifact in the project — Philosophy / Visual hierarchy / Detail / Functionality / Innovation, each scored 0–10. Outputs a single self-contained HTML report with a radar chart, evidence-backed scores, and three lists: Keep / Fix / Quick-wins. Use when the brief asks…

nexu-io/open-design · 107 tokens

github-dashboard

GitHub repository analytics dashboard — stars, forks, contributors, issues, pull requests, recent activity, and top contributors. Use when the brief asks for a GitHub repo dashboard, open-source growth report, repository health page, or GitHub analytics view.

nexu-io/open-design · 55 tokens