motionrail 0.7.3 → 0.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +33 -35
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -1,18 +1,19 @@
1
1
  # MotionRail
2
2
 
3
- > ⚠️ **Not Ready for Production** - This library is currently in development and not yet ready for production use.
4
-
5
3
  A lightweight, smooth carousel library with momentum-based scrolling, snap alignment, and responsive breakpoints. Works with vanilla JavaScript or your favorite framework.
6
4
 
7
5
  ## Features
8
6
 
9
- - 🎯 Momentum-based scrolling with natural drag physics
10
- - 📱 Responsive breakpoints for different screen sizes
11
- - 🔄 Autoplay support with pause on interaction
12
- - ↔️ RTL support built-in
13
- - 🪶 Zero dependencies, minimal bundle size
14
- - 🧩 Extension system (arrows, dots, thumbnails)
15
- - ⚛️ Framework integrations (React, Preact, Solid, Vue, Svelte, Qwik)
7
+ - 🎯󠅅󠅞󠅢󠅙󠅦󠅑󠅜󠅕󠅔󠄐󠅣󠅝󠅟󠅟󠅤󠅘󠅞󠅕󠅣󠅣󠄐󠅑󠅞󠅔󠄐󠅓󠅟󠅞󠅤󠅢󠅟󠅜 **Momentum-based scrolling** - Natural drag physics with smooth animations
8
+ - 📱󠄵󠅖󠅖󠅟󠅢󠅤󠅜󠅕󠅣󠅣󠄐󠅢󠅕󠅣󠅠󠅟󠅞󠅣󠅙󠅦󠅕󠄐󠅜󠅑󠅩󠅟󠅥󠅤󠅣 **Responsive breakpoints** - Configure columns and gaps for different screen sizes
9
+ - ♿󠅀󠅢󠅕󠅓󠅙󠅣󠅙󠅟󠅞󠄐󠅣󠅞󠅑󠅠󠄐󠅑󠅜󠅙󠅗󠅞󠅝󠅕󠅞󠅤󠄜󠄐󠅑󠅜󠅧󠅑󠅩󠅣󠄐󠅠󠅕󠅢󠅖󠅕󠅓󠅤 **Snap alignment** - Automatic snap-to-item positioning
10
+ - 🔄󠄱󠅥󠅤󠅟󠅠󠅜󠅑󠅩󠄐󠅤󠅘󠅑󠅤󠄐󠅖󠅕󠅕󠅜󠅣󠄐󠅞󠅑󠅤󠅥󠅢󠅑󠅜 **Autoplay support** - Optional auto-scrolling with pause on interaction
11
+ - ↔️󠅂󠅄󠄼󠄐󠅣󠅥󠅠󠅠󠅟󠅢󠅤󠄜󠄐󠅞󠅟󠄐󠅓󠅟󠅝󠅠󠅢󠅟󠅝󠅙󠅣󠅕󠅣 **RTL support** - Built-in right-to-left layout support
12
+ - 🎨󠄽󠅟󠅔󠅕󠅢󠅞󠄐󠄳󠅃󠅃󠄐󠄷󠅢󠅙󠅔󠄐󠅝󠅑󠅣󠅤󠅕󠅢󠅩 **CSS Grid based** - Modern layout with customizable styling
13
+ - 🪶󠄽󠅙󠅞󠅙󠅝󠅑󠅜󠄜󠄐󠅥󠅜󠅤󠅢󠅑󠄝󠅜󠅙󠅗󠅘󠅤󠅧󠅕󠅙󠅗󠅘󠅤 **Lightweight** - Zero dependencies, minimal bundle size
14
+ - 🎮󠅄󠅟󠅤󠅑󠅜󠄐󠄱󠅀󠄹󠄐󠅓󠅟󠅞󠅤󠅢󠅟󠅜󠄜󠄐󠅞󠅟󠄐󠅜󠅙󠅝󠅙󠅤󠅣 **Full control API** - Programmatic navigation and playback control
15
+ - 🧩󠄵󠅨󠅤󠅕󠅞󠅣󠅙󠅟󠅞󠅣󠄐󠅖󠅟󠅢󠄐󠅕󠅞󠅔󠅜󠅕󠅣󠅣󠄐󠅠󠅟󠅣󠅣󠅙󠅒󠅙󠅜󠅙󠅤󠅙󠅕󠅣 **Extension system** - Modular architecture with built-in extensions
16
+ - ⚡󠅃󠅕󠅑󠅝󠅜󠅕󠅣󠅣󠄐󠅖󠅢󠅑󠅝󠅕󠅧󠅟󠅢󠅛󠄐󠅙󠅞󠅤󠅕󠅗󠅢󠅑󠅤󠅙󠅟󠅞 **Framework integrations** - React, Preact, Qwik, Solid, Vue, Svelte components
16
17
 
