Baike.dev
Log in
Back to tool/Back to issues
#208·tsparticles

Fluid output

Author: matteobruniCreated Apr 3, 2020Updated Feb 18, 2025
Labelsdocumentationenhancementhelp wantedup-for-grabspluginno-issue-activityfeature_requestpinned
I've seen this codepen https://codepen.io/matteobruni/pen/mdJYMQM and I think it's something portable here This can be a plugin, having it's own fluid options, that can be enabled toggling a fluid-like movement instead of void-like movement. Checklist - [X] `engine/src/Plugins/FluidPlugin.ts` ✅ Commit [`e15a569`](https://github.com/tsparticles/tsparticles/commit/e15a5695fab575fab72ff209122f5a615954aea9)
• Import the necessary dependencies. • Define the FluidPlugin class. • Implement the logic for the fluid-like movement in the FluidPlugin class. • Export the FluidPlugin class.
Sandbox Execution Logs
trunk init 1/16 ✓ 
⡿ Downloading Trunk 1.15.0...
⡿ Downloading Trunk 1.15.0...
⢿ Downloading Trunk 1.15.0...
⣻ Downloading Trunk 1.15.0...
⣽ Downloading Trunk 1.15.0...
⣾ Downloading Trunk 1.15.0...
⣷ Downloading Trunk 1.15.0...
✔ Downloading Trunk 1.15.0... done
⡿ Verifying Trunk sha256...
✔ Verifying Trunk sha256... done
⡿ Unpacking Trunk...
✔ Unpacking Trunk... done













































✔ 14 linters were enabled (.trunk/trunk.yaml)
  actionlint 1.6.25 (5 github-workflow files)
  checkov 2.4.9 (759 json, 15 yaml files)
  git-diff-check (2430 files)
  markdownlint 0.36.0 (221 markdown files) (created .markdownlint.yaml)
  osv-scanner 1.4.0 (1 lockfile file)
  oxipng 8.0.0 (35 png files)
  prettier 3.0.3 (4 html, 178 javascript, 759 json, 221 markdown, 1 prettier_supported_configs, 2 sass, 865 typescript, 14 yaml files)
  renovate 36.93.7 (2 renovate-config files)
  shellcheck 0.9.0 (1 shell file) (created .shellcheckrc)
  shfmt 3.6.0 (1 shell file)
  svgo 3.0.2 (11 svg files) (created svgo.config.js)
  trivy 0.45.0 (1 lockfile, 14 yaml files)
  trufflehog 3.56.0 (2431 files)
  yamllint 1.32.0 (14 yaml files) (created .yamllint.yaml)
Next Steps
 1. Read documentation
    Our documentation can be found at https://docs.trunk.io
 2. Get help and give feedback
    Join the Trunk community at https://slack.trunk.io
trunk fmt engine/src/Plugins/FluidPlugin.ts 2/16 ❌ (`1`) 



  FAILURES  
 prettier  engine/src/Plugins/FluidPlugin.ts  .trunk/out/eBaIJ.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure
trunk fmt engine/src/Plugins/FluidPlugin.ts 3/16 ❌ (`1`) 






  FAILURES  
 prettier  engine/src/Plugins/FluidPlugin.ts  .trunk/out/3EpSO.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure
trunk fmt engine/src/Plugins/FluidPlugin.ts 4/16 ❌ (`1`) 



  FAILURES  
 prettier  engine/src/Plugins/FluidPlugin.ts  .trunk/out/6aM3T.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure
trunk fmt engine/src/Plugins/FluidPlugin.ts 5/16 ❌ (`1`) 



  FAILURES  
 prettier  engine/src/Plugins/FluidPlugin.ts  .trunk/out/zr9hD.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure
trunk fmt engine/src/Plugins/FluidPlugin.ts 6/16 ❌ (`1`) 



  FAILURES  
 prettier  engine/src/Plugins/FluidPlugin.ts  .trunk/out/FriU4.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure
trunk fmt engine/src/Plugins/FluidPlugin.ts 7/16 ❌ (`1`) 




  FAILURES  
 prettier  engine/src/Plugins/FluidPlugin.ts  .trunk/out/HtpeC.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure
trunk fmt engine/src/Plugins/FluidPlugin.ts 8/16 ❌ (`1`) 




  FAILURES  
 prettier  engine/src/Plugins/FluidPlugin.ts  .trunk/out/BezLn.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure
trunk fmt engine/src/Plugins/FluidPlugin.ts 9/16 ❌ (`1`) 



  FAILURES  
 prettier  engine/src/Plugins/FluidPlugin.ts  .trunk/out/TcJ17.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure
trunk fmt engine/src/Plugins/FluidPlugin.ts 10/16 ❌ (`1`) 



  FAILURES  
 prettier  engine/src/Plugins/FluidPlugin.ts  .trunk/out/MESrk.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure
trunk fmt engine/src/Plugins/FluidPlugin.ts 11/16 ❌ (`1`) 



  FAILURES  
 prettier  engine/src/Plugins/FluidPlugin.ts  .trunk/out/X9oF2.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure
trunk fmt engine/src/Plugins/FluidPlugin.ts 12/16 ❌ (`1`) 



  FAILURES  
 prettier  engine/src/Plugins/FluidPlugin.ts  .trunk/out/Zf4QJ.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure
trunk fmt engine/src/Plugins/FluidPlugin.ts 13/16 ❌ (`1`) 



  FAILURES  
 prettier  engine/src/Plugins/FluidPlugin.ts  .trunk/out/Nygup.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure
trunk fmt engine/src/Plugins/FluidPlugin.ts 14/16 ❌ (`1`) 



  FAILURES  
 prettier  engine/src/Plugins/FluidPlugin.ts  .trunk/out/uUc0V.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure
trunk fmt engine/src/Plugins/FluidPlugin.ts 15/16 ❌ (`1`) 



  FAILURES  
 prettier  engine/src/Plugins/FluidPlugin.ts  .trunk/out/xFCfL.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure
trunk fmt engine/src/Plugins/FluidPlugin.ts 16/16 ❌ (`1`) 



  FAILURES  
 prettier  engine/src/Plugins/FluidPlugin.ts  .trunk/out/eg7KO.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure
- [X] `engine/src/Options/Interfaces/IOptions.ts` ✅ Commit [`4d3e7ec`](https://github.com/tsparticles/tsparticles/commit/4d3e7ecb677efc243698492549d07ceb0f984060)
• Import the FluidOptions interface. • Add a new property 'fluid' of type FluidOptions to the IOptions interface.
Sandbox Execution Logs
trunk init 1/16 ✓ 
⡿ Downloading Trunk 1.15.0...
⡿ Downloading Trunk 1.15.0...
⢿ Downloading Trunk 1.15.0...
⣻ Downloading Trunk 1.15.0...
⣽ Downloading Trunk 1.15.0...
⣾ Downloading Trunk 1.15.0...
⣷ Downloading Trunk 1.15.0...
✔ Downloading Trunk 1.15.0... done
⡿ Verifying Trunk sha256...
✔ Verifying Trunk sha256... done
⡿ Unpacking Trunk...
✔ Unpacking Trunk... done



















































































✔ 14 linters were enabled (.trunk/trunk.yaml)
  actionlint 1.6.25 (5 github-workflow files)
  checkov 2.4.9 (759 json, 15 yaml files)
  git-diff-check (2429 files)
  markdownlint 0.36.0 (221 markdown files) (created .markdownlint.yaml)
  osv-scanner 1.4.0 (1 lockfile file)
  oxipng 8.0.0 (35 png files)
  prettier 3.0.3 (4 html, 178 javascript, 759 json, 221 markdown, 1 prettier_supported_configs, 2 sass, 864 typescript, 14 yaml files)
  renovate 36.93.7 (2 renovate-config files)
  shellcheck 0.9.0 (1 shell file) (created .shellcheckrc)
  shfmt 3.6.0 (1 shell file)
  svgo 3.0.2 (11 svg files) (created svgo.config.js)
  trivy 0.45.0 (1 lockfile, 14 yaml files)
  trufflehog 3.56.0 (2430 files)
  yamllint 1.32.0 (14 yaml files) (created .yamllint.yaml)
Next Steps
 1. Read documentation
    Our documentation can be found at https://docs.trunk.io
 2. Get help and give feedback
    Join the Trunk community at https://slack.trunk.io
trunk fmt engine/src/Options/Interfaces/IOptions.ts 2/16 ❌ (`1`) 









  FAILURES  
 prettier  engine/src/Options/Interfaces/IOptions.ts  .trunk/out/fNrvR.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure
trunk fmt engine/src/Options/Interfaces/IOptions.ts 3/16 ❌ (`1`) 






  FAILURES  
 prettier  engine/src/Options/Interfaces/IOptions.ts  .trunk/out/hwEUr.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure
trunk fmt engine/src/Options/Interfaces/IOptions.ts 4/16 ❌ (`1`) 



  FAILURES  
 prettier  engine/src/Options/Interfaces/IOptions.ts  .trunk/out/AYqYt.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure
trunk fmt engine/src/Options/Interfaces/IOptions.ts 5/16 ❌ (`1`) 




  FAILURES  
 prettier  engine/src/Options/Interfaces/IOptions.ts  .trunk/out/aGxbz.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure
trunk fmt engine/src/Options/Interfaces/IOptions.ts 6/16 ❌ (`1`) 




  FAILURES  
 prettier  engine/src/Options/Interfaces/IOptions.ts  .trunk/out/RWXa3.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure
trunk fmt engine/src/Options/Interfaces/IOptions.ts 7/16 ❌ (`1`) 



  FAILURES  
 prettier  engine/src/Options/Interfaces/IOptions.ts  .trunk/out/yk4ld.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure
trunk fmt engine/src/Options/Interfaces/IOptions.ts 8/16 ❌ (`1`) 



  FAILURES  
 prettier  engine/src/Options/Interfaces/IOptions.ts  .trunk/out/nCIaq.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure
trunk fmt engine/src/Options/Interfaces/IOptions.ts 9/16 ❌ (`1`) 



  FAILURES  
 prettier  engine/src/Options/Interfaces/IOptions.ts  .trunk/out/RXDOK.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure
trunk fmt engine/src/Options/Interfaces/IOptions.ts 10/16 ❌ (`1`) 



  FAILURES  
 prettier  engine/src/Options/Interfaces/IOptions.ts  .trunk/out/4Gv9P.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure
trunk fmt engine/src/Options/Interfaces/IOptions.ts 11/16 ❌ (`1`) 



  FAILURES  
 prettier  engine/src/Options/Interfaces/IOptions.ts  .trunk/out/GRDoa.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure
trunk fmt engine/src/Options/Interfaces/IOptions.ts 12/16 ❌ (`1`) 



  FAILURES  
 prettier  engine/src/Options/Interfaces/IOptions.ts  .trunk/out/5echT.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure
trunk fmt engine/src/Options/Interfaces/IOptions.ts 13/16 ❌ (`1`) 




  FAILURES  
 prettier  engine/src/Options/Interfaces/IOptions.ts  .trunk/out/iIJR3.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure
trunk fmt engine/src/Options/Interfaces/IOptions.ts 14/16 ❌ (`1`) 




  FAILURES  
 prettier  engine/src/Options/Interfaces/IOptions.ts  .trunk/out/LesY8.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure
trunk fmt engine/src/Options/Interfaces/IOptions.ts 15/16 ❌ (`1`) 



  FAILURES  
 prettier  engine/src/Options/Interfaces/IOptions.ts  .trunk/out/BaMEz.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure
trunk fmt engine/src/Options/Interfaces/IOptions.ts 16/16 ❌ (`1`) 



  FAILURES  
 prettier  engine/src/Options/Interfaces/IOptions.ts  .trunk/out/8cYBL.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure
- [X] `engine/src/Options/Interfaces/FluidOptions.ts` ✅ Commit [`f165f0f`](https://github.com/tsparticles/tsparticles/commit/f165f0f2554dd8c985c37a1c225cbef899aff7e8)
• Define the FluidOptions interface. • Add properties to the FluidOptions interface that control the behavior of the fluid-like movement. • Export the FluidOptions interface.
Sandbox Execution Logs
trunk init 1/16 ✓ 
⡿ Downloading Trunk 1.15.0...
⡿ Downloading Trunk 1.15.0...
⢿ Downloading Trunk 1.15.0...
⣻ Downloading Trunk 1.15.0...
⣽ Downloading Trunk 1.15.0...
⣾ Downloading Trunk 1.15.0...
⣷ Downloading Trunk 1.15.0...
✔ Downloading Trunk 1.15.0... done
⡿ Verifying Trunk sha256...
✔ Verifying Trunk sha256... done
⡿ Unpacking Trunk...
✔ Unpacking Trunk... done














































✔ 14 linters were enabled (.trunk/trunk.yaml)
  actionlint 1.6.25 (5 github-workflow files)
  checkov 2.4.9 (759 json, 15 yaml files)
  git-diff-check (2430 files)
  markdownlint 0.36.0 (221 markdown files) (created .markdownlint.yaml)
  osv-scanner 1.4.0 (1 lockfile file)
  oxipng 8.0.0 (35 png files)
  prettier 3.0.3 (4 html, 178 javascript, 759 json, 221 markdown, 1 prettier_supported_configs, 2 sass, 865 typescript, 14 yaml files)
  renovate 36.93.7 (2 renovate-config files)
  shellcheck 0.9.0 (1 shell file) (created .shellcheckrc)
  shfmt 3.6.0 (1 shell file)
  svgo 3.0.2 (11 svg files) (created svgo.config.js)
  trivy 0.45.0 (1 lockfile, 14 yaml files)
  trufflehog 3.56.0 (2431 files)
  yamllint 1.32.0 (14 yaml files) (created .yamllint.yaml)
Next Steps
 1. Read documentation
    Our documentation can be found at https://docs.trunk.io
 2. Get help and give feedback
    Join the Trunk community at https://slack.trunk.io
trunk fmt engine/src/Options/Interfaces/FluidOptions.ts 2/16 ❌ (`1`) 





  FAILURES  
 prettier  engine/src/Options/Interfaces/FluidOptions.ts  .trunk/out/c9VOS.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure
trunk fmt engine/src/Options/Interfaces/FluidOptions.ts 3/16 ❌ (`1`) 



  FAILURES  
 prettier  engine/src/Options/Interfaces/FluidOptions.ts  .trunk/out/9iTLr.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure
trunk fmt engine/src/Options/Interfaces/FluidOptions.ts 4/16 ❌ (`1`) 



  FAILURES  
 prettier  engine/src/Options/Interfaces/FluidOptions.ts  .trunk/out/58wvc.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure
trunk fmt engine/src/Options/Interfaces/FluidOptions.ts 5/16 ❌ (`1`) 



  FAILURES  
 prettier  engine/src/Options/Interfaces/FluidOptions.ts  .trunk/out/poGpJ.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure
trunk fmt engine/src/Options/Interfaces/FluidOptions.ts 6/16 ❌ (`1`) 



  FAILURES  
 prettier  engine/src/Options/Interfaces/FluidOptions.ts  .trunk/out/FzzLW.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure
trunk fmt engine/src/Options/Interfaces/FluidOptions.ts 7/16 ❌ (`1`) 



  FAILURES  
 prettier  engine/src/Options/Interfaces/FluidOptions.ts  .trunk/out/bhZU3.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure
trunk fmt engine/src/Options/Interfaces/FluidOptions.ts 8/16 ❌ (`1`) 



  FAILURES  
 prettier  engine/src/Options/Interfaces/FluidOptions.ts  .trunk/out/Gy7Qp.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure
trunk fmt engine/src/Options/Interfaces/FluidOptions.ts 9/16 ❌ (`1`) 



  FAILURES  
 prettier  engine/src/Options/Interfaces/FluidOptions.ts  .trunk/out/4MCWu.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure
trunk fmt engine/src/Options/Interfaces/FluidOptions.ts 10/16 ❌ (`1`) 



  FAILURES  
 prettier  engine/src/Options/Interfaces/FluidOptions.ts  .trunk/out/kV7W2.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure
trunk fmt engine/src/Options/Interfaces/FluidOptions.ts 11/16 ❌ (`1`) 



  FAILURES  
 prettier  engine/src/Options/Interfaces/FluidOptions.ts  .trunk/out/6Sbmv.yaml
  NOTICES

Source: tsparticles/tsparticles

View original on GitHubView discussion on GitHub