A premium, high-performance showcase of 38 interactive frontend design patterns built using native Web APIs and modern CSS transitions. No heavy frameworks, no bloated libraries—just clean, state-of-the-art web craft.
- UI Lab (New): A dedicated section with premium, interactive, ready-to-copy components (like Parallax 3D Cards, Hacker Text, and Magnetic Buttons) built purely with Vanilla CSS and JS.
- 38 Interactive Patterns: Handcrafted micro-interactions including 3D perspectives, custom cursors, SVG liquid filters, Houdini conic borders, and scroll-driven progress rings.
- Tabbed Code Viewer: Inspect HTML, CSS, and JavaScript independently or view the combined file directly from the browser popover. Click copy on any tab to copy only that file's contents.
- 100% Free & Open-Source: Supported entirely by community donations on Ko-fi.
- Modern Standards: Built with native HTML5 Popover API, backdrop filters, OKLCH color spaces, and CSS variables.
To clone, run, and experiment with the repository locally:
- Clone the repository:
git clone https://github.com/zaswear/kaktus.dev.git
- Navigate and serve the files:
You can serve the directory using any static file server:
# Using Python 3 (default) python3 -m http.server 3004 # Using Node.js (alternative) npx serve
- Open the browser:
Go to
http://localhost:3004to view the interactive gallery.
This repository is configured with robust workflows in .github/workflows/ to ensure production-grade code health:
- Lighthouse CI Audits (
lighthouse.yml): Runs automated Google Lighthouse reports (Performance, Accessibility, Best Practices, SEO) on every Push and Pull Request. - Broken Link Checker (
link-checker.yml): Scheduled to run weekly usinglycheeto ensure all documentation and external links remain active. - Bugsnag Monitoring: Integrated client-side error and performance monitoring loaded dynamically in
index.htmlusing SmartBear Bugsnag SDK.
To support the web developer community while protecting brand identity, kaktus.dev uses a Dual-Licensing model:
- MIT License (Code Snippets): All individual micro-interaction snippets shown in the code viewer are free to copy, modify, and use in any personal or commercial project without restrictions.
- CC BY-NC-ND 4.0 (Website Design & Compilation): The branding, layout compilation, custom styling theme, and website design of kaktus.dev are protected. You may not copy or host cloned mirrors of the website itself for commercial purposes.
See the full terms in LICENSE.
We welcome feedback, bug reports, and new interactive pattern proposals!
- 🐛 Report a Bug
- 💡 Propose a Pattern
- Read the CONTRIBUTING.md guide and adhere to our CODE_OF_CONDUCT.md.