@elucim/core 0.1.0 → 0.1.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.
- package/README.md +174 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +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)
|