@tsparticles/palette-dandelion-seeds 4.0.0-beta.0 → 4.0.0-beta.15
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 +30 -51
- package/browser/browser.js +5 -0
- package/browser/index.js +2 -2
- package/browser/index.lazy.js +7 -0
- package/cjs/browser.js +5 -0
- package/cjs/index.js +2 -2
- package/cjs/index.lazy.js +7 -0
- package/esm/browser.js +5 -0
- package/esm/index.js +2 -2
- package/esm/index.lazy.js +7 -0
- package/package.json +17 -8
- package/report.html +4949 -94
- package/tsparticles.palette.palette-dandelionSeeds.js +60 -0
- package/tsparticles.palette.palette-dandelionSeeds.min.js +1 -0
- package/types/browser.d.ts +1 -0
- package/types/index.lazy.d.ts +2 -0
- package/428.min.js +0 -1
- package/dist_browser_options_js.js +0 -30
- package/tsparticles.palette.palette-dandelion-seeds.js +0 -307
- package/tsparticles.palette.palette-dandelion-seeds.min.js +0 -2
package/README.md
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
[](https://particles.js.org)
|
|
2
2
|
|
|
3
|
-
# tsParticles
|
|
3
|
+
# tsParticles DandelionSeeds Palette
|
|
4
4
|
|
|
5
|
-
[](https://www.jsdelivr.com/package/npm/@tsparticles/palette-dandelionSeeds) [](https://www.npmjs.com/package/@tsparticles/palette-dandelionSeeds) [](https://www.npmjs.com/package/@tsparticles/palette-dandelionSeeds) [](https://github.com/sponsors/matteobruni)
|
|
6
6
|
|
|
7
|
-
[tsParticles](https://github.com/tsparticles/tsparticles) palette for
|
|
7
|
+
[tsParticles](https://github.com/tsparticles/tsparticles) palette for colored smoke amber.
|
|
8
8
|
|
|
9
9
|
[](https://discord.gg/hACwv45Hme) [](https://t.me/tsparticles)
|
|
10
10
|
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
|
|
13
13
|
## Sample
|
|
14
14
|
|
|
15
|
-
[](https://particles.js.org/samples/palettes/
|
|
15
|
+
[](https://particles.js.org/samples/palettes/dandelionSeeds)
|
|
16
16
|
|
|
17
17
|
## Colors
|
|
18
18
|
|
|
@@ -54,15 +54,18 @@
|
|
|
54
54
|
## Quick checklist
|
|
55
55
|
|
|
56
56
|
1. Install `@tsparticles/engine` (or use the CDN bundle below)
|
|
57
|
-
2.
|
|
58
|
-
3. Apply the
|
|
57
|
+
2. Load a base package (for example `@tsparticles/basic`) and call `loadDandelionSeedsPalette` before `tsParticles.load(...)`
|
|
58
|
+
3. Apply the palette plus a minimal particles configuration in your options
|
|
59
|
+
|
|
60
|
+
A palette defines colors, not complete behavior, so pair it with a runtime package and particle options.
|
|
59
61
|
|
|
60
62
|
## How to use it
|
|
61
63
|
|
|
62
64
|
### CDN / Vanilla JS / jQuery
|
|
63
65
|
|
|
64
66
|
```html
|
|
65
|
-
<script src="https://cdn.jsdelivr.net/npm/@tsparticles/
|
|
67
|
+
<script src="https://cdn.jsdelivr.net/npm/@tsparticles/basic@4/tsparticles.basic.bundle.min.js"></script>
|
|
68
|
+
<script src="https://cdn.jsdelivr.net/npm/@tsparticles/palette-dandelionSeeds@4/tsparticles.palette-coloredSmokeAmber.min.js"></script>
|
|
66
69
|
```
|
|
67
70
|
|
|
68
71
|
### Usage
|
|
@@ -70,16 +73,28 @@
|
|
|
70
73
|
Once the scripts are loaded you can set up `tsParticles` like this:
|
|
71
74
|
|
|
72
75
|
```javascript
|
|
73
|
-
(async
|
|
74
|
-
await
|
|
76
|
+
(async engine => {
|
|
77
|
+
await loadBasic(engine);
|
|
78
|
+
await loadDandelionSeedsPalette(engine);
|
|
75
79
|
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
+
const options = {
|
|
81
|
+
particles: {
|
|
82
|
+
number: { value: 200 },
|
|
83
|
+
shape: { type: "circle" },
|
|
84
|
+
size: { value: { min: 10, max: 15 } },
|
|
85
|
+
move: {
|
|
86
|
+
enable: true,
|
|
87
|
+
speed: 2,
|
|
88
|
+
},
|
|
80
89
|
},
|
|
90
|
+
palette: "dandelionSeeds",
|
|
91
|
+
};
|
|
92
|
+
|
|
93
|
+
await engine.load({
|
|
94
|
+
id: "tsparticles",
|
|
95
|
+
options,
|
|
81
96
|
});
|
|
82
|
-
})();
|
|
97
|
+
})(tsParticles);
|
|
83
98
|
```
|
|
84
99
|
|
|
85
100
|
#### Customization
|
|
@@ -87,47 +102,11 @@ Once the scripts are loaded you can set up `tsParticles` like this:
|
|
|
87
102
|
**Important ⚠️**
|
|
88
103
|
You can override all the options defining the properties like in any standard `tsParticles` installation.
|
|
89
104
|
|
|
90
|
-
```javascript
|
|
91
|
-
tsParticles.load({
|
|
92
|
-
id: "tsparticles",
|
|
93
|
-
options: {
|
|
94
|
-
particles: {
|
|
95
|
-
shape: {
|
|
96
|
-
type: "square", // starting from v2, this require the square shape script
|
|
97
|
-
},
|
|
98
|
-
},
|
|
99
|
-
palette: "dandelion-seeds",
|
|
100
|
-
},
|
|
101
|
-
});
|
|
102
|
-
```
|
|
103
|
-
|
|
104
|
-
Like in the sample above, the circles will be replaced by squares.
|
|
105
|
-
|
|
106
105
|
### Frameworks with a tsParticles component library
|
|
107
106
|
|
|
108
|
-
Checkout the documentation in the component library repository and call the `loadDandelionSeedsPalette` function
|
|
109
|
-
|
|
110
|
-
The options shown above are valid for all the component libraries.
|
|
111
|
-
|
|
112
|
-
## Common pitfalls
|
|
113
|
-
|
|
114
|
-
- Calling `tsParticles.load(...)` before `loadDandelionSeedsPalette(...)`
|
|
115
|
-
- Verify required peer packages before enabling advanced options
|
|
116
|
-
- Change one option group at a time to isolate regressions quickly
|
|
107
|
+
Checkout the documentation in the component library repository and call the `loadDandelionSeedsPalette` function.
|
|
117
108
|
|
|
118
109
|
## Related docs
|
|
119
110
|
|
|
120
111
|
- Presets and palettes catalog: <https://github.com/tsparticles/palettes>
|
|
121
112
|
- Main docs: <https://particles.js.org/docs/>
|
|
122
|
-
|
|
123
|
-
---
|
|
124
|
-
|
|
125
|
-
```mermaid
|
|
126
|
-
flowchart TD
|
|
127
|
-
|
|
128
|
-
subgraph pr [Palettes]
|
|
129
|
-
padandelionSeeds[Dandelion Seeds]
|
|
130
|
-
end
|
|
131
|
-
|
|
132
|
-
e[tsParticles Engine] --> padandelionSeeds
|
|
133
|
-
```
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { loadDandelionSeedsPalette } from "./index.js";
|
|
2
|
+
const globalObject = globalThis;
|
|
3
|
+
globalObject.__tsParticlesInternals = globalObject.__tsParticlesInternals ?? {};
|
|
4
|
+
globalObject.loadDandelionSeedsPalette = loadDandelionSeedsPalette;
|
|
5
|
+
export * from "./index.js";
|
package/browser/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
+
import { options } from "./options.js";
|
|
1
2
|
const paletteName = "dandelion-seeds";
|
|
2
3
|
export async function loadDandelionSeedsPalette(engine) {
|
|
3
|
-
await engine.pluginManager.register(
|
|
4
|
-
const { options } = await import("./options.js");
|
|
4
|
+
await engine.pluginManager.register(e => {
|
|
5
5
|
e.pluginManager.addPalette(paletteName, options);
|
|
6
6
|
});
|
|
7
7
|
}
|
package/cjs/browser.js
ADDED
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { loadDandelionSeedsPalette } from "./index.js";
|
|
2
|
+
const globalObject = globalThis;
|
|
3
|
+
globalObject.__tsParticlesInternals = globalObject.__tsParticlesInternals ?? {};
|
|
4
|
+
globalObject.loadDandelionSeedsPalette = loadDandelionSeedsPalette;
|
|
5
|
+
export * from "./index.js";
|
package/cjs/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
+
import { options } from "./options.js";
|
|
1
2
|
const paletteName = "dandelion-seeds";
|
|
2
3
|
export async function loadDandelionSeedsPalette(engine) {
|
|
3
|
-
await engine.pluginManager.register(
|
|
4
|
-
const { options } = await import("./options.js");
|
|
4
|
+
await engine.pluginManager.register(e => {
|
|
5
5
|
e.pluginManager.addPalette(paletteName, options);
|
|
6
6
|
});
|
|
7
7
|
}
|
package/esm/browser.js
ADDED
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { loadDandelionSeedsPalette } from "./index.js";
|
|
2
|
+
const globalObject = globalThis;
|
|
3
|
+
globalObject.__tsParticlesInternals = globalObject.__tsParticlesInternals ?? {};
|
|
4
|
+
globalObject.loadDandelionSeedsPalette = loadDandelionSeedsPalette;
|
|
5
|
+
export * from "./index.js";
|
package/esm/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
+
import { options } from "./options.js";
|
|
1
2
|
const paletteName = "dandelion-seeds";
|
|
2
3
|
export async function loadDandelionSeedsPalette(engine) {
|
|
3
|
-
await engine.pluginManager.register(
|
|
4
|
-
const { options } = await import("./options.js");
|
|
4
|
+
await engine.pluginManager.register(e => {
|
|
5
5
|
e.pluginManager.addPalette(paletteName, options);
|
|
6
6
|
});
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tsparticles/palette-dandelion-seeds",
|
|
3
|
-
"version": "4.0.0-beta.
|
|
3
|
+
"version": "4.0.0-beta.15",
|
|
4
4
|
"description": "tsParticles dandelion seeds palette",
|
|
5
5
|
"homepage": "https://particles.js.org",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
8
|
-
"url": "git+https://github.com/tsparticles/
|
|
8
|
+
"url": "git+https://github.com/tsparticles/tsparticles.git",
|
|
9
9
|
"directory": "palettes/nature/dandelionSeeds"
|
|
10
10
|
},
|
|
11
11
|
"keywords": [
|
|
@@ -81,8 +81,7 @@
|
|
|
81
81
|
"url": "https://www.buymeacoffee.com/matteobruni"
|
|
82
82
|
}
|
|
83
83
|
],
|
|
84
|
-
"
|
|
85
|
-
"unpkg": "tsparticles.palette.dandelion-seeds.min.js",
|
|
84
|
+
"sideEffects": false,
|
|
86
85
|
"browser": "browser/index.js",
|
|
87
86
|
"main": "cjs/index.js",
|
|
88
87
|
"module": "esm/index.js",
|
|
@@ -96,13 +95,23 @@
|
|
|
96
95
|
"umd": "./umd/index.js",
|
|
97
96
|
"default": "./cjs/index.js"
|
|
98
97
|
},
|
|
99
|
-
"./package.json": "./package.json"
|
|
98
|
+
"./package.json": "./package.json",
|
|
99
|
+
"./lazy": {
|
|
100
|
+
"types": "./types/index.lazy.d.ts",
|
|
101
|
+
"browser": "./browser/index.lazy.js",
|
|
102
|
+
"import": "./esm/index.lazy.js",
|
|
103
|
+
"require": "./cjs/index.lazy.js",
|
|
104
|
+
"umd": "./umd/index.lazy.js",
|
|
105
|
+
"default": "./cjs/index.lazy.js"
|
|
106
|
+
}
|
|
100
107
|
},
|
|
101
108
|
"dependencies": {
|
|
102
|
-
"@tsparticles/engine": "
|
|
109
|
+
"@tsparticles/engine": "4.0.0-beta.15"
|
|
103
110
|
},
|
|
111
|
+
"type": "module",
|
|
112
|
+
"jsdelivr": "tsparticles.palette-colored-smoke-amber.min.js",
|
|
113
|
+
"unpkg": "tsparticles.palette-colored-smoke-amber.min.js",
|
|
104
114
|
"publishConfig": {
|
|
105
115
|
"access": "public"
|
|
106
|
-
}
|
|
107
|
-
"type": "module"
|
|
116
|
+
}
|
|
108
117
|
}
|