# Vanilla Motion

> UI and web motion effects by Perxel, in plain code (no framework). Each effect has a live tuning app, a one-script embed, a case study, a code reference and its params as JSON.

MCP server: https://mcp.vanilla-motion.com/mcp (add it as an MCP server or custom connector in any app that supports MCP; public, no sign-in).
All data as JSON: https://vanilla-motion.com/content.json

## Effects

- [Ice Logo](https://vanilla-motion.com/ice-logo/): Any SVG logo cut from ice: it crumbles into splinters, chips and powder under the cursor, then pieces itself back together. Case study: https://vanilla-motion.com/ice-logo/case-study.md. Code: https://vanilla-motion.com/ice-logo/skill.md. Params: https://vanilla-motion.com/ice-logo/params.json. Install: `npx vanilla-motion add ice-logo`.
- [Ripple Reveal](https://vanilla-motion.com/ripple-reveal/): Slideshow transition using CSS mask + radial-gradient to expand slides outward from a configurable origin point with a soft liquid ripple edge. Case study: https://vanilla-motion.com/ripple-reveal/case-study.md. Code: https://vanilla-motion.com/ripple-reveal/skill.md. Params: https://vanilla-motion.com/ripple-reveal/params.json. Install: `npx vanilla-motion add ripple-reveal`.
- [Ripple Reveal WebGL](https://vanilla-motion.com/ripple-reveal-webgl/): Slideshow transition using WebGL with radial mask crossfade and Gaussian sine ring distortion for true pixel-level wave refraction at the reveal edge. Case study: https://vanilla-motion.com/ripple-reveal-webgl/case-study.md. Code: https://vanilla-motion.com/ripple-reveal-webgl/skill.md. Params: https://vanilla-motion.com/ripple-reveal-webgl/params.json. Install: `npx vanilla-motion add ripple-reveal-webgl`.
- [Venetian Blind](https://vanilla-motion.com/venetian-blind/): Two CSS mask transitions that split a slide into vertical strips — one collapses the outgoing image, the other reveals the incoming one. No JS animation library. Case study: https://vanilla-motion.com/venetian-blind/case-study.md. Code: https://vanilla-motion.com/venetian-blind/skill.md. Params: https://vanilla-motion.com/venetian-blind/params.json. Install: `npx vanilla-motion add venetian-blind`.
- [CSS Tab Shape](https://vanilla-motion.com/css-tab-shape/): Create tab shapes using CSS mask and clip-path: shape() techniques. Case study: https://vanilla-motion.com/css-tab-shape/case-study.md. Code: https://vanilla-motion.com/css-tab-shape/skill.md. Params: https://vanilla-motion.com/css-tab-shape/params.json. Install: `npx vanilla-motion add css-tab-shape`.
- [Horizontal Sticky Stack](https://vanilla-motion.com/horizontal-sticky-stack/): A vanilla CSS horizontal scroll section where cards stick and stack as you scroll through. Case study: https://vanilla-motion.com/horizontal-sticky-stack/case-study.md. Code: https://vanilla-motion.com/horizontal-sticky-stack/skill.md. Params: https://vanilla-motion.com/horizontal-sticky-stack/params.json. Install: `npx vanilla-motion add horizontal-sticky-stack`.