MotionRail

Appearance

Introduction ​

⚠️ Not Ready for Production - This library is currently in development and not yet ready for production use.

MotionRail is a lightweight, smooth carousel library with momentum-based scrolling, snap alignment, and responsive breakpoints. It works seamlessly with vanilla JavaScript or your favorite framework.

Features ​

  • 🎯 Momentum-based scrolling - Natural drag physics with smooth animations
  • 📱 Responsive breakpoints - Configure columns and gaps for different screen sizes
  • ♿ Snap alignment - Automatic snap-to-item positioning
  • 🔄 Autoplay support - Optional auto-scrolling with pause on interaction
  • ↔️ RTL support - Built-in right-to-left layout support
  • 🎨 CSS Grid based - Modern layout with customizable styling
  • 🪶 Lightweight - Zero dependencies, minimal bundle size
  • 🎮 Full control API - Programmatic navigation and playback control
  • 🧩 Extension system - Modular architecture with built-in extensions
  • ⚛️ Framework integrations - React, Solid, Vue, Svelte components

Why MotionRail? ​

MotionRail was built to provide a modern, performant carousel experience without the bloat. It uses native CSS Grid for layout, modern JavaScript APIs, and provides first-class framework integrations.

Key Differences ​

  • Lightweight: No dependencies, minimal bundle size
  • Modern: Built with modern web standards (CSS Grid, Intersection Observer, etc.)
  • Framework-first: Not just wrappers - true framework integrations
  • Extensible: Modular extension system for adding features
  • Accessible: Keyboard navigation and semantic HTML

Browser Support ​

MotionRail works in all modern browsers:

  • Chrome/Edge (latest)
  • Firefox (latest)
  • Safari (latest)
  • Modern mobile browsers

Requires support for:

  • CSS Grid
  • Pointer Events API
  • Container Queries
  • Scroll Snap
  • IntersectionObserver API
  • ResizeObserver API

Next Steps ​