Particles

1 Install

• Requires Quarto >= 1.4.0
  
• In the root of the quarto project, run in terminal:

quarto add royfrancis/quarto-particles

This will install the extension under the _extensions subdirectory.

2 Usage

2.1 Minimal usage

• Add particles to filters
  
• Insert shortcode in the quarto document

---
filters:
  - particles
---

{{< particles >}}

2.2 Customization

You can customize the particles by passing key/value pairs that map onto the particles.js configuration. The wrapper always includes a quarto-particles-js class (defined in _extensions/particles/particles.css) and the generated id as another class—add a style attribute or additional CSS if you need explicit sizing or background colors or want per-instance styling. For example:

---
filters:
  - particles
--- 

{{< particles
  style="height: 320px; background-color: #0b1c26"
  particles.number.value=120
  particles.color.value="#55acee"
  particles.move.speed=2
  interactivity.events.onhover.mode=grab
  interactivity.modes.grab.distance=250
>}}

Here is another example with different settings:

---
filters:
  - particles
---

{{< particles
  style="height: 400px; background-color: #1a1a1a"
  particles.number.value=80
  particles.color.value="#ff5733"
  particles.move.speed=10
  interactivity.events.onhover.mode=bubble
  interactivity.modes.bubble.distance=200
>}} 

See the repo README for full list of arguments.

2.3 Other output formats

The content is simply ignored when the output format is anything other than html.