🚀 Shimul.js

The Ultimate JavaScript Framework - Build stunning websites with GSAP animations, Three.js 3D graphics, and powerful reactive components!

✨ Features

• 🎨 GSAP Integration - Professional animations and timelines
• 🌟 Three.js Support - 3D graphics and WebGL scenes
• 🎭 Motion Animations - Framer Motion-inspired declarative animations
• 🧩 Component System - React-like reactive components
• 🛣️ SPA Router - Client-side routing with transitions
• 🗃️ State Management - Global state with automatic updates
• 🌐 HTTP Client - Promise-based API requests
• 📱 Mobile First - Touch gestures and responsive design
• ⚡ Zero Dependencies - Pure JavaScript, blazing fast
• 🎪 Ultimate Integration - All libraries work seamlessly together

📦 Installation

# Core framework
npm install shimul.js

# For animations (optional)
npm install gsap framer-motion

# For 3D graphics (optional)  
npm install three

# All in one
npm install shimul.js gsap three framer-motion

🚀 Quick Start

Basic Component

import ShimulJS from 'shimul.js';

class MyApp extends ShimulJS.ShimulComponent {
  constructor() {
    super('div', { className: 'app' });
  }
  
  componentDidMount() {
    const title = new ShimulJS.ShimulComponent('h1', {}, ['Hello Shimul.js!']);
    const button = new ShimulJS.Button({ 
      onclick: () => alert('Amazing!') 
    }, ['Try Me']);
    
    this.appendChild(title);
    this.appendChild(button);
  }
}

document.body.appendChild(new MyApp().render());

GSAP Animations

import ShimulJS from 'shimul.js';

// Animated button with GSAP
const animatedBtn = new ShimulJS.GSAP.AnimatedButton({
  className: 'btn-primary',
  onclick: () => console.log('Smooth!')
}, ['Animate Me']);

// Timeline animations
class Hero extends ShimulJS.GSAP.GSAPComponent {
  componentDidMount() {
    const tl = this.createTimeline();
    tl.from('.title', { y: 100, opacity: 0, duration: 1.2 })
      .from('.subtitle', { y: 50, opacity: 0, duration: 0.8 }, '-=0.5');
  }
}

Three.js 3D Graphics

// 3D rotating cube
const cube3D = new ShimulJS.Three.RotatingCube({
  style: { width: '400px', height: '400px' },
  config: { shadows: true, controls: true }
});

// Particle system
const particles = new ShimulJS.Three.ParticleSystem({
  particleCount: 5000,
  particleColor: 0x60a5fa
});

document.body.appendChild(cube3D.render());

Motion Animations

// Fade in animation
const fadeCard = new ShimulJS.Motion.FadeIn({
  className: 'card',
  transition: { duration: 0.8 }
}, ['Beautiful Motion']);

// Interactive gestures
const draggable = new ShimulJS.Motion.MotionComponent('div', {
  whileHover: { scale: 1.1 },
  whileTap: { scale: 0.9 },
  drag: true
});

🎯 Core Features

Reactive Components

class Counter extends ShimulJS.ShimulComponent {
  constructor() {
    super('div');
    this.state = { count: 0 };
  }
  
  increment() {
    this.setState({ count: this.state.count + 1 });
  }
  
  render() {
    return `
      <div class="counter">
        <h2>Count: ${this.state.count}</h2>
        <button onclick="this.increment()">+</button>
      </div>
    `;
  }
}

SPA Router

const router = new ShimulJS.Router();

router.addRoute('/', () => new HomePage())
      .addRoute('/about', () => new AboutPage())
      .addRoute('/products/:id', (params) => new ProductPage(params.id))
      .start();

State Management

const store = new ShimulJS.Store({
  user: null,
  theme: 'dark'
});

store.subscribe('user', (user) => {
  console.log('User changed:', user);
});

store.dispatch('SET_USER', { name: 'John' });

HTTP Client

const api = new ShimulJS.HttpClient({
  baseURL: 'https://api.example.com',
  headers: { 'Authorization': 'Bearer token' }
});

const users = await api.get('/users');
const newUser = await api.post('/users', { name: 'Alice' });

