domma-cms 0.23.0 → 0.25.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.
- package/CLAUDE.md +14 -0
- package/admin/js/api.js +1 -1
- package/admin/js/app.js +4 -4
- package/admin/js/lib/crud-tutorial.js +1 -1
- package/admin/js/lib/project-context.js +1 -1
- package/admin/js/templates/api-endpoint-editor.html +120 -0
- package/admin/js/templates/api-endpoints.html +13 -0
- package/admin/js/templates/api-tokens.html +13 -0
- package/admin/js/templates/effects.html +752 -752
- package/admin/js/templates/form-submissions.html +30 -30
- package/admin/js/templates/forms.html +17 -17
- package/admin/js/templates/my-profile.html +17 -17
- package/admin/js/templates/role-editor.html +70 -70
- package/admin/js/templates/roles.html +10 -10
- package/admin/js/views/api-endpoint-editor.js +1 -0
- package/admin/js/views/api-endpoints.js +7 -0
- package/admin/js/views/api-tokens.js +8 -0
- package/admin/js/views/collection-editor.js +4 -4
- package/admin/js/views/index.js +1 -1
- package/admin/js/views/project-detail.js +1 -1
- package/admin/js/views/roles.js +1 -1
- package/bin/lib/config-merge.js +44 -44
- package/bin/update.js +547 -547
- package/config/menus/admin-sidebar.json +13 -1
- package/package.json +1 -1
- package/server/middleware/auth.js +253 -253
- package/server/routes/api/api-endpoints.js +96 -0
- package/server/routes/api/api-tokens.js +83 -0
- package/server/routes/api/auth.js +309 -309
- package/server/routes/api/collections.js +114 -17
- package/server/routes/api/endpoints-public.js +88 -0
- package/server/routes/api/navigation.js +42 -42
- package/server/routes/api/settings.js +141 -141
- package/server/routes/public.js +202 -202
- package/server/server.js +16 -1
- package/server/services/apiEndpoints.js +402 -0
- package/server/services/apiTokens.js +273 -0
- package/server/services/email.js +167 -167
- package/server/services/permissionRegistry.js +26 -0
- package/server/services/presetCollections.js +54 -0
- package/server/services/projects.js +18 -2
- package/server/services/roles.js +16 -0
- package/server/services/scaffolder.js +54 -1
- package/server/services/sidebar-migration.js +45 -0
- package/server/services/userProfiles.js +199 -199
- package/server/services/users.js +302 -302
- package/config/connections.json.bak +0 -9
|
@@ -1,752 +1,752 @@
|
|
|
1
|
-
<div class="view-header">
|
|
2
|
-
<h1><span data-icon="sparkles"></span> Domma Effects</h1>
|
|
3
|
-
<div>
|
|
4
|
-
<button id="save-settings-btn" class="btn btn-primary">
|
|
5
|
-
<span data-icon="save"></span> Save
|
|
6
|
-
</button>
|
|
7
|
-
</div>
|
|
8
|
-
</div>
|
|
9
|
-
|
|
10
|
-
<!-- Top-level tabs -->
|
|
11
|
-
<div id="effects-tabs" class="tabs">
|
|
12
|
-
<div class="tab-list">
|
|
13
|
-
<button class="tab-item active">Settings</button>
|
|
14
|
-
<button class="tab-item">Shortcode Reference</button>
|
|
15
|
-
</div>
|
|
16
|
-
<div class="tab-content">
|
|
17
|
-
|
|
18
|
-
<!-- Settings tab panel -->
|
|
19
|
-
<div class="tab-panel active">
|
|
20
|
-
<div class="card mb-4">
|
|
21
|
-
<div class="card-body">
|
|
22
|
-
<div class="row mb-3">
|
|
23
|
-
<div class="col">
|
|
24
|
-
<label class="form-check-label">
|
|
25
|
-
<input id="field-respect-motion" type="checkbox">
|
|
26
|
-
Respect <code>prefers-reduced-motion</code>
|
|
27
|
-
</label>
|
|
28
|
-
<span class="form-hint">When enabled, JS effects are skipped for users who prefer reduced motion. Content remains visible.</span>
|
|
29
|
-
</div>
|
|
30
|
-
</div>
|
|
31
|
-
<div class="row mb-3">
|
|
32
|
-
<div class="col-6">
|
|
33
|
-
<label class="form-label">Default animation duration (ms)</label>
|
|
34
|
-
<input id="field-default-duration" type="number" class="form-input" min="0" max="10000"
|
|
35
|
-
placeholder="600">
|
|
36
|
-
<span class="form-hint">Used by reveal when no <code>duration</code> attribute is specified.</span>
|
|
37
|
-
</div>
|
|
38
|
-
<div class="col-6">
|
|
39
|
-
<label class="form-label">Default reveal animation</label>
|
|
40
|
-
<select id="field-default-animation" class="form-select">
|
|
41
|
-
<option value="fade">Fade</option>
|
|
42
|
-
<option value="slide-up">Slide up</option>
|
|
43
|
-
<option value="slide-down">Slide down</option>
|
|
44
|
-
<option value="zoom">Zoom</option>
|
|
45
|
-
<option value="flip">Flip</option>
|
|
46
|
-
</select>
|
|
47
|
-
</div>
|
|
48
|
-
</div>
|
|
49
|
-
<div class="row">
|
|
50
|
-
<div class="col-6">
|
|
51
|
-
<label class="form-label">Default scroll threshold</label>
|
|
52
|
-
<input id="field-default-threshold" type="number" class="form-input" min="0" max="1"
|
|
53
|
-
step="0.05"
|
|
54
|
-
placeholder="0.1">
|
|
55
|
-
<span class="form-hint">Fraction of element visible before reveal fires (0.0–1.0).</span>
|
|
56
|
-
</div>
|
|
57
|
-
</div>
|
|
58
|
-
</div>
|
|
59
|
-
</div>
|
|
60
|
-
</div>
|
|
61
|
-
|
|
62
|
-
<!-- Shortcode Reference tab panel -->
|
|
63
|
-
<div class="tab-panel">
|
|
64
|
-
<p class="text-muted mb-3">Use these shortcodes in any page's Markdown content. The <strong>Effects</strong>
|
|
65
|
-
toolbar button in the editor inserts them automatically.</p>
|
|
66
|
-
|
|
67
|
-
<!-- Sub-tabs -->
|
|
68
|
-
<div class="mb-3" style="display:flex;gap:6px;flex-wrap:wrap;">
|
|
69
|
-
<button class="btn btn-sm effects-tab-btn active" data-fx-tab="entrance">Entrance</button>
|
|
70
|
-
<button class="btn btn-sm effects-tab-btn" data-fx-tab="animation">Animation</button>
|
|
71
|
-
<button class="btn btn-sm effects-tab-btn" data-fx-tab="text">Text</button>
|
|
72
|
-
<button class="btn btn-sm effects-tab-btn" data-fx-tab="visual">Visual</button>
|
|
73
|
-
<button class="btn btn-sm effects-tab-btn" data-fx-tab="examples">Examples</button>
|
|
74
|
-
<button class="btn btn-sm effects-tab-btn" data-fx-tab="celebrations">Celebrations</button>
|
|
75
|
-
</div>
|
|
76
|
-
|
|
77
|
-
<!-- Entrance tab -->
|
|
78
|
-
<div id="tab-entrance" class="effects-tab-panel">
|
|
79
|
-
<h3 class="mb-2">Reveal</h3>
|
|
80
|
-
<p class="text-muted mb-2">Triggers a scroll-activated entrance animation when the element enters the
|
|
81
|
-
viewport.
|
|
82
|
-
Great for headers, cards, and feature sections.</p>
|
|
83
|
-
<pre class="code-block mb-2">[reveal animation="fade" duration="600" delay="0" threshold="0.1" once="true"]
|
|
84
|
-
## Your heading or content
|
|
85
|
-
|
|
86
|
-
Markdown **works** inside.
|
|
87
|
-
[/reveal]</pre>
|
|
88
|
-
<table class="table mb-3">
|
|
89
|
-
<thead>
|
|
90
|
-
<tr>
|
|
91
|
-
<th>Attribute</th>
|
|
92
|
-
<th>Default</th>
|
|
93
|
-
<th>Description</th>
|
|
94
|
-
</tr>
|
|
95
|
-
</thead>
|
|
96
|
-
<tbody>
|
|
97
|
-
<tr>
|
|
98
|
-
<td><code>animation</code></td>
|
|
99
|
-
<td>fade</td>
|
|
100
|
-
<td>fade, slide-up, slide-down, zoom, flip</td>
|
|
101
|
-
</tr>
|
|
102
|
-
<tr>
|
|
103
|
-
<td><code>duration</code></td>
|
|
104
|
-
<td>600</td>
|
|
105
|
-
<td>Animation duration in milliseconds</td>
|
|
106
|
-
</tr>
|
|
107
|
-
<tr>
|
|
108
|
-
<td><code>delay</code></td>
|
|
109
|
-
<td>0</td>
|
|
110
|
-
<td>Delay before animation starts (ms)</td>
|
|
111
|
-
</tr>
|
|
112
|
-
<tr>
|
|
113
|
-
<td><code>threshold</code></td>
|
|
114
|
-
<td>0.1</td>
|
|
115
|
-
<td>Fraction visible before triggering (0–1)</td>
|
|
116
|
-
</tr>
|
|
117
|
-
<tr>
|
|
118
|
-
<td><code>once</code></td>
|
|
119
|
-
<td>true</td>
|
|
120
|
-
<td>Only animate once (true/false)</td>
|
|
121
|
-
</tr>
|
|
122
|
-
</tbody>
|
|
123
|
-
</table>
|
|
124
|
-
<p class="text-muted mb-3" style="font-size:.85rem;"><strong>Tip:</strong> Use <code>delay</code> to stagger
|
|
125
|
-
multiple
|
|
126
|
-
reveal blocks for a cascade effect, or use <code>[row reveal]</code> below for automatic staggering.</p>
|
|
127
|
-
|
|
128
|
-
<h3 class="mb-2">Row Reveal</h3>
|
|
129
|
-
<p class="text-muted mb-2">Add <code>reveal</code> to a <code>[row]</code> shortcode to automatically
|
|
130
|
-
animate
|
|
131
|
-
child columns into view one by one as the row scrolls into the viewport. No need to wrap each column in
|
|
132
|
-
a
|
|
133
|
-
separate <code>[reveal]</code> block.</p>
|
|
134
|
-
<pre class="code-block mb-2">[row gap="4" reveal reveal-mode="stagger" reveal-animation="slide-up"]
|
|
135
|
-
[col]First to appear[/col]
|
|
136
|
-
[col]Second to appear[/col]
|
|
137
|
-
[col]Third to appear[/col]
|
|
138
|
-
[/row]</pre>
|
|
139
|
-
<table class="table mb-3">
|
|
140
|
-
<thead>
|
|
141
|
-
<tr>
|
|
142
|
-
<th>Attribute</th>
|
|
143
|
-
<th>Default</th>
|
|
144
|
-
<th>Description</th>
|
|
145
|
-
</tr>
|
|
146
|
-
</thead>
|
|
147
|
-
<tbody>
|
|
148
|
-
<tr>
|
|
149
|
-
<td><code>reveal</code></td>
|
|
150
|
-
<td>—</td>
|
|
151
|
-
<td>Flag — enables scroll-triggered reveal on child columns</td>
|
|
152
|
-
</tr>
|
|
153
|
-
<tr>
|
|
154
|
-
<td><code>reveal-animation</code></td>
|
|
155
|
-
<td>slide-up</td>
|
|
156
|
-
<td>slide-up, slide-down, slide-left, slide-right, fade, zoom, flip</td>
|
|
157
|
-
</tr>
|
|
158
|
-
<tr>
|
|
159
|
-
<td><code>reveal-mode</code></td>
|
|
160
|
-
<td>stagger</td>
|
|
161
|
-
<td>stagger (overlapping) or sequence (one after another)</td>
|
|
162
|
-
</tr>
|
|
163
|
-
<tr>
|
|
164
|
-
<td><code>reveal-duration</code></td>
|
|
165
|
-
<td>400</td>
|
|
166
|
-
<td>Animation duration in milliseconds</td>
|
|
167
|
-
</tr>
|
|
168
|
-
<tr>
|
|
169
|
-
<td><code>reveal-stagger</code></td>
|
|
170
|
-
<td>60</td>
|
|
171
|
-
<td>Delay between each child column (ms)</td>
|
|
172
|
-
</tr>
|
|
173
|
-
<tr>
|
|
174
|
-
<td><code>reveal-delay</code></td>
|
|
175
|
-
<td>0</td>
|
|
176
|
-
<td>Initial delay before first animation (ms)</td>
|
|
177
|
-
</tr>
|
|
178
|
-
<tr>
|
|
179
|
-
<td><code>reveal-direction</code></td>
|
|
180
|
-
<td>ltr</td>
|
|
181
|
-
<td>ltr (left to right) or rtl (right to left)</td>
|
|
182
|
-
</tr>
|
|
183
|
-
</tbody>
|
|
184
|
-
</table>
|
|
185
|
-
|
|
186
|
-
<h4 class="mb-1" style="font-size:.9rem;">Fade with right-to-left direction</h4>
|
|
187
|
-
<pre class="code-block mb-2">[row gap="3" reveal reveal-animation="fade" reveal-direction="rtl"]
|
|
188
|
-
[col]Appears third[/col]
|
|
189
|
-
[col]Appears second[/col]
|
|
190
|
-
[col]Appears first[/col]
|
|
191
|
-
[/row]</pre>
|
|
192
|
-
|
|
193
|
-
<h4 class="mb-1" style="font-size:.9rem;">Zoom with initial delay</h4>
|
|
194
|
-
<pre class="code-block mb-2">[row gap="4" reveal reveal-animation="zoom" reveal-delay="200" reveal-stagger="100"]
|
|
195
|
-
[col]Zooms in after 200ms[/col]
|
|
196
|
-
[col]Zooms in after 300ms[/col]
|
|
197
|
-
[/row]</pre>
|
|
198
|
-
</div>
|
|
199
|
-
|
|
200
|
-
<!-- Animation tab -->
|
|
201
|
-
<div id="tab-animation" class="effects-tab-panel">
|
|
202
|
-
<h3 class="mb-2">Breathe</h3>
|
|
203
|
-
<p class="text-muted mb-2">Continuous gentle scaling — makes elements feel alive. Ideal for hero images or
|
|
204
|
-
call-to-action buttons.</p>
|
|
205
|
-
<pre class="code-block mb-3">[breathe amplitude="8" duration="3000"]
|
|
206
|
-
Content that breathes.
|
|
207
|
-
[/breathe]</pre>
|
|
208
|
-
|
|
209
|
-
<h3 class="mb-2">Pulse</h3>
|
|
210
|
-
<p class="text-muted mb-2">A repeating scale pulse — stronger than breathe, good for alerts or badges.</p>
|
|
211
|
-
<pre class="code-block mb-3">[pulse scale="1.05" duration="1000"]
|
|
212
|
-
Pulsing content.
|
|
213
|
-
[/pulse]</pre>
|
|
214
|
-
|
|
215
|
-
<h3 class="mb-2">Shake</h3>
|
|
216
|
-
<p class="text-muted mb-2">One-shot horizontal or vertical shake. Use for error states or attention-grabbing
|
|
217
|
-
elements.</p>
|
|
218
|
-
<pre class="code-block mb-3">[shake intensity="5" duration="500" direction="horizontal"]
|
|
219
|
-
This will shake.
|
|
220
|
-
[/shake]</pre>
|
|
221
|
-
|
|
222
|
-
<h3 class="mb-2">CSS Animate</h3>
|
|
223
|
-
<p class="text-muted mb-2">Applies Domma CSS animation utility classes — no JavaScript required.</p>
|
|
224
|
-
<pre class="code-block mb-2">[animate type="fade-in-up" duration="normal" delay="200" repeat="once"]
|
|
225
|
-
Content here.
|
|
226
|
-
[/animate]</pre>
|
|
227
|
-
<table class="table mb-3">
|
|
228
|
-
<thead>
|
|
229
|
-
<tr>
|
|
230
|
-
<th>Attribute</th>
|
|
231
|
-
<th>Values</th>
|
|
232
|
-
</tr>
|
|
233
|
-
</thead>
|
|
234
|
-
<tbody>
|
|
235
|
-
<tr>
|
|
236
|
-
<td><code>type</code></td>
|
|
237
|
-
<td>fade-in, fade-out, fade-in-up, fade-in-down, fade-in-left, fade-in-right, slide-in-up,
|
|
238
|
-
slide-in-down,
|
|
239
|
-
slide-in-left, slide-in-right, zoom-in, zoom-out, bounce, pulse, shake, spin, rotate-in, flip
|
|
240
|
-
</td>
|
|
241
|
-
</tr>
|
|
242
|
-
<tr>
|
|
243
|
-
<td><code>duration</code></td>
|
|
244
|
-
<td>fast, normal, slow, slower</td>
|
|
245
|
-
</tr>
|
|
246
|
-
<tr>
|
|
247
|
-
<td><code>delay</code></td>
|
|
248
|
-
<td>100, 200, 300, 500, 1000</td>
|
|
249
|
-
</tr>
|
|
250
|
-
<tr>
|
|
251
|
-
<td><code>repeat</code></td>
|
|
252
|
-
<td>once, infinite, repeat-2, repeat-3</td>
|
|
253
|
-
</tr>
|
|
254
|
-
</tbody>
|
|
255
|
-
</table>
|
|
256
|
-
</div>
|
|
257
|
-
|
|
258
|
-
<!-- Text tab -->
|
|
259
|
-
<div id="tab-text" class="effects-tab-panel">
|
|
260
|
-
<h3 class="mb-2">Typewriter (Scribe)</h3>
|
|
261
|
-
<p class="text-muted mb-2">Types text character by character. Supports a simple one-shot mode or a full
|
|
262
|
-
action script for sequenced multi-step animations.</p>
|
|
263
|
-
|
|
264
|
-
<h4 class="mb-1" style="font-size:.9rem;">Simple mode</h4>
|
|
265
|
-
<pre class="code-block mb-2">[scribe speed="50" cursor="true" loop="false"]
|
|
266
|
-
Your text appears letter by letter.
|
|
267
|
-
[/scribe]</pre>
|
|
268
|
-
|
|
269
|
-
<h4 class="mb-1" style="font-size:.9rem;">Script mode — action shortcodes</h4>
|
|
270
|
-
<pre class="code-block mb-2">[scribe loop="true" loop-delay="2000"]
|
|
271
|
-
[render effect="fade"]Hello, world![/render]
|
|
272
|
-
[wait]1500[/wait]
|
|
273
|
-
[undo /]
|
|
274
|
-
[render]Something else entirely.[/render]
|
|
275
|
-
[/scribe]</pre>
|
|
276
|
-
<p class="text-muted mb-2" style="font-size:.85rem;">When any <code>[render]</code>, <code>[wait]</code>, or
|
|
277
|
-
<code>[undo]</code> shortcode is present inside the body, script mode activates automatically.</p>
|
|
278
|
-
<table class="table mb-2">
|
|
279
|
-
<thead>
|
|
280
|
-
<tr>
|
|
281
|
-
<th>Action</th>
|
|
282
|
-
<th>Syntax</th>
|
|
283
|
-
<th>Description</th>
|
|
284
|
-
</tr>
|
|
285
|
-
</thead>
|
|
286
|
-
<tbody>
|
|
287
|
-
<tr>
|
|
288
|
-
<td><code>[render]</code></td>
|
|
289
|
-
<td><code>[render effect="fade"]Text[/render]</code></td>
|
|
290
|
-
<td>Type the text. Optional <code>effect</code>: fade, slide (for appearance)</td>
|
|
291
|
-
</tr>
|
|
292
|
-
<tr>
|
|
293
|
-
<td><code>[wait]</code></td>
|
|
294
|
-
<td><code>[wait]1500[/wait]</code></td>
|
|
295
|
-
<td>Pause for N milliseconds (number) or a CSS duration string (e.g. <code>2s</code>)</td>
|
|
296
|
-
</tr>
|
|
297
|
-
<tr>
|
|
298
|
-
<td><code>[undo]</code></td>
|
|
299
|
-
<td><code>[undo /]</code> or <code>[undo count="3" /]</code> or <code>[undo all="true" /]</code>
|
|
300
|
-
</td>
|
|
301
|
-
<td>Delete the last render action, N renders, or all renders</td>
|
|
302
|
-
</tr>
|
|
303
|
-
</tbody>
|
|
304
|
-
</table>
|
|
305
|
-
<table class="table mb-3">
|
|
306
|
-
<thead>
|
|
307
|
-
<tr>
|
|
308
|
-
<th>Attribute</th>
|
|
309
|
-
<th>Default</th>
|
|
310
|
-
<th>Description</th>
|
|
311
|
-
</tr>
|
|
312
|
-
</thead>
|
|
313
|
-
<tbody>
|
|
314
|
-
<tr>
|
|
315
|
-
<td><code>speed</code></td>
|
|
316
|
-
<td>50</td>
|
|
317
|
-
<td>Typing speed (ms per character)</td>
|
|
318
|
-
</tr>
|
|
319
|
-
<tr>
|
|
320
|
-
<td><code>delete-speed</code></td>
|
|
321
|
-
<td>30</td>
|
|
322
|
-
<td>Deletion speed (ms per character)</td>
|
|
323
|
-
</tr>
|
|
324
|
-
<tr>
|
|
325
|
-
<td><code>cursor</code></td>
|
|
326
|
-
<td>true</td>
|
|
327
|
-
<td>Show blinking cursor (true/false)</td>
|
|
328
|
-
</tr>
|
|
329
|
-
<tr>
|
|
330
|
-
<td><code>cursor-char</code></td>
|
|
331
|
-
<td>|</td>
|
|
332
|
-
<td>Character to use as cursor</td>
|
|
333
|
-
</tr>
|
|
334
|
-
<tr>
|
|
335
|
-
<td><code>cursor-type</code></td>
|
|
336
|
-
<td>—</td>
|
|
337
|
-
<td>Cursor style (block, underline, beam)</td>
|
|
338
|
-
</tr>
|
|
339
|
-
<tr>
|
|
340
|
-
<td><code>loop</code></td>
|
|
341
|
-
<td>false</td>
|
|
342
|
-
<td>Repeat script continuously (true/false)</td>
|
|
343
|
-
</tr>
|
|
344
|
-
<tr>
|
|
345
|
-
<td><code>loop-delay</code></td>
|
|
346
|
-
<td>1000</td>
|
|
347
|
-
<td>Pause before repeating (ms)</td>
|
|
348
|
-
</tr>
|
|
349
|
-
<tr>
|
|
350
|
-
<td><code>pause-on-hover</code></td>
|
|
351
|
-
<td>false</td>
|
|
352
|
-
<td>Pause animation while hovered (true/false)</td>
|
|
353
|
-
</tr>
|
|
354
|
-
</tbody>
|
|
355
|
-
</table>
|
|
356
|
-
|
|
357
|
-
<h3 class="mb-2">Scramble</h3>
|
|
358
|
-
<p class="text-muted mb-2">Reveals text through a character-scramble animation. Great for tech/data
|
|
359
|
-
aesthetics.</p>
|
|
360
|
-
<pre class="code-block mb-3">[scramble speed="50" loop="false"]
|
|
361
|
-
Scrambled reveal text.
|
|
362
|
-
[/scramble]</pre>
|
|
363
|
-
|
|
364
|
-
<h3 class="mb-2">Counter</h3>
|
|
365
|
-
<p class="text-muted mb-2">Animates a number from <code>from</code> to <code>to</code>. Use in stat
|
|
366
|
-
sections. This
|
|
367
|
-
shortcode is self-closing.</p>
|
|
368
|
-
<pre class="code-block mb-2">[counter to="100" from="0" prefix="$" suffix="+" duration="2000" /]</pre>
|
|
369
|
-
<table class="table mb-3">
|
|
370
|
-
<thead>
|
|
371
|
-
<tr>
|
|
372
|
-
<th>Attribute</th>
|
|
373
|
-
<th>Default</th>
|
|
374
|
-
<th>Description</th>
|
|
375
|
-
</tr>
|
|
376
|
-
</thead>
|
|
377
|
-
<tbody>
|
|
378
|
-
<tr>
|
|
379
|
-
<td><code>to</code></td>
|
|
380
|
-
<td>0</td>
|
|
381
|
-
<td>Target number</td>
|
|
382
|
-
</tr>
|
|
383
|
-
<tr>
|
|
384
|
-
<td><code>from</code></td>
|
|
385
|
-
<td>0</td>
|
|
386
|
-
<td>Starting number</td>
|
|
387
|
-
</tr>
|
|
388
|
-
<tr>
|
|
389
|
-
<td><code>duration</code></td>
|
|
390
|
-
<td>2000</td>
|
|
391
|
-
<td>Animation duration (ms)</td>
|
|
392
|
-
</tr>
|
|
393
|
-
<tr>
|
|
394
|
-
<td><code>prefix</code></td>
|
|
395
|
-
<td>—</td>
|
|
396
|
-
<td>Text before the number (e.g. $)</td>
|
|
397
|
-
</tr>
|
|
398
|
-
<tr>
|
|
399
|
-
<td><code>suffix</code></td>
|
|
400
|
-
<td>—</td>
|
|
401
|
-
<td>Text after the number (e.g. +)</td>
|
|
402
|
-
</tr>
|
|
403
|
-
<tr>
|
|
404
|
-
<td><code>decimals</code></td>
|
|
405
|
-
<td>0</td>
|
|
406
|
-
<td>Decimal places to display</td>
|
|
407
|
-
</tr>
|
|
408
|
-
<tr>
|
|
409
|
-
<td><code>separator</code></td>
|
|
410
|
-
<td>—</td>
|
|
411
|
-
<td>Thousands separator (e.g. ,)</td>
|
|
412
|
-
</tr>
|
|
413
|
-
</tbody>
|
|
414
|
-
</table>
|
|
415
|
-
<p class="text-muted" style="font-size:.85rem;"><strong>Tip:</strong> Counters work great in a grid — place
|
|
416
|
-
3–4
|
|
417
|
-
counter spans in a <code>[grid cols="4"]</code> for a stats section.</p>
|
|
418
|
-
</div>
|
|
419
|
-
|
|
420
|
-
<!-- Visual tab -->
|
|
421
|
-
<div id="tab-visual" class="effects-tab-panel">
|
|
422
|
-
<h3 class="mb-2">Ripple</h3>
|
|
423
|
-
<p class="text-muted mb-2">Click-triggered ripple effect on the element. Good for interactive content
|
|
424
|
-
blocks.</p>
|
|
425
|
-
<pre class="code-block mb-3">[ripple colour="#7c6af7" duration="600" opacity="0.3"]
|
|
426
|
-
Click this area for a ripple.
|
|
427
|
-
[/ripple]</pre>
|
|
428
|
-
|
|
429
|
-
<h3 class="mb-2">Twinkle</h3>
|
|
430
|
-
<p class="text-muted mb-2">Generates animated particle effects inside the element. Use for hero sections or
|
|
431
|
-
decorative areas.</p>
|
|
432
|
-
<pre class="code-block mb-3">[twinkle count="80" shape="star" colour="#fff" min-size="2" max-size="6"]
|
|
433
|
-
Content beneath the particles.
|
|
434
|
-
[/twinkle]</pre>
|
|
435
|
-
|
|
436
|
-
<h3 class="mb-2">Ambient Background</h3>
|
|
437
|
-
<p class="text-muted mb-2">Applies animated CSS background classes — no JavaScript needed.</p>
|
|
438
|
-
<pre class="code-block mb-2">[ambient type="float-blobs" speed="slow" intensity="subtle"]
|
|
439
|
-
Content on animated background.
|
|
440
|
-
[/ambient]</pre>
|
|
441
|
-
<table class="table mb-3">
|
|
442
|
-
<thead>
|
|
443
|
-
<tr>
|
|
444
|
-
<th>Attribute</th>
|
|
445
|
-
<th>Values</th>
|
|
446
|
-
</tr>
|
|
447
|
-
</thead>
|
|
448
|
-
<tbody>
|
|
449
|
-
<tr>
|
|
450
|
-
<td><code>type</code></td>
|
|
451
|
-
<td>rotate-glow, rotate-dual, rotate-spotlight, float-blobs, float-orbs, float-particles, wave,
|
|
452
|
-
ripple,
|
|
453
|
-
aurora
|
|
454
|
-
</td>
|
|
455
|
-
</tr>
|
|
456
|
-
<tr>
|
|
457
|
-
<td><code>speed</code></td>
|
|
458
|
-
<td>slow, normal, fast</td>
|
|
459
|
-
</tr>
|
|
460
|
-
<tr>
|
|
461
|
-
<td><code>intensity</code></td>
|
|
462
|
-
<td>subtle, intense</td>
|
|
463
|
-
</tr>
|
|
464
|
-
</tbody>
|
|
465
|
-
</table>
|
|
466
|
-
</div>
|
|
467
|
-
|
|
468
|
-
<!-- Examples tab -->
|
|
469
|
-
<div id="tab-examples" class="effects-tab-panel">
|
|
470
|
-
<h3 class="mb-2">Hero section with typewriter</h3>
|
|
471
|
-
<pre class="code-block mb-3">[reveal animation="fade"]
|
|
472
|
-
# Welcome to our site
|
|
473
|
-
|
|
474
|
-
[scribe speed="40" cursor="true"]
|
|
475
|
-
We build things that matter.
|
|
476
|
-
[/scribe]
|
|
477
|
-
[/reveal]</pre>
|
|
478
|
-
|
|
479
|
-
<h3 class="mb-2">Stats row with counters</h3>
|
|
480
|
-
<pre class="code-block mb-3">[reveal animation="slide-up"]
|
|
481
|
-
[grid cols="3" gap="4"]
|
|
482
|
-
[col]
|
|
483
|
-
## [counter to="500" suffix="+" /]
|
|
484
|
-
Happy clients
|
|
485
|
-
[/col]
|
|
486
|
-
[col]
|
|
487
|
-
## [counter to="12" suffix=" years" /]
|
|
488
|
-
In business
|
|
489
|
-
[/col]
|
|
490
|
-
[col]
|
|
491
|
-
## [counter to="98" suffix="%" /]
|
|
492
|
-
Satisfaction
|
|
493
|
-
[/col]
|
|
494
|
-
[/grid]
|
|
495
|
-
[/reveal]</pre>
|
|
496
|
-
|
|
497
|
-
<h3 class="mb-2">Staggered card reveal</h3>
|
|
498
|
-
<pre class="code-block mb-3">[row gap="4" reveal reveal-animation="slide-up" reveal-stagger="100"]
|
|
499
|
-
[col]
|
|
500
|
-
[card title="Feature One"]First card content.[/card]
|
|
501
|
-
[/col]
|
|
502
|
-
[col]
|
|
503
|
-
[card title="Feature Two"]Second card content.[/card]
|
|
504
|
-
[/col]
|
|
505
|
-
[col]
|
|
506
|
-
[card title="Feature Three"]Third card content.[/card]
|
|
507
|
-
[/col]
|
|
508
|
-
[/row]</pre>
|
|
509
|
-
|
|
510
|
-
<h3 class="mb-2">Hero with ambient background</h3>
|
|
511
|
-
<pre class="code-block mb-3">[ambient type="aurora" speed="slow" intensity="subtle"]
|
|
512
|
-
[reveal animation="zoom"]
|
|
513
|
-
# Your headline here
|
|
514
|
-
|
|
515
|
-
A compelling subheading that draws users in.
|
|
516
|
-
[/reveal]
|
|
517
|
-
[/ambient]</pre>
|
|
518
|
-
|
|
519
|
-
<h3 class="mb-2">Christmas page with fireworks</h3>
|
|
520
|
-
<pre class="code-block mb-3">[celebrate theme="christmas" intensity="medium" /]
|
|
521
|
-
|
|
522
|
-
[fireworks]
|
|
523
|
-
[firework type="burst" colour="rainbow" /]
|
|
524
|
-
[firework type="sparkle" colour="primary" /]
|
|
525
|
-
[/fireworks]
|
|
526
|
-
|
|
527
|
-
[reveal animation="fade"]
|
|
528
|
-
# Merry Christmas!
|
|
529
|
-
[/reveal]</pre>
|
|
530
|
-
</div>
|
|
531
|
-
|
|
532
|
-
<!-- Celebrations tab -->
|
|
533
|
-
<div id="tab-celebrations" class="effects-tab-panel">
|
|
534
|
-
<h3 class="mb-2">Firework <span class="badge badge-info">CSS only</span></h3>
|
|
535
|
-
<p class="text-muted mb-2">Pure CSS particle effect — no JavaScript required. Works even without the plugin
|
|
536
|
-
enabled. Use self-closing for standalone particles, or wrapping to apply the firework classes to
|
|
537
|
-
content.</p>
|
|
538
|
-
<pre class="code-block mb-2">[firework type="burst" colour="rainbow" size="lg" continuous="true" /]</pre>
|
|
539
|
-
<pre class="code-block mb-2">[firework type="sparkle" colour="primary"]
|
|
540
|
-
Click me for a burst!
|
|
541
|
-
[/firework]</pre>
|
|
542
|
-
<table class="table mb-3">
|
|
543
|
-
<thead>
|
|
544
|
-
<tr>
|
|
545
|
-
<th>Attribute</th>
|
|
546
|
-
<th>Values</th>
|
|
547
|
-
<th>Description</th>
|
|
548
|
-
</tr>
|
|
549
|
-
</thead>
|
|
550
|
-
<tbody>
|
|
551
|
-
<tr>
|
|
552
|
-
<td><code>type</code></td>
|
|
553
|
-
<td>burst, sparkle, trail</td>
|
|
554
|
-
<td>Firework particle shape</td>
|
|
555
|
-
</tr>
|
|
556
|
-
<tr>
|
|
557
|
-
<td><code>colour</code></td>
|
|
558
|
-
<td>rainbow, primary, info, success, warning, danger</td>
|
|
559
|
-
<td>Particle colour theme</td>
|
|
560
|
-
</tr>
|
|
561
|
-
<tr>
|
|
562
|
-
<td><code>size</code></td>
|
|
563
|
-
<td>sm, md, lg</td>
|
|
564
|
-
<td>Particle size (default: md)</td>
|
|
565
|
-
</tr>
|
|
566
|
-
<tr>
|
|
567
|
-
<td><code>continuous</code></td>
|
|
568
|
-
<td>true / false</td>
|
|
569
|
-
<td>Loop the animation continuously</td>
|
|
570
|
-
</tr>
|
|
571
|
-
<tr>
|
|
572
|
-
<td><code>hover</code></td>
|
|
573
|
-
<td>true / false</td>
|
|
574
|
-
<td>Only animate on mouse hover</td>
|
|
575
|
-
</tr>
|
|
576
|
-
</tbody>
|
|
577
|
-
</table>
|
|
578
|
-
|
|
579
|
-
<h3 class="mb-2">Fireworks Container <span class="badge badge-info">CSS only</span></h3>
|
|
580
|
-
<p class="text-muted mb-2">Groups multiple firework elements into a positioned overlay container.</p>
|
|
581
|
-
<pre class="code-block mb-3">[fireworks]
|
|
582
|
-
[firework type="burst" colour="rainbow" /]
|
|
583
|
-
[firework type="sparkle" colour="primary" /]
|
|
584
|
-
[firework type="trail" colour="warning" /]
|
|
585
|
-
[/fireworks]</pre>
|
|
586
|
-
|
|
587
|
-
<h3 class="mb-2">Celebrate <span class="badge badge-info">JS canvas</span></h3>
|
|
588
|
-
<p class="text-muted mb-2">Canvas-based seasonal particle system. Auto-detects the active celebration based
|
|
589
|
-
on today's date, or specify a theme manually. Skipped automatically when
|
|
590
|
-
<code>prefers-reduced-motion</code> is active.</p>
|
|
591
|
-
<pre class="code-block mb-2">[celebrate theme="auto" intensity="medium" /]</pre>
|
|
592
|
-
<pre class="code-block mb-2">[celebrate theme="christmas" intensity="heavy" /]</pre>
|
|
593
|
-
<table class="table mb-3">
|
|
594
|
-
<thead>
|
|
595
|
-
<tr>
|
|
596
|
-
<th>Theme</th>
|
|
597
|
-
<th>Active dates</th>
|
|
598
|
-
</tr>
|
|
599
|
-
</thead>
|
|
600
|
-
<tbody>
|
|
601
|
-
<tr>
|
|
602
|
-
<td><code>auto</code></td>
|
|
603
|
-
<td>Detects automatically from the table below</td>
|
|
604
|
-
</tr>
|
|
605
|
-
<tr>
|
|
606
|
-
<td><code>christmas</code></td>
|
|
607
|
-
<td>1 Dec – 1 Jan (snowflakes)</td>
|
|
608
|
-
</tr>
|
|
609
|
-
<tr>
|
|
610
|
-
<td><code>halloween</code></td>
|
|
611
|
-
<td>26 Oct – 31 Oct (bats & pumpkins)</td>
|
|
612
|
-
</tr>
|
|
613
|
-
<tr>
|
|
614
|
-
<td><code>valentines</code></td>
|
|
615
|
-
<td>9 Feb – 14 Feb (hearts)</td>
|
|
616
|
-
</tr>
|
|
617
|
-
<tr>
|
|
618
|
-
<td><code>guy-fawkes</code></td>
|
|
619
|
-
<td>1 Nov – 5 Nov (fireworks)</td>
|
|
620
|
-
</tr>
|
|
621
|
-
<tr>
|
|
622
|
-
<td><code>st-patricks</code></td>
|
|
623
|
-
<td>12 Mar – 17 Mar (shamrocks)</td>
|
|
624
|
-
</tr>
|
|
625
|
-
<tr>
|
|
626
|
-
<td><code>st-davids</code></td>
|
|
627
|
-
<td>24 Feb – 1 Mar (daffodils)</td>
|
|
628
|
-
</tr>
|
|
629
|
-
<tr>
|
|
630
|
-
<td><code>st-georges</code></td>
|
|
631
|
-
<td>18 Apr – 23 Apr (roses)</td>
|
|
632
|
-
</tr>
|
|
633
|
-
<tr>
|
|
634
|
-
<td><code>st-andrews</code></td>
|
|
635
|
-
<td>25 Nov – 30 Nov (thistles)</td>
|
|
636
|
-
</tr>
|
|
637
|
-
</tbody>
|
|
638
|
-
</table>
|
|
639
|
-
<table class="table mb-3">
|
|
640
|
-
<thead>
|
|
641
|
-
<tr>
|
|
642
|
-
<th>Attribute</th>
|
|
643
|
-
<th>Values</th>
|
|
644
|
-
<th>Description</th>
|
|
645
|
-
</tr>
|
|
646
|
-
</thead>
|
|
647
|
-
<tbody>
|
|
648
|
-
<tr>
|
|
649
|
-
<td><code>theme</code></td>
|
|
650
|
-
<td>auto, christmas, halloween, valentines, guy-fawkes, st-patricks, st-davids, st-georges,
|
|
651
|
-
st-andrews
|
|
652
|
-
</td>
|
|
653
|
-
<td>Theme to use (default: auto)</td>
|
|
654
|
-
</tr>
|
|
655
|
-
<tr>
|
|
656
|
-
<td><code>intensity</code></td>
|
|
657
|
-
<td>light, medium, heavy</td>
|
|
658
|
-
<td>Particle density (default: medium)</td>
|
|
659
|
-
</tr>
|
|
660
|
-
</tbody>
|
|
661
|
-
</table>
|
|
662
|
-
<p class="text-muted"><strong>Tip:</strong> CSS fireworks (<code>[firework]</code>) render instantly with no
|
|
663
|
-
JS.
|
|
664
|
-
Canvas celebrations (<code>[celebrate]</code>) load the JS module on demand and degrade silently if
|
|
665
|
-
unavailable.</p>
|
|
666
|
-
|
|
667
|
-
<h3 class="mb-2">Ticker Tape <span class="badge badge-info">JS canvas</span></h3>
|
|
668
|
-
<p class="text-muted mb-2">A canvas-based ticker-tape parade. Coloured rectangular strips fall from the top,
|
|
669
|
-
sway, rotate, and fade. Self-closing form gives a full-page overlay; wrapping form scopes the parade
|
|
670
|
-
inside a container. Skipped automatically when <code>prefers-reduced-motion</code> is active.</p>
|
|
671
|
-
<h4 class="mb-1" style="font-size:.9rem;">Full-page overlay</h4>
|
|
672
|
-
<pre class="code-block mb-2">[ticker-tape palette="festive" /]</pre>
|
|
673
|
-
<h4 class="mb-1" style="font-size:.9rem;">Container-scoped</h4>
|
|
674
|
-
<pre class="code-block mb-2">[ticker-tape palette="gold" density="40"]
|
|
675
|
-
## Celebration content
|
|
676
|
-
The strips rain down inside this block only.
|
|
677
|
-
[/ticker-tape]</pre>
|
|
678
|
-
<h4 class="mb-1" style="font-size:.9rem;">One-shot burst</h4>
|
|
679
|
-
<pre class="code-block mb-2">[ticker-tape palette="rainbow" burst="true" burst-count="200" /]</pre>
|
|
680
|
-
<table class="table mb-3">
|
|
681
|
-
<thead>
|
|
682
|
-
<tr>
|
|
683
|
-
<th>Attribute</th>
|
|
684
|
-
<th>Default</th>
|
|
685
|
-
<th>Description</th>
|
|
686
|
-
</tr>
|
|
687
|
-
</thead>
|
|
688
|
-
<tbody>
|
|
689
|
-
<tr>
|
|
690
|
-
<td><code>palette</code></td>
|
|
691
|
-
<td>theme</td>
|
|
692
|
-
<td>theme, rainbow, gold, silver, festive, pastel, mono, sunset</td>
|
|
693
|
-
</tr>
|
|
694
|
-
<tr>
|
|
695
|
-
<td><code>density</code></td>
|
|
696
|
-
<td>50</td>
|
|
697
|
-
<td>Average strips on screen at any moment (continuous mode)</td>
|
|
698
|
-
</tr>
|
|
699
|
-
<tr>
|
|
700
|
-
<td><code>speed</code></td>
|
|
701
|
-
<td>1</td>
|
|
702
|
-
<td>Fall speed multiplier (1 = default)</td>
|
|
703
|
-
</tr>
|
|
704
|
-
<tr>
|
|
705
|
-
<td><code>sway</code></td>
|
|
706
|
-
<td>60</td>
|
|
707
|
-
<td>Horizontal sway amplitude in pixels</td>
|
|
708
|
-
</tr>
|
|
709
|
-
<tr>
|
|
710
|
-
<td><code>rotation-speed</code></td>
|
|
711
|
-
<td>6</td>
|
|
712
|
-
<td>Maximum rotation degrees per frame</td>
|
|
713
|
-
</tr>
|
|
714
|
-
<tr>
|
|
715
|
-
<td><code>min-width</code> / <code>max-width</code></td>
|
|
716
|
-
<td>5 / 9</td>
|
|
717
|
-
<td>Strip width range in pixels</td>
|
|
718
|
-
</tr>
|
|
719
|
-
<tr>
|
|
720
|
-
<td><code>min-height</code> / <code>max-height</code></td>
|
|
721
|
-
<td>12 / 22</td>
|
|
722
|
-
<td>Strip height range in pixels</td>
|
|
723
|
-
</tr>
|
|
724
|
-
<tr>
|
|
725
|
-
<td><code>fade-start</code></td>
|
|
726
|
-
<td>0.55</td>
|
|
727
|
-
<td>Fraction of fall (0–1) before strips begin to fade</td>
|
|
728
|
-
</tr>
|
|
729
|
-
<tr>
|
|
730
|
-
<td><code>burst</code></td>
|
|
731
|
-
<td>false</td>
|
|
732
|
-
<td>Drop a single batch and stop respawning</td>
|
|
733
|
-
</tr>
|
|
734
|
-
<tr>
|
|
735
|
-
<td><code>burst-count</code></td>
|
|
736
|
-
<td>150</td>
|
|
737
|
-
<td>Strips emitted in burst mode</td>
|
|
738
|
-
</tr>
|
|
739
|
-
<tr>
|
|
740
|
-
<td><code>z-index</code></td>
|
|
741
|
-
<td>1</td>
|
|
742
|
-
<td>Canvas z-index</td>
|
|
743
|
-
</tr>
|
|
744
|
-
</tbody>
|
|
745
|
-
</table>
|
|
746
|
-
<p class="text-muted"><strong>Tip:</strong> Self-closing <code>[ticker-tape /]</code> creates a fixed
|
|
747
|
-
full-page overlay (<code>position:fixed</code>); the wrapping form attaches the canvas to the
|
|
748
|
-
wrapping div so the parade is constrained to that block.</p>
|
|
749
|
-
</div>
|
|
750
|
-
</div><!-- /tab-panel shortcodes -->
|
|
751
|
-
</div><!-- /tab-content -->
|
|
752
|
-
</div><!-- /effects-tabs -->
|
|
1
|
+
<div class="view-header">
|
|
2
|
+
<h1><span data-icon="sparkles"></span> Domma Effects</h1>
|
|
3
|
+
<div>
|
|
4
|
+
<button id="save-settings-btn" class="btn btn-primary">
|
|
5
|
+
<span data-icon="save"></span> Save
|
|
6
|
+
</button>
|
|
7
|
+
</div>
|
|
8
|
+
</div>
|
|
9
|
+
|
|
10
|
+
<!-- Top-level tabs -->
|
|
11
|
+
<div id="effects-tabs" class="tabs">
|
|
12
|
+
<div class="tab-list">
|
|
13
|
+
<button class="tab-item active">Settings</button>
|
|
14
|
+
<button class="tab-item">Shortcode Reference</button>
|
|
15
|
+
</div>
|
|
16
|
+
<div class="tab-content">
|
|
17
|
+
|
|
18
|
+
<!-- Settings tab panel -->
|
|
19
|
+
<div class="tab-panel active">
|
|
20
|
+
<div class="card mb-4">
|
|
21
|
+
<div class="card-body">
|
|
22
|
+
<div class="row mb-3">
|
|
23
|
+
<div class="col">
|
|
24
|
+
<label class="form-check-label">
|
|
25
|
+
<input id="field-respect-motion" type="checkbox">
|
|
26
|
+
Respect <code>prefers-reduced-motion</code>
|
|
27
|
+
</label>
|
|
28
|
+
<span class="form-hint">When enabled, JS effects are skipped for users who prefer reduced motion. Content remains visible.</span>
|
|
29
|
+
</div>
|
|
30
|
+
</div>
|
|
31
|
+
<div class="row mb-3">
|
|
32
|
+
<div class="col-6">
|
|
33
|
+
<label class="form-label">Default animation duration (ms)</label>
|
|
34
|
+
<input id="field-default-duration" type="number" class="form-input" min="0" max="10000"
|
|
35
|
+
placeholder="600">
|
|
36
|
+
<span class="form-hint">Used by reveal when no <code>duration</code> attribute is specified.</span>
|
|
37
|
+
</div>
|
|
38
|
+
<div class="col-6">
|
|
39
|
+
<label class="form-label">Default reveal animation</label>
|
|
40
|
+
<select id="field-default-animation" class="form-select">
|
|
41
|
+
<option value="fade">Fade</option>
|
|
42
|
+
<option value="slide-up">Slide up</option>
|
|
43
|
+
<option value="slide-down">Slide down</option>
|
|
44
|
+
<option value="zoom">Zoom</option>
|
|
45
|
+
<option value="flip">Flip</option>
|
|
46
|
+
</select>
|
|
47
|
+
</div>
|
|
48
|
+
</div>
|
|
49
|
+
<div class="row">
|
|
50
|
+
<div class="col-6">
|
|
51
|
+
<label class="form-label">Default scroll threshold</label>
|
|
52
|
+
<input id="field-default-threshold" type="number" class="form-input" min="0" max="1"
|
|
53
|
+
step="0.05"
|
|
54
|
+
placeholder="0.1">
|
|
55
|
+
<span class="form-hint">Fraction of element visible before reveal fires (0.0–1.0).</span>
|
|
56
|
+
</div>
|
|
57
|
+
</div>
|
|
58
|
+
</div>
|
|
59
|
+
</div>
|
|
60
|
+
</div>
|
|
61
|
+
|
|
62
|
+
<!-- Shortcode Reference tab panel -->
|
|
63
|
+
<div class="tab-panel">
|
|
64
|
+
<p class="text-muted mb-3">Use these shortcodes in any page's Markdown content. The <strong>Effects</strong>
|
|
65
|
+
toolbar button in the editor inserts them automatically.</p>
|
|
66
|
+
|
|
67
|
+
<!-- Sub-tabs -->
|
|
68
|
+
<div class="mb-3" style="display:flex;gap:6px;flex-wrap:wrap;">
|
|
69
|
+
<button class="btn btn-sm effects-tab-btn active" data-fx-tab="entrance">Entrance</button>
|
|
70
|
+
<button class="btn btn-sm effects-tab-btn" data-fx-tab="animation">Animation</button>
|
|
71
|
+
<button class="btn btn-sm effects-tab-btn" data-fx-tab="text">Text</button>
|
|
72
|
+
<button class="btn btn-sm effects-tab-btn" data-fx-tab="visual">Visual</button>
|
|
73
|
+
<button class="btn btn-sm effects-tab-btn" data-fx-tab="examples">Examples</button>
|
|
74
|
+
<button class="btn btn-sm effects-tab-btn" data-fx-tab="celebrations">Celebrations</button>
|
|
75
|
+
</div>
|
|
76
|
+
|
|
77
|
+
<!-- Entrance tab -->
|
|
78
|
+
<div id="tab-entrance" class="effects-tab-panel">
|
|
79
|
+
<h3 class="mb-2">Reveal</h3>
|
|
80
|
+
<p class="text-muted mb-2">Triggers a scroll-activated entrance animation when the element enters the
|
|
81
|
+
viewport.
|
|
82
|
+
Great for headers, cards, and feature sections.</p>
|
|
83
|
+
<pre class="code-block mb-2">[reveal animation="fade" duration="600" delay="0" threshold="0.1" once="true"]
|
|
84
|
+
## Your heading or content
|
|
85
|
+
|
|
86
|
+
Markdown **works** inside.
|
|
87
|
+
[/reveal]</pre>
|
|
88
|
+
<table class="table mb-3">
|
|
89
|
+
<thead>
|
|
90
|
+
<tr>
|
|
91
|
+
<th>Attribute</th>
|
|
92
|
+
<th>Default</th>
|
|
93
|
+
<th>Description</th>
|
|
94
|
+
</tr>
|
|
95
|
+
</thead>
|
|
96
|
+
<tbody>
|
|
97
|
+
<tr>
|
|
98
|
+
<td><code>animation</code></td>
|
|
99
|
+
<td>fade</td>
|
|
100
|
+
<td>fade, slide-up, slide-down, zoom, flip</td>
|
|
101
|
+
</tr>
|
|
102
|
+
<tr>
|
|
103
|
+
<td><code>duration</code></td>
|
|
104
|
+
<td>600</td>
|
|
105
|
+
<td>Animation duration in milliseconds</td>
|
|
106
|
+
</tr>
|
|
107
|
+
<tr>
|
|
108
|
+
<td><code>delay</code></td>
|
|
109
|
+
<td>0</td>
|
|
110
|
+
<td>Delay before animation starts (ms)</td>
|
|
111
|
+
</tr>
|
|
112
|
+
<tr>
|
|
113
|
+
<td><code>threshold</code></td>
|
|
114
|
+
<td>0.1</td>
|
|
115
|
+
<td>Fraction visible before triggering (0–1)</td>
|
|
116
|
+
</tr>
|
|
117
|
+
<tr>
|
|
118
|
+
<td><code>once</code></td>
|
|
119
|
+
<td>true</td>
|
|
120
|
+
<td>Only animate once (true/false)</td>
|
|
121
|
+
</tr>
|
|
122
|
+
</tbody>
|
|
123
|
+
</table>
|
|
124
|
+
<p class="text-muted mb-3" style="font-size:.85rem;"><strong>Tip:</strong> Use <code>delay</code> to stagger
|
|
125
|
+
multiple
|
|
126
|
+
reveal blocks for a cascade effect, or use <code>[row reveal]</code> below for automatic staggering.</p>
|
|
127
|
+
|
|
128
|
+
<h3 class="mb-2">Row Reveal</h3>
|
|
129
|
+
<p class="text-muted mb-2">Add <code>reveal</code> to a <code>[row]</code> shortcode to automatically
|
|
130
|
+
animate
|
|
131
|
+
child columns into view one by one as the row scrolls into the viewport. No need to wrap each column in
|
|
132
|
+
a
|
|
133
|
+
separate <code>[reveal]</code> block.</p>
|
|
134
|
+
<pre class="code-block mb-2">[row gap="4" reveal reveal-mode="stagger" reveal-animation="slide-up"]
|
|
135
|
+
[col]First to appear[/col]
|
|
136
|
+
[col]Second to appear[/col]
|
|
137
|
+
[col]Third to appear[/col]
|
|
138
|
+
[/row]</pre>
|
|
139
|
+
<table class="table mb-3">
|
|
140
|
+
<thead>
|
|
141
|
+
<tr>
|
|
142
|
+
<th>Attribute</th>
|
|
143
|
+
<th>Default</th>
|
|
144
|
+
<th>Description</th>
|
|
145
|
+
</tr>
|
|
146
|
+
</thead>
|
|
147
|
+
<tbody>
|
|
148
|
+
<tr>
|
|
149
|
+
<td><code>reveal</code></td>
|
|
150
|
+
<td>—</td>
|
|
151
|
+
<td>Flag — enables scroll-triggered reveal on child columns</td>
|
|
152
|
+
</tr>
|
|
153
|
+
<tr>
|
|
154
|
+
<td><code>reveal-animation</code></td>
|
|
155
|
+
<td>slide-up</td>
|
|
156
|
+
<td>slide-up, slide-down, slide-left, slide-right, fade, zoom, flip</td>
|
|
157
|
+
</tr>
|
|
158
|
+
<tr>
|
|
159
|
+
<td><code>reveal-mode</code></td>
|
|
160
|
+
<td>stagger</td>
|
|
161
|
+
<td>stagger (overlapping) or sequence (one after another)</td>
|
|
162
|
+
</tr>
|
|
163
|
+
<tr>
|
|
164
|
+
<td><code>reveal-duration</code></td>
|
|
165
|
+
<td>400</td>
|
|
166
|
+
<td>Animation duration in milliseconds</td>
|
|
167
|
+
</tr>
|
|
168
|
+
<tr>
|
|
169
|
+
<td><code>reveal-stagger</code></td>
|
|
170
|
+
<td>60</td>
|
|
171
|
+
<td>Delay between each child column (ms)</td>
|
|
172
|
+
</tr>
|
|
173
|
+
<tr>
|
|
174
|
+
<td><code>reveal-delay</code></td>
|
|
175
|
+
<td>0</td>
|
|
176
|
+
<td>Initial delay before first animation (ms)</td>
|
|
177
|
+
</tr>
|
|
178
|
+
<tr>
|
|
179
|
+
<td><code>reveal-direction</code></td>
|
|
180
|
+
<td>ltr</td>
|
|
181
|
+
<td>ltr (left to right) or rtl (right to left)</td>
|
|
182
|
+
</tr>
|
|
183
|
+
</tbody>
|
|
184
|
+
</table>
|
|
185
|
+
|
|
186
|
+
<h4 class="mb-1" style="font-size:.9rem;">Fade with right-to-left direction</h4>
|
|
187
|
+
<pre class="code-block mb-2">[row gap="3" reveal reveal-animation="fade" reveal-direction="rtl"]
|
|
188
|
+
[col]Appears third[/col]
|
|
189
|
+
[col]Appears second[/col]
|
|
190
|
+
[col]Appears first[/col]
|
|
191
|
+
[/row]</pre>
|
|
192
|
+
|
|
193
|
+
<h4 class="mb-1" style="font-size:.9rem;">Zoom with initial delay</h4>
|
|
194
|
+
<pre class="code-block mb-2">[row gap="4" reveal reveal-animation="zoom" reveal-delay="200" reveal-stagger="100"]
|
|
195
|
+
[col]Zooms in after 200ms[/col]
|
|
196
|
+
[col]Zooms in after 300ms[/col]
|
|
197
|
+
[/row]</pre>
|
|
198
|
+
</div>
|
|
199
|
+
|
|
200
|
+
<!-- Animation tab -->
|
|
201
|
+
<div id="tab-animation" class="effects-tab-panel">
|
|
202
|
+
<h3 class="mb-2">Breathe</h3>
|
|
203
|
+
<p class="text-muted mb-2">Continuous gentle scaling — makes elements feel alive. Ideal for hero images or
|
|
204
|
+
call-to-action buttons.</p>
|
|
205
|
+
<pre class="code-block mb-3">[breathe amplitude="8" duration="3000"]
|
|
206
|
+
Content that breathes.
|
|
207
|
+
[/breathe]</pre>
|
|
208
|
+
|
|
209
|
+
<h3 class="mb-2">Pulse</h3>
|
|
210
|
+
<p class="text-muted mb-2">A repeating scale pulse — stronger than breathe, good for alerts or badges.</p>
|
|
211
|
+
<pre class="code-block mb-3">[pulse scale="1.05" duration="1000"]
|
|
212
|
+
Pulsing content.
|
|
213
|
+
[/pulse]</pre>
|
|
214
|
+
|
|
215
|
+
<h3 class="mb-2">Shake</h3>
|
|
216
|
+
<p class="text-muted mb-2">One-shot horizontal or vertical shake. Use for error states or attention-grabbing
|
|
217
|
+
elements.</p>
|
|
218
|
+
<pre class="code-block mb-3">[shake intensity="5" duration="500" direction="horizontal"]
|
|
219
|
+
This will shake.
|
|
220
|
+
[/shake]</pre>
|
|
221
|
+
|
|
222
|
+
<h3 class="mb-2">CSS Animate</h3>
|
|
223
|
+
<p class="text-muted mb-2">Applies Domma CSS animation utility classes — no JavaScript required.</p>
|
|
224
|
+
<pre class="code-block mb-2">[animate type="fade-in-up" duration="normal" delay="200" repeat="once"]
|
|
225
|
+
Content here.
|
|
226
|
+
[/animate]</pre>
|
|
227
|
+
<table class="table mb-3">
|
|
228
|
+
<thead>
|
|
229
|
+
<tr>
|
|
230
|
+
<th>Attribute</th>
|
|
231
|
+
<th>Values</th>
|
|
232
|
+
</tr>
|
|
233
|
+
</thead>
|
|
234
|
+
<tbody>
|
|
235
|
+
<tr>
|
|
236
|
+
<td><code>type</code></td>
|
|
237
|
+
<td>fade-in, fade-out, fade-in-up, fade-in-down, fade-in-left, fade-in-right, slide-in-up,
|
|
238
|
+
slide-in-down,
|
|
239
|
+
slide-in-left, slide-in-right, zoom-in, zoom-out, bounce, pulse, shake, spin, rotate-in, flip
|
|
240
|
+
</td>
|
|
241
|
+
</tr>
|
|
242
|
+
<tr>
|
|
243
|
+
<td><code>duration</code></td>
|
|
244
|
+
<td>fast, normal, slow, slower</td>
|
|
245
|
+
</tr>
|
|
246
|
+
<tr>
|
|
247
|
+
<td><code>delay</code></td>
|
|
248
|
+
<td>100, 200, 300, 500, 1000</td>
|
|
249
|
+
</tr>
|
|
250
|
+
<tr>
|
|
251
|
+
<td><code>repeat</code></td>
|
|
252
|
+
<td>once, infinite, repeat-2, repeat-3</td>
|
|
253
|
+
</tr>
|
|
254
|
+
</tbody>
|
|
255
|
+
</table>
|
|
256
|
+
</div>
|
|
257
|
+
|
|
258
|
+
<!-- Text tab -->
|
|
259
|
+
<div id="tab-text" class="effects-tab-panel">
|
|
260
|
+
<h3 class="mb-2">Typewriter (Scribe)</h3>
|
|
261
|
+
<p class="text-muted mb-2">Types text character by character. Supports a simple one-shot mode or a full
|
|
262
|
+
action script for sequenced multi-step animations.</p>
|
|
263
|
+
|
|
264
|
+
<h4 class="mb-1" style="font-size:.9rem;">Simple mode</h4>
|
|
265
|
+
<pre class="code-block mb-2">[scribe speed="50" cursor="true" loop="false"]
|
|
266
|
+
Your text appears letter by letter.
|
|
267
|
+
[/scribe]</pre>
|
|
268
|
+
|
|
269
|
+
<h4 class="mb-1" style="font-size:.9rem;">Script mode — action shortcodes</h4>
|
|
270
|
+
<pre class="code-block mb-2">[scribe loop="true" loop-delay="2000"]
|
|
271
|
+
[render effect="fade"]Hello, world![/render]
|
|
272
|
+
[wait]1500[/wait]
|
|
273
|
+
[undo /]
|
|
274
|
+
[render]Something else entirely.[/render]
|
|
275
|
+
[/scribe]</pre>
|
|
276
|
+
<p class="text-muted mb-2" style="font-size:.85rem;">When any <code>[render]</code>, <code>[wait]</code>, or
|
|
277
|
+
<code>[undo]</code> shortcode is present inside the body, script mode activates automatically.</p>
|
|
278
|
+
<table class="table mb-2">
|
|
279
|
+
<thead>
|
|
280
|
+
<tr>
|
|
281
|
+
<th>Action</th>
|
|
282
|
+
<th>Syntax</th>
|
|
283
|
+
<th>Description</th>
|
|
284
|
+
</tr>
|
|
285
|
+
</thead>
|
|
286
|
+
<tbody>
|
|
287
|
+
<tr>
|
|
288
|
+
<td><code>[render]</code></td>
|
|
289
|
+
<td><code>[render effect="fade"]Text[/render]</code></td>
|
|
290
|
+
<td>Type the text. Optional <code>effect</code>: fade, slide (for appearance)</td>
|
|
291
|
+
</tr>
|
|
292
|
+
<tr>
|
|
293
|
+
<td><code>[wait]</code></td>
|
|
294
|
+
<td><code>[wait]1500[/wait]</code></td>
|
|
295
|
+
<td>Pause for N milliseconds (number) or a CSS duration string (e.g. <code>2s</code>)</td>
|
|
296
|
+
</tr>
|
|
297
|
+
<tr>
|
|
298
|
+
<td><code>[undo]</code></td>
|
|
299
|
+
<td><code>[undo /]</code> or <code>[undo count="3" /]</code> or <code>[undo all="true" /]</code>
|
|
300
|
+
</td>
|
|
301
|
+
<td>Delete the last render action, N renders, or all renders</td>
|
|
302
|
+
</tr>
|
|
303
|
+
</tbody>
|
|
304
|
+
</table>
|
|
305
|
+
<table class="table mb-3">
|
|
306
|
+
<thead>
|
|
307
|
+
<tr>
|
|
308
|
+
<th>Attribute</th>
|
|
309
|
+
<th>Default</th>
|
|
310
|
+
<th>Description</th>
|
|
311
|
+
</tr>
|
|
312
|
+
</thead>
|
|
313
|
+
<tbody>
|
|
314
|
+
<tr>
|
|
315
|
+
<td><code>speed</code></td>
|
|
316
|
+
<td>50</td>
|
|
317
|
+
<td>Typing speed (ms per character)</td>
|
|
318
|
+
</tr>
|
|
319
|
+
<tr>
|
|
320
|
+
<td><code>delete-speed</code></td>
|
|
321
|
+
<td>30</td>
|
|
322
|
+
<td>Deletion speed (ms per character)</td>
|
|
323
|
+
</tr>
|
|
324
|
+
<tr>
|
|
325
|
+
<td><code>cursor</code></td>
|
|
326
|
+
<td>true</td>
|
|
327
|
+
<td>Show blinking cursor (true/false)</td>
|
|
328
|
+
</tr>
|
|
329
|
+
<tr>
|
|
330
|
+
<td><code>cursor-char</code></td>
|
|
331
|
+
<td>|</td>
|
|
332
|
+
<td>Character to use as cursor</td>
|
|
333
|
+
</tr>
|
|
334
|
+
<tr>
|
|
335
|
+
<td><code>cursor-type</code></td>
|
|
336
|
+
<td>—</td>
|
|
337
|
+
<td>Cursor style (block, underline, beam)</td>
|
|
338
|
+
</tr>
|
|
339
|
+
<tr>
|
|
340
|
+
<td><code>loop</code></td>
|
|
341
|
+
<td>false</td>
|
|
342
|
+
<td>Repeat script continuously (true/false)</td>
|
|
343
|
+
</tr>
|
|
344
|
+
<tr>
|
|
345
|
+
<td><code>loop-delay</code></td>
|
|
346
|
+
<td>1000</td>
|
|
347
|
+
<td>Pause before repeating (ms)</td>
|
|
348
|
+
</tr>
|
|
349
|
+
<tr>
|
|
350
|
+
<td><code>pause-on-hover</code></td>
|
|
351
|
+
<td>false</td>
|
|
352
|
+
<td>Pause animation while hovered (true/false)</td>
|
|
353
|
+
</tr>
|
|
354
|
+
</tbody>
|
|
355
|
+
</table>
|
|
356
|
+
|
|
357
|
+
<h3 class="mb-2">Scramble</h3>
|
|
358
|
+
<p class="text-muted mb-2">Reveals text through a character-scramble animation. Great for tech/data
|
|
359
|
+
aesthetics.</p>
|
|
360
|
+
<pre class="code-block mb-3">[scramble speed="50" loop="false"]
|
|
361
|
+
Scrambled reveal text.
|
|
362
|
+
[/scramble]</pre>
|
|
363
|
+
|
|
364
|
+
<h3 class="mb-2">Counter</h3>
|
|
365
|
+
<p class="text-muted mb-2">Animates a number from <code>from</code> to <code>to</code>. Use in stat
|
|
366
|
+
sections. This
|
|
367
|
+
shortcode is self-closing.</p>
|
|
368
|
+
<pre class="code-block mb-2">[counter to="100" from="0" prefix="$" suffix="+" duration="2000" /]</pre>
|
|
369
|
+
<table class="table mb-3">
|
|
370
|
+
<thead>
|
|
371
|
+
<tr>
|
|
372
|
+
<th>Attribute</th>
|
|
373
|
+
<th>Default</th>
|
|
374
|
+
<th>Description</th>
|
|
375
|
+
</tr>
|
|
376
|
+
</thead>
|
|
377
|
+
<tbody>
|
|
378
|
+
<tr>
|
|
379
|
+
<td><code>to</code></td>
|
|
380
|
+
<td>0</td>
|
|
381
|
+
<td>Target number</td>
|
|
382
|
+
</tr>
|
|
383
|
+
<tr>
|
|
384
|
+
<td><code>from</code></td>
|
|
385
|
+
<td>0</td>
|
|
386
|
+
<td>Starting number</td>
|
|
387
|
+
</tr>
|
|
388
|
+
<tr>
|
|
389
|
+
<td><code>duration</code></td>
|
|
390
|
+
<td>2000</td>
|
|
391
|
+
<td>Animation duration (ms)</td>
|
|
392
|
+
</tr>
|
|
393
|
+
<tr>
|
|
394
|
+
<td><code>prefix</code></td>
|
|
395
|
+
<td>—</td>
|
|
396
|
+
<td>Text before the number (e.g. $)</td>
|
|
397
|
+
</tr>
|
|
398
|
+
<tr>
|
|
399
|
+
<td><code>suffix</code></td>
|
|
400
|
+
<td>—</td>
|
|
401
|
+
<td>Text after the number (e.g. +)</td>
|
|
402
|
+
</tr>
|
|
403
|
+
<tr>
|
|
404
|
+
<td><code>decimals</code></td>
|
|
405
|
+
<td>0</td>
|
|
406
|
+
<td>Decimal places to display</td>
|
|
407
|
+
</tr>
|
|
408
|
+
<tr>
|
|
409
|
+
<td><code>separator</code></td>
|
|
410
|
+
<td>—</td>
|
|
411
|
+
<td>Thousands separator (e.g. ,)</td>
|
|
412
|
+
</tr>
|
|
413
|
+
</tbody>
|
|
414
|
+
</table>
|
|
415
|
+
<p class="text-muted" style="font-size:.85rem;"><strong>Tip:</strong> Counters work great in a grid — place
|
|
416
|
+
3–4
|
|
417
|
+
counter spans in a <code>[grid cols="4"]</code> for a stats section.</p>
|
|
418
|
+
</div>
|
|
419
|
+
|
|
420
|
+
<!-- Visual tab -->
|
|
421
|
+
<div id="tab-visual" class="effects-tab-panel">
|
|
422
|
+
<h3 class="mb-2">Ripple</h3>
|
|
423
|
+
<p class="text-muted mb-2">Click-triggered ripple effect on the element. Good for interactive content
|
|
424
|
+
blocks.</p>
|
|
425
|
+
<pre class="code-block mb-3">[ripple colour="#7c6af7" duration="600" opacity="0.3"]
|
|
426
|
+
Click this area for a ripple.
|
|
427
|
+
[/ripple]</pre>
|
|
428
|
+
|
|
429
|
+
<h3 class="mb-2">Twinkle</h3>
|
|
430
|
+
<p class="text-muted mb-2">Generates animated particle effects inside the element. Use for hero sections or
|
|
431
|
+
decorative areas.</p>
|
|
432
|
+
<pre class="code-block mb-3">[twinkle count="80" shape="star" colour="#fff" min-size="2" max-size="6"]
|
|
433
|
+
Content beneath the particles.
|
|
434
|
+
[/twinkle]</pre>
|
|
435
|
+
|
|
436
|
+
<h3 class="mb-2">Ambient Background</h3>
|
|
437
|
+
<p class="text-muted mb-2">Applies animated CSS background classes — no JavaScript needed.</p>
|
|
438
|
+
<pre class="code-block mb-2">[ambient type="float-blobs" speed="slow" intensity="subtle"]
|
|
439
|
+
Content on animated background.
|
|
440
|
+
[/ambient]</pre>
|
|
441
|
+
<table class="table mb-3">
|
|
442
|
+
<thead>
|
|
443
|
+
<tr>
|
|
444
|
+
<th>Attribute</th>
|
|
445
|
+
<th>Values</th>
|
|
446
|
+
</tr>
|
|
447
|
+
</thead>
|
|
448
|
+
<tbody>
|
|
449
|
+
<tr>
|
|
450
|
+
<td><code>type</code></td>
|
|
451
|
+
<td>rotate-glow, rotate-dual, rotate-spotlight, float-blobs, float-orbs, float-particles, wave,
|
|
452
|
+
ripple,
|
|
453
|
+
aurora
|
|
454
|
+
</td>
|
|
455
|
+
</tr>
|
|
456
|
+
<tr>
|
|
457
|
+
<td><code>speed</code></td>
|
|
458
|
+
<td>slow, normal, fast</td>
|
|
459
|
+
</tr>
|
|
460
|
+
<tr>
|
|
461
|
+
<td><code>intensity</code></td>
|
|
462
|
+
<td>subtle, intense</td>
|
|
463
|
+
</tr>
|
|
464
|
+
</tbody>
|
|
465
|
+
</table>
|
|
466
|
+
</div>
|
|
467
|
+
|
|
468
|
+
<!-- Examples tab -->
|
|
469
|
+
<div id="tab-examples" class="effects-tab-panel">
|
|
470
|
+
<h3 class="mb-2">Hero section with typewriter</h3>
|
|
471
|
+
<pre class="code-block mb-3">[reveal animation="fade"]
|
|
472
|
+
# Welcome to our site
|
|
473
|
+
|
|
474
|
+
[scribe speed="40" cursor="true"]
|
|
475
|
+
We build things that matter.
|
|
476
|
+
[/scribe]
|
|
477
|
+
[/reveal]</pre>
|
|
478
|
+
|
|
479
|
+
<h3 class="mb-2">Stats row with counters</h3>
|
|
480
|
+
<pre class="code-block mb-3">[reveal animation="slide-up"]
|
|
481
|
+
[grid cols="3" gap="4"]
|
|
482
|
+
[col]
|
|
483
|
+
## [counter to="500" suffix="+" /]
|
|
484
|
+
Happy clients
|
|
485
|
+
[/col]
|
|
486
|
+
[col]
|
|
487
|
+
## [counter to="12" suffix=" years" /]
|
|
488
|
+
In business
|
|
489
|
+
[/col]
|
|
490
|
+
[col]
|
|
491
|
+
## [counter to="98" suffix="%" /]
|
|
492
|
+
Satisfaction
|
|
493
|
+
[/col]
|
|
494
|
+
[/grid]
|
|
495
|
+
[/reveal]</pre>
|
|
496
|
+
|
|
497
|
+
<h3 class="mb-2">Staggered card reveal</h3>
|
|
498
|
+
<pre class="code-block mb-3">[row gap="4" reveal reveal-animation="slide-up" reveal-stagger="100"]
|
|
499
|
+
[col]
|
|
500
|
+
[card title="Feature One"]First card content.[/card]
|
|
501
|
+
[/col]
|
|
502
|
+
[col]
|
|
503
|
+
[card title="Feature Two"]Second card content.[/card]
|
|
504
|
+
[/col]
|
|
505
|
+
[col]
|
|
506
|
+
[card title="Feature Three"]Third card content.[/card]
|
|
507
|
+
[/col]
|
|
508
|
+
[/row]</pre>
|
|
509
|
+
|
|
510
|
+
<h3 class="mb-2">Hero with ambient background</h3>
|
|
511
|
+
<pre class="code-block mb-3">[ambient type="aurora" speed="slow" intensity="subtle"]
|
|
512
|
+
[reveal animation="zoom"]
|
|
513
|
+
# Your headline here
|
|
514
|
+
|
|
515
|
+
A compelling subheading that draws users in.
|
|
516
|
+
[/reveal]
|
|
517
|
+
[/ambient]</pre>
|
|
518
|
+
|
|
519
|
+
<h3 class="mb-2">Christmas page with fireworks</h3>
|
|
520
|
+
<pre class="code-block mb-3">[celebrate theme="christmas" intensity="medium" /]
|
|
521
|
+
|
|
522
|
+
[fireworks]
|
|
523
|
+
[firework type="burst" colour="rainbow" /]
|
|
524
|
+
[firework type="sparkle" colour="primary" /]
|
|
525
|
+
[/fireworks]
|
|
526
|
+
|
|
527
|
+
[reveal animation="fade"]
|
|
528
|
+
# Merry Christmas!
|
|
529
|
+
[/reveal]</pre>
|
|
530
|
+
</div>
|
|
531
|
+
|
|
532
|
+
<!-- Celebrations tab -->
|
|
533
|
+
<div id="tab-celebrations" class="effects-tab-panel">
|
|
534
|
+
<h3 class="mb-2">Firework <span class="badge badge-info">CSS only</span></h3>
|
|
535
|
+
<p class="text-muted mb-2">Pure CSS particle effect — no JavaScript required. Works even without the plugin
|
|
536
|
+
enabled. Use self-closing for standalone particles, or wrapping to apply the firework classes to
|
|
537
|
+
content.</p>
|
|
538
|
+
<pre class="code-block mb-2">[firework type="burst" colour="rainbow" size="lg" continuous="true" /]</pre>
|
|
539
|
+
<pre class="code-block mb-2">[firework type="sparkle" colour="primary"]
|
|
540
|
+
Click me for a burst!
|
|
541
|
+
[/firework]</pre>
|
|
542
|
+
<table class="table mb-3">
|
|
543
|
+
<thead>
|
|
544
|
+
<tr>
|
|
545
|
+
<th>Attribute</th>
|
|
546
|
+
<th>Values</th>
|
|
547
|
+
<th>Description</th>
|
|
548
|
+
</tr>
|
|
549
|
+
</thead>
|
|
550
|
+
<tbody>
|
|
551
|
+
<tr>
|
|
552
|
+
<td><code>type</code></td>
|
|
553
|
+
<td>burst, sparkle, trail</td>
|
|
554
|
+
<td>Firework particle shape</td>
|
|
555
|
+
</tr>
|
|
556
|
+
<tr>
|
|
557
|
+
<td><code>colour</code></td>
|
|
558
|
+
<td>rainbow, primary, info, success, warning, danger</td>
|
|
559
|
+
<td>Particle colour theme</td>
|
|
560
|
+
</tr>
|
|
561
|
+
<tr>
|
|
562
|
+
<td><code>size</code></td>
|
|
563
|
+
<td>sm, md, lg</td>
|
|
564
|
+
<td>Particle size (default: md)</td>
|
|
565
|
+
</tr>
|
|
566
|
+
<tr>
|
|
567
|
+
<td><code>continuous</code></td>
|
|
568
|
+
<td>true / false</td>
|
|
569
|
+
<td>Loop the animation continuously</td>
|
|
570
|
+
</tr>
|
|
571
|
+
<tr>
|
|
572
|
+
<td><code>hover</code></td>
|
|
573
|
+
<td>true / false</td>
|
|
574
|
+
<td>Only animate on mouse hover</td>
|
|
575
|
+
</tr>
|
|
576
|
+
</tbody>
|
|
577
|
+
</table>
|
|
578
|
+
|
|
579
|
+
<h3 class="mb-2">Fireworks Container <span class="badge badge-info">CSS only</span></h3>
|
|
580
|
+
<p class="text-muted mb-2">Groups multiple firework elements into a positioned overlay container.</p>
|
|
581
|
+
<pre class="code-block mb-3">[fireworks]
|
|
582
|
+
[firework type="burst" colour="rainbow" /]
|
|
583
|
+
[firework type="sparkle" colour="primary" /]
|
|
584
|
+
[firework type="trail" colour="warning" /]
|
|
585
|
+
[/fireworks]</pre>
|
|
586
|
+
|
|
587
|
+
<h3 class="mb-2">Celebrate <span class="badge badge-info">JS canvas</span></h3>
|
|
588
|
+
<p class="text-muted mb-2">Canvas-based seasonal particle system. Auto-detects the active celebration based
|
|
589
|
+
on today's date, or specify a theme manually. Skipped automatically when
|
|
590
|
+
<code>prefers-reduced-motion</code> is active.</p>
|
|
591
|
+
<pre class="code-block mb-2">[celebrate theme="auto" intensity="medium" /]</pre>
|
|
592
|
+
<pre class="code-block mb-2">[celebrate theme="christmas" intensity="heavy" /]</pre>
|
|
593
|
+
<table class="table mb-3">
|
|
594
|
+
<thead>
|
|
595
|
+
<tr>
|
|
596
|
+
<th>Theme</th>
|
|
597
|
+
<th>Active dates</th>
|
|
598
|
+
</tr>
|
|
599
|
+
</thead>
|
|
600
|
+
<tbody>
|
|
601
|
+
<tr>
|
|
602
|
+
<td><code>auto</code></td>
|
|
603
|
+
<td>Detects automatically from the table below</td>
|
|
604
|
+
</tr>
|
|
605
|
+
<tr>
|
|
606
|
+
<td><code>christmas</code></td>
|
|
607
|
+
<td>1 Dec – 1 Jan (snowflakes)</td>
|
|
608
|
+
</tr>
|
|
609
|
+
<tr>
|
|
610
|
+
<td><code>halloween</code></td>
|
|
611
|
+
<td>26 Oct – 31 Oct (bats & pumpkins)</td>
|
|
612
|
+
</tr>
|
|
613
|
+
<tr>
|
|
614
|
+
<td><code>valentines</code></td>
|
|
615
|
+
<td>9 Feb – 14 Feb (hearts)</td>
|
|
616
|
+
</tr>
|
|
617
|
+
<tr>
|
|
618
|
+
<td><code>guy-fawkes</code></td>
|
|
619
|
+
<td>1 Nov – 5 Nov (fireworks)</td>
|
|
620
|
+
</tr>
|
|
621
|
+
<tr>
|
|
622
|
+
<td><code>st-patricks</code></td>
|
|
623
|
+
<td>12 Mar – 17 Mar (shamrocks)</td>
|
|
624
|
+
</tr>
|
|
625
|
+
<tr>
|
|
626
|
+
<td><code>st-davids</code></td>
|
|
627
|
+
<td>24 Feb – 1 Mar (daffodils)</td>
|
|
628
|
+
</tr>
|
|
629
|
+
<tr>
|
|
630
|
+
<td><code>st-georges</code></td>
|
|
631
|
+
<td>18 Apr – 23 Apr (roses)</td>
|
|
632
|
+
</tr>
|
|
633
|
+
<tr>
|
|
634
|
+
<td><code>st-andrews</code></td>
|
|
635
|
+
<td>25 Nov – 30 Nov (thistles)</td>
|
|
636
|
+
</tr>
|
|
637
|
+
</tbody>
|
|
638
|
+
</table>
|
|
639
|
+
<table class="table mb-3">
|
|
640
|
+
<thead>
|
|
641
|
+
<tr>
|
|
642
|
+
<th>Attribute</th>
|
|
643
|
+
<th>Values</th>
|
|
644
|
+
<th>Description</th>
|
|
645
|
+
</tr>
|
|
646
|
+
</thead>
|
|
647
|
+
<tbody>
|
|
648
|
+
<tr>
|
|
649
|
+
<td><code>theme</code></td>
|
|
650
|
+
<td>auto, christmas, halloween, valentines, guy-fawkes, st-patricks, st-davids, st-georges,
|
|
651
|
+
st-andrews
|
|
652
|
+
</td>
|
|
653
|
+
<td>Theme to use (default: auto)</td>
|
|
654
|
+
</tr>
|
|
655
|
+
<tr>
|
|
656
|
+
<td><code>intensity</code></td>
|
|
657
|
+
<td>light, medium, heavy</td>
|
|
658
|
+
<td>Particle density (default: medium)</td>
|
|
659
|
+
</tr>
|
|
660
|
+
</tbody>
|
|
661
|
+
</table>
|
|
662
|
+
<p class="text-muted"><strong>Tip:</strong> CSS fireworks (<code>[firework]</code>) render instantly with no
|
|
663
|
+
JS.
|
|
664
|
+
Canvas celebrations (<code>[celebrate]</code>) load the JS module on demand and degrade silently if
|
|
665
|
+
unavailable.</p>
|
|
666
|
+
|
|
667
|
+
<h3 class="mb-2">Ticker Tape <span class="badge badge-info">JS canvas</span></h3>
|
|
668
|
+
<p class="text-muted mb-2">A canvas-based ticker-tape parade. Coloured rectangular strips fall from the top,
|
|
669
|
+
sway, rotate, and fade. Self-closing form gives a full-page overlay; wrapping form scopes the parade
|
|
670
|
+
inside a container. Skipped automatically when <code>prefers-reduced-motion</code> is active.</p>
|
|
671
|
+
<h4 class="mb-1" style="font-size:.9rem;">Full-page overlay</h4>
|
|
672
|
+
<pre class="code-block mb-2">[ticker-tape palette="festive" /]</pre>
|
|
673
|
+
<h4 class="mb-1" style="font-size:.9rem;">Container-scoped</h4>
|
|
674
|
+
<pre class="code-block mb-2">[ticker-tape palette="gold" density="40"]
|
|
675
|
+
## Celebration content
|
|
676
|
+
The strips rain down inside this block only.
|
|
677
|
+
[/ticker-tape]</pre>
|
|
678
|
+
<h4 class="mb-1" style="font-size:.9rem;">One-shot burst</h4>
|
|
679
|
+
<pre class="code-block mb-2">[ticker-tape palette="rainbow" burst="true" burst-count="200" /]</pre>
|
|
680
|
+
<table class="table mb-3">
|
|
681
|
+
<thead>
|
|
682
|
+
<tr>
|
|
683
|
+
<th>Attribute</th>
|
|
684
|
+
<th>Default</th>
|
|
685
|
+
<th>Description</th>
|
|
686
|
+
</tr>
|
|
687
|
+
</thead>
|
|
688
|
+
<tbody>
|
|
689
|
+
<tr>
|
|
690
|
+
<td><code>palette</code></td>
|
|
691
|
+
<td>theme</td>
|
|
692
|
+
<td>theme, rainbow, gold, silver, festive, pastel, mono, sunset</td>
|
|
693
|
+
</tr>
|
|
694
|
+
<tr>
|
|
695
|
+
<td><code>density</code></td>
|
|
696
|
+
<td>50</td>
|
|
697
|
+
<td>Average strips on screen at any moment (continuous mode)</td>
|
|
698
|
+
</tr>
|
|
699
|
+
<tr>
|
|
700
|
+
<td><code>speed</code></td>
|
|
701
|
+
<td>1</td>
|
|
702
|
+
<td>Fall speed multiplier (1 = default)</td>
|
|
703
|
+
</tr>
|
|
704
|
+
<tr>
|
|
705
|
+
<td><code>sway</code></td>
|
|
706
|
+
<td>60</td>
|
|
707
|
+
<td>Horizontal sway amplitude in pixels</td>
|
|
708
|
+
</tr>
|
|
709
|
+
<tr>
|
|
710
|
+
<td><code>rotation-speed</code></td>
|
|
711
|
+
<td>6</td>
|
|
712
|
+
<td>Maximum rotation degrees per frame</td>
|
|
713
|
+
</tr>
|
|
714
|
+
<tr>
|
|
715
|
+
<td><code>min-width</code> / <code>max-width</code></td>
|
|
716
|
+
<td>5 / 9</td>
|
|
717
|
+
<td>Strip width range in pixels</td>
|
|
718
|
+
</tr>
|
|
719
|
+
<tr>
|
|
720
|
+
<td><code>min-height</code> / <code>max-height</code></td>
|
|
721
|
+
<td>12 / 22</td>
|
|
722
|
+
<td>Strip height range in pixels</td>
|
|
723
|
+
</tr>
|
|
724
|
+
<tr>
|
|
725
|
+
<td><code>fade-start</code></td>
|
|
726
|
+
<td>0.55</td>
|
|
727
|
+
<td>Fraction of fall (0–1) before strips begin to fade</td>
|
|
728
|
+
</tr>
|
|
729
|
+
<tr>
|
|
730
|
+
<td><code>burst</code></td>
|
|
731
|
+
<td>false</td>
|
|
732
|
+
<td>Drop a single batch and stop respawning</td>
|
|
733
|
+
</tr>
|
|
734
|
+
<tr>
|
|
735
|
+
<td><code>burst-count</code></td>
|
|
736
|
+
<td>150</td>
|
|
737
|
+
<td>Strips emitted in burst mode</td>
|
|
738
|
+
</tr>
|
|
739
|
+
<tr>
|
|
740
|
+
<td><code>z-index</code></td>
|
|
741
|
+
<td>1</td>
|
|
742
|
+
<td>Canvas z-index</td>
|
|
743
|
+
</tr>
|
|
744
|
+
</tbody>
|
|
745
|
+
</table>
|
|
746
|
+
<p class="text-muted"><strong>Tip:</strong> Self-closing <code>[ticker-tape /]</code> creates a fixed
|
|
747
|
+
full-page overlay (<code>position:fixed</code>); the wrapping form attaches the canvas to the
|
|
748
|
+
wrapping div so the parade is constrained to that block.</p>
|
|
749
|
+
</div>
|
|
750
|
+
</div><!-- /tab-panel shortcodes -->
|
|
751
|
+
</div><!-- /tab-content -->
|
|
752
|
+
</div><!-- /effects-tabs -->
|