17
18
  ## Installation
18
19
 
@@ -37,27 +38,27 @@ npm install motionrail
37
38
  ```
38
39
 
39
40
  ```js
40
- import { MotionRail } from 'motionrail';
41
- import 'motionrail/style.css';
41
+ import { MotionRail } from "motionrail";
42
+ import "motionrail/style.css";
42
43
 
43
- const carousel = new MotionRail(document.getElementById('carousel'), {
44
+ const carousel = new MotionRail(document.getElementById("carousel"), {
44
45
  breakpoints: [
45
- { columns: 1, gap: '16px' },
46
- { width: 768, columns: 2, gap: '16px' },
47
- { width: 1024, columns: 3, gap: '20px' }
48
- ]
46
+ { columns: 1, gap: "16px" },
47
+ { width: 768, columns: 2, gap: "16px" },
48
+ { width: 1024, columns: 3, gap: "20px" },
49
+ ],
49
50
  });
50
51
  ```
51
52
 
52
53
  ### React
53
54
 
54
55
  ```jsx
55
- import { MotionRail } from 'motionrail/react';
56
- import 'motionrail/style.css';
56
+ import { MotionRail } from "motionrail/react";
57
+ import "motionrail/style.css";
57
58
 
58
59
  function App() {
59
60
  return (
60
- <MotionRail options={{ breakpoints: [{ columns: 3, gap: '20px' }] }}>
61
+ <MotionRail options={{ breakpoints: [{ columns: 3, gap: "20px" }] }}>
61
62
  <div>Item 1</div>
62
63
  <div>Item 2</div>
63
64
  <div>Item 3</div>
@@ -69,22 +70,19 @@ function App() {
69
70
  ### With Extensions
70
71
 
71
72
  ```js
72
- import { MotionRail } from 'motionrail';
73
- import { Arrows } from 'motionrail/extensions/arrows';
74
- import { Dots } from 'motionrail/extensions/dots';
75
- import 'motionrail/style.css';
76
- import 'motionrail/extensions/arrows/style.css';
77
- import 'motionrail/extensions/dots/style.css';
73
+ import { MotionRail } from "motionrail";
74
+ import { Arrows } from "motionrail/extensions/arrows";
75
+ import { Dots } from "motionrail/extensions/dots";
76
+ import "motionrail/style.css";
77
+ import "motionrail/extensions/arrows/style.css";
78
+ import "motionrail/extensions/dots/style.css";
78
79
 
79
80
  const carousel = new MotionRail(element, {
80
81
  breakpoints: [
81
- { columns: 1, gap: '16px' },
82
- { width: 768, columns: 2, gap: '16px' }
82
+ { columns: 1, gap: "16px" },
83
+ { width: 768, columns: 2, gap: "16px" },
83
84
  ],
84
- extensions: [
85
- Arrows({ loop: true }),
86
- Dots({ showIndex: true })
87
- ]
85
+ extensions: [Arrows({ loop: true }), Dots({ showIndex: true })],
88
86
  });
89
87
  ```
90
88
 
@@ -96,9 +94,9 @@ const carousel = new MotionRail(element, {
96
94
  delay: 3000,
97
95
  resumeDelay: 4000,
98
96
  breakpoints: [
99
- { columns: 1, gap: '16px' },
100
- { width: 768, columns: 2, gap: '16px' }
101
- ]
97
+ { columns: 1, gap: "16px" },
98
+ { width: 768, columns: 2, gap: "16px" },
99
+ ],
102
100
  });
103
101
  ```
104
102
 
@@ -114,4 +112,4 @@ MIT
114
112
 
115
113
  ---
116
114
 
117
- [![Sponsor juji](https://img.shields.io/badge/sponsor-juji-ea4aaa?style=for-the-badge&logo=github)](https://github.com/sponsors/juji)
115
+ [![Sponsor juji](https://img.shields.io/badge/sponsor-juji-ea4aaa?style=for-the-badge&logo=github)](https://github.com/sponsors/juji)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "motionrail",
3
- "version": "0.7.3",
3
+ "version": "0.8.0",
4
4
  "description": "A lightweight carousel library for modern web applications",
5
5
  "main": "./main/dist/motionrail.umd.js",
6
6
  "module": "./main/dist/motionrail.es.js",