Skip to content

Springs: .snappy for pull-to-reset and the XP thumb, .spring for the book hint - #258

Merged
darkmastermindz merged 1 commit into
mainfrom
claude/swiftui-inspired-animations-gx49h3
Oct 26, 2026
Merged

darkmastermindz merged 1 commit into
mainfrom
claude/swiftui-inspired-animations-gx49h3

Conversation

@darkmastermindz

Copy link
Copy Markdown
Owner

Summary

Follow-up to #256. It puts the two spring presets that #256 defined but didn't use, .snappy and .spring, where SwiftUI would use them: quick, direct feedback on controls gets .snappy, and plain movement gets .spring. Pull-to-reset also stops trailing behind the finger while you drag.

Related Issue

Follow-up to #256.

Changes Made

Animation BOM

.snappy is SwiftUI's preset with duration 0.5 and bounce 0.15, settling in 0.73s. .spring is the classic default, with response 0.55 and no bounce, settling in 0.82s.

# Component Animation / trigger Before (main) After (this PR) Reduced motion / fallback
1 PullToRefresh.vue Pill while pulling (touch drag down from the top) transform 0.2s ease applied even mid-drag, so the pill trailed about 0.2s behind the finger Follows the finger exactly: no transform transition while the finger is down (new is-pulling class) Reduced motion: unchanged (static position, no transition)
2 PullToRefresh.vue Pill on release (snap back, or hold at the threshold while "Reset ✨" shows, then hide) transform 0.2s ease .snappy spring: a quick return with a hint of overshoot. opacity 0.2s ease is unchanged. Reduced motion: unchanged. No linear(): cubic-bezier(0.2, 0.9, 0.3, 1.05)
3 AboutCard.vue XP timeline thumb sliding to the picked year (tap, drag or arrow keys on the year track) left 0.2s ease .snappy spring Reduced motion: unchanged (transition: none). No linear(): cubic-bezier(0.2, 0.9, 0.3, 1.05)
4 BookPager.vue Book hint sliding in and out (foldables in book posture) transform 0.4s ease Plain .spring (no overshoot). opacity 0.4s ease is unchanged. Reduced motion: unchanged (transition: none). No linear(): cubic-bezier(0.25, 0.1, 0.25, 1)
5 AboutCard.vue Category chips (Skills / Hobbies / XP) background-color and color over 0.15s ease Unchanged. They only fade colours, and a spring does nothing for a colour fade. —
6 AboutCard.vue Poof on touch long press, and tap to switch — Unchanged —

How to Test

  1. npm test: all 272 tests pass.
  2. npx nuxt build: the build passes.
  3. npm run dev on a phone, or with touch emulation:
    • Rows 1 and 2: at the top of the page, drag down from an empty area (not the coin). The pill should stay right under your finger. Let go before the threshold and it snaps back. Let go past it and "Reset ✨" shows, then it springs away.
    • Row 3: open XP on the About card and tap or drag along the year track. The thumb snaps to each year.
    • Row 4: on a foldable in book posture, the hint slides in without overshoot.
  4. Turn on reduced motion and check that these behave as in the last column.

I checked rows 1 and 2 on an emulated Pixel 7. Mid-drag the pill sat exactly at the pull distance with no transform transition, and on release it went back on the .snappy transition.

Additional Notes

The coin rim from #257 is not part of this PR: it was dropped because its pattern strobed while the coin spun.


Generated by Claude Code

@github-actions
github-actions Bot force-pushed the claude/swiftui-inspired-animations-gx49h3 branch 2 times, most recently from 43cc4e9 to 7a59192 Compare October 25, 2026 21:52
…book hint

- Pull-to-reset: the pill follows the finger exactly while pulling (no 0.2s lag behind the
  drag) and snaps back on SwiftUI's .snappy spring when let go
- About card XP timeline: the thumb slides to the picked year on .snappy
- Book pager hint: slides in and out on the plain .spring (no overshoot)

Category chips stay as they are: they only fade colours, which a spring doesn't change.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01338GnpBVYaeSWchNovce1E
@github-actions
github-actions Bot force-pushed the claude/swiftui-inspired-animations-gx49h3 branch from 7a59192 to 72aef5f Compare October 25, 2026 22:33
@darkmastermindz
darkmastermindz marked this pull request as ready for review October 26, 2026 00:26
@darkmastermindz
darkmastermindz merged commit b7e46bf into main Oct 26, 2026
4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants