Particle Forms

1. 1

   Upload particle-forms.min.js from the download to your site.

2. 2

   Add the script once, and a <particle-forms> tag wherever you want particles.

3. 3

   Pick a preset, or set any option as an attribute: forms, trigger, count, colors.

<script src="/particle-forms.min.js" defer></script>

<particle-forms preset="galaxy" style="height: 600px"></particle-forms>

1. 1

   Webflow can't host .js files: put particle-forms.min.js on any static host and add its script tag in Site settings → Custom code → Footer code. Or paste the two ready-made halves from the download into Head code and Footer code.

2. 2

   Add a Code Embed element with a <particle-forms> tag where you want the particles.

3. 3

   Give it a height, and publish. Custom code runs on the published site.

<particle-forms forms="sphere, text:Hello, knot" trigger="loop" style="height: 600px"></particle-forms>

Custom code needs a paid Webflow site plan.

1. 1

   Upload particle-forms.min.js to your Media library or your theme, and copy its URL.

2. 2

   Add a Custom HTML block with the script tag and a <particle-forms> tag.

<script src="https://your-site.com/wp-content/uploads/particle-forms.min.js" defer></script>
<particle-forms preset="text" forms="text:Your words, sphere" style="height: 500px"></particle-forms>

On WordPress.com, you need a plan that allows custom code.

1. 1

   Online Store → Themes → Edit code → Assets: upload particle-forms.min.js.

2. 2

   In the theme editor, add a Custom Liquid section with the script and the tag.

<script src="{{ 'particle-forms.min.js' | asset_url }}" defer></script>
<particle-forms preset="bottle" style="height: 600px"></particle-forms>

1. 1

   Copy react/ParticleForms.tsx into your project. It needs only React 18+.

2. 2

   Render it inside a parent with a height, with a preset or your own props.

import ParticleForms from "./ParticleForms"

<div style={{ height: 600 }}>
  <ParticleForms preset="galaxy" />
</div>

Next.js: it's a client component, so nothing runs during server rendering.

1. 1

   In your Framer project, go to Assets → Code → + → New component file, and name it ParticleForms.

2. 2

   Replace the file's contents with framer/ParticleForms.tsx from the download, and save.

3. 3

   Drag ParticleForms onto the canvas, pick your forms and trigger in the properties panel, and press Preview.

In Framer, the canvas shows a sharp still frame to keep the editor fast. Press Preview to see it move, or set Performance → On Canvas to Live.

Works with any Framer plan that supports code components.