Essentials

Introduction

YakaUI is a high-fidelity, production-ready UI framework built for developers who demand aesthetic excellence and fluid motion. At its core, YakaUI combines the transparency of Glassmorphism with the power of GSAP (GreenSock Animation Platform) to create interfaces that feel alive.

Pure CSS Core

Zero dependency styling for the majority of components. Lightweight and lightning fast.

Motion Driven

Philosophy

We believe that enterprise software doesn't have to be boring. YakaUI provides the building blocks for creating "magical" user experiences through subtle light play, physical depth, and meaningful movement.

Essentials

Getting Started

View on GitHub

YAKA UI is a project-ready library designed for production. Use our globally distributed CDN for the lowest latency or host the files locally for full control.

Option 1: CDN Setup (Recommended)

Use our globally distributed CDN for instant setup with zero configuration. Perfect for quick prototyping and production deployments.

                        <!-- jsDelivr CDN (Fast & Reliable) -->

                        <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/dill-lk/YAKA-UI/yaka.css">

                        <script src="https://cdn.jsdelivr.net/gh/dill-lk/YAKA-UI/yaka.js"></script>

                        <!-- Alternative: UNPKG -->

                        <link rel="stylesheet" href="https://unpkg.com/yaka-ui/yaka.css">

                        <script src="https://unpkg.com/yaka-ui/yaka.js"></script>

Option 2: Download & Local Setup

Download the files from GitHub and host them locally for full control over versioning and customization.

                        <!-- 1. Include YAKA UI Core Files -->

                        <link rel="stylesheet" href="yaka_v1.0.css">

                        <script type="module" src="yaka_v1.0.js"></script>

                        <!-- 2. Required Dependencies (GSAP for animations)
                            -->

                        <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>

                        <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>

Quick Start Template

Copy this boilerplate to start building immediately.

                        <!DOCTYPE html>

                        <html lang="en">

                        <head>

                          <meta charset="UTF-8">

                          <link rel="stylesheet" href="yaka.css">

                        </head>

                        <body>

                          <button class="btn-glow">Hello
                        World</button>

                          <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>

                          <script src="yaka.js" type="module"></script>

                        </body>

                        </html>

Initialization

Manual instance control for dynamic mounting or SPAs.

                        import { YakaUI } from
                        './yaka_v1.0.js';

                        // Instance control for dynamic mounting

                        const ui = new YakaUI();

Colors & Theme

Accent

Accent 2

Accent 3

Accent 4

Accent 5

Success

Warning

Danger

Info

Blue

Emerald

Rose

Amber

Violet

Cyan

Slate

YAKA utilizes a multi-layered design token system for variables, accents, and semantic states. You can override the defaults globally or scope them to a specific section.

Extended Palette

Use these extra color tokens for custom UI highlights, charts, or accents beyond the core brand palette.

                        :root {

                          --slate-50: #f8fafc;

                          --slate-100: #f1f5f9;

                          --slate-600: #475569;

                          --slate-900: #0f172a;

                          --blue-400: #60a5fa;

                          --blue-600: #2563eb;

                          --emerald-400: #34d399;

                          --emerald-600: #059669;

                          --rose-400: #fb7185;

                          --rose-600: #e11d48;

                          --amber-400: #fbbf24;

                          --amber-600: #d97706;

                          --violet-400: #a78bfa;

                          --violet-600: #7c3aed;

                          --cyan-400: #22d3ee;

                          --cyan-600: #0891b2;

                        }

Customize the Default Palette

Change the core colors by overriding the root variables in your own stylesheet.

                        /* Override defaults */

                        :root {

                          --accent: #22c55e;

                          --accent-2: #16a34a;

                          --accent-3: #0ea5e9;

                          --success: #14b8a6;

                          --warning: #f97316;

                          --danger: #ef4444;

                        }

Scoped Theme Example

Apply a theme to a single section by attaching variables to a wrapper.

                        <!-- HTML -->

                        <section class="theme-ocean">...</section>

                        /* CSS */

                        .theme-ocean {

                          --accent: #22d3ee;

                          --accent-2: #3b82f6;

                          --accent-3: #6366f1;

                        }

