lumina-slides 8.3.0 โ 8.4.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 +140 -96
- package/dist/lumina-slides.js +15939 -6617
- package/dist/lumina-slides.umd.cjs +36 -19
- package/dist/style.css +1 -1
- package/package.json +6 -5
package/README.md
CHANGED
|
@@ -1,161 +1,205 @@
|
|
|
1
1
|
# Lumina Engine
|
|
2
2
|
|
|
3
3
|
<div align="center">
|
|
4
|
-
<br />
|
|
5
|
-
<p>
|
|
6
|
-
<b>The Interface Layer for the Agentic Era</b>
|
|
7
|
-
</p>
|
|
8
|
-
The first presentation engine designed for <b>LLMs</b>. Turn JSON into cinematic, interactive experiences.
|
|
9
|
-
</p>
|
|
10
|
-
<br />
|
|
11
4
|
|
|
12
|
-
<img src="https://raw.githubusercontent.com/PailletJuanPablo/lumina-slides/main/public/demo.gif" alt="Lumina Engine Demo" width="100%" style="border-radius:
|
|
5
|
+
<img src="https://raw.githubusercontent.com/PailletJuanPablo/lumina-slides/main/public/demo.gif" alt="Lumina Engine Demo" width="100%" style="border-radius: 12px; border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 20px 80px -20px rgba(0,0,0,0.5);" />
|
|
13
6
|
|
|
14
7
|
<br />
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
**Lumina Engine** is a high-performance, declarative library that enables AI agents and LLMs to generate professional, interactive UI and slide decks by simply outputting JSON. It bridges the gap between text generation and visual storytelling, offering deterministic, GPU-accelerated rendering without the hallucination of pixel-generation.
|
|
8
|
+
<br />
|
|
18
9
|
|
|
19
|
-
>
|
|
20
|
-
|
|
10
|
+
<h1>The Interface Layer for the Agentic Era</h1>
|
|
11
|
+
|
|
12
|
+
<p style="font-size: 1.2em; max-width: 600px;">
|
|
13
|
+
<b>Stop making your AI write HTML.</b>
|
|
14
|
+
<br>
|
|
15
|
+
Lumina turns "fuzzy" Agent thoughts into <br>
|
|
16
|
+
cinematic, 60fps GPU-accelerated experiences.
|
|
17
|
+
</p>
|
|
21
18
|
|
|
22
|
-
|
|
19
|
+
<p>
|
|
20
|
+
<a href="#-quick-start"><strong>๐ Quick Start</strong></a> ยท
|
|
21
|
+
<a href="#-layouts--gallery"><strong>๐จ Layout Gallery</strong></a> ยท
|
|
22
|
+
<a href="AGENTS.md"><strong>๐ค Agent Guide</strong></a>
|
|
23
|
+
</p>
|
|
23
24
|
|
|
24
|
-
|
|
25
|
+
[](https://www.npmjs.com/package/lumina-slides)
|
|
26
|
+
[](https://www.npmjs.com/package/lumina-slides)
|
|
27
|
+
[](https://github.com/PailletJuanPablo/lumina-slides/blob/main/LICENSE)
|
|
28
|
+
[](https://www.typescriptlang.org/)
|
|
25
29
|
|
|
26
|
-
|
|
27
|
-
- **Hallucination Proof**: The renderer handles the "how", the LLM only cares about the "what".
|
|
28
|
-
- **Zero Config**: No build steps or bundler configuration needed to generate visual content dynamically.
|
|
30
|
+
</div>
|
|
29
31
|
|
|
30
|
-
|
|
32
|
+
<br />
|
|
31
33
|
|
|
32
|
-
|
|
33
|
-
- **โก Reactive & Performant**: Built on Vue 3 + GSAP for 60fps animations even on mobile.
|
|
34
|
-
- **๐จ Cinematic Layouts**: "Pro" layouts (`timeline`, `statement`, `features`) that look good by default.
|
|
35
|
-
- **๐ก๏ธ Type Safe**: Full TypeScript support with exported types for your AI system prompts.
|
|
36
|
-
- **๐ Event Driven**: Hook into every user interaction to feed state back to your agent.
|
|
34
|
+
---
|
|
37
35
|
|
|
38
|
-
##
|
|
36
|
+
## ๐จ Layouts & Gallery
|
|
39
37
|
|
|
40
|
-
|
|
41
|
-
npm install lumina-slides
|
|
42
|
-
```
|
|
38
|
+
Lumina comes with **"Pro" Layouts** built-in. Your agent just needs to pick the `type`.
|
|
43
39
|
|
|
44
|
-
|
|
40
|
+
| Layout | Description | Visual Preview |
|
|
41
|
+
| :------------ | :---------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------ |
|
|
42
|
+
| **Statement** | High-impact text. Perfect for titles, big ideas, or "cover" slides. <br><br> `type: "statement"` | <img src="https://pailletjuanpablo.github.io/lumina-slides/layout-statement.png" width="200" style="border-radius: 6px;"> |
|
|
43
|
+
| **Features** | A powerful grid system for benefits, stats, or KPIs. Automatically adapts to the number of items. <br><br> `type: "features"` | <img src="https://pailletjuanpablo.github.io/lumina-slides/layout-features.png" width="200" style="border-radius: 6px;"> |
|
|
44
|
+
| **Timeline** | Chronological events, roadmaps, or history. Horizontal scrolling with snap points. <br><br> `type: "timeline"` | <img src="https://pailletjuanpablo.github.io/lumina-slides/layout-timeline.png" width="200" style="border-radius: 6px;"> |
|
|
45
|
+
| **Steps** | Numbered process flows, tutorials, or "How-To" guides. <br><br> `type: "steps"` | <img src="https://pailletjuanpablo.github.io/lumina-slides/layout-steps.png" width="200" style="border-radius: 6px;"> |
|
|
46
|
+
| **Half** | Visual context. Image on one side, text on the other. Responsive. <br><br> `type: "half"` | <img src="https://pailletjuanpablo.github.io/lumina-slides/layout-half.png" width="200" style="border-radius: 6px;"> |
|
|
47
|
+
| **Chart** | Data visualization with Chart.js. Bar, line, pie, doughnut charts. <br><br> `type: "chart"` | <img src="https://pailletjuanpablo.github.io/lumina-slides/layout-chart.png" width="200" style="border-radius: 6px;"> |
|
|
48
|
+
| **Embedded** | **Widget Mode**. Embed slides inside dashboards or smaller containers. <br><br> `type: "features" (compact)` | <img src="https://pailletjuanpablo.github.io/lumina-slides/layout-embedded.png" width="200" style="border-radius: 6px;"> |
|
|
45
49
|
|
|
46
|
-
|
|
50
|
+
> [!TIP] > **See the Code**: Click on the dropdowns below to see the exact JSON used to generate these slides.
|
|
47
51
|
|
|
48
|
-
|
|
52
|
+
<details>
|
|
53
|
+
<summary><b>Example: Timeline JSON</b></summary>
|
|
49
54
|
|
|
50
55
|
```json
|
|
51
56
|
{
|
|
52
|
-
"
|
|
53
|
-
"
|
|
57
|
+
"type": "timeline",
|
|
58
|
+
"title": "Project History",
|
|
59
|
+
"timeline": [
|
|
54
60
|
{
|
|
55
|
-
"
|
|
56
|
-
"title": "
|
|
57
|
-
"
|
|
58
|
-
"meta": { "variant": "gradient" }
|
|
61
|
+
"date": "2023",
|
|
62
|
+
"title": "Inception",
|
|
63
|
+
"description": "The idea is born."
|
|
59
64
|
},
|
|
60
65
|
{
|
|
61
|
-
"
|
|
62
|
-
"title": "
|
|
63
|
-
"
|
|
64
|
-
{
|
|
65
|
-
"title": "Growth",
|
|
66
|
-
"description": "+145% YoY",
|
|
67
|
-
"icon": "trending-up"
|
|
68
|
-
},
|
|
69
|
-
{ "title": "Retention", "description": "98% Renewal", "icon": "users" }
|
|
70
|
-
]
|
|
66
|
+
"date": "2024",
|
|
67
|
+
"title": "Launch",
|
|
68
|
+
"description": "First public release."
|
|
71
69
|
}
|
|
72
70
|
]
|
|
73
71
|
}
|
|
74
72
|
```
|
|
75
73
|
|
|
76
|
-
|
|
74
|
+
</details>
|
|
77
75
|
|
|
78
|
-
|
|
76
|
+
<details>
|
|
77
|
+
<summary><b>Example: Chart JSON</b></summary>
|
|
79
78
|
|
|
80
|
-
```
|
|
81
|
-
|
|
82
|
-
|
|
79
|
+
```json
|
|
80
|
+
{
|
|
81
|
+
"type": "chart",
|
|
82
|
+
"chartType": "bar",
|
|
83
|
+
"title": "Quarterly Revenue",
|
|
84
|
+
"data": {
|
|
85
|
+
"labels": ["Q1", "Q2", "Q3", "Q4"],
|
|
86
|
+
"datasets": [
|
|
87
|
+
{ "label": "Revenue", "values": [120, 150, 180, 220], "color": "c:p" }
|
|
88
|
+
]
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
```
|
|
83
92
|
|
|
84
|
-
|
|
85
|
-
// No Vue installation required.
|
|
86
|
-
const engine = new Lumina("#app", {
|
|
87
|
-
theme: "dark",
|
|
88
|
-
});
|
|
93
|
+
</details>
|
|
89
94
|
|
|
90
|
-
|
|
91
|
-
const llmOutput = await agent.generatePresentation();
|
|
95
|
+
---
|
|
92
96
|
|
|
93
|
-
|
|
97
|
+
## ๐ญ Theming
|
|
98
|
+
|
|
99
|
+
Lumina includes **6 beautiful theme presets** out-of-the-box. Just pass the name:
|
|
100
|
+
|
|
101
|
+
```typescript
|
|
102
|
+
const engine = new Lumina("#app", { theme: "ocean" });
|
|
94
103
|
```
|
|
95
104
|
|
|
96
|
-
|
|
105
|
+
| Theme | Description | Preview |
|
|
106
|
+
| :----------- | :---------------------------------- | :---------------------------------------------------------------------------------------------------------------------- |
|
|
107
|
+
| **default** | Clean blue on dark. Professional. | <img src="https://pailletjuanpablo.github.io/lumina-slides/theme-default.png" width="180" style="border-radius: 6px;"> |
|
|
108
|
+
| **ocean** | Cyan on slate. Calm and focused. | <img src="https://pailletjuanpablo.github.io/lumina-slides/theme-ocean.png" width="180" style="border-radius: 6px;"> |
|
|
109
|
+
| **midnight** | Indigo on black. Bold and dramatic. | <img src="https://pailletjuanpablo.github.io/lumina-slides/theme-midnight.png" width="180" style="border-radius: 6px;"> |
|
|
110
|
+
| **forest** | Emerald greens. Natural and fresh. | <img src="https://pailletjuanpablo.github.io/lumina-slides/theme-forest.png" width="180" style="border-radius: 6px;"> |
|
|
111
|
+
| **cyber** | Neon pink. Sci-fi futuristic. | <img src="https://pailletjuanpablo.github.io/lumina-slides/theme-cyber.png" width="180" style="border-radius: 6px;"> |
|
|
112
|
+
| **latte** | Light mode. Warm amber on cream. | <img src="https://pailletjuanpablo.github.io/lumina-slides/theme-latte.png" width="180" style="border-radius: 6px;"> |
|
|
97
113
|
|
|
98
|
-
|
|
114
|
+
---
|
|
99
115
|
|
|
100
|
-
|
|
116
|
+
## โก Quick Start
|
|
101
117
|
|
|
102
|
-
|
|
118
|
+
### 1. Install
|
|
103
119
|
|
|
104
|
-
|
|
105
|
-
|
|
120
|
+
```bash
|
|
121
|
+
npm install lumina-slides
|
|
122
|
+
```
|
|
106
123
|
|
|
107
|
-
###
|
|
124
|
+
### 2. Implementation
|
|
108
125
|
|
|
109
|
-
|
|
126
|
+
Lumina is a **Framework Agnostic** class. It mounts to any DOM node.
|
|
110
127
|
|
|
111
|
-
|
|
112
|
-
|
|
128
|
+
```typescript
|
|
129
|
+
import { Lumina } from "lumina-slides";
|
|
130
|
+
import "lumina-slides/style.css";
|
|
131
|
+
|
|
132
|
+
const engine = new Lumina("#app", {
|
|
133
|
+
theme: "dark",
|
|
134
|
+
loop: true,
|
|
135
|
+
});
|
|
113
136
|
|
|
114
|
-
|
|
137
|
+
// Load Data (From your API, or static)
|
|
138
|
+
engine.load({
|
|
139
|
+
meta: { title: "Demo Deck" },
|
|
140
|
+
slides: [
|
|
141
|
+
{ type: "statement", title: "Hello World", subtitle: "Powered by Lumina" },
|
|
142
|
+
],
|
|
143
|
+
});
|
|
144
|
+
```
|
|
145
|
+
|
|
146
|
+
---
|
|
115
147
|
|
|
116
|
-
|
|
148
|
+
## ๐ค Building Agents?
|
|
117
149
|
|
|
118
|
-
|
|
119
|
-
[View JSON Source](https://github.com/PailletJuanPablo/lumina-slides/blob/main/public/layout-features.json)
|
|
150
|
+
We have a dedicated guide for that.
|
|
120
151
|
|
|
121
|
-
|
|
152
|
+
> [!IMPORTANT] > **Read the [Agent Integration Guide](./AGENTS.md)**
|
|
153
|
+
>
|
|
154
|
+
> Learn about:
|
|
155
|
+
>
|
|
156
|
+
> - **Streaming**: How to pipe token streams directly into the engine.
|
|
157
|
+
> - **Aliases**: Improve latency by 30% using `t` instead of `title`.
|
|
158
|
+
> - **Feedback Loops**: How to let the AI know what the user is clicking.
|
|
122
159
|
|
|
123
|
-
|
|
160
|
+
### Token Optimization
|
|
124
161
|
|
|
125
|
-
|
|
126
|
-
[View JSON Source](https://github.com/PailletJuanPablo/lumina-slides/blob/main/public/layout-timeline.json)
|
|
162
|
+
Lumina includes a built-in normalizer. Your LLM can output "lazy" JSON to save money.
|
|
127
163
|
|
|
128
|
-
|
|
164
|
+
| Concept | Standard | Short Alias |
|
|
165
|
+
| :------------- | :----------- | :---------- |
|
|
166
|
+
| **Header** | `title` | `t` |
|
|
167
|
+
| **Sub-Header** | `subtitle` | `s` |
|
|
168
|
+
| **Picture** | `image` | `img` |
|
|
169
|
+
| **Background** | `background` | `bg` |
|
|
129
170
|
|
|
130
|
-
|
|
171
|
+
---
|
|
131
172
|
|
|
132
|
-
|
|
133
|
-
[View JSON Source](https://github.com/PailletJuanPablo/lumina-slides/blob/main/public/layout-steps.json)
|
|
173
|
+
## ๐ API Reference
|
|
134
174
|
|
|
135
|
-
###
|
|
175
|
+
### `engine.load(deck)`
|
|
136
176
|
|
|
137
|
-
|
|
177
|
+
Replaces the entire deck. Use this for the initial load.
|
|
138
178
|
|
|
139
|
-
|
|
140
|
-
[View JSON Source](https://github.com/PailletJuanPablo/lumina-slides/blob/main/public/layout-embedded.json)
|
|
179
|
+
### `engine.patch(diff)`
|
|
141
180
|
|
|
142
|
-
|
|
181
|
+
Updates **parts** of the deck. Use this for:
|
|
143
182
|
|
|
144
|
-
|
|
183
|
+
- Real-time streaming (appending slides).
|
|
184
|
+
- Correcting typos live.
|
|
185
|
+
- Updating a "Status" slide based on live data.
|
|
145
186
|
|
|
146
|
-
|
|
187
|
+
### `engine.on(event, handler)`
|
|
147
188
|
|
|
148
|
-
|
|
189
|
+
Listen to user behavior.
|
|
149
190
|
|
|
150
|
-
|
|
191
|
+
- `action`: User clicked a button.
|
|
192
|
+
- `slideChange`: User navigated.
|
|
151
193
|
|
|
152
194
|
```typescript
|
|
153
|
-
engine.on("action", (
|
|
154
|
-
//
|
|
155
|
-
|
|
195
|
+
engine.on("action", (e) => {
|
|
196
|
+
// e.value = "buy_now_clicked"
|
|
197
|
+
// Tell the Agent to proceed to checkout!
|
|
156
198
|
});
|
|
157
199
|
```
|
|
158
200
|
|
|
159
|
-
|
|
201
|
+
---
|
|
160
202
|
|
|
161
|
-
|
|
203
|
+
<div align="center">
|
|
204
|
+
<p>Built with โค๏ธ by <a href="https://pailletjp.com">Juan Pablo Paillet</a>.</p>
|
|
205
|
+
</div>
|