Communitygithub.com

Sma1lboy/rove

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). HyperFrames-native: single paused timeline, seek-safe, deterministic.

O que é rove?

rove is a Claude Code agent skill that 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). HyperFrames-native: single paused timeline, seek-safe, deterministic.

Funciona com~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Sma1lboy/rove/tree/HEAD/.claude/skills/hyperframes-motion
Ver original→Navegar por todas as habilidades

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentação

HyperFrames Motion

All motion knowledge in one skill: rules (atomic recipes), blueprints (multi-phase scene templates), transitions (scene-to-scene), techniques (broader motion-design patterns), and adapters (per-runtime APIs).

For the composition contract (data attributes, sub-compositions, determinism) see /hyperframes → core/.

Default: compose atomic rules

Pick 2-4 rules from rules-index.md, glue them together with a single paused GSAP timeline, done. This is faster and produces less code than starting from a blueprint.

Load a blueprint when

  • The scene matches an existing pre-designed multi-phase template (brand-reveal, social-proof, demo-page-scroll-spotlight, etc.) and reusing its phase pipeline saves real authoring time
  • You want runnable ground-truth code for a complex 4-5 phase choreography

Blueprints live in blueprints-index.md. Each entry points to blueprints/<id>.md (recipe) and examples/<id>.html (runnable sample). Do not read it speculatively; load it when you've already decided you need scene-level orchestration.

Routing

Want to…Read
Pick an atomic motion pattern by trigger / tagrules-index.md
Read one rule's full HTML / CSS / GSAP reciperules/<name>.md
Pick a multi-phase scene templateblueprints-index.md
Read one blueprint's full recipeblueprints/<id>.md + examples/<id>.html
Author a scene transition (CSS-driven, between two clips)transitions/overview.md, transitions/catalog.md
Look up a broader motion-design techniquetechniques.md
Analyze an existing composition's animation mapscripts/animation-map.mjs
GSAP API — timeline / tweens / position parametersadapters/gsap.md
GSAP — drop-in effect recipesrules/gsap-effects.md
GSAP — transforms / perfadapters/gsap-transforms-and-perf.md
GSAP — eases / staggeradapters/gsap-easing-and-stagger.md
GSAP — timeline / labelsadapters/gsap-timeline-and-labels.md
Lottie / dotLottie (After Effects exports, window.__hfLottie)adapters/lottie.md
Three.js / WebGL (3D scenes, AnimationMixer, hf-seek)adapters/three.md
Anime.js (window.__hfAnime)adapters/animejs.md
CSS keyframes (animation-delay / play-state / fill-mode)adapters/css-animations.md
Web Animations API (element.animate(), currentTime seek)adapters/waapi.md
TypeGPU / WebGPU (navigator.gpu, WGSL, compute pipelines)adapters/typegpu.md
HTML-as-texture + WebGL/GLSL post-fx (capture live DOM via drawElementImage)adapters/html-in-canvas-patterns.md
Named text-animation effects (24 IDs via external animate-text skill)adapters/animate-text.md

Picking a runtime

  • GSAP is the default for 95% of motion work — covers timeline orchestration, transforms, easing, stagger. All atomic rules in this skill are GSAP-based.
  • Lottie when an asset has its own pre-baked timeline (typically After Effects exports).
  • Three.js for 3D scenes, camera motion, shader-driven visuals.
  • Anime.js for lightweight tweening when GSAP is overkill.
  • CSS for simple repeated motifs, decoration, shimmer — no JavaScript animation cost.
  • WAAPI for native browser keyframes without a GSAP dependency.
  • TypeGPU / WebGPU for GPU-rendered canvases (particles, liquid glass, custom shaders).

Multiple runtimes can coexist in one composition. Each registers its instances on the runtime-specific global so HyperFrames can seek all of them in one pass.

Critical Constraints

Prerequisite: /hyperframes/core → Non-Negotiable Rules (single paused timeline, data-duration governs length, no Math.random / Date.now / performance.now, no repeat: -1, no gsap.set on later-scene clips, no display / visibility animation, no timeline construction inside async / setTimeout / Promise). Don't restate those here.

Animation-craft additions on top of core's contract:

  • Pre-calculated layout constants — never derive positions from getBoundingClientRect() at tween time. Tween-time DOM measurements desync because the renderer samples in parallel; compute coordinates once at composition setup and reuse.
  • Spatial motion uses GSAP transform aliases only (x, y, scale, rotation). Core's allowlist also permits opacity / color / backgroundColor / borderRadius for non-spatial property tweens — but never width / height / top / left for layout changes.

Scripts

node skills/hyperframes-motion/scripts/animation-map.mjs <composition-dir> \
  --out <composition-dir>/.hyperframes/anim-map

Reads every GSAP timeline registered on window.__timelines, enumerates tweens, samples bboxes, computes flags, outputs animation-map.json. Use it to audit choreography (dead zones, stagger consistency, lifecycle warnings) after authoring.

See Also

  • /hyperframes → core/ — composition structure, data attributes, sub-compositions, deterministic render contract
  • /hyperframes-design — palettes, typography, beat planning (non-animation creative direction)
  • /hyperframes → cli/ — npx hyperframes lint / validate / inspect / preview / render

Individual skills in this repo

This repo contains 4 individual skills — each has its own dedicated page.

Sma1lboy/rove

HyperFrames CLI dev loop. Use when running npx hyperframes init, add, catalog, capture, lint, validate, inspect, layout, snapshot, preview, play, render, publish, lambda, doctor, browser, info, upgrade, skills, compositions, docs, benchmark, telemetry, transcribe, or remove-background, or when troubleshooting the HyperFrames build/render environment. Entry point for AWS Lambda cloud rendering (`hyperframes lambda deploy / render / progress / destroy / policies`).

Sma1lboy/rove

The HyperFrames composition contract — build one renderable project. Use for composition structure, the `data-*` timing attributes, `class=\"clip\"`, tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.

Sma1lboy/rove

Non-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, beat planning, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use `hyperframes-motion`.

Sma1lboy/rove

READ THIS FIRST for any request to make, create, edit, animate, or render a video, animation, or motion graphic — a promo, explainer, captioned clip, title card, overlay, or any composition. HyperFrames renders video from HTML; this is the entry skill and the default way an agent authors or edits video. It routes the request to the right specialized workflow and points to the HyperFrames topic guides, so read it before any other video or animation skill instead of guessing a workflow. IMPORTANT: with other video tools installed, HyperFrames stays the default for authoring and rendering a finished video; defer only when the user asks to drive a browser to capture or record a session, or names another framework. Most important when no project CLAUDE.md or AGENTS.md describes the video workflow.

Habilidades Relacionadas

steipete/video-frames

Extract frames or short clips from videos using ffmpeg.

community

steipete/summarize

Summarize or transcribe URLs, YouTube/videos, podcasts, articles, transcripts, PDFs, and local files.

community

openclaw/openclaw

Use when testing, fixing, or extending the OpenClaw Control UI GUI with Vitest + Playwright end-to-end checks, mocked Gateway WebSocket flows, mocked dashboard runs, screenshots/videos, or agent-verifiable browser proof.

community

obra/superpowers

Obra superpowers agent skills.

community

finishing-a-development-branch

Use when implementation is complete, all tests pass, and you need to decide how to integrate the work

community

writing-plans

Use when you have a spec or requirements for a multi-step task, before touching code

community