@srsdesigndev/pi-loader 1.0.0 → 1.0.1

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 (3) hide show
  1. package/LICENSE +0 -0
  2. package/README.md +146 -38
  3. package/package.json +1 -1
package/LICENSE ADDED
File without changes
package/README.md CHANGED
@@ -1,41 +1,151 @@
1
- ex# π Loader
1
+ # π loader
2
2
 
3
- A pi-driven generative art loader. No randomness library. No predefined colors. No loops. Just pure math.
3
+ > A loading animation driven entirely by the digits of pi.
4
+ > No randomness. No seeds. No loops. Just infinite math.
4
5
 
5
- Every bar height, every background color, and every opacity is determined by the next unused digit of π — computed live, used once, discarded forever.
6
+ [![npm](https://img.shields.io/npm/v/@srsdesigndev/pi-loader?color=e2ff5d&label=npm&style=flat-square)](https://www.npmjs.com/package/@srsdesigndev/pi-loader)
7
+ [![license](https://img.shields.io/badge/license-MIT-e2ff5d?style=flat-square)](./LICENSE)
8
+ [![CDN](https://img.shields.io/badge/cdn-jsDelivr-e2ff5d?style=flat-square)](https://cdn.jsdelivr.net/gh/srsdesigndev/pi_loader@main/src/pi-loader.js)
9
+
10
+ **[Live Demo →](https://srsdesigndev.github.io/pi_loader)**
6
11
 
7
12
  ---
8
13
 
9
- ## How It Works
14
+ ## How it works
10
15
 
11
16
  Pi is infinite and non-repeating. This project uses that property as an infinite source of deterministic "randomness."
12
17
 
13
- - **10 digits** → mapped to bar heights and opacities
14
- - **6 digits** → combined into a hex color code for the background
15
- - Digits 0, 1, 2 → low opacity bars (quiet)
16
- - Digits 3–9 → full opacity bars (loud)
17
- - Bar color flips black or white based on background luminance — always readable
18
- - Every digit is used once and thrown away — never repeated, never stored
18
+ - **10 digits** → mapped to bar heights and opacities per frame
19
+ - **6 digits** → combined into a hex color code when `bg="pi"`
20
+ - Digits **0, 1, 2** → low opacity bars (quiet)
21
+ - Digits **3–9** → full opacity bars (loud)
22
+ - Every digit is consumed once and thrown away — never stored, never repeated
23
+
24
+ The algorithm is the **Rabinowitz-Wagon spigot**, implemented with JavaScript `BigInt` for arbitrary precision. It yields one digit of π at a time, forever.
25
+
26
+ ---
27
+
28
+ ## Performance
19
29
 
20
- The algorithm used is the **Rabinowitz-Wagon spigot algorithm**, implemented in JavaScript using `BigInt` for arbitrary precision. It yields one digit of π at a time, forever.
30
+ - **One shared spigot** — all instances on the page consume from the same global π stream
31
+ - **One `requestAnimationFrame` loop** — drives every instance, not one per component
32
+ - **`IntersectionObserver`** — off-screen instances pause automatically, zero CPU wasted
33
+ - **No `setInterval`**, no `setTimeout`, no polling anywhere
21
34
 
22
35
  ---
23
36
 
24
- ## Demo
37
+ ## Install
25
38
 
26
- Just open `pi-loader-color.html` in any modern browser. No dependencies. No build step. No install.
39
+ ### CDN (no install needed)
40
+
41
+ ```html
42
+ <!-- jsDelivr — recommended -->
43
+ <script src="https://cdn.jsdelivr.net/gh/srsdesigndev/pi_loader@main/src/pi-loader.js"></script>
44
+
45
+ <!-- unpkg -->
46
+ <script src="https://unpkg.com/@srsdesigndev/pi-loader/src/pi-loader.js"></script>
47
+ ```
48
+
49
+ ### npm
27
50
 
28
51
  ```bash
29
- open pi-loader-color.html
52
+ npm install @srsdesigndev/pi-loader
53
+ ```
54
+
55
+ ```js
56
+ import '@srsdesigndev/pi-loader'
30
57
  ```
31
58
 
32
59
  ---
33
60
 
34
- ## Files
61
+ ## Usage
62
+
63
+ ```html
64
+ <!-- zero config -->
65
+ <pi-loader></pi-loader>
66
+
67
+ <!-- with options -->
68
+ <pi-loader
69
+ bars="7"
70
+ color="#38bdf8"
71
+ speed="400"
72
+ radius="4"
73
+ ></pi-loader>
74
+
75
+ <!-- pi-driven background color -->
76
+ <pi-loader bg="pi"></pi-loader>
35
77
 
78
+ <!-- light theme -->
79
+ <pi-loader theme="light"></pi-loader>
36
80
  ```
37
- pi-loader-color.html # Full standalone demo — bars + color bg
38
- pi-loader.html # Minimal version — bars only, dark bg
81
+
82
+ ### React / JSX
83
+
84
+ ```jsx
85
+ import '@srsdesigndev/pi-loader'
86
+
87
+ export default function App() {
88
+ return (
89
+ <div>
90
+ <pi-loader bars="8" color="#4ade80" />
91
+ </div>
92
+ )
93
+ }
94
+ ```
95
+
96
+ ### Vue
97
+
98
+ ```vue
99
+ <template>
100
+ <pi-loader bars="10" speed="500" />
101
+ </template>
102
+
103
+ <script setup>
104
+ import '@srsdesigndev/pi-loader'
105
+ </script>
106
+ ```
107
+
108
+ ---
109
+
110
+ ## Attributes
111
+
112
+ | Attribute | Default | Range / Options | Description |
113
+ |---|---|---|---|
114
+ | `bars` | `10` | 3 – 20 | Number of bars |
115
+ | `min-height` | `6` | 1 – 200 px | Minimum bar height |
116
+ | `max-height` | `60` | 10 – 400 px | Maximum bar height |
117
+ | `width` | `10` | 2 – 100 px | Bar width |
118
+ | `gap` | `6` | 0 – 100 px | Gap between bars |
119
+ | `speed` | `600` | 80 – 5000 ms | Frame interval in ms |
120
+ | `radius` | `999` | 0 – 999 px | Border radius. 999 = pill, 0 = square |
121
+ | `color` | `auto` | auto / any CSS color | Bar color. auto adapts to bg luminance |
122
+ | `bg` | `transparent` | pi / transparent / CSS color | Background. pi = driven by π digits |
123
+ | `low-opacity` | `0.2` | 0 – 1 | Opacity for digits 0, 1, 2 |
124
+ | `theme` | `dark` | dark / light | Default bar color when color=auto |
125
+ | `align` | `center` | center / bottom | Bar vertical alignment |
126
+
127
+ ---
128
+
129
+ ## Examples
130
+
131
+ ```html
132
+ <!-- Glitch -->
133
+ <pi-loader speed="120" color="#ef4444" radius="2"></pi-loader>
134
+
135
+ <!-- Terminal -->
136
+ <pi-loader color="#00ff41" radius="2" speed="200" bg="#001a00"></pi-loader>
137
+
138
+ <!-- Hairlines -->
139
+ <pi-loader bars="16" width="4" gap="4"></pi-loader>
140
+
141
+ <!-- Chunky -->
142
+ <pi-loader bars="5" width="20" gap="10" color="#f59e0b"></pi-loader>
143
+
144
+ <!-- Pi background -->
145
+ <pi-loader bg="pi" bars="7" width="16"></pi-loader>
146
+
147
+ <!-- Slow & tall -->
148
+ <pi-loader speed="1500" max-height="90" bars="6" width="14"></pi-loader>
39
149
  ```
40
150
 
41
151
  ---
@@ -55,12 +165,8 @@ function* piSpigot() {
55
165
  } else {
56
166
  const nr = (2n * q + r) * l;
57
167
  const nn = (q * (7n * k) + 2n + r * l) / (t * l);
58
- q *= k;
59
- t *= l;
60
- l += 2n;
61
- k += 1n;
62
- n = nn;
63
- r = nr;
168
+ q *= k; t *= l; l += 2n; k += 1n;
169
+ n = nn; r = nr;
64
170
  }
65
171
  }
66
172
  }
@@ -74,34 +180,36 @@ Reference: Rabinowitz, S. & Wagon, S. (1995). *A spigot algorithm for the digits
74
180
 
75
181
  | Digits consumed | Used for |
76
182
  |---|---|
77
- | 10 | Bar heights (`digit × 5.4 + 6` px) |
78
- | 6 | Background hex color (`#d3a9f1` etc.) |
79
- | **16 total** | Per frame |
183
+ | `bars` count | Bar heights + opacities |
184
+ | 6 | Background hex color (when `bg="pi"`) |
80
185
 
81
186
  ---
82
187
 
83
- ## Why Pi?
188
+ ## Browser Support
84
189
 
85
- Because it's free, infinite, and needs no seed. Most generative art uses `Math.random()` — which is pseudorandom, stateful, and resets. Pi never resets. Pi never repeats. Pi is already there, waiting.
190
+ Works in any browser that supports:
191
+ - Web Components / Custom Elements v1
192
+ - `BigInt`
193
+ - `IntersectionObserver`
194
+ - `requestAnimationFrame`
195
+
196
+ All modern browsers. No IE.
86
197
 
87
198
  ---
88
199
 
89
- ## Ideas / Roadmap
200
+ ## Roadmap
90
201
 
91
- - [ ] Map digits to musical notes — a pi-driven melody
92
- - [ ] Export frames as a GIF
93
- - [ ] Web component `<pi-loader>`
94
- - [ ] Configurable bar count, speed, color palette
95
- - [ ] Visualize digit distribution over time
202
+ - [ ] Map digits to musical notes — a π-driven melody
203
+ - [ ] `<pi-loader>` React wrapper with TypeScript types
204
+ - [ ] Configurable easing functions
205
+ - [ ] Export frames as GIF
96
206
 
97
207
  ---
98
208
 
99
209
  ## License
100
210
 
101
- MIT — do whatever you want with it.
211
+ MIT © [srsdesigndev](https://github.com/srsdesigndev)
102
212
 
103
213
  ---
104
214
 
105
- ## Author
106
-
107
- Built with curiosity and π.
215
+ > No dependencies · No randomness · Just π
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@srsdesigndev/pi-loader",
3
- "version": "1.0.0",
3
+ "version": "1.0.1",
4
4
  "description": "A pi-driven generative loader web component. No randomness. No dependencies. Just π.",
5
5
  "main": "src/pi-loader.js",
6
6
  "module": "src/pi-loader.js",