Glopzi
Sign up

Concepts

How Glopzi works.

A short tour of the model behind the product: what runs where, how the editor stays in sync with your live site, and why none of this requires you to change your existing build.

The three layers

Every page Glopzi touches has three layers stacked on top of each other.

  • Layer 1: your existing DOM. Whatever your builder outputs, Elementor, Bricks, Gutenberg, Divi, Webflow, Shopify, Next.js, or hand-written HTML. Glopzi never modifies this layer.
  • Layer 2: animations on that DOM.When you pick an element in the editor, Glopzi remembers how to find it on your real site, then applies the motion you designed. The element doesn’t change. Its motion does.
  • Layer 3: injected objects. WebGL backgrounds today. 3D models, particles, Lottie files in future releases. These are new content Glopzi adds on top of the page, anchored to elements you choose.

Note

The same model works on every stack because the browser always receives HTML. The DOM is the universal contract. Anything that runs JavaScript on top of it can animate it.

Editor and runtime

Glopzi has two pieces that talk to each other.

  • The editor is a web app at studio.glopzi.com. It loads your real site inside a frame so you see your animations applied to real content while you design them. You sign in with a 6-digit code we email you.
  • The runtimeis a small JavaScript bundle hosted on our CDN. It knows how to play the animations you saved. It loads only the features your site uses, runs on GPU when possible, and doesn’t require any framework on your end.

You only deal with the editor. The runtime is invisible to you and your visitors after setup.

From save to visitor

When you click Save in the editor, here is what happens, in plain words:

  • Your animation settings are stored on our servers, tied to the site you’re editing.
  • We compile a small bundle that contains exactly the motion your page needs, plus a tiny stylesheet that prevents flicker on the first paint.
  • We push that bundle to a global CDN under your unique key.
  • The next time anyone loads your page, the runtime fetches that bundle and plays your animations. The whole flow takes a few seconds.

Your visitors never see the editor. They never know Glopzi exists. They just see motion.

Two delivery paths

You connect your site to Glopzi in one of two ways, depending on what you have.

  • WordPress. You install the Glopzi plugin and paste your license key. The plugin handles everything else: it loads the runtime on the front end, wires up an Edit with Glopzi button on the admin bar, and keeps a local copy of your bundle on the server for resilience. See Quickstart: WordPress.
  • Any other site. You add one script tag with your API key. Plain HTML, Shopify, Webflow embed, Framer, custom stacks: all the same one-line install. SSR frameworks like Next.js, Astro, Remix and SvelteKit get a second tag for an anti-flicker stylesheet. See Quickstart: any website.

What makes it fast

Glopzi is designed to leave your performance numbers alone. The runtime is small, the bundle only carries what you actually use, and rendering happens on GPU.

  • Tree-shaken bundles.If your site only fades things in, we don’t ship the WebGL renderer. If you only use scroll triggers, we don’t ship time triggers.
  • GPU-accelerated motion. Transforms and opacity run on the compositor thread. Your main thread stays free for your real content.
  • CDN delivery.Bundles are served from a global edge network with aggressive caching. WordPress sites also keep a local copy that’s served from the site’s own domain, so a CDN outage doesn’t break motion.

More on the budget and trade-offs in Performance and Core Web Vitals.

Next steps

Pick the path that matches your site: