hanzoai/frames
2
0
Fork 0
mirror of https://github.com/hanzoai/frames.git synced 2026-09-24 00:08:03 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
main
frames/skills/frames-keyframes/references/keyframe-patterns.md
T
zooqueen 62bbc7766c skills: give each skill the directory its name declares 
Every SKILL.md already declared the new name — name: frames, frames-cli,
frames-core, and so on — but the directories were never moved, so the tree
carried frames-* in content and hyperframes-* on disk. Everything that
resolves a skill by path missed: the core-skill list, the plugin marketplace
pin, and the docs the CLI reads at runtime. Eight tests failed on main because
the files they open do not exist.

The directories now match what the files say they are, and the guide the
claude-design contract reads takes the name that contract already used.
2026-08-13 18:17:24 -07:00

6.5 KiB
Raw Permalink Blame History

Keyframe Mechanism Reference

Use this after SKILL.md when choosing a concrete implementation mechanism. It is a parts shelf, not a style guide. Start with one primary mechanism; add supporting motion only when it clarifies the idea.

Runtime Skeletons

GSAP:

const root = document.querySelector("[data-composition-id]");
const id = root.dataset.compositionId;
const tl = gsap.timeline({ paused: true });
tl.to("<selector>", {
  keyframes: [
    /* derive poses from the scene */
  ],
  ease: "none",
});
window.__timelines = window.__timelines || {};
window.__timelines[id] = tl;

CSS:

.<subject > {
  animation: <name> <duration> <ease> both;
  animation-iteration-count: 1;
}
@keyframes <name> {
  0% {
    transform: <pose-a>;
    opacity: <a>;
  }
  100% {
    transform: <pose-b>;
    opacity: <b>;
  }
}

Anime.js:

const animation = anime.timeline({ autoplay: false });
animation.add({ targets: "<selector>" /* derived channels */ });
window.__hfAnime = window.__hfAnime || [];
window.__hfAnime.push(animation);

Three/WebGL:

const state = { progress: 0 };
tl.to(state, {
  progress: 1,
  duration: <duration>,
  onUpdate: () => {
    // derive camera/object/material values from state.progress
    renderer.render(scene, camera);
  },
});

Mechanisms

Mechanism Solves Keyframe Runtime Verify
Path travel Subject must visibly follow a route path progress, tangent rotation, follower offset, trail opacity GSAP MotionPath or sampled x/y/z strip shot at bends; final snapshot
Stroke draw A line, ring, or outline appears over time dash/draw range, stroke opacity, endpoint state DrawSVG or SVG dash fallback partial mid snapshot; complete final
Shape interpolation One silhouette becomes another source path, middle path, target path, fill/stroke MorphSVG or path tween first/mid/final snapshots
Shared element Same subject changes box or hierarchy source box, target box, x/y, scale, radius, context opacity GSAP Flip or manual FLIP one identity moves; no substitute crossfade
Clip/mask reveal Animated boundary exposes content clip path, mask position/size, edge softness, inner counter-motion CSS, SVG, GSAP, or shader snapshot edge frames and final unclipped state
Ordered repetition Many items enter, leave, or transform in order indexed delay, x/y, scale, opacity, final alignment GSAP stagger, Anime stagger, CSS vars check first/middle/last item timing
Text subdivision Text motion needs readable internal timing line/word/char/band wrappers, y/x, opacity, final fit SplitText, authored spans, Anime splitText strip shot plus final readability snapshot
Surface transform Image/card stretches, crops, or changes shape parent scale/skew/clip, child counter-scale, transform origin GSAP/CSS keyframes no accidental warped final
UI state machine Interface passes through semantic states closed, active, loading, success/error, final GSAP/CSS/Anime snapshots hit states in order
DOM depth HTML elements need 3D separation perspective, z, rotationX/Y, opacity, crossing layer order CSS 3D + GSAP/CSS/Anime angled --shot; overlap snapshot
Camera/object 3D Canvas/WebGL scene moves in depth camera, target, object transform, material opacity Three.js/WebGL + GSAP proxy --ghost; snapshots at proof poses
Shader uniform Pixel effect is driven by scalar progress progress, edge width, noise, color mix, opacity ShaderMaterial/WebGL uniforms --ghost; snapshot 0/edge/mid/final
Instanced system Many 3D objects move as one system instance transforms, scale, color/opacity, camera Three InstancedMesh snapshots, because DOM boxes miss internals
Imported model Model animation must scrub deterministically AnimationMixer.setTime, camera, material, lights Three AnimationMixer drive from Frames time; --ghost

Source Links

Reference in New Issue View Git Blame Copy Permalink