@elucim/core 0.1.1 → 0.1.2
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.
- package/LICENSE +21 -0
- package/README.md +174 -174
- package/package.json +9 -9
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 Seth Juarez
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -1,174 +1,174 @@
|
|
|
1
|
-
# @elucim/core
|
|
2
|
-
|
|
3
|
-
> Animated math & concept visualizations for React — 3Blue1Brown-style, built for the web.
|
|
4
|
-
|
|
5
|
-
[](https://www.npmjs.com/package/@elucim/core)
|
|
6
|
-
[](https://github.com/sethjuarez/elucim/blob/main/LICENSE)
|
|
7
|
-
|
|
8
|
-
Elucim is a React library for creating **interactive, animated explanations** — mathematical visualizations, concept diagrams, and slide-based presentations that viewers can scrub, pause, and explore. Think Manim meets Remotion, live in the browser.
|
|
9
|
-
|
|
10
|
-
## Install
|
|
11
|
-
|
|
12
|
-
```bash
|
|
13
|
-
npm install @elucim/core
|
|
14
|
-
# or
|
|
15
|
-
pnpm add @elucim/core
|
|
16
|
-
```
|
|
17
|
-
|
|
18
|
-
**Peer dependencies:** React 18 or 19
|
|
19
|
-
|
|
20
|
-
## Quick Start
|
|
21
|
-
|
|
22
|
-
```tsx
|
|
23
|
-
import { Player, FadeIn, Circle, Text } from '@elucim/core';
|
|
24
|
-
|
|
25
|
-
function MyAnimation() {
|
|
26
|
-
return (
|
|
27
|
-
<Player width={800} height={600} fps={30} durationInFrames={90} autoPlay loop>
|
|
28
|
-
<FadeIn duration={20}>
|
|
29
|
-
<Circle cx={400} cy={280} r={80} stroke="#6c5ce7" strokeWidth={3} fill="none" />
|
|
30
|
-
</FadeIn>
|
|
31
|
-
<FadeIn duration={20}>
|
|
32
|
-
<Text x={400} y={290} fill="#e0e0e0" fontSize={24} textAnchor="middle">
|
|
33
|
-
Hello Elucim
|
|
34
|
-
</Text>
|
|
35
|
-
</FadeIn>
|
|
36
|
-
</Player>
|
|
37
|
-
);
|
|
38
|
-
}
|
|
39
|
-
```
|
|
40
|
-
|
|
41
|
-
## What's Included
|
|
42
|
-
|
|
43
|
-
### 🎬 Playback
|
|
44
|
-
|
|
45
|
-
| Component | Description |
|
|
46
|
-
|-----------|-------------|
|
|
47
|
-
| `Player` | Interactive player with controls, scrubber, play/pause, keyboard shortcuts |
|
|
48
|
-
| `Scene` | Raw SVG scene for embedding in custom playback systems |
|
|
49
|
-
| `Sequence` | Time-offset wrapper — schedule children to appear at specific frames |
|
|
50
|
-
|
|
51
|
-
### 📐 Primitives
|
|
52
|
-
|
|
53
|
-
| Component | Description |
|
|
54
|
-
|-----------|-------------|
|
|
55
|
-
| `Circle` | SVG circle with optional animation props |
|
|
56
|
-
| `Rect` | Rectangle with optional rounded corners |
|
|
57
|
-
| `Line` | Line segment |
|
|
58
|
-
| `Arrow` | Line with arrowhead |
|
|
59
|
-
| `Polygon` | Arbitrary polygon from point arrays |
|
|
60
|
-
| `Text` | SVG text element |
|
|
61
|
-
|
|
62
|
-
### 📊 Math Visualizations
|
|
63
|
-
|
|
64
|
-
| Component | Description |
|
|
65
|
-
|-----------|-------------|
|
|
66
|
-
| `Axes` | Coordinate axes with configurable domain, range, ticks, and grid |
|
|
67
|
-
| `FunctionPlot` | Plot any `(x) => y` function on axes |
|
|
68
|
-
| `Vector` | Mathematical vector with label and styling |
|
|
69
|
-
| `VectorField` | Grid of arrows from a `(x, y) => [dx, dy]` function |
|
|
70
|
-
| `Matrix` | Matrix with brackets, configurable styling |
|
|
71
|
-
| `Graph` | Graph theory visualization — nodes, edges, labels |
|
|
72
|
-
| `LaTeX` | LaTeX math expressions rendered via KaTeX |
|
|
73
|
-
| `BarChart` | Animated bar chart with labels and colors |
|
|
74
|
-
|
|
75
|
-
### ✨ Animations
|
|
76
|
-
|
|
77
|
-
| Component | Description |
|
|
78
|
-
|-----------|-------------|
|
|
79
|
-
| `FadeIn` / `FadeOut` | Opacity transitions |
|
|
80
|
-
| `Draw` | Progressive stroke drawing (like handwriting) |
|
|
81
|
-
| `Write` | Stroke draw followed by fill fade |
|
|
82
|
-
| `Transform` | Animate position, scale, rotation, and opacity |
|
|
83
|
-
| `Morph` | Color and scale morphing |
|
|
84
|
-
| `Stagger` | Sequential delayed entrance for children |
|
|
85
|
-
| `Parallel` | Run multiple animations simultaneously |
|
|
86
|
-
| `Timeline` | Imperative animation sequencing |
|
|
87
|
-
|
|
88
|
-
### 🎭 Presentations
|
|
89
|
-
|
|
90
|
-
| Component | Description |
|
|
91
|
-
|-----------|-------------|
|
|
92
|
-
| `Presentation` | Full slide-deck system with transitions and keyboard navigation |
|
|
93
|
-
| `Slide` | Individual slide with title, notes, and background |
|
|
94
|
-
|
|
95
|
-
### 🪝 Hooks
|
|
96
|
-
|
|
97
|
-
| Hook | Description |
|
|
98
|
-
|------|-------------|
|
|
99
|
-
| `useCurrentFrame()` | Current frame number (0-based) |
|
|
100
|
-
| `interpolate()` | Map frame values through input/output ranges with easing |
|
|
101
|
-
| `useElucimContext()` | Full scene context — frame, fps, dimensions |
|
|
102
|
-
| `usePresentationContext()` | Slide state and navigation inside a Presentation |
|
|
103
|
-
| `useInsidePresentation()` | Detect if running inside a Presentation |
|
|
104
|
-
|
|
105
|
-
### 🎨 Easing Functions
|
|
106
|
-
|
|
107
|
-
20+ built-in easings including `linear`, `easeInOutCubic`, `easeOutElastic`, `easeOutBounce`, plus `spring()` and `cubicBezier()` generators.
|
|
108
|
-
|
|
109
|
-
## Examples
|
|
110
|
-
|
|
111
|
-
### Animated Sine Curve
|
|
112
|
-
|
|
113
|
-
```tsx
|
|
114
|
-
import { Player, Axes, FunctionPlot, Draw, Sequence, FadeIn, LaTeX } from '@elucim/core';
|
|
115
|
-
|
|
116
|
-
<Player width={800} height={500} fps={30} durationInFrames={120} autoPlay loop>
|
|
117
|
-
<Axes origin={[400, 280]} domain={[-3, 3]} range={[-1.5, 1.5]} scale={80}
|
|
118
|
-
axisColor="#888" labelColor="#888" />
|
|
119
|
-
<Sequence from={10} durationInFrames={110}>
|
|
120
|
-
<Draw duration={60}>
|
|
121
|
-
<FunctionPlot fn={(x) => Math.sin(x)} domain={[-3, 3]}
|
|
122
|
-
origin={[400, 280]} scale={80} color="#6c5ce7" strokeWidth={2.5} />
|
|
123
|
-
</Draw>
|
|
124
|
-
</Sequence>
|
|
125
|
-
<Sequence from={70} durationInFrames={50}>
|
|
126
|
-
<FadeIn duration={20}>
|
|
127
|
-
<LaTeX expression="f(x) = \sin(x)" x={600} y={60} fontSize={20} color="#6c5ce7" />
|
|
128
|
-
</FadeIn>
|
|
129
|
-
</Sequence>
|
|
130
|
-
</Player>
|
|
131
|
-
```
|
|
132
|
-
|
|
133
|
-
### Slide Presentation
|
|
134
|
-
|
|
135
|
-
```tsx
|
|
136
|
-
import { Presentation, Slide, Player, FadeIn, Text, LaTeX } from '@elucim/core';
|
|
137
|
-
|
|
138
|
-
<Presentation width={1920} height={1080} transition="fade" transitionDuration={500} showHUD>
|
|
139
|
-
<Slide title="Welcome">
|
|
140
|
-
<Player width={1920} height={1080} fps={30} durationInFrames={90} autoPlay loop controls={false}>
|
|
141
|
-
<FadeIn duration={25}>
|
|
142
|
-
<Text x={960} y={480} fill="currentColor" fontSize={64} textAnchor="middle">
|
|
143
|
-
My Presentation
|
|
144
|
-
</Text>
|
|
145
|
-
</FadeIn>
|
|
146
|
-
</Player>
|
|
147
|
-
</Slide>
|
|
148
|
-
<Slide title="The Math">
|
|
149
|
-
<Player width={1920} height={1080} fps={30} durationInFrames={60} autoPlay loop controls={false}>
|
|
150
|
-
<FadeIn duration={30}>
|
|
151
|
-
<LaTeX expression="e^{i\pi} + 1 = 0" x={960} y={500} fontSize={48} color="#fdcb6e" />
|
|
152
|
-
</FadeIn>
|
|
153
|
-
</Player>
|
|
154
|
-
</Slide>
|
|
155
|
-
</Presentation>
|
|
156
|
-
```
|
|
157
|
-
|
|
158
|
-
## Theme-Aware
|
|
159
|
-
|
|
160
|
-
Player and Scene automatically adapt to light and dark themes using CSS `light-dark()`. No custom CSS needed — colors, controls, and backgrounds resolve correctly in both modes.
|
|
161
|
-
|
|
162
|
-
## Keyboard Shortcuts
|
|
163
|
-
|
|
164
|
-
**Player:** `Space` play/pause, `←` / `→` seek, `Shift+←` / `Shift+→` seek 10 frames, `Home` / `End` jump
|
|
165
|
-
|
|
166
|
-
**Presentation:** `←` / `→` navigate slides, `Space` next, `F` fullscreen
|
|
167
|
-
|
|
168
|
-
## Documentation
|
|
169
|
-
|
|
170
|
-
Full docs with live interactive examples: [github.com/sethjuarez/elucim](https://github.com/sethjuarez/elucim)
|
|
171
|
-
|
|
172
|
-
## License
|
|
173
|
-
|
|
174
|
-
[MIT](https://github.com/sethjuarez/elucim/blob/main/LICENSE)
|
|
1
|
+
# @elucim/core
|
|
2
|
+
|
|
3
|
+
> Animated math & concept visualizations for React — 3Blue1Brown-style, built for the web.
|
|
4
|
+
|
|
5
|
+
[](https://www.npmjs.com/package/@elucim/core)
|
|
6
|
+
[](https://github.com/sethjuarez/elucim/blob/main/LICENSE)
|
|
7
|
+
|
|
8
|
+
Elucim is a React library for creating **interactive, animated explanations** — mathematical visualizations, concept diagrams, and slide-based presentations that viewers can scrub, pause, and explore. Think Manim meets Remotion, live in the browser.
|
|
9
|
+
|
|
10
|
+
## Install
|
|
11
|
+
|
|
12
|
+
```bash
|
|
13
|
+
npm install @elucim/core
|
|
14
|
+
# or
|
|
15
|
+
pnpm add @elucim/core
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
**Peer dependencies:** React 18 or 19
|
|
19
|
+
|
|
20
|
+
## Quick Start
|
|
21
|
+
|
|
22
|
+
```tsx
|
|
23
|
+
import { Player, FadeIn, Circle, Text } from '@elucim/core';
|
|
24
|
+
|
|
25
|
+
function MyAnimation() {
|
|
26
|
+
return (
|
|
27
|
+
<Player width={800} height={600} fps={30} durationInFrames={90} autoPlay loop>
|
|
28
|
+
<FadeIn duration={20}>
|
|
29
|
+
<Circle cx={400} cy={280} r={80} stroke="#6c5ce7" strokeWidth={3} fill="none" />
|
|
30
|
+
</FadeIn>
|
|
31
|
+
<FadeIn duration={20}>
|
|
32
|
+
<Text x={400} y={290} fill="#e0e0e0" fontSize={24} textAnchor="middle">
|
|
33
|
+
Hello Elucim
|
|
34
|
+
</Text>
|
|
35
|
+
</FadeIn>
|
|
36
|
+
</Player>
|
|
37
|
+
);
|
|
38
|
+
}
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
## What's Included
|
|
42
|
+
|
|
43
|
+
### 🎬 Playback
|
|
44
|
+
|
|
45
|
+
| Component | Description |
|
|
46
|
+
|-----------|-------------|
|
|
47
|
+
| `Player` | Interactive player with controls, scrubber, play/pause, keyboard shortcuts |
|
|
48
|
+
| `Scene` | Raw SVG scene for embedding in custom playback systems |
|
|
49
|
+
| `Sequence` | Time-offset wrapper — schedule children to appear at specific frames |
|
|
50
|
+
|
|
51
|
+
### 📐 Primitives
|
|
52
|
+
|
|
53
|
+
| Component | Description |
|
|
54
|
+
|-----------|-------------|
|
|
55
|
+
| `Circle` | SVG circle with optional animation props |
|
|
56
|
+
| `Rect` | Rectangle with optional rounded corners |
|
|
57
|
+
| `Line` | Line segment |
|
|
58
|
+
| `Arrow` | Line with arrowhead |
|
|
59
|
+
| `Polygon` | Arbitrary polygon from point arrays |
|
|
60
|
+
| `Text` | SVG text element |
|
|
61
|
+
|
|
62
|
+
### 📊 Math Visualizations
|
|
63
|
+
|
|
64
|
+
| Component | Description |
|
|
65
|
+
|-----------|-------------|
|
|
66
|
+
| `Axes` | Coordinate axes with configurable domain, range, ticks, and grid |
|
|
67
|
+
| `FunctionPlot` | Plot any `(x) => y` function on axes |
|
|
68
|
+
| `Vector` | Mathematical vector with label and styling |
|
|
69
|
+
| `VectorField` | Grid of arrows from a `(x, y) => [dx, dy]` function |
|
|
70
|
+
| `Matrix` | Matrix with brackets, configurable styling |
|
|
71
|
+
| `Graph` | Graph theory visualization — nodes, edges, labels |
|
|
72
|
+
| `LaTeX` | LaTeX math expressions rendered via KaTeX |
|
|
73
|
+
| `BarChart` | Animated bar chart with labels and colors |
|
|
74
|
+
|
|
75
|
+
### ✨ Animations
|
|
76
|
+
|
|
77
|
+
| Component | Description |
|
|
78
|
+
|-----------|-------------|
|
|
79
|
+
| `FadeIn` / `FadeOut` | Opacity transitions |
|
|
80
|
+
| `Draw` | Progressive stroke drawing (like handwriting) |
|
|
81
|
+
| `Write` | Stroke draw followed by fill fade |
|
|
82
|
+
| `Transform` | Animate position, scale, rotation, and opacity |
|
|
83
|
+
| `Morph` | Color and scale morphing |
|
|
84
|
+
| `Stagger` | Sequential delayed entrance for children |
|
|
85
|
+
| `Parallel` | Run multiple animations simultaneously |
|
|
86
|
+
| `Timeline` | Imperative animation sequencing |
|
|
87
|
+
|
|
88
|
+
### 🎭 Presentations
|
|
89
|
+
|
|
90
|
+
| Component | Description |
|
|
91
|
+
|-----------|-------------|
|
|
92
|
+
| `Presentation` | Full slide-deck system with transitions and keyboard navigation |
|
|
93
|
+
| `Slide` | Individual slide with title, notes, and background |
|
|
94
|
+
|
|
95
|
+
### 🪝 Hooks
|
|
96
|
+
|
|
97
|
+
| Hook | Description |
|
|
98
|
+
|------|-------------|
|
|
99
|
+
| `useCurrentFrame()` | Current frame number (0-based) |
|
|
100
|
+
| `interpolate()` | Map frame values through input/output ranges with easing |
|
|
101
|
+
| `useElucimContext()` | Full scene context — frame, fps, dimensions |
|
|
102
|
+
| `usePresentationContext()` | Slide state and navigation inside a Presentation |
|
|
103
|
+
| `useInsidePresentation()` | Detect if running inside a Presentation |
|
|
104
|
+
|
|
105
|
+
### 🎨 Easing Functions
|
|
106
|
+
|
|
107
|
+
20+ built-in easings including `linear`, `easeInOutCubic`, `easeOutElastic`, `easeOutBounce`, plus `spring()` and `cubicBezier()` generators.
|
|
108
|
+
|
|
109
|
+
## Examples
|
|
110
|
+
|
|
111
|
+
### Animated Sine Curve
|
|
112
|
+
|
|
113
|
+
```tsx
|
|
114
|
+
import { Player, Axes, FunctionPlot, Draw, Sequence, FadeIn, LaTeX } from '@elucim/core';
|
|
115
|
+
|
|
116
|
+
<Player width={800} height={500} fps={30} durationInFrames={120} autoPlay loop>
|
|
117
|
+
<Axes origin={[400, 280]} domain={[-3, 3]} range={[-1.5, 1.5]} scale={80}
|
|
118
|
+
axisColor="#888" labelColor="#888" />
|
|
119
|
+
<Sequence from={10} durationInFrames={110}>
|
|
120
|
+
<Draw duration={60}>
|
|
121
|
+
<FunctionPlot fn={(x) => Math.sin(x)} domain={[-3, 3]}
|
|
122
|
+
origin={[400, 280]} scale={80} color="#6c5ce7" strokeWidth={2.5} />
|
|
123
|
+
</Draw>
|
|
124
|
+
</Sequence>
|
|
125
|
+
<Sequence from={70} durationInFrames={50}>
|
|
126
|
+
<FadeIn duration={20}>
|
|
127
|
+
<LaTeX expression="f(x) = \sin(x)" x={600} y={60} fontSize={20} color="#6c5ce7" />
|
|
128
|
+
</FadeIn>
|
|
129
|
+
</Sequence>
|
|
130
|
+
</Player>
|
|
131
|
+
```
|
|
132
|
+
|
|
133
|
+
### Slide Presentation
|
|
134
|
+
|
|
135
|
+
```tsx
|
|
136
|
+
import { Presentation, Slide, Player, FadeIn, Text, LaTeX } from '@elucim/core';
|
|
137
|
+
|
|
138
|
+
<Presentation width={1920} height={1080} transition="fade" transitionDuration={500} showHUD>
|
|
139
|
+
<Slide title="Welcome">
|
|
140
|
+
<Player width={1920} height={1080} fps={30} durationInFrames={90} autoPlay loop controls={false}>
|
|
141
|
+
<FadeIn duration={25}>
|
|
142
|
+
<Text x={960} y={480} fill="currentColor" fontSize={64} textAnchor="middle">
|
|
143
|
+
My Presentation
|
|
144
|
+
</Text>
|
|
145
|
+
</FadeIn>
|
|
146
|
+
</Player>
|
|
147
|
+
</Slide>
|
|
148
|
+
<Slide title="The Math">
|
|
149
|
+
<Player width={1920} height={1080} fps={30} durationInFrames={60} autoPlay loop controls={false}>
|
|
150
|
+
<FadeIn duration={30}>
|
|
151
|
+
<LaTeX expression="e^{i\pi} + 1 = 0" x={960} y={500} fontSize={48} color="#fdcb6e" />
|
|
152
|
+
</FadeIn>
|
|
153
|
+
</Player>
|
|
154
|
+
</Slide>
|
|
155
|
+
</Presentation>
|
|
156
|
+
```
|
|
157
|
+
|
|
158
|
+
## Theme-Aware
|
|
159
|
+
|
|
160
|
+
Player and Scene automatically adapt to light and dark themes using CSS `light-dark()`. No custom CSS needed — colors, controls, and backgrounds resolve correctly in both modes.
|
|
161
|
+
|
|
162
|
+
## Keyboard Shortcuts
|
|
163
|
+
|
|
164
|
+
**Player:** `Space` play/pause, `←` / `→` seek, `Shift+←` / `Shift+→` seek 10 frames, `Home` / `End` jump
|
|
165
|
+
|
|
166
|
+
**Presentation:** `←` / `→` navigate slides, `Space` next, `F` fullscreen
|
|
167
|
+
|
|
168
|
+
## Documentation
|
|
169
|
+
|
|
170
|
+
Full docs with live interactive examples: [github.com/sethjuarez/elucim](https://github.com/sethjuarez/elucim)
|
|
171
|
+
|
|
172
|
+
## License
|
|
173
|
+
|
|
174
|
+
[MIT](https://github.com/sethjuarez/elucim/blob/main/LICENSE)
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elucim/core",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.2",
|
|
4
4
|
"description": "React library for animated math and concept visualizations — 3Blue1Brown-style for the web",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "MIT",
|
|
@@ -37,13 +37,6 @@
|
|
|
37
37
|
"files": [
|
|
38
38
|
"dist"
|
|
39
39
|
],
|
|
40
|
-
"scripts": {
|
|
41
|
-
"dev": "vite build --watch",
|
|
42
|
-
"build": "tsc && vite build",
|
|
43
|
-
"test": "vitest run",
|
|
44
|
-
"test:watch": "vitest",
|
|
45
|
-
"lint": "tsc --noEmit"
|
|
46
|
-
},
|
|
47
40
|
"peerDependencies": {
|
|
48
41
|
"react": "^18.0.0 || ^19.0.0",
|
|
49
42
|
"react-dom": "^18.0.0 || ^19.0.0"
|
|
@@ -63,5 +56,12 @@
|
|
|
63
56
|
},
|
|
64
57
|
"dependencies": {
|
|
65
58
|
"katex": "^0.16.33"
|
|
59
|
+
},
|
|
60
|
+
"scripts": {
|
|
61
|
+
"dev": "vite build --watch",
|
|
62
|
+
"build": "tsc && vite build",
|
|
63
|
+
"test": "vitest run",
|
|
64
|
+
"test:watch": "vitest",
|
|
65
|
+
"lint": "tsc --noEmit"
|
|
66
66
|
}
|
|
67
|
-
}
|
|
67
|
+
}
|