🎧 Radio Station Swipe Interaction (UX Specification)

Eter
1

I want to implement a horizontal swipe gesture to switch between radio stations, similar to interactions found in apps like Spotify, YouTube Music, and Apple Music.

:small_blue_diamond: Core Behavior

  • Users can swipe left/right to change the current radio station.

  • The swipe gesture should work on:

    • The cover artwork

    • The radio title / now playing text

:small_blue_diamond: Animation & Visual Behavior

  • The cover image must remain static (fixed in place).

  • Only the radio title (and optionally metadata) should move horizontally during the swipe.

  • While swiping:

    • The current title slides out in the swipe direction.

    • The next/previous station title slides in, following the finger.

  • This should create a live preview effect of the next station during the gesture.

:small_blue_diamond: Interaction Details

  • The swipe must feel fluid and gesture-driven, not just a simple trigger.

  • Use real-time drag tracking, not only swipe detection.

  • Include:

    • A threshold to confirm station change (e.g. 30–50% of swipe distance)

    • A snap-back animation if the swipe is cancelled

    • Smooth easing when completing the transition

:small_blue_diamond: Functional Logic

  • Maintain a list/array of radio stations.

  • Track:

    • currentIndex

    • nextIndex / prevIndex

  • During swipe:

    • Dynamically update the visible title content

    • Do NOT change the cover image until the swipe is confirmed

:small_blue_diamond: UX Goal

  • The experience should feel like browsing stations smoothly, not clicking buttons.

  • The interaction should behave like a carousel, but:

    • Only the text layer moves

    • The image stays fixed for visual stability

:small_blue_diamond: Reference

Prototype implementation:

Use this as a reference for expected behavior and interaction feel.

2

Again, please write in your own words, don’t copy-paste your chat with AI.