From 60809697b5212189fd0363a66d2b54277ef08e57 Mon Sep 17 00:00:00 2001 From: Nicholai Date: Tue, 24 Feb 2026 17:52:12 -0700 Subject: [PATCH] 2026-02-25T00-52-12_auto_memory/memories.db-wal --- .skill-lock.json | 9 ++++ memory/memories.db-shm | Bin 32768 -> 32768 bytes memory/memories.db-wal | Bin 4972872 -> 4972872 bytes skills/mobile-touch/SKILL.md | 88 +++++++++++++++++++++++++++++++++++ 4 files changed, 97 insertions(+) create mode 100644 skills/mobile-touch/SKILL.md diff --git a/.skill-lock.json b/.skill-lock.json index cbbc8fd4d..5ca394efd 100644 --- a/.skill-lock.json +++ b/.skill-lock.json @@ -162,6 +162,15 @@ "skillFolderHash": "05bb4c1a9463fe22342c09422760c5526d2dac06", "installedAt": "2026-02-25T00:51:58.400Z", "updatedAt": "2026-02-25T00:51:58.400Z" + }, + "mobile-touch": { + "source": "dylantarre/animation-principles", + "sourceType": "github", + "sourceUrl": "https://github.com/dylantarre/animation-principles.git", + "skillPath": "skills/01-by-domain/mobile-touch/SKILL.md", + "skillFolderHash": "9203ae12266a3e314804dcfd26dae33abb495b51", + "installedAt": "2026-02-25T00:52:09.969Z", + "updatedAt": "2026-02-25T00:52:09.969Z" } }, "dismissed": { diff --git a/memory/memories.db-shm b/memory/memories.db-shm index 96ccbe086a7b8f461964e7a1a89319311ae91d6d..7c9e84324c4d6eb2b5747a64540601d37e4a5e56 100644 GIT binary patch delta 670 zcmb7>Urfzm7{{OQ?|6PJ+sWE&ZKk#^j0=XK*p<(WbgqY)};ogIt4VJQrH6Hm7IsK3vCZq2J1B z7VDIZUSn(pP9qr)MO>~HXT@<9nh;U0^hw&EHOt0c97ekgKdRd76mvgrpcgunz23&# za2$6>v+}ifNwvW)9E29hrQA6Myb~ADEi_*z<_?10PzVXmQ)ziK%>%fJH&DJjr@0Fk z@f7M)-T?b?0{6u8Lv`ja;{eW}OUPl?p%s15UWa9J5G{By5}R7kYnbIYg$K~~!Vd6W zT*b@S-POQaJ9}^lx5OCM?dzNd`_O<6!9~hhRL0xUh_KK!9k5zLHFpn7Vf zxAc=LaSo4T8zxSsMheqs8m3xY!z=kDqFkBe=#)*f$8Z@=;=bSv6?6r84=y7rv{L!p zMO=!bxFa-2CwYE>t8oR-1jDMoWG?T(c{~wvXtz(^+QL~p68xYoe=~S1j-gX)q!Jv#ZP6O^)bf7g4+nqzOaK4? delta 472 zcmZo@U}|V!s+V}A%K!q(+zbqi3=9JKK;pPO1H*^jDe)7(PiZWFð-B_%ce=TrZ0 z)fTTvRSz~CNPx`!j|8CN8|#mI+T=VJ zx6Mj{L5!0hu*+;#a=XC93eqS)d81F{tFCmTa6!!m~B3@?Co L%-yU}dxHr8Ta&SJ diff --git a/memory/memories.db-wal b/memory/memories.db-wal index fd67c79fa6fa87231fff2b6767d6790e977672fa..236de7d23dd94e1be216c5b146a964d6e336e873 100644 GIT binary patch delta 1490 zcmY+?dr(wW7y$5l_T{;|+}-7+z{)co%d-VmMOa}Cby<)C3{5713_~RqDA9~j9>)ih zBWBR45fBmSj~HZI$K#l$=A>(BiRFYf0ZNKWK57_3n6z(cjO#t~o4NO#?>pz*?;OY1 zMc8H-Wm1ONv$P{h@rTxYrJ@ z;578?YEuL?teKfgtHOg_gPsp~o6{JSQtqwE1YA2<%E>%GdN40gQc38IVxMXO2Et#R z9F^A&(i9V(i*Fvz?bxY}yThtXxL>M@OEk=hNr<1FCtt$WnsKO$N7vJ+H`#(cFfc~5gLm@wDe*<@acXzLd5GMbgoTiM>x=mG(i(Q1=2~cHH{=COh+mGu*14HSt>4go>THu9Ir%uUCgonpgjP;K!Po`OV?PAHgGc=Gyy+e~7MkZN%iDto3(Vx#7r%ISF1o>Zt z>Ro(RxecEWmls%$4m+y}4}viV>-5rPOK46$Z*i7AU)Xsy!x#7ge-HoyK@fNW1cML| z3c`RMgo6kW38FwWhygDG1BeB2ARZXOEHE3)0SRC(NCZj11m=NckOItLK6nYFf(2k9 SSOhE}4Ol@syPAy delta 1417 zcmY+@dr(wW7y$5l@9x6c$KAb%Z7S^EyMll#k6l3CZ$%B#C}gyJ5o)6eL?)tw%H!zL z2uZV3S5p&b)IYRI0^%DKb;a_55opd>s0e93nj#-lIfIYBMNm8E{$|cO_dAd8+_`7k z4{>KuIb|tF6;w%8)Ps6bLe*45wNyuWs;34jP%k=)dehPL6>6lf(lK-_9oOu0IL0XY zGFVD(>8m&I`X_U8MBDWqadlP8e3KwZc~82w367--9wS&)C8Mh3LZ4Np!(C-tzNu2a z>!k~pSC{%0%e($kKi~>nvi&3NN?0dE7V;$QQddzvUF!q3GShxfVvh}twa2_O8+xlu zd4#n7cA&bW_T)6k-7N}2Q0JZVYtAAAmpz$JWe1M1rFc8D=JH+=R_ z1%HC;8XlgE{bDI{3cY3cFo3ezH8hOhBtDS9zqX(=$Dn6rUN9R+=q2(G)08=0rglVoq zdxJGy?c8dOQ+&$!Ie)N<9v(_o#}Zh6*y>P`DN&DV%cY>(P35)$-g!LRA=j4p@XEdg zj6puJEWzruB@?;3#3$bCEsc_?2y&mx!@H`l^x1pKD?+1S@`py%RsBjvrFMRsyoc*& z)T>=_Cc?EO$}KM9MsjDPqVVr z>bI(CM~Kuix_=iyR z#N5cq4R4q{IaM-DV#OSuq#Z0?6L|6FTBx^JaG`k9s=|LS&*^}Av)D+6W20eSpqS%H z68$T8W|ysufbLXFVvHP!xu2$d1BM1d2qHQ51?sF(?+rp?H*l i5>XOLMky#2rJ*TkDoRJw&~!8dy@oQNFEex5Xa50`M+h?j diff --git a/skills/mobile-touch/SKILL.md b/skills/mobile-touch/SKILL.md new file mode 100644 index 000000000..6e83c9a99 --- /dev/null +++ b/skills/mobile-touch/SKILL.md @@ -0,0 +1,88 @@ +--- +name: mobile-touch +description: Use when designing iOS/Android gestures, haptic feedback, touch interactions, or native mobile animations. +--- + +# Mobile Touch Animation + +Apply Disney's 12 animation principles to mobile gestures, haptics, and native app motion. + +## Quick Reference + +| Principle | Mobile Implementation | +|-----------|----------------------| +| Squash & Stretch | Rubber-banding, bounce on scroll limits | +| Anticipation | Peek before reveal, long-press preview | +| Staging | Sheet presentations, focus states | +| Straight Ahead / Pose to Pose | Gesture-driven vs preset transitions | +| Follow Through / Overlapping | Momentum scrolling, trailing elements | +| Slow In / Slow Out | iOS spring animations, Material easing | +| Arc | Swipe-to-dismiss curves, card throws | +| Secondary Action | Haptic pulse with visual feedback | +| Timing | Touch response <100ms, transitions 250-350ms | +| Exaggeration | Bounce amplitude, haptic intensity | +| Solid Drawing | Respect safe areas, consistent anchors | +| Appeal | 60fps minimum, gesture continuity | + +## Principle Applications + +**Squash & Stretch**: Implement rubber-band effect at scroll boundaries. Pull-to-refresh should stretch content naturally. Buttons compress on touch. + +**Anticipation**: Long-press shows preview before full action. Drag threshold provides visual hint before item lifts. Swipe shows edge of destination content. + +**Staging**: Use sheet presentations to maintain context. Dim and scale background during modal focus. Hero transitions connect views meaningfully. + +**Straight Ahead vs Pose to Pose**: Gesture-following animations (drag, pinch) are straight ahead—driven by touch input. System transitions (push, present) are pose to pose—predefined keyframes. + +**Follow Through & Overlapping**: Content continues moving after finger lifts (momentum). Navigation bar elements animate slightly after main content. Lists items settle with stagger. + +**Slow In / Slow Out**: iOS uses spring physics—configure mass, stiffness, damping. Android Material uses standard easing: `FastOutSlowIn`. Never use linear for user-initiated motion. + +**Arc**: Thrown cards follow parabolic arcs. Swipe-to-dismiss curves based on velocity vector. FAB expand/collapse follows natural arc path. + +**Secondary Action**: Pair haptic feedback with visual response. Button ripple accompanies press. Success checkmark triggers light haptic. + +**Timing**: Touch acknowledgment: <100ms. Quick actions: 150-250ms. View transitions: 250-350ms. Complex animations: 350-500ms. Haptic should sync precisely with visual. + +**Exaggeration**: Pull-to-refresh stretches beyond natural—makes feedback clear. Error shake is pronounced. Success animations celebrate appropriately. + +**Solid Drawing**: Respect device safe areas during animation. Maintain consistent transform origins. Account for notch/dynamic island in motion paths. + +**Appeal**: Minimum 60fps, target 120fps on ProMotion displays. Gesture-driven animation must feel connected to finger. Interruptible animations essential. + +## Platform Patterns + +### iOS +```swift +// Spring animation with follow-through +UIView.animate(withDuration: 0.5, + delay: 0, + usingSpringWithDamping: 0.7, + initialSpringVelocity: 0.5, + options: .curveEaseOut) + +// Haptic pairing +let feedback = UIImpactFeedbackGenerator(style: .medium) +feedback.impactOccurred() +``` + +### Android +```kotlin +// Material spring animation +SpringAnimation(view, DynamicAnimation.TRANSLATION_Y) + .setSpring(SpringForce() + .setStiffness(SpringForce.STIFFNESS_MEDIUM) + .setDampingRatio(SpringForce.DAMPING_RATIO_MEDIUM_BOUNCY)) + .start() +``` + +## Haptic Guidelines + +| Action | iOS | Android | +|--------|-----|---------| +| Selection | `.selection` | `EFFECT_TICK` | +| Success | `.success` | `EFFECT_CLICK` | +| Warning | `.warning` | `EFFECT_DOUBLE_CLICK` | +| Error | `.error` | `EFFECT_HEAVY_CLICK` | + +Haptics are secondary action—always pair with visual confirmation.