Interaction Patterns

Gesture-based interactions for modern interfaces: swipes, drags, scroll reveals, and hover effects.

Swipeable Cards

Tinder-style swipe gestures with visual feedback and directional handlers
Horizontal Swipe

Swipe Me!

Drag left to reject, right to accept

← Left = RejectRight = Accept →
Swipe count: 0
Vertical Swipe

Swipe Up/Down

Drag up to save, down to dismiss

↑ Up = Save↓ Down = Dismiss
Features
Visual FeedbackCards rotate and scale during swipe, with color overlays indicating direction
Threshold ControlConfigurable swipe distance required to trigger action (default: 100px)
Directional HandlersSeparate callbacks for left, right, up, down swipes for precise control

Draggable Elements

Free-form drag with constraints, snap-back, and position tracking
Free Drag (with snap-back)
Drag Me
Position: 0, 0
Horizontal Drag (constrained)
← →
Drag only left/right, stays at dropped position
Features
ConstraintsConstrain drag to horizontal, vertical, or custom boundaries
Snap BackOptionally return to original position when released
Position TrackingReal-time callbacks during drag with x/y coordinates

Scroll Reveal Animations

Elements fade and slide into view as user scrolls
1
Scroll Reveal Item 1This element fades and slides into view with a 0.1s delay
2
Scroll Reveal Item 2This element fades and slides into view with a 0.2s delay
3
Scroll Reveal Item 3This element fades and slides into view with a 0.30000000000000004s delay
4
Scroll Reveal Item 4This element fades and slides into view with a 0.4s delay
5
Scroll Reveal Item 5This element fades and slides into view with a 0.5s delay
↑ Scroll up and down to see the reveal animation

Hover Interactions

Hover cards with popovers and tooltip-like content

Use Cases

Swipeable Cards
  • • Tinder-style accept/reject flows
  • • Card navigation
  • • Dismiss actions
  • • Voting interfaces
Draggable Elements
  • • Reorderable lists
  • • Customizable dashboards
  • • Sliders and range controls
  • • Interactive maps
Scroll Reveal
  • • Landing pages
  • • Content-heavy pages
  • • Feature showcases
  • • Timeline presentations
Hover Cards
  • • Contextual help
  • • User profiles
  • • Previews
  • • Glossary terms
Interaction patterns from @/components/interactions/