hyperframes-animation
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the…
Skill by coco-research
Install
Works with Claude Code, Claude apps, Codex, Cursor, Gemini CLI, GitHub Copilot, VS Code, OpenCode, Goose, Windsurf. Read the repository before you give any tool access to your data.
npx agentmarket install skill/coco-research-hyperframes-animation
Asks which of your tools to add it to (Claude Code, Codex, Cursor, VS Code, Windsurf, Gemini CLI, Claude Desktop) and shows the change first. See https://agentmart.dev/cli.
Get the weekly diff
The weekly diff: one email a week with new agent tools, notable updates and grade changes, plus security alerts for tools you follow. Double opt-in, one-click unsubscribe.
About
Use cases: design, frontend, backend, productivity
Reviews
Write a reviewNo reviews yet. Installed it? Reviews come from verified installers only. How reviews work
Permissions
What this skill can do and what it asks for, from its SKILL.md and code. Checked Oct 25, 2026.
- Tools
- No tools found
- Secrets
- None asked for
- Install scripts
- None found
- Runs as
- Node.js package
Network hosts it talks to 1
codeload.github.com· found in install command
Files it touches
~/.claude/skills/hyperframes-animation
What's inside
- Skill name
hyperframes-animation- Description
- All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
- License
- NOASSERTION
- Instructions
- 81 lines in SKILL.md · view on GitHub
Before installing
- Ships executable scripts
Files (121)
- SKILL.md
- animate-text.md · adapters/
- animejs.md · adapters/
- css-animations.md · adapters/
- gsap-easing-and-stagger.md · adapters/
- gsap-timeline-and-labels.md · adapters/
- gsap-transforms-and-perf.md · adapters/
- gsap.md · adapters/
- html-in-canvas-patterns.md · adapters/
- lottie.md · adapters/
- three.md · adapters/
- typegpu.md · adapters/
- waapi.md · adapters/
- blueprints-index.md
- agent-progress-theater.md · blueprints/
- camera-journey.md · blueprints/
- comparison-split.md · blueprints/
- constellation-hub.md · blueprints/
- cta-morph-press.md · blueprints/
- cursor-ui-demo.md · blueprints/
- dataviz-countup.md · blueprints/
- device-surface-showcase.md · blueprints/
- fixed-anchor-cycle.md · blueprints/
- grid-card-assemble.md · blueprints/
- kinetic-type-beats.md · blueprints/
- logo-assemble-lockup.md · blueprints/
- overwhelm-surround.md · blueprints/
- panel-edit-live-sync.md · blueprints/
- prompt-type-submit-generate.md · blueprints/
- spatial-pan-stations.md · blueprints/
- ticker-takeover.md · blueprints/
- titlecard-reveal.md · blueprints/
- transcript-scroll-artifact-reveal.md · blueprints/
- typewriter-reveal.md · blueprints/
- video-text-pivot.md · blueprints/
- zoom-out-workspace-reveal.md · blueprints/
- brand-reveal-assemble-zoom.html · examples/
- comparison-split-cards.html · examples/
- concept-demo-decode-pan.html · examples/
- cta-morph-press.html · examples/
- cta-orbit-collapse.html · examples/
- demo-page-scroll-spotlight.html · examples/
- hook-counter-burst.html · examples/
- messaging-multi-phrase.html · examples/
- metric-video-text-pivot.html · examples/
- problem-mockup-overwhelm.html · examples/
- proof-logo-chain.html · examples/
- takeover-ticker-displace.html · examples/
- workflow-approve-press.html · examples/
- rules-index.md
- 3d-camera-flight.md · rules/
- 3d-page-scroll.md · rules/
- 3d-text-depth-layers.md · rules/
- ai-tracking-box.md · rules/
- ambient-glow-bloom.md · rules/
- anchored-layout-expand.md · rules/
- asr-keyword-glow.md · rules/
- avatar-cloud-network.md · rules/
- camera-cursor-tracking.md · rules/
- card-morph-anchor.md · rules/
- …and 61 more
The license isn't open source, so the instructions aren't shown here. Read SKILL.md on GitHub
More from coco-research/coco
- 0.817score
visual-explainer
nicobailon
Generate self-contained HTML visual explanations for systems, code changes, plans, data, and technical concepts.
SkillAFreshness: A★ 784Claude Code +9 - 0.641score
reverse-engineering
coco-research
Provides reverse engineering techniques.
SkillAFreshness: A★ 784Claude Code - 0.641score
dotnet-reverse
coco-research
.NET / C# 二进制逆向。当目标是 .NET assembly(PE 头含 CLR、.exe/.dll 托管程序)、C# 编译产物(含 NativeAOT)、红队 Sharp* 工具(Rubeus / SharpHound / SharpHound 等)、.NET 混淆程序(ConfuserEx /…
SkillAFreshness: A★ 784Claude Code - 0.636score
hyperframes-registry
coco-research
Install, discover, and wire registry blocks and components into HyperFrames compositions.
SkillAFreshness: A★ 784Claude Code +9 - 0.636score
figma
coco-research
Import Figma content into a HyperFrames composition — rendered assets, brand tokens, components, storyboard sections → reconstructed motion (frames read as…
SkillAFreshness: A★ 784Claude Code +9 - 0.636score
hyperframes
coco-research
Mandatory entry point: read this first for any request to make, create, edit, animate, or render a video, animation, or motion graphic, including a promo…
SkillAFreshness: A★ 784Claude Code +9 - 0.636score
hyperframes-creative
coco-research
Non-animation creative direction for HyperFrames videos.
SkillAFreshness: A★ 784Claude Code +9 - 0.636score
prd-generator
coco-research
Generate comprehensive Product Requirements Documents (PRDs) for product managers.
SkillAFreshness: A★ 784Claude Code +9 - 0.636score
hyperframes-core
coco-research
The HyperFrames composition contract — build one renderable project.
SkillAFreshness: A★ 784Claude Code +9 - 0.636score
c4-architecture
coco-research
Generate architecture documentation using C4 model Mermaid diagrams.
SkillAFreshness: A★ 784Claude Code +9 - 0.636score
brain
coco-research
Use when the user says brain, project knowledge, what do we know about, open tasks, or recent decisions, or runs /brain or /brain-update.
SkillAFreshness: A★ 784Claude Code +9 - 0.636score
coco-ads
coco-research
Turn the project you just shipped into a short, polished, shareable launch video (an "ad") using HyperFrames.
SkillAFreshness: A★ 784Claude Code +9
Signals
- Stars
- 784
- Forks
- 13
- Open issues
- 55
- Last commit (this folder)
- Jul 31, 2026 (2 months ago)
- Last release
- Oct 23, 2026 (4 days ago)
From GitHub (fetched Oct 24, 2026).
Details
- License
- NOASSERTION
- Repository
- github.com/coco-research/coco
- Website
- cocoresearch.org/coco/
- First seen
- Oct 24, 2026
- Last checked
- Oct 24, 2026
- Source
- GitHubgithub-graphql
Same skill elsewhere
Copies of this SKILL.md published by others; search shows only one of them.
- 0.339score
hyperframes-animation
sprtony
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the…
SkillAFreshness: AClaude Code +9 - 0.328score
hyperframes-animation
BaoAL31
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the…
SkillBFreshness: B★ 1Claude Code +9 - 0.285score
hyperframes-animation
johan-Rm
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the…
SkillCFreshness: CClaude Code +9
More from coco-research
- 0.641score
reverse-engineering
coco-research
Provides reverse engineering techniques.
SkillAFreshness: A★ 784Claude Code - 0.641score
dotnet-reverse
coco-research
.NET / C# 二进制逆向。当目标是 .NET assembly(PE 头含 CLR、.exe/.dll 托管程序)、C# 编译产物(含 NativeAOT)、红队 Sharp* 工具(Rubeus / SharpHound / SharpHound 等)、.NET 混淆程序(ConfuserEx /…
SkillAFreshness: A★ 784Claude Code - 0.636score
brain
coco-research
Use when the user says brain, project knowledge, what do we know about, open tasks, or recent decisions, or runs /brain or /brain-update.
SkillAFreshness: A★ 784Claude Code +9 - 0.636score
c4-architecture
coco-research
Generate architecture documentation using C4 model Mermaid diagrams.
SkillAFreshness: A★ 784Claude Code +9 - 0.636score
prd-generator
coco-research
Generate comprehensive Product Requirements Documents (PRDs) for product managers.
SkillAFreshness: A★ 784Claude Code +9 - 0.636score
coco-ads
coco-research
Turn the project you just shipped into a short, polished, shareable launch video (an "ad") using HyperFrames.
SkillAFreshness: A★ 784Claude Code +9
Cite this page
hyperframes-animation skill. Agent Mart. https://agentmart.dev/skills/coco-research-hyperframes-animation (last updated 2026-10-24)