Skip to content

01About

Vanilla Motion by Perxel

Motion you can read, tune and ship.

Vanilla Motion is Perxel's effects lab. We collect interface animations from the web and rebuild each one from scratch in plain HTML, CSS, TypeScript and WebGL, so you can see how it works and use it on your own site.

02Every effect

Four parts
  1. 01Try it live

    Each effect page opens on a short preview. Click the stage and the real effect runs, so you can play with it.

  2. 02Tune it in the app

    Every effect opens in its own app, built on Toolcraft by Pixel Point. Change colours, speed and content until it fits your design, then export your settings.

  3. 03Read the case study

    How it was built, which values we picked and why, and what we dropped along the way.

  4. 04Put it on your site

    One script tag works on Webflow, Framer, WordPress or plain HTML. No build step, no framework.

03Why vanilla

Our approach

Close to the platform

Most effects here use only what the browser already has. When a library clearly makes the animation better, you'll see GSAP or Three.js, but plain code comes first.

Code that stays close to the platform is easier to read and easier to move. Once you know how an effect works, you can port it to React, Vue or your own stack, or hand the source to an AI assistant and ask it to do the port.

Seen on the web, rebuilt from scratch

Most effects start from an animation we saw on a real site. We rebuild it line by line, then write down what we learned.

04For developers and agents

Open formats
  1. 01MCP server

    Ask Claude, Cursor or any MCP app for an effect. It reads the real source and params from mcp.vanilla-motion.com.

    https://mcp.vanilla-motion.com/mcp
  2. 02CLI

    Copies an effect into your project. The same item works with the shadcn CLI from /r/<slug>.json.

    npx vanilla-motion add <slug>
  3. 03skill.md

    Every public effect has a skill.md: a short, code-first reference an agent can follow.

  4. 04llms.txt

    One index of every public effect for language models, at /llms.txt.

05Made by Perxel

perxel.com

A lab from a web studio

Perxel is a web tech studio. We build marketing websites with designers and agencies, and Vanilla Motion is where we work out the motion that ends up in them.

Visit perxel.com ↗

Tuning apps built with
Toolcraft by Pixel Point ↗