Next-Generation UI Framework powered by GSAP & SVG
Documentation • Features • Installation • Usage • Components
Docs: https://yaka-ui.vercel.app/docs.html
YAKA UI is a lightweight, high-performance UI framework for building stunning interactive interfaces.
Version 1.0 is production-optimized and leverages:
- GSAP → ultra-smooth 60fps animations
- SVG → crisp scalable graphics
- ES Modules → modern architecture
- CSS Variables → instant theming
It delivers premium glassmorphism visuals, physics-based interactions, and advanced UI motion — without unnecessary bloat.
- 🎨 Glassmorphism components
- ⚡ GSAP animation engine
- 🧲 Magnetic hover interactions
- 🧊 3D tilt effects
- 🖱️ Custom next-gen cursor
- 📱 Fully responsive design
- 🔧 Modular lightweight core
- 🌗 Fully themeable via CSS variables
Include production build via CDN:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/dill-lk/YAKA-UI/yaka_v1.0.css">
<script type="module" src="https://cdn.jsdelivr.net/gh/dill-lk/YAKA-UI/yaka_v1.0.js"></script>YAKA UI auto-loads GSAP. For offline usage, host dependencies locally.
YAKA UI initializes automatically when loaded.
Activate effects using data attributes.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/dill-lk/YAKA-UI/yaka_v1.0.css">
</head>
<body>
<button class="btn-primary" data-magnetic>
Hover Me
</button>
<script type="module" src="https://cdn.jsdelivr.net/gh/dill-lk/YAKA-UI/yaka_v1.0.js"></script>
</body>
</html><button class="btn-primary" data-magnetic>
<span>Get Started</span>
</button>
<button class="btn-glitch" data-text="CYBER">
CYBER
</button><div class="card glass-card" data-tilt>
<div class="card-content">
<h3>Smart Card</h3>
<p>Interactive glassmorphism with 3D tilt.</p>
</div>
<div class="card-border"></div>
</div>(Add chart later using star-history.com embed if wanted)
Maintained by dill-lk
Project under YAKA UI Labs https://github.com/yaka-ui-labs
MIT License — see LICENSE file.
Made with ❤️ by dill-lk & YAKA UI Team
[]