Skip to content
Pinky UI

mobile

Edge Swipe Panel

A progressive edge reveal that follows the gesture, displaces the underlying surface and settles by distance plus velocity.

  • mobile
  • panel
  • edge
  • reveal
  • gesture

Live preview

Quick usage

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

<EdgeSwipePanel label="Filters">{filters}</EdgeSwipePanel>

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

  • Pointer and keyboard paths expose the same state change.
  • Status and focus remain meaningful when motion is disabled.

Performance

  • Uses local state and transforms; no per-frame React pointer loop.

Reduced motion

Resolves state changes without layout animation while preserving semantics.

When to use

  • Product workflows with a clear reversible or inspectable state.

When not to use

  • Decorative motion without a user task.

Skill

Purpose

Use for an optional touch gesture that progressively reveals a panel from a configured screen edge. The closed state can keep a quiet rail; the open state is a semantic panel, not merely a drawer animation.

Use when

A mobile filter or navigation panel is spatially associated with that edge.

Avoid

Hidden critical actions, accidental activation near browser gestures, or no visible open button.

Interaction anatomy

During the gesture, reveal percentage controls the panel surface, rail opacity, underlying content displacement and scrim. Release uses distance plus velocity, so a quick flick can settle without a brittle 49/51% threshold.

Accessibility

Expose a semantic dialog/panel with a labelled close button, an explicit open button, Escape, focus restoration and a keyboard focus loop.

Keyboard and touch

The edge gesture follows the pointer from the first pixel and is touch/pointer accelerated; the explicit button is always available. Underlying content remains slightly displaced rather than hidden behind a heavy scrim.

Reduced motion and performance

Use transform-only reveal and clean pointer state on cancellation/unmount. Reduced motion keeps direct reveal and the semantic open/close states but removes inertial settlement and decorative scrim motion.

Composition and anti-patterns

Use Morph Menu or Floating Dock for desktop navigation rather than adding an edge gesture.

Open this skill on its own page