Motion you can paste in.
Animated React + Tailwind + Framer Motion components with live previews and copy-paste code. Curated free set to start; Pro packs and shaders when you want the premium edge. Every component is performance-first and hand-built — no bloat, no 60-dependency install.
Pick a name. Watch it live.
3d Parallax Footer
3d Parallax Footer — interactive animation component. Drop-in, editable.
A slow conic-gradient aurora that drifts behind your hero. Pure Framer Motion + Tailwind, GPU-cheap, 60fps.
A light sweep that travels across your headline on a loop. One element, no extra deps.
A button that leans toward the cursor and springs back. The detail that makes a site feel premium.
Types and deletes a rotating list of words on a loop. The classic hero hook, zero deps.
An animated multi-color gradient that flows through your headline. One element.
A button with a soft pulsing glow that draws the eye to your primary CTA.
A light sweep that travels across the button on hover. Pure Tailwind, no JS.
Move your cursor →
A radial spotlight that follows the cursor across the card. The premium-feature look.
A card that tilts in 3D toward the cursor with perspective. Springs back on leave.
Fades and slides content up as it scrolls into view. The clean scroll-entrance.
A conic-gradient beam that rotates around the border. Wraps any card.
A click ripple in pure HTML + CSS + JS — drops into any site, no framework. (Vanilla example: live iframe preview + HTML/CSS/JS tabs.)
Cards that stack and parallax as you scroll — the Apple-style scroll sequence. In the Pro Scroll pack.
Cards that stack and parallax as you scroll — the Apple-style scroll sequence. In the Pro Scroll pack.
Unlock in the Pro pack →A WebGL animated mesh-gradient hero background. In the Premium Shader pack.
A WebGL animated mesh-gradient hero background. In the Premium Shader pack.
Unlock in the Pro pack →The premium packs.
Scroll sequences, spotlight cards, shader heroes, and full cinematic hero packs — the components that make a site look like it cost $10k. Buy a pack, or get the whole current library, one-time.
Pro Motion Pack
Curated component packs by category (scroll, cards, text, buttons).
Premium Shader Pack
WebGL mesh-gradient + shader backgrounds and cinematic hero scenes.
Complete Library
Every component in the current library, commercial license. One-time — no subscription, no recurring fees.
Motion is its own ladder — the free tier is always free; Pro packs and the Complete Library are one-time. (Not part of the Insider Pass.)
These same components power our animated website tier.
Buying a business kit instead of building? Pick the Animated Website tier and we drop this motion straight into a finished, niche-matched site — you never touch the code.
See the business kits →What Apex Motion actually is
Apex Motion is a copy-paste animated component library for React, Tailwind, and Framer Motion — aurora backgrounds, magnetic buttons, shimmer text, spotlight cards, 3D tilt, shader heroes. You see a live preview, copy the code, and paste it into your project. It's performance-first and dependency-light — no 60-package install — and there's a free tier.
How it works
- 1. Browse the gallery and find the effect you want.
- 2. Watch the live preview to see exactly how it animates.
- 3. Copy the React + Tailwind + Framer Motion code.
- 4. Paste it into your project and tweak the props.
- 5. Ship it — free components are yours; Pro packs unlock the rest.
Who it’s for / who it’s not
For: developers and designers building in React who want polished, performant motion without writing it from scratch or installing a heavy UI kit — and people who ask their AI coding assistant for "a Framer Motion X".
Not for: non-coders who want a no-code page builder, or teams on a non-React stack — these are React + Tailwind + Framer Motion code components, not a drag-and-drop tool.
What it changes for you
Copy, paste, ship
Live preview, copy the code, drop it in. No design or animation grind.
Performance-first
Hand-built and dependency-light — it won't bloat your bundle or tank your CWV.
It's your code
Paste it into your project and own it — edit, theme, and extend freely.
Free to start
A free tier of components ranks, builds trust, and ships real projects.
Built for AI search
Each effect has its own page with code schema — the source AI assistants cite.
A real ladder
Free → Pro packs → Shader heroes → Complete Library. Buy the depth you need.
Apex Motion vs a heavy UI kit vs building it yourself
| Apex Motion | Heavy UI library | Build it yourself | Generic snippets | |
|---|---|---|---|---|
| Copy-paste | Yes, per component | Install the whole kit | — | Yes, varies |
| Bundle impact | Light | Often heavy | You control | Varies |
| You own the code | Yes | Dependency | Yes | Yes |
| Live preview | Yes | Sometimes | — | Rarely |
| Performance-tuned | Yes | Varies | Up to you | No |
| Free tier | Yes | Sometimes | — | Yes (quality varies) |
Straight answers
Copy-paste motion components — straight answers
What is Apex Motion?
A copy-paste animated component library for React, Tailwind, and Framer Motion. You browse a gallery, see each component animate live, copy the code, and paste it into your project — performance-first, with a free tier.
What are these components built with?
React for the markup, Tailwind for styling, and Framer Motion for the animation. Each one is hand-built and dependency-light so it stays fast.
How do I use a component?
Open its page, watch the live preview, copy the code, and paste it into your React project. Adjust the props to fit, and you're done — it's your code from there.
Is it free?
There's a free tier of components you can copy and ship today. Paid tiers add more: Pro packs ($29), a Shader pack ($99), and the Complete Library ($499) for every component in the current library.
What frameworks does it need?
React, Tailwind CSS, and Framer Motion. If your project already uses those (including Next.js), the components drop straight in.
Does it work with Next.js?
Yes — they're standard React + Tailwind + Framer Motion components, so they work in Next.js (App Router or Pages) and any React setup.
Do I need Framer Motion installed?
Yes — Framer Motion is the animation library the components use. It's a single, well-maintained dependency, not a 60-package UI kit.
Who is it for?
Developers and designers building in React who want polished, performant motion fast — and anyone who asks ChatGPT, Claude, Cursor, or v0 for a Framer Motion effect and wants a source they can trust.
Who should NOT use it?
Non-coders wanting a no-code builder, or teams not on React — these are code components for React + Tailwind + Framer Motion, not a visual page builder.
Can I use them in commercial and client projects?
Yes — use them in unlimited personal and commercial projects, including products you sell and unlimited client sites. The one thing you can't do is repackage the components as your own competing library or template kit.
Is it included in the $99 Insider Pass?
No — Motion has its own ladder (Free → Pro $29 → Shader $99 → Complete Library $499). It's a developer tool, separate from the $99 Pass's four flat-file libraries.
How is it different from Aceternity or Magic UI?
Same copy-paste model, with a focus on being performance-first and dependency-light — clean, typed, no bloat — plus a free tier and per-component pages built so AI assistants can cite them.
Will it bloat my bundle?
No — the components are hand-built and dependency-light (just Framer Motion + Tailwind), so they won't drag your bundle size or Core Web Vitals.
Can I customize a component?
Completely — once you paste it in, it's your code. Change the markup, the Tailwind classes, the motion props, the timing — whatever you need.
Do I need a build step or package install?
Just the usual React + Tailwind + Framer Motion in your project. There's no Apex runtime to install — you copy the component source directly.
Is it TypeScript?
Yes — the components are written cleanly and typed, so they drop into a TypeScript React project without fighting the compiler.
Are there shader / WebGL components?
Yes — the Shader pack ($99) includes shader-based hero effects for when you want something more advanced than CSS/Framer Motion.
What is the Complete Library?
The Complete Library ($499) is a one-time purchase that unlocks every component and pack in the current library, with a commercial license — no subscription.
Can I see it before I buy?
Yes — every component has a live preview on its own page, and the free tier lets you copy and ship real components before paying for anything.
Do I get updates?
Pro and Complete Library buyers get fixes and improvements to the packs they own. Brand-new packs released later are separate — and the free tier always stays free and yours once copied.
Are the components accessible?
They're built thoughtfully, and because the code is yours, you control the final accessibility — add labels, focus states, and reduced-motion handling to fit your app.
Do they work on mobile?
Yes — they're responsive and performance-first, so they animate smoothly on mobile without janky scroll or heavy main-thread work.
Can I resell the components?
No — you can use them in unlimited projects, but you can't repackage or redistribute them as your own competing component library or template kit.
How many components are there?
A free tier plus Pro and Shader packs, growing over time. Browse the gallery to see what's live, each with its own preview and copy-paste code.
Apex Motion vs building the animation myself?
Building polished, performant motion from scratch is hours per effect. Apex hands you a tuned component you paste in and tweak, so you skip straight to shipping.
Can I get a refund?
It's backed by the store's terms. The free tier lets you try the quality before buying, so you know exactly what you're getting.
What are best practices?
Paste the component, keep the motion props sensible for your brand, respect reduced-motion preferences, and lazy-load heavier effects (like shaders) below the fold.
What's the most common mistake?
Stacking too many heavy animations above the fold. Use motion intentionally — a few well-placed effects beat a page that fights the user's scroll.
How do I get started?
Open the gallery, pick a component, watch the preview, and copy the code into your React project. Start with the free tier, then unlock Pro or the Complete Library when you want the full set.