A lightweight, no-build CSS/JS framework for building modern web interfaces. Copy anywhere, works everywhere.
A complete toolkit for building client projects
Buttons, forms, cards, modals, navigation, alerts, toasts, tooltips, and more. All styled with CSS custom properties for easy theming.
View Components →Flexible 12-column grid with responsive breakpoints. Build any layout with utility classes for spacing, flexbox, and display.
View Grid →DOM manipulation, event handling, form validation, data formatting, local storage helpers, and HTTP request utilities.
View Utilities →GSAP-like animation library with tweening, timelines, easing functions, scroll triggers, text effects, and motion paths.
View Motion →Split text into characters, words, or lines. Typewriter, scramble, wave, glitch, and more text animation presets.
View Text Effects →Trigger animations on scroll with scrubbing, pinning, and toggle actions. Create stunning scroll-based experiences.
View ScrollTrigger →<!-- Option 1: Bundled (Recommended) --> <link rel="stylesheet" href="dist/base2.css"> <script src="dist/base2.js"></script> <!-- Option 2: Modular (Pick what you need) --> <link rel="stylesheet" href="src/css/main.css"> <script src="src/js/motion/core.js"></script> <script src="src/js/motion/effects.js"></script>
// Animate elements with ease B2.to('.box', { x: 200, rotation: 360, duration: 1, ease: 'power2.out' }); // Create timelines const tl = B2.timeline(); tl.to('.a', { y: -50, duration: 0.3 }) .to('.b', { y: -50, duration: 0.3 }) .to('.c', { y: -50, duration: 0.3 }); // Text effects B2.TextEffects.typewriter('#text', { text: 'Hello World!', speed: 50 });