Motion UI Kit — 68 Copy-&-Paste Animated HTML/CSS/JS Components (No Dependencies)

A collection of 68 animated UI components you can copy and paste straight into your own website. No external libraries, no images, no server, no build step — just HTML, CSS and JavaScript.

Open index.html in any browser and you get a searchable gallery with a live preview of every component. Hit "copy code" on the one you want and paste it into your HTML. What you see in the preview is exactly the code you copy, so the look never differs from the snippet.

Included (68 components across 11 categories):

- Loaders (6): ring, dual ring, bouncing dots, equalizer, pulse, flip square

- Buttons (6): gradient slide, ripple, border draw, 3D push, glow pulse, arrow slide

- Nav & menus (7): hamburger icon, nav underline, drawer, dropdown, pagination, stepper, reading progress bar

- UI feedback (6): toast, modal, tooltip, accordion, tabs, alert banners

- Text effects (6): typewriter, gradient flow, count-up, glitch, animated link underline, staggered heading

- Animated backgrounds (5): canvas particles, animated gradient, floating blobs, grid, twinkling stars

- Elements (8): dividers, badges, progress bars, circular progress, skeletons, notification bell with badge, skeleton card, vertical timeline

- Cards (8): hover lift, flip, glass, gradient border, pricing, profile, image overlay, 3D tilt

- Media (3): carousel/slider, gallery with lightbox, before/after comparison slider

- Scroll & misc (4): scroll reveal, back-to-top, ticker, hover zoom

- Form controls (9): toggle switch, animated checkbox, star rating, copy field, segmented control, floating label input, expanding search bar, range slider with value bubble, filter chips

All class names are prefixed with "pc-" to avoid clashing with your existing CSS. Every component shares the same color tokens, so swapping a few hex values re-brands the whole kit. Easing is tuned with cubic-bezier curves; decorative animations respect prefers-reduced-motion. Count-up, scroll-reveal and timeline use IntersectionObserver. Works in all modern browsers with zero network requests. A free 7-component trial version is also available. Licensed for use in your own and clients' sites, including commercial projects. Built by one person, with AI helping.