Launched my first paid UI component pack — 12 animated SaaS buttons
https://aidevjun.gumroad.com/l/premium-buttons
THE BUTTONS YOUR SAAS LANDING PAGE ACTUALLY DESERVES Tired of boring hover effects? These 12 buttons are engineered â not designed. Each one is a complete micro-interaction with particle systems, state machines, and terminal output that types itself character by character. WHAT YOU GET â 12 COMPONENTS 01 · Compile TypeScript â Indigo plasma gradient + conic spin border 02 · Deploy to Vercel â Aurora gradient slide-fill on hover 03 · Run Python Script â Solar flare shimmer + rotating flare overlay 04 · Execute SQL Query â Full-spectrum neon wire conic border 05 · Call REST API â White gloss, works on dark AND light backgrounds 06 · Trigger Webhook â Rose-pink slide-fill + staggered wave rings 07 · Add to Cart â 4-state machine: idle â loading â success/error â reset 08 · Push to GitHub â Void sphere conic ring + orbit dot burst 09 · Deploy AWS Lambda â Gold standard shimmer + warm particle burst 10 · Docker Build & Push â Glassmorphism fill + backdrop blur 11 · Train AI Model â Live epoch counter 0â100 + star particle burst 12 · Deploy to K8s â Prismatic holographic + real-time cursor tracking WHAT MAKES THESE DIFFERENT Canvas Particle Engine â 800-particle pre-allocated pool fires on every click. Zero heap allocation. GPU-accelerated via requestAnimationFrame. CSS Houdini @property â Gradient colors AND rotation angle animate simultaneously. This is impossible with standard CSS transitions. GSAP State Machines â Button 07 runs 4 async states. Button 11 runs 3 phases with a live epoch counter ticking 0 to 100 in real time. Mouse-Tracking Holographic â Button 12 reads your cursor position every frame and redistributes a prismatic highlight across 3 conic-gradient layers. Typewriter Terminal Output â Every button reveals a styled terminal panel after click. Deploy logs, SQL results, git output â each line types itself. Chromatic Aberration Burst â Button 12 click fires 3 simultaneous particle bursts offset in red, green, and blue â simulating real lens aberration. FILES INCLUDED QUICK-START.html â Open in browser, up and running in 5 minutes 12 button folders â Each with button.html, snippet-css.css, snippet-js.js, README.md Shared engine â shared-engine.css + shared-engine.js loaded once, serves all buttons Full demo â All 12 buttons live and interactive on one page README.md â Complete integration guide, API reference, browser support CHANGELOG.md â Version history + v1.1 roadmap LICENSE.md â Personal, Commercial, and Extended tiers clearly defined TECH STACK HTML5 + CSS3 with Houdini @property Vanilla JavaScript â zero framework dependency GSAP 3.12 via CDN â free for commercial use since April 2025 Canvas API â particle system built from scratch Google Fonts â Space Grotesk + JetBrains Mono Browser support: Chrome 90+, Edge 90+, Firefox 88+, Safari 15+ Mobile: Full touch support on all 12 buttons Accessibility: prefers-reduced-motion disables all animations cleanly WHO THIS IS FOR Indie SaaS founders who want their CTA to feel premium Frontend developers studying production-grade animation patterns Design engineers building AI dashboards and developer tools Freelancers adding serious polish to client projects LICENSE Commercial license included. Use in unlimited client projects, SaaS products, and commercial web apps. No attribution required. FAQ Do I need React or any framework? No. Pure HTML, CSS, JavaScript. Drop it anywhere. Does GSAP need a paid license? No. Free for all commercial use since April 2025. Does it work on Firefox and Safari? Yes. CSS Houdini degrades gracefully â all other animations work identically across all browsers. Can I change the colors? Yes. Edit gradient stops in snippet-css.css and update the pal array in snippet-js.js to match. Can I remove the terminal panel? Yes. Delete the result div and the showResult call. Full instructions in each button's README. FILES INCLUDED â PACKAGE STRUCTURE premium-buttons-saas-dev-edition/ â âââ QUICK-START.html âââ README.md âââ CHANGELOG.md âââ LICENSE.md â âââ _demo/ â âââ index.html â âââ _snippets/ â âââ shared-engine.css â âââ shared-engine.js â âââ 01-typescript/ â âââ button.html â âââ snippet-css.css â âââ snippet-js.js â âââ README.md â âââ 02-nextjs/ â âââ button.html â âââ snippet-css.css â âââ snippet-js.js â âââ README.md â âââ 03-python/ â âââ button.html â âââ snippet-css.css â âââ snippet-js.js â âââ README.md â âââ 04-sql/ â âââ button.html â âââ snippet-css.css â âââ snippet-js.js â âââ README.md â âââ 05-rest-api/ â âââ button.html â âââ snippet-css.css â âââ snippet-js.js â âââ README.md â âââ 06-webhook/ â âââ button.html â âââ snippet-css.css â âââ snippet-js.js â âââ README.md â âââ 07-cart/ â âââ button.html â âââ snippet-css.css â âââ snippet-js.js â âââ README.md â âââ 08-github/ â âââ button.html â âââ snippet-css.css â âââ snippet-js.js â âââ README.md â âââ 09-aws-lambda/ â âââ button.html â âââ snippet-css.css â âââ snippet-js.js â âââ README.md â âââ 10-docker/ â âââ button.html â âââ snippet-css.css â âââ snippet-js.js â âââ README.md â âââ 11-ai-train/ â âââ button.html â âââ snippet-css.css â âââ snippet-js.js â âââ README.md â âââ 12-kubernetes/ âââ button.html âââ snippet-css.css âââ snippet-js.js âââ README.md Total: 55 files · 107KB compressed