🎨 Animation Integration

GSAP Timeline

class AnimatedSection extends ShimulJS.GSAP.GSAPComponent {
  componentDidMount() {
    const tl = this.createTimeline();
    
    tl.from('.card', { 
      y: 100, 
      opacity: 0, 
      duration: 1, 
      stagger: 0.2 
    })
    .from('.button', { 
      scale: 0, 
      duration: 0.5, 
      ease: 'back.out(1.7)' 
    }, '-=0.5');
  }
}

Scroll Triggers

class ScrollSection extends ShimulJS.GSAP.GSAPComponent {
  componentDidMount() {
    this.setupScrollTrigger({
      start: 'top 80%',
      end: 'bottom 20%',
      animation: {
        from: { opacity: 0, y: 50 },
        to: { opacity: 1, y: 0, duration: 1 }
      }
    });
  }
}

🌟 3D Graphics

Basic 3D Scene

class My3DScene extends ShimulJS.Three.ThreeComponent {
  setupScene() {
    // Add cube
    const geometry = new THREE.BoxGeometry();
    const material = new THREE.MeshPhongMaterial({ color: 0x00ff00 });
    const cube = new THREE.Mesh(geometry, material);
    
    this.addToScene(cube);
  }
  
  onAnimate() {
    // Rotate cube
    this.scene.children[0].rotation.x += 0.01;
    this.scene.children[0].rotation.y += 0.01;
  }
}

Interactive 3D

const interactive3D = new ShimulJS.Three.OrbitViewer({
  objectUrl: '/models/spaceship.gltf',
  autoRotate: true,
  background: 'gradient'
});

📱 Mobile & Touch

Gesture Handling

class TouchCard extends ShimulJS.Motion.MotionComponent {
  constructor() {
    super('div', {
      whileTap: { scale: 0.95 },
      onPan: (event, info) => {
        this.handleDrag(info.offset);
      },
      onPanEnd: (event, info) => {
        this.handleDragEnd(info.velocity);
      }
    });
  }
}

🎪 Ultimate Integration Example

class UltimateWebsite extends ShimulJS.ShimulComponent {
  componentDidMount() {
    // 3D Background
    const bg = new ShimulJS.Three.ThreeBackground();
    
    // GSAP Navigation
    const nav = new ShimulJS.GSAP.AnimatedNav();
    
    // Motion Hero
    const hero = new ShimulJS.Motion.FadeIn({
      initial: { opacity: 0, scale: 0.8 },
      animate: { opacity: 1, scale: 1 }
    });
    
    // Combine everything
    this.appendChild(bg);
    this.appendChild(nav); 
    this.appendChild(hero);
    
    // Coordinate animations
    ShimulJS.Ultimate.IntegrationUtils.syncAll([bg, nav, hero]);
  }
}

📖 Documentation

• Integration Guide - Complete library integration examples
• API Reference - Full API documentation
• Examples - Live code examples
• Migration Guide - Upgrade from other frameworks

🏆 Why Shimul.js?

| Feature | Shimul.js | React | Vue | Angular | |---------|-----------|-------|-----|---------| | Bundle Size | 🟢 ~15KB | 🟡 ~42KB | 🟡 ~34KB | 🔴 ~130KB | | GSAP Integration | 🟢 Built-in | 🟡 Manual | 🟡 Manual | 🟡 Manual | | Three.js Support | 🟢 Native | 🟡 Libraries | 🟡 Libraries | 🟡 Libraries | | Learning Curve | 🟢 Easy | 🟡 Medium | 🟢 Easy | 🔴 Hard | | Performance | 🟢 Blazing | 🟢 Fast | 🟢 Fast | 🟡 Good | | Mobile First | 🟢 Built-in | 🟡 Libraries | 🟡 Libraries | 🟡 Libraries |

🤝 Contributing

Contributions are welcome! Please read our Contributing Guide.

# Development setup
git clone https://github.com/shimulhp/shimul.js.git
cd shimul.js
npm install
npm run dev

📄 License

MIT © Shimul HP

🌟 Show Your Support

Give a ⭐️ if this project helped you!

Made with ❤️ for the modern web