Three motion libraries that make a site look expensive

What you're adding

Motion is the layer that separates a site that works from a site that feels premium. How things arrive on screen, what happens as you scroll, what the cursor does when it passes over something.

You provide a site that already works. This performs the install and the wiring through Claude Code. You receive a motion layer you did not have to build.

Animmaster Lib

animmasterlib.dev · $4.99 for the PRO plan, $8 for Premium with lifetime updates. There is no free tier, but it's five dollars.

300 components. What's actually in there, by count:

1. 66 scroll animations, the biggest set, parallax reveals and progressive element animations
2. 26 hero animations, large landing-section text and image transitions
3. 23 sliders, 22 3D effects, 21 navigation menus
4. 20 mouse effects, cursor-driven interactions that follow the pointer
5. 18 WebGL shaders, the GPU-accelerated ones, and the reason to buy it
6. 10 physics effects, gravity and collision, where things actually fall and hit each other

How you get it in: you buy it, and you get a Google Drive folder. Download it, then drop the folder straight into Claude Code and tell it which component you want and where it goes. Claude Code cannot reach the library on its own, because it's behind the purchase.

Skiper UI

skiper-ui.com · free tier, then a one-time payment for the premium set. 106+ components they describe as "un-common components for shadcn/ui".

How you get it in: one line, which Claude Code can run for you.

npx shadcn add @skiper-ui/skiper40

Swap the number for whichever component you want. If your project already uses shadcn, this is the least friction of the three by a distance.

Vengeance UI

vengenceui.com · 26+ animated React components built with Framer Motion, Radix and Tailwind. Made for landing pages specifically.

The ones worth knowing:

1. Liquid Metal, a metallic fluid shader you can put on anything. This is the piece people screenshot.
2. Liquid Ocean, the same idea rendered as water
3. Ripple Displacement Slider, a slider that distorts the image as it moves
4. Elastic Stack and the perspective grids, for card sections that do not feel like cards

How you get it in: CLI install, and components land as editable TypeScript files in your src directory, so you can change the behaviour afterwards rather than being stuck with the default.

The prompt to hand Claude Code

Whichever library you use, this is what makes it land in the right place rather than just existing on the page.

I want to add [COMPONENT NAME] from [LIBRARY] to my site.

Here's what I need:
- Install it and wire it into [WHICH PAGE / SECTION]
- Match it to my existing palette and type scale rather than keeping its default colours
- Keep the motion consistent with anything already animating on the page: same easing, same duration family
- Make sure it degrades gracefully on mobile and respects prefers-reduced-motion
- Do not add a second animation library if one is already in the project

Then tell me what you changed and where, so I can undo it if I hate it.

How to not overdo it

1. Two or three effects, not eight. The failure mode here is never a bad component, it's too many good ones fighting each other.
2. One shader per page, maximum. WebGL is the most expensive thing on this list to run, and two of them on one page is what makes a laptop fan spin up.
3. Animate on arrival, not forever. Things that move constantly stop reading as premium after about four seconds.
4. Check it on a phone before you ship. Most of these are built and demoed on desktop.

The links

🌊 Animmaster Lib: animmasterlib.dev
⚡ Skiper UI: skiper-ui.com
🪞 Vengeance UI: vengenceui.com
🤖 Claude Code: code.claude.com