Was ist enthalten

Eine SKILL.md (die Anleitung) + eine Startvorlage. Eine Vorschau:

Velocity-Matched UI Sting

When to use

• A button, card, or list item needs a brief animated confirmation — a checkmark pop, a card settle, a badge burst — and the same fixed animation feels sluggish after a fast flick or jumpy after a slow drag
• A swipe, drag, or fling triggers a state change (archive, delete, send, like) and the follow-through animation should feel like it continues the gesture instead of restarting from zero
• A gesture-driven interface (carousel, pull-to-refresh, drag-to-reorder) needs feedback that preserves the user's sense of momentum rather than snapping to a canned tween
• A product team wants one reusable sting pattern — same shape, same character — that adapts its timing to how the user actually moved, instead of shipping a dozen one-off animations
• Motion feels "off" in user testing but nobody can say why: the animation timing ignores how fast the user was moving when it started

Workflow

1. Name the trigger and the sting (input: the interaction → output: a trigger-to-sting pairing)
   Pick one gesture and one sting. The gesture is the input: tap, swipe, fling, drag-and-release, pull-to-refresh, or drag-to-reorder. The sting is the output: the brief animated flourish that confirms the result — a checkmark drawing in, a card settling into place, a badge bursting, a row sliding away. One gesture, one sting, one result. If the same gesture can produce two different results (swipe left archives, swipe right snoozes), each result gets its own sting so the user can tell them apart at a glance. Write the pairing down before touching any timing: "fling-to-archive → row slides out + checkmark pops."
2. Measure the gesture velocity (input: the trigger gesture → output: a velocity reading in points or pixels per second)
   Capture how fast the user was moving at the moment the gesture completed: the release velocity of a fling, the average velocity over the last stretch of a drag, or zero for a tap (a tap has no velocity, so it gets the baseline timing). Record the realistic range for this gesture — a slow deliberate drag might be 100–300 px/s, a fast fling 1,500–3,000 px/s — by testing with real hands, not by guessing. Clamp the range: anything below the floor reads as the floor, anything above the ceiling reads as the ceiling, so an accidental super-fling never produces a 10-millisecond flash or a two-second crawl. The velocity reading is the single input that drives every timing decision downstream.
3. Map velocity to motion parameters (input: velocity reading → output: duration, easing, and travel distance)
   Convert the velocity into three parameters with one simple rule: faster gesture → shorter duration, snappier easing, longer travel; slower gesture → longer duration, softer easing, shorter travel. A practical mapping: duration = clamp(baseline − velocity × factor, minimum, maximum), with a baseline around 300 ms, a minimum around 120 ms, and a maximum around 450 ms. Easing follows the same direction: fast gestures get a crisp ease-out with a short tail, slow gestures get a gentle ease-in-out with a longer settle. Travel distance scales with velocity too — a fast fling's card travels further before settling than a slow drag's. Write the mapping as a small table (velocity band → duration → easing → travel) so an engineer can implement it without interpretation.
4. Choreograph the sting (input: motion parameters → output: a frame-by-frame sting spec)
   Build the sting in two beats: the carry-through, which continues the gesture's direction and speed for the first stretch, and the settle, which resolves into the final state. The carry-through must never reverse direction or jump backward — a card flung right keeps moving right before it fades or docks. The settle is where the confirmation lands: the checkmark draws in, the badge pops, the card clicks into its slot. Keep the whole sting under 500 ms even at the slowest velocity band, keep the confirming element (checkmark, badge, label) on screen long enough to read (at least 150 ms at full opacity), and never animate more than two properties at once — position plus opacity, or scale plus opacity — so the sting reads as one gesture, not a fireworks show.
5. Test across speeds and ship with a fallback (input: sting spec → output: a verified sting + reduced-motion fallback)
   Test the sting at three speeds — a slow deliberate drag, a normal swipe, and a fast fling — on a real device, at real thumb speed, not in a simulator scrubbing a timeline. Check: does the sting feel like a continuation of the gesture at every speed, does the confirmation read clearly, does anything flash, stutter, or overshoot. Then build the fallback: when the user has reduced-motion enabled, skip the carry-through entirely and show a calm crossfade plus the confirmation element at full opacity — same information, no velocity-driven travel. Ship the velocity mapping, the three-speed test notes, and the fallback together; a sting without a fallback is not shippable.

Vorschau der Startvorlage

Velocity-Matched UI Sting — Spec Template

One gesture, one sting, one result. Fill this in before any animation is built.

Pairing

Gesture: {tap / swipe / fling / drag-and-release / pull-to-refresh / drag-to-reorder} Sting: {checkmark pop / card settle / badge burst / row slide-out} Result: {archive / delete / send / like / reorder / refresh}

Pairing sentence: "{gesture} → {sting} → {result}"

Velocity range

How velocity is measured: {release velocity / average over last stretch / baseline for taps} Floor: {X px/s} — anything slower reads as this Ceiling: {X px/s} — anything faster reads as this Measured with: {real hands on device, notes}

Das Skill-Paket selbst (SKILL.md + Vorlage) ist auf Englisch verfasst.

Das komplette Skill-Paket kaufen — $4.99 Pro — alle 511 Skills