Web effects · 8 products
WebGL and motion effects for Webflow, Framer, WordPress, Shopify and React
Particles, shader gradients, a fluid cursor, kinetic type and more. Each one is a script and an HTML tag on any site, with React and Framer versions in the download. Pay once, from $9.
One-time price · Free v1.x updates · One website per license
The effects
8 products · from $9
Thousands of particles that hold a shape and morph between 3D forms, text and your logo.
<particle-forms>20 KB gzipped
Animated WebGL gradient backgrounds: fluted glass, liquid chrome, caustics, prism light and more.
<pf-gradient>10.4 KB gzipped
Interactive dot-grid backgrounds that react to the cursor, ripple on click and spell your words.
<pf-dot-grid>13.8 KB gzipped
Kinetic Type
$1234 accessible text effects on load, in view, on scroll, hover or click. The text stays real text.
<pf-kinetic-type>13.7 KB gzipped
Chrome and liquid-metal buttons, badges and cards that stay real, accessible buttons.
<pf-liquid-metal>14.7 KB gzipped
An interactive 3D particle globe with continents, data markers and animated arcs.
<pf-particle-sphere>14.9 KB gzipped
A real-time GPU fluid simulation your visitors stir with the cursor and touch.
<pf-liquid-cursor>14.8 KB gzipped
Loading indicators made of text: 40 spinners, AI thinking loaders and progress bars.
<pf-spinner>8 KB gzipped
All-Access Pass
All 8 effects for $49
Every product above, as the same full downloads, for $49 one-time instead of $92. You save $43 (47%).
Works with
One script + one tag
Every effect is a custom HTML element. Load its script once, then put the tag where you want the effect, and set presets, colors and the rest as attributes. This is the whole install for Shader Gradients:
<script src="/shader-gradients.min.js" defer></script>
<pf-gradient preset="glass" style="height: 600px"></pf-gradient>Plain HTML, Squarespace and Wix work the same way, on plans that allow custom code. Each product page has step-by-step instructions for every platform.
- Webflow
- Paste the footer code from the download into Site settings → Custom code → Footer code, then add a Code Embed with the effect's tag where it goes. Liquid Metal Buttons skips the embed: you add a custom attribute to your own Button. Custom code needs a paid Webflow site plan.
- Framer
- Each download has a Framer code component. Paste it into a new code file in your project, drag it onto the canvas and set it up in the properties panel. No script tag.
- WordPress
- Upload the script to your Media library or theme, then add a Custom HTML block with the script tag and the effect's tag. WordPress.com needs a plan that allows custom code.
- Shopify
- Upload the script under Edit code → Assets, then add a Custom Liquid section with the effect's tag. Liquid Metal Buttons skins your theme's own buttons, so Add to cart keeps working.
- React
- Each download has a React component (React 18+, also Next.js and Vite) with the same options as props. Copy the file into your project; there's no npm package to install.
Questions
4 answers
How do I add a WebGL background to Webflow?
Pick a background effect, such as Shader Gradients, Dot Grid Field or Particle Forms. Paste the footer code from its download into Site settings → Custom code → Footer code, add a Code Embed element with the effect's tag where the background goes, give it a height and publish. Custom code runs on the published site and needs a paid Webflow site plan.
Do they work in Framer?
Yes. Every web effect ships a Framer code component. Add it as a new code file, drag it onto the canvas, pick a preset and the rest in the properties panel, and press Preview.
Do I need React or a build step?
No. On any site the effect is one script file plus one HTML tag. React components are included too, for React, Next.js and Vite projects.
Is it a subscription? What does the license cover?
No subscription: each effect is a one-time purchase with free v1.x updates. A license covers one website or project per product. The All-Access Pass is all 8 for $49, with the same license for each.
Coming soonMetal Shaders for SwiftUI, native shaders for iOS and macOS apps. Not on sale yet.