mirror of
https://github.com/hanzoai/frames.git
synced 2026-09-24 00:08:03 +00:00
zooqueen
62bbc7766c
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.
2.6 KiB
2.6 KiB
name, description, metadata
| name | description | metadata | ||
|---|---|---|---|---|
| nudge-curve | Slow-fast-slow three-phase group slide — reposition a composed group (word rows, card stacks, lists) to reveal content or make room. No single built-in ease produces it; chain power3.in ramp → linear burst → power4.out tail (10/65/25 distance, tail ≥3× ramp-in in time). |
|
Nudge Curve
Slow-fast-slow repositioning of a composed group (word rows, card stacks, lists) to
reveal content or make room. In-scene group slide — not a seam. No single built-in
ease produces it — power4.inOut smacks to a stop. Chain three tweens on one property:
| Phase | Ease | Distance | Time | Feel |
|---|---|---|---|---|
| 1 ramp-in | power3.in |
~10% | ~20% | barely moves — motion registers, no jolt |
| 2 burst | none (linear) |
~65% | ~18% | ~2× average px/frame — purposeful |
| 3 tail | power4.out |
~25% | ~62% | decaying creep to rest — kills the smack |
Rules
- The tail is ≥3× the ramp-in in TIME. If it still smacks: extend the tail's time (not
distance) or use
power5.out. - Phase 2 stays linear — easing it loses the burst contrast.
- Reveal new content DURING phase 2 — the burst masks its appearance.
- Same ratios vertical; scale distances proportionally, keep the time ratios.
- A cascade arrival usually precedes this slide — see waterfall-entry.md.
JS
Reference values for a 270px leftward slide (0.57s total). Scale distances proportionally for other travels; preserve the TIME ratios; tail ≥3× ramp-in.
var t = /* start after content settles */;
tl.to(".text-row", { x: -30, duration: 0.12, ease: "power3.in" }, t); // ramp-in: 11% dist / 21% time
tl.to(".text-row", { x: -210, duration: 0.10, ease: "none" }, t + 0.12); // burst: 67% dist / 18% time
tl.to(".text-row", { x: -270, duration: 0.35, ease: "power4.out" }, t + 0.22); // tail: 22% dist / 61% time
// vertical: same ratios on y. 150px variant: -15 / -115 / -150 at the same times.
Anti-patterns
| Don't | Instead |
|---|---|
Single ease for a group slide (power4.inOut, slow()) |
The three-phase chain above |
| Nudge tail shorter than 3× the ramp-in | Extend the tail's TIME, not its distance |