Parallel Studio
See Deltaproof
Back to blog
5 min readParallel Studio

How to Add a WebGL Particle Animation to Webflow (Script Tag)

webflowwebglparticlescustom codeparticle forms

Webflow's native animations are strong for UI motion. They are not built for thousands of GPU particles morphing into a logo, a product silhouette, or 3D forms. For that you need WebGL (or a library that wraps it), and in Webflow that means custom code.

This guide walks through adding a drop-in WebGL particle animation with a script tag and a Code Embed. The steps match how Particle Forms ships its Webflow install. The same pattern works for any site that can load a .js file in the footer.

What you need

  1. A paid Webflow site plan that allows custom code (Custom code is disabled on free sites).
  2. A place to host a small .js file (Webflow cannot host raw .js assets the way Shopify Assets can).
  3. About ten minutes on a published site — custom code runs on the published site, not always in the Designer preview the way native interactions do.

You do not need Three.js, React, or a build step. Particle Forms is a single script (~20 KB gzipped) with no dependencies.

Option A: Host the script yourself

1. Upload the script

After you download Particle Forms, take particle-forms.min.js and put it on any static host you already use: Cloudflare R2, S3, Vercel Blob, GitHub Pages, or your own CDN. Copy the public URL.

In Webflow:

  1. Open Site settings → Custom code → Footer code.
  2. Paste:
<script src="https://YOUR-HOST/particle-forms.min.js" defer></script>

Replace YOUR-HOST with the real URL. The defer attribute keeps the script from blocking first paint.

3. Place a Code Embed on the page

On the canvas, add a Code Embed where the particles should appear (hero, section background, or full-bleed block). Paste a tag like:

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

Give the embed (or a parent Div Block) an explicit height. A canvas with no height collapses to zero and looks "broken."

4. Publish

Publish the site. Open the live URL — not only the Designer — and confirm the particles render. Custom code in Footer / Head is applied on publish.

Option B: Paste the download's ready-made halves

The Particle Forms zip includes ready-made Webflow snippets under the download (Head + Footer halves). If you prefer not to host the .js yourself:

  1. Paste the Head half into Site settings → Custom code → Head code.
  2. Paste the Footer half into Footer code.
  3. Still add a Code Embed with a <particle-forms> tag and a height, then publish.

Both paths are valid. Hosting the file yourself makes updates a one-file replace; the embed halves are faster for a first install.

Presets and attributes

You can start from a named preset:

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

Or set options as attributes: forms, trigger, count, colors, and more. Common hero patterns:

  • Logo / product: point the form at a PNG or SVG on your own domain (transparent PNG or SVG works best; cross-domain images need CORS).
  • Text morph: spell words in particles, then morph into a sphere or torus.
  • Cursor: repel or attract particles under the pointer; on phones, taps burst and swipes still scroll.

Full preset list and attribute docs ship in the download README and on the Particle Forms product page.

Performance and accessibility notes

  • The script renders on the GPU and pauses when offscreen, so it should not spin forever in a scrolled-away section.
  • Auto quality steps down resolution and particle count on slower devices.
  • The canvas is decorative and hidden from screen readers — keep a real HTML headline next to or over the effect for SEO and a11y.
  • Visitors with Reduce Motion turned on see a still frame.

Where else this works

The same script tag works in WordPress (Custom HTML), Shopify (Assets + Custom Liquid), Squarespace/Wix (code blocks on plans that allow it), plain HTML, React/Next, and Framer (code component). Webflow is just the path that needs Host-the-file or the download embed, because Webflow will not serve a raw .js from the Assets panel the way Shopify does.

Browse every Parallel Studio web effect — particles, shader gradients, kinetic type, and more — on the /effects catalog.

Pricing (as of Oct 2026)

  • Particle Forms: $12 one-time (single project).
  • Launch code FORMSLAUNCH: $3 off Particle Forms only, through Oct 21, 2026 (ends 2026-10-21T23:40:00Z / 6:40 PM CT that day).
  • Or get Particle Forms plus the rest of the catalog with the All-Access Pass for $49.

No fake reviews here — try the live demos on the product page, install on a staging site, and publish when it looks right.

Quick checklist

  1. Paid Webflow plan with Custom code.
  2. particle-forms.min.js hosted or Head/Footer halves from the download.
  3. Code Embed with <particle-forms … style="height: …">.
  4. Publish and verify on the live URL.
  5. Real text headline beside the canvas for SEO.

That is the whole install. Once the script is in Footer code, every page can reuse the same <particle-forms> tag with different presets.