[](https://particles.js.org)
# tsParticles Sea Anemone Preset
[](https://www.jsdelivr.com/package/npm/@tsparticles/preset-sea-anemone) [](https://www.npmjs.com/package/@tsparticles/preset-sea-anemone) [](https://www.npmjs.com/package/@tsparticles/preset-sea-anemone) [](https://github.com/sponsors/matteobruni)
[tsParticles](https://github.com/tsparticles/tsparticles) preset for creating a beautiful sea anemone like effect with
particles spawned in the canvas center.
[](https://discord.gg/hACwv45Hme) [](https://t.me/tsparticles)
[](https://www.producthunt.com/posts/tsparticles?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-tsparticles") 
## Sample
[](https://particles.js.org/samples/presets/seaAnemone)
## Quick checklist
1. Install `@tsparticles/engine` (or use the CDN bundle below)
2. Call `loadSeaAnemonePreset(tsParticles)` **before** `tsParticles.load(...)`
3. Set `preset: "seaAnemone"` in options
## How to use it
### CDN / Vanilla JS / jQuery
```html
```
### Usage
Once the scripts are loaded you can set up `tsParticles` like this:
```javascript
(async () => {
await loadSeaAnemonePreset(tsParticles);
await tsParticles.load({
id: "tsparticles",
options: {
preset: "seaAnemone",
},
});
})();
```
#### Customization
**Important ⚠️**
You can override all the options defining the properties like in any standard `tsParticles` installation.
```javascript
tsParticles.load({
id: "tsparticles",
options: {
particles: {
shape: {
type: "square", // starting from v2, this require the square shape script
},
},
preset: "seaAnemone",
},
});
```
Like in the sample above, the circles will be replaced by squares.
### Frameworks with a tsParticles component library
Checkout the documentation in the component library repository and call the `loadSeaAnemonePreset` function instead
of `loadFull`, `loadSlim` or similar functions.
The options shown above are valid for all the component libraries.
## Dependencies
This preset loads and combines the following packages:
| Package | Role in this preset | README |
| ----------------------------------- | ------------------------------------------- | ----------------------------------------------------------------- |
| `@tsparticles/basic` | Base runtime bundle used by the preset | |
| `@tsparticles/engine` | tsParticles engine and preset registration | |
| `@tsparticles/path-curves` | Moves particles along curved paths | |
| `@tsparticles/plugin-emitters` | Spawns particles from configurable emitters | |
| `@tsparticles/plugin-interactivity` | Enables external interaction plumbing | |
| `@tsparticles/plugin-trail` | Adds persistent canvas trail rendering | |
If you want to customize one specific behavior, start from the related package README above.
## Common pitfalls
- Calling `tsParticles.load(...)` before `loadSeaAnemonePreset(tsParticles)`
- Changing particle shape without loading the corresponding shape package
- Particles spawn from the canvas center by default; override `emitters.position` to change the origin
## Related docs
- All presets catalog:
- Emitter options:
- Main tsParticles docs:
---
```mermaid
flowchart TD
subgraph b [Bundles]
bb[tsParticles Basic]
end
subgraph pa [Paths]
pac[Curves]
end
bb --> pa
subgraph pl [Plugins]
ple[Emitters]
pli[Interactivity]
plt[Trail]
end
bb --> pl
subgraph pr [Presets]
prsa[Sea Anemone]
end
bb & pac & ple & pli & plt --> prsa
```