Full Token Map

                        /* Root Design Tokens */

                        :root {

                          /* Brand Foundation */

                          --bg-dark: #0a0a0a;

                          --accent: #FF3CAC;

                          --accent-2: #784BA0;

                          --accent-3: #2B86C5;

                          --accent-4: #00F5D4;

                          --accent-5: #FEE440;

                          --accent-6: #9B5DE5;

                          --accent-7: #00BBF9;

                          --accent-8: #F15BB5;

                          /* Extended Palette */

                          --slate-50: #f8fafc;

                          --slate-100: #f1f5f9;

                          --slate-600: #475569;

                          --slate-900: #0f172a;

                          --blue-400: #60a5fa;

                          --blue-600: #2563eb;

                          --emerald-400: #34d399;

                          --emerald-600: #059669;

                          --rose-400: #fb7185;

                          --rose-600: #e11d48;

                          --amber-400: #fbbf24;

                          --amber-600: #d97706;

                          --violet-400: #a78bfa;

                          --violet-600: #7c3aed;

                          --cyan-400: #22d3ee;

                          --cyan-600: #0891b2;

                          /* Semantic States */

                          --success: #10b981;

                          --warning: #f59e0b;

                          --danger: #ef4444;

                          --info: #3b82f6;

                          /* Typography */

                          --text-main: #ffffff;

                          --text-muted: #888888;

                          --text-dim: #555555;

                          /* Physics */

                          --glass-bg: rgba(255, 255, 255, 0.03);

                          --glass-border: rgba(255, 255, 255, 0.08);

Essentials

Typography

Precision-tuned type scales designed for maximum legibility in complex glassmorphic environments.

Heading 1

Heading 2

Heading 3

The quick brown fox jumps over the lazy dog.

Medium and small body text examples.

Font Family

YakaUI exclusively uses Outfit, a geometric sans-serif that balances modern efficiency with approachable warmth.

font-family: 'Outfit', sans-serif;

Type Scale

Level	Size	Weight
H1	3.5rem - 4rem	700
H2	2.5rem - 3rem	600
Body	1rem - 1.15rem	400

Helper Classes

                        /* Text Colors */

                        .text-main // #FFFFFF

                        .text-muted // #888888

                        .text-dim // #555555

                        /* Alignment */

                        .text-center

                        .text-right

                        .text-left

Essentials

Custom Cursor

A fluid, magnetic cursor that interacts with links, buttons, and custom data attributes.

Hover for text cursor

Automatic Interactions

The cursor automatically scales and changes style when hovering over:

<a> tags
<button> tags
Elements with .clickable class

Custom Text Cursor

Display text directly inside the cursor follower by adding data-cursor-text to any element.

Disabling the Cursor

If you prefer the native system cursor, you can omit this.initCursor() from your YakaUI initialization or hide the cursor element.

Essentials

Page Loading

Elegant entrance animations that bridge the gap between initial load and interactive state.

The loader is an overlay that fades out once GSAP is ready and the DOM is loaded.

HTML Structure

                        <div class="yaka-loader">

                          <div class="loader-content">

                            <div class="loader-logo">LOGO</div>

                            <div class="loader-bar"></div>

                          </div>

                        </div>

Sequence

1. Overlay: The .yaka-loader covers the screen with the site background color.
2. Entrance: UI elements with data-yaka-fade remain hidden until the loader finishes.
3. Exit: Once initialized, the loader slides or fades out, triggering the page animations.

Components

Buttons

Buttons are the core interactive elements in YAKA UI, designed for clarity, visual hierarchy, and physics-driven micro-interactions.

Use Primary for the main action per screen.
Use Secondary and Outline for supporting actions.
Use Ghost for subtle links inside dense UI.
Use Glow/Cyber for hero moments and marketing CTAs.

1. Button Sizes

Standardized sizes for different layout needs.

                        <!-- Available Sizes -->

                        <button class="btn-sm">Small</button>

                        <button class="btn-primary">Default</button>

                        <button class="btn-lg">Large</button>

2. Visual Styles

Base styles to define action priority and intent.

                        <button class="btn-primary">Primary</button>

                        <button class="btn-secondary">Secondary</button>

                        <button class="btn-outline">Outline</button>

                        <button class="btn-ghost">Ghost</button>

                        <button class="btn-cyber">Cyber</button>

3. Special Effects

Premium visual treatments for important actions.

                        <!-- Glow Effect (Requires spans/divs) -->

                        <button class="btn-glow">

                          <span>Glow</span>

                          <div class="glow-container">

                            <div class="glow-circle"></div>

                          </div>

                        </button>

                        <!-- Other Effects -->

                        <button class="btn-shine">Shine</button>

                        <button class="btn-grad-border">Gradient</button>

                        <button class="btn-organic">Organic</button>

                        <button class="btn-glitch">Glitch</button>

4. Interactive Click Feedback

Trigger physical animations using the data-anim attribute.

                        <button class="glass-btn" data-anim="bounce">Bounce</button>

                        <button class="glass-btn" data-anim="spin">Spin</button>

                        <button class="glass-btn" data-anim="vibrate">Vibrate</button>

                        <button class="glass-btn" data-anim="pop">Pop</button>

5. Magnetic Interactions

Add physical weight to buttons that follow the cursor slightly.

<button data-magnetic>Magnetic Button</button>

6. Color Variants

Apply a color utility class alongside the button class to swap its accent. Example: class="btn-primary orange".

                        <button class="btn-primary orange">Orange</button>

                        <button class="btn-primary yellow">Yellow</button>

                        <button class="btn-outline blue">Outline Blue</button>

                        <button class="btn-cyber violet">Cyber Violet</button>

6. Icon & Loading Patterns

Combine icons with text or show progress for async actions.

                        <!-- Icon + Label -->

                        <button class="btn-secondary">

                          <span style="display:inline-flex; align-items:center; gap:8px;">

                            <svg width="16"
                        height="16" viewBox="0 0 24 24"
                        fill="currentColor">...</svg>Download

                          </span>

                        </button>

                        <!-- Loading State -->

                        <button class="btn-primary" disabled>Processing...</button>

7. Accessibility & Layout

Accessible states and full-width actions.

                        <!-- Disabled + Full Width -->

                        <button class="btn-outline" style="width:100%;" disabled>Continue</button>

                        <!-- ARIA Label for Icon Buttons -->

                        <button class="btn-ghost" aria-label="Open settings">⚙️</button>

Cards

Glass Card

Minimalist container.

Soft Card

Subtle depth.

Neon Card

High-contrast accent.

Gradient Card

Soft brand blend.

Minimalist glass containers with subtle depth and sharp micro-borders.

1. Base Layout

The essential structure for all glass containers.

                        <!-- Basic Structure -->

                        <div class="card glass-card">

                          <div class="card-content">

                            ... Content ...

                          </div>

                        </div>

2. Visual Styles

Simple variants for different content levels.

                        <!-- Style Classes -->

                        <div class="card glass-card">Standard</div>

                        <div class="card glass-card card-soft">Soft</div>

                        <div class="card glass-card card-neon">Neon</div>

                        <div class="card glass-card card-gradient">Gradient</div>

3. Spacing Helpers

Internal buffers for consistent alignment.

                        <!-- Content Wrapper -->

                        .card-content { padding: 2rem; }

4. Interactive Effects

Subtle motion triggers for hover states.

                        <!-- Spotlight Tracker -->

                        <div class="spotlight-card">

                          <div class="spotlight-content">...</div>

                        </div>

                        <!-- Physics Attributes -->

                        <div class="glass-card" data-magnetic>Magnetic Card</div>

Light Theme

Bright UI Surface

Use .theme-light to flip the system into a light palette. You can apply it globally on the body or scope it to a component wrapper.

Neutral Outline Success

                        <!-- Apply to body or section -->

                        <body class="theme-light">...</body>

                        /* Optional scoped wrapper */

                        <section class="theme-light">...</section>

Inputs & Switches

Minimal Focus

Switch

Pill

Subtle data entry components with smooth physical feedback.

1. Minimalist Forms

A clean bottom-line style for low-friction data entry.

                        <!-- Minimal Bottom Line -->

                        <div class="input-minimal">

                          <input type="text" required placeholder=" ">

                          <label>Name</label>

                        </div>

2. Glass Containers

Fully encased glassmorphic inputs for complex layouts.

                        <!-- Enclosed Box -->

                        <div class="input-glass">

                          <input type="email" placeholder="Email Address">

                        </div>

3. Glow Inputs

Use a soft halo for primary input focus states.

                        <!-- Glow Input -->

                        <div class="input-glow">

                          <input type="text" placeholder="Project name">

                        </div>

4. Modern Switches & Toggles

Pure CSS toggles with smooth pill animations and physics-based feedback.

                        <!-- Classic Toggle -->

                        <label class="switch">

                          <input type="checkbox">

                          <span class="slider"></span>

                        </label>

5. Square Checkboxes

Custom square inputs with 3D bounce effects on change.

                        <label class="cb-square">

                          <input type="checkbox">

                          <div class="box"><i class="fa-solid
                            fa-check"></i></div>

                        </label>

6. Radio Dots

Elegant radio indicators with a soft light-pulsing center.

                        <label>

                          <input type="radio" name="choice">

                          <div class="dot-outer">

                            <div class="dot-inner"></div>

                          </div>

                        </label>

Components

Badges

Primary Success Warning Danger Pill Glass Glow Outline Soft

1. Base Variants

Standard semantic styles for clear status communication.

                        <span class="badge badge-primary">Primary</span>

                        <span class="badge badge-success">Success</span>

2. Modern Visuals

Pill, Glass, and high-impact Glow treatments.

                        <span class="badge badge-pill badge-primary">Pill</span>

                        <span class="badge badge-glass">Glass</span>

                        <span class="badge badge-glow">Glow</span>

                        <span class="badge badge-outline">Outline</span>

                        <span class="badge badge-soft">Soft</span>

3. Status Dots

Subtle indicators for system state or presence.

                        <span class="badge badge-dot">Default</span>

                        <span class="badge badge-dot success">Online</span>

Components

Avatars

1. Shapes & Effects

Standard circles, modern squircles, and spotlight glow effects.

                        <img class="avatar avatar-squircle">

                        <img class="avatar avatar-glow">

                        <div class="avatar-status">

                          <img class="avatar avatar-ring">

                        </div>

2. Social Groups

Stacked layouts for team or attendee lists.

                        <div class="avatar-group">

                          <img class="avatar">

                          <img class="avatar">

                        </div>

Components

Alerts

Project successfully updated.

Simple minimalist success message.

Outline info alert.

1. Standard Styles

Default glassmorphic and minimalist variants.

                        <div class="alert alert-glass">Message</div>

                        <div class="alert alert-minimal">Message</div>

                        <div class="alert alert-outline">Message</div>

2. Semantic Feedback

Color-coded states for information hierarchy.

                        <div class="alert alert-success">Success</div>

                        <div class="alert alert-danger">Error</div>

Skeletons

Animated loading placeholders that match your UI structure.

                        <div class="skeleton skeleton-text"></div>

                        <div class="skeleton skeleton-avatar"></div>

                        <div class="skeleton-card">...</div>

Components

Light Theme Support

YakaUI isn't just for dark-mode enthusiasts. The framework includes a comprehensive Light Theme that retains the glassmorphic depth while switching to a precise porcelain aesthetic.

Porcelain Glass

This card uses light theme variables.

Activation

Apply the .theme-light class to any container or the <body> tag to swap all CSS variables to their light counterparts.

                        <body class="theme-light">

                          ... all components now use light variables ...

                        </body>

Variable Sync

The light theme overrides variables like --bg-dark, --text-main, and --glass-bg to ensure contrast is maintained without changing your component markup.

Interactive UI

Disclosure (Pure CSS)

Standardized accessible disclosures using native HTML tags with custom glassmorphic styling.

What is the Scene Manager?

The Scene Manager orchestrates full-page transitions using cinematic effects like Elastic, Tilt, and Split.

Is it production ready?

Absolutely. YakaUI is built with performance and accessibility in mind for high-end applications.

Usage

                        <div class="disclosure-card">

                          <details class="disclosure-item">

                            <summary>

                              Title

                              <svg class="chevron">...</svg>

                            </summary>

                            <div>Content</div>

                          </details>

                        </div>

Accordions

Interactive Section

Click to expand and view content with smooth GSAP animations.

Accordion stacks reveal content progressively with smooth open/close animation and automatic icon rotation.

Usage

                        <div class="accordion">

                          <div class="accordion-item">

                            <div class="accordion-header">Title</div>

                            <div class="accordion-content">...</div>

                          </div>

                        </div>

Tabs

Design

Code

Aesthetics first.

Performance always.

Tabs swap content without page navigation and keep the interface compact for multi-step flows.

Usage

                        <div class="tabs-container">

                          <div class="tabs-header">

                            <div class="tab-item active" data-tab="tab-one">Tab
                        One</div>

                          </div>

                          <div id="tab-one" class="tab-content active">...</div>

                        </div>

Modals

Glassmorphic dialogs with smooth scale entry.

Trigger + Modal

                        <button data-trigger-modal="demo-modal">Open</button>

                        <div id="demo-modal" class="modal-overlay">

                          <div class="modal glass-card">...</div>

                        </div>

Toasts

Non-blocking notification system.

Advanced API

You can call the toast system from any part of your script. It supports queuing and automatic dismissal after 3 seconds.

                        // Programmatic call from your JS

                        import { YakaUI } from
                        './yaka_v1.0.js';

                        const yaka = new
                        YakaUI();

                        yaka.showToast('Data synchronized', 'success');

Styling Customization

Toasts use CSS variables for easy theming. You can override these in your local CSS:

                        --toast-bg: rgba(20, 20, 25,
                            0.9);

                        --toast-border: var(--accent);

                        --toast-text: #ffffff;

Tooltips

Tooltips display lightweight context on hover using the data-tooltip attribute.

Usage

<button data-tooltip="Helpful hint">Hover me</button>

Dropdowns

Dropdown menus toggle on click and close automatically when clicking outside the menu.

Usage

                        <div class="dropdown">

                          <button class="btn-glow
                            dropdown-trigger">Menu</button>

                          <div class="dropdown-menu">...</div>

                        </div>

Combobox

Listbox

Radio Group

Progress Indicators

Optimization92%

Track progress with linear bars or circular indicators driven by data attributes.

                        <!-- Animated width with CSS var -->

                        <div class="progress-fill animate" style="--progress:70%;"></div>

Image Reveal

High-end cinematic entry for visuals.

                        <div class="reveal-image">

                          <img src="image.jpg" alt="Reveal">

                        </div>

Pair with ScrollTrigger to reveal as users scroll into view.

Typing Text

Engaging typewriter animation.

The text animates when the element enters the viewport.

Stats

Total Downloads

Animated value counters with GSAP precision.

Use integer values for smooth incrementing with ScrollTrigger.

Marquee

DESIGNCODEANIMATEFUTURE

Infinite text ribbons for high-impact branding.

Hover pauses the scroll for readability.

Spotlight Cards

Spotlight

Follows your mouse cursor.

Interactive border glow track that follows the cursor.

Works best with concise content and clear card padding.

Glitch Text

CYBERPUNK

Distorted visual aesthetic for high-impact typography.

<div class="glitch" data-text="CYBERPUNK">CYBERPUNK</div>

Gallery

Interactive image accordion with smooth expansion.

                        <!-- Optional overlay -->

                        <div class="gallery-overlay">Title</div>

Video Background

Looped ambient video layers that sit behind your hero content.

Combine with a gradient overlay for contrast and legibility.

Effects

Transitions & Scenes

Orchestrate complex full-screen or section-level transitions using the built-in Scene Manager. Powered by GSAP for physical movement and depth.

Simulated Scene Transition Effects:

Scene Structure

Group content into .scene containers within a parent wrapper. Use the data-transition attribute to specify the effect.

                        <div class="scene-wrapper">

                          <div class="scene active" data-transition="elastic">...</div>

                          <div class="scene" data-transition="tilt">...</div>

                        </div>

Available Effects

Elastic: A bouncy, physics-based horizontal slide.
Tilt: 3D perspective rotation with depth-fading.
Ripple: Scale-based entrance with a cinematic blur filter.
Split: A dramatic vertical split and rotation reveal.

Programmatic Navigation

Navigate between scenes using the global Yaka.modules.Transition API.

                        const { Transition } = window.Yaka.modules;

                        Transition.next(); // Go to next scene

                        Transition.prev(); // Go to previous scene

                        Transition.goToScene(2); // Direct jump

Motion & Parallax

Physics-based movement that responds to user presence and scroll behavior.

Magnetic Card

I'll follow your mouse with inertia.

Parallax Text (Speed 2)

1. Magnetic Interaction

Add data-magnetic to any element to give it physical weight that responds to cursor proximity.

2. Parallax Scrolling

Use data-speed to create depth between layers during scroll. Higher numbers move the element faster relative to scroll.

                        <div data-speed="2">Background Layer</div>

                        <div data-speed="-1">Slow Layer</div>

3. Entrance Animations

Universal fade-up reveal on scroll using simple data attributes.

                        <div data-yaka-fade>Reveals
                        when scrolled into view</div>
                    

Testimonials

"The level of detail and quality in YAKA UI is simply unmatched. It transformed our product completely."

Alex Rivera

Product Designer @ Studio X

                        <div class="testimonial-card">

                          <p class="testimonial-quote">...</p>

                          <div class="testimonial-author">...</div>

                        </div>

Use one or more cards in a grid to add social proof.

Steps

Conceptualize

Define the core vision of your interface.

Build

Utilize YAKA components to assemble blocks.

Deploy

Launch with high-end motion effects.

                        <div class="step-process">

                          <div class="step-item">...</div>

                        </div>

Use concise descriptions for each step to keep the layout compact.

Pricing

Basic

✔ Starter components
✔ Theme tokens
✔ Community support

Pro

$29

✔ Full component library
✔ Motion presets
✔ Priority support

Enterprise

Custom

✔ Custom theming
✔ Design review
✔ SLA support

                        <!-- Highlighted tier -->

                        <div class="pricing-card featured">...</div>

Grid System

Column A

Use .grid with .grid-3.

Column B

Responsive down to one column.

Column C

Supports fixed or auto grids.

Span 2

Use .grid-span-2 to span columns.

Column D

Auto-fit available space.

Boutique Showcase Grid

Mixing spans and auto-layouts for complex, asymmetrical magazine-style headers and dashboards.

Showcase

Fluid Asymmetry

Combine row and column spans to create high-impact editorial layouts that break the standard grid rhythm.

Performance

99%

Load Time

0.4s

Global Status

All systems operational across 12 regions.

Powerful layout utilities for dashboards, feature grids, and marketing sections with responsive behavior baked in.

Basic Usage

                        <div class="grid grid-3">

                          ... items ...

                        </div>

Auto-Fit Layout

                        <div class="grid grid-auto">

                          ... cards ...

                        </div>

Span Columns

                        <div class="grid grid-4">

                          <div class="card glass-card grid-span-2">Wide</div>

                          <div class="card glass-card">Item</div>

                        </div>

Responsive breakpoints collapse to a single column on smaller screens.

Timeline

2024

Platform Launch

2026

Global Expansion

Items automatically alternate left/right for visual rhythm.

Helper

Utility Classes

Helper classes and data attributes for quick styling and animations.

Scroll Animations

Apply data-yaka-fade to any element to make it fade and slide up when scrolled into view.

                        <div data-yaka-fade>I fade
                        in!</div>
                    

Text Helpers

                        /* Centers text */

                        .text-center

                        /* Subtle muted text */

                        .text-muted