3 Sites for Animated Scroll UI: Aceternity, Skiper, Animmaster

Links, real prices and copy-paste install commands for three animated UI component libraries.

Those smooth, scroll-driven websites you keep seeing are usually built from ready-made animated components, not written from scratch. Here are the three libraries from the reel, what each one actually costs, and how to drop their components into a Next.js site in a few minutes.

What you need

• Node.js and a code editor such as VS Code or Cursor.

• A Next.js project with Tailwind CSS and shadcn/ui set up. Both Aceternity UI and Skiper UI install through the free shadcn CLI.

• The three sites:

  • Aceternity UI: many free animated React components, plus a paid tier.

  • Skiper UI: "uncommon" Next.js components, some free and some premium.

  • Animmaster Lib: a paid pack of about 300 animated components.

The three sites, honestly compared

• Aceternity UI What you get: 100+ free components, including Hero Parallax, Parallax Scroll and Macbook Scroll. Built with React, Tailwind and Framer Motion. Price: Free components, paid all-access on its pricing page.

• Skiper UI What you get: Animation-heavy components built on shadcn/ui for Next.js. Price: Some free; Premium is $129 one-time.

• Animmaster Lib What you get: About 300 components: scroll animations, sliders, hero sections, 3D, hover, mouse, WebGL shaders, text, page transitions. Price: Paid only: PRO $4.99, Premium $8 (one-time, listed sale prices).

So only two of the three have a free tier. Animmaster Lib is a cheap one-time purchase, not free.

Step by step

1. Create a project.

npx create-next-app@latest my-animated-site
cd my-animated-site
npx shadcn@latest init

The `init` command sets up `components.json`, the `cn` helper, Tailwind config and CSS variables.

2. Add an Aceternity scroll component. Hero Parallax is a good first pick:

npx shadcn@latest add @aceternity/hero-parallax

If the `@aceternity` name isn't recognised, add this to `components.json` and run the command again:

"registries": {
  "@aceternity": "https://ui.aceternity.com/registry/{name}.json"
}

You can also install by URL: `npx shadcn@latest add https://ui.aceternity.com/registry/bento-grid.json`.

3. Add a Skiper UI component. Open a component page on skiper-ui.com and copy its command. Each one follows this format:

npx shadcn add @skiper-ui/skiper40

Change the number to the component you picked. Skiper says each component is a single file.

4. (Optional) Use Animmaster Lib. After buying, you get the code through a Google Drive folder. Its FAQ says about 60% of components are plain HTML, CSS and JavaScript, 30% React and 10% Next.js. Copy the files you want into your project.

5. Ask an AI coding assistant to put it together. In Cursor, Claude Code or a similar tool, paste:

I'm building a single landing page in this Next.js project. The components in /components are installed from Aceternity UI and Skiper UI.
1. Build app/page.tsx with this order: a Hero Parallax section at the top, a features section, then a call-to-action section.
2. Use only the installed components. Don't install new packages without asking me.
3. Replace placeholder images and text with clearly marked placeholders I can edit.
4. Respect prefers-reduced-motion: turn off or simplify animations when it is set.
5. Make sure it works at 375px phone width with no horizontal scroll.
Then run the dev server and fix any errors.

6. Run it.

npm run dev

Open `http://localhost:3000` and scroll.

Good to know

• Check each license before client work. Aceternity and Skiper both link license pages from their sites. Some listings say Skiper's free components need attribution, so read its terms before shipping.

• Prices change. Animmaster's prices are listed as sale prices ($4.99 down from $10, $8 down from $20). Its site also gives two different component counts (300 and 200). Check the current page before you pay.

• Heavy animation has a cost. Lots of scroll and WebGL effects can slow down phones. Test on a mid-range Android phone, not just your laptop.

• Accessibility matters. Some people get motion sickness from parallax. Keep the reduced-motion rule from the prompt above.

• The reel's audio said these are used by companies like Apple. That claim couldn't be verified, so treat it as unconfirmed.

Sources

• Aceternity UI

• Aceternity UI: CLI docs

• Aceternity UI: Hero Parallax

• Aceternity UI: brand facts

• Skiper UI

• Tailkits: Skiper UI overview

• Animmaster Lib

• Abduzeedo: Animmaster Studio releases UI animation library

Found this useful? Follow @kevinsingh.me on Instagram for a new AI tool every day, and subscribe so you don't miss the next one.