Skip to content
Pinky UI

mobile

Focus Rail Mobile

A native horizontal rail keeps neighboring items visible while the centered item gains scale and reading priority.

  • mobile
  • rail
  • scroll-snap
  • collection
Related pattern

The rail uses native scrolling as the gesture and makes focus visible through scale, opacity and centered context.

Live preview

Quick usage

usage
import { FocusRailMobile } from "@pinky-ui/systems";

<FocusRailMobile items={items} />

Install

Add @pinky-ui/systems as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell
npm install @pinky-ui/systems

Prefer to run the whole repository locally instead?

repository
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Accessibility

  • Every gesture has a labelled button or keyboard path, and primary controls meet a 44px touch target.
  • State remains readable without relying on colour or motion.

Performance

  • Interaction state is local and bounded; gesture updates do not require a page-wide render loop.
  • Timers and listeners are cleaned up on unmount.

Reduced motion

The same state change resolves immediately; travel, scale and spring motion are removed without removing the interaction.

When to use

  • Touch-first product surfaces where the next action should stay close to the hand.

When not to use

  • Desktop-only workflows or interactions whose gesture would hide the only available action.

Skill

Purpose

Focus Rail Mobile is a native horizontal collection where the centered item is dominant and neighboring items remain partially visible. Scroll snap supplies the gesture; scale and opacity explain focus.

Use when

  • A collection needs browsing context without a full-screen carousel.
  • The next and previous items should stay discoverable.

Interaction

Swipe the rail or select an item. The chosen item scrolls to center and exposes its active state through aria-current and visible hierarchy.

Accessibility

Use focusable item buttons, readable labels and a non-gesture activation path. Keep the rail's horizontal scroll contained so it does not create page overflow.

Reduced motion

Use instant scroll and remove scale transitions; the centered item and active label remain clear.

Tune

  • Leave enough of the neighboring item visible to explain the rail.
  • Use overscroll-behavior-inline: contain when nested in a vertical page.
Open this skill on its own page