⚡ Lumo.js

✨ Features

🖱 Cursor Interactions

• 🎯 Custom cursor animations
• ✨ Smooth trailing effects
• 💥 Click ripple effects
• 🌈 Custom cursor colors
• 📏 Custom cursor sizing
• 🧲 Magnetic hover interactions
• 🔍 Hover grow effect
• 🖱 Hide native cursor
• 🎨 Custom trail colors
• 🎯 Custom hover selectors
• 🧹 Destroy cleanup

🔤 Text Animations

• Fade text reveal
• Slide text reveal
• Glitch text effects
• Scroll-triggered animations
• Hover-triggered animations
• Load-triggered animations
• Reverse playback
• Loop animations
• Blur intensity control
• Direction control
• Custom speed
• Stagger character animation
• Custom easing functions
• Fully custom animation callbacks
• HTML-safe text splitting

🌊 Advanced Parallax

• Vertical movement
• Horizontal movement
• Reverse motion
• Independent X/Y transforms
• Rotate animations
• Scale animations
• Skew transforms
• Blur filter animations
• Opacity transitions
• Stagger animations
• Built-in easing engine
• Trigger positions (top / center / bottom)
• Start / end progress control
• Once mode
• Pause / resume
• Refresh recalculation
• Destroy cleanup
• Mobile disable support
• Reduced motion accessibility

⚡ Performance

• requestAnimationFrame optimized
• GPU-accelerated transforms
• Lightweight architecture
• Smooth interpolation engine

🚀 About

Lumo.js is a lightweight motion library for modern web interfaces.

It combines custom cursor interactions, powerful text animations, and advanced parallax effects into a clean developer-friendly API for building immersive web experiences.

Designed to be:

• Lightweight
• Performance-focused
• Easy to use
• Developer-friendly
• Easily extendable

📦 Installation

npm

npm install lumojs

CDN

<script src="https://cdn.jsdelivr.net/npm/lumojs/dist/lumo.min.js"></script>

Or

<script src="https://cdn.jsdelivr.net/gh/lumojs/[email protected]/dist/lumo.min.js"></script>

⚡ ESM Import

import lumo from "lumojs";

Browser module:

<script type="module">
  import lumo from "https://lumojslib.pages.dev/lumo.esm.js";
</script>

🧩 Modules

lumo.snake()    
lumo.textReveal() 
lumo.parallax()   

🧪 Usage

Cursor Example

lumo.snake({
  cursorType: "dot",
  color: "#38bdf8",
  trailColor: "rgba(56,189,248,0.5)",
  size: 10,
  trailSize: 6,
  trailCount: 8,
  hideDefaultCursor: true,
  clickEffect: true,
  hoverGrow: true,
  magnetic: true,
  hoverSelector: "button, a"
});

🔤 Text Animation Examples

Basic Fade Reveal

lumo.textReveal(".title", {
  preset: "fade"
});

Slide Reveal

lumo.textReveal(".hero-title", {
  preset: "slide",
  direction: "left",
  speed: 800,
  stagger: 60
});

Scroll Triggered Animation

lumo.textReveal(".scroll-text", {
  preset: "fade",
  trigger: "scroll"
});

Hover Triggered Animation

lumo.textReveal(".hover-text", {
  preset: "slide",
  trigger: "hover"
});

Reverse + Loop Animation

lumo.textReveal(".headline", {
  reverse: true,
  loop: true,
  stagger: 80
});

Glitch Effect

lumo.textReveal(".glitch", {
  preset: "glitch",
  intensity: 15,
  speed: 1000
});

Custom Easing

lumo.textReveal(".smooth-text", {
  easing: (t) => t * t
});

Fully Custom Animation

lumo.textReveal(".custom-text", {
  speed: 1000,

  custom(progress, span) {
    span.style.opacity = progress;

    span.style.transform =
      `translateY(${50 - progress * 50}px)
       rotate(${progress * 360}deg)
       scale(${0.5 + progress * 0.5})`;
  }
});

🌊 Advanced Parallax Example

const hero = lumo.parallax(
  [
    {
      selector: ".card",

      x: {
        from: -300,
        to: 200
      },

      y: {
        from: 100,
        to: -100
      },

      rotate: {
        from: -20,
        to: 20
      },

      scale: {
        from: 0.8,
        to: 1.2
      },

      skew: {
        from: 0,
        to: 8
      },

      blur: {
        from: 12,
        to: 0
      },

      opacity: {
        from: 0,
        to: 1
      },

      stagger: 150,
      easing: "easeOutExpo",
      trigger: "center"
    }
  ],
  {
    smoothness: 0.08,
    maxOffset: 300
  }
);

hero.pause();
hero.resume();
hero.refresh();
hero.destroy();

📚 API Reference

Cursor Engine

const cursor = lumo.snake(options);

Methods:

cursor.destroy();

Text Animation Engine

lumo.textReveal(selector, options);

Parallax Engine

const hero = lumo.parallax(config, options);

Methods:

hero.pause();
hero.resume();
hero.refresh();
hero.destroy();

🌍 Browser Support

Supported modern browsers:

• Chrome
• Edge
• Firefox
• Safari

🎮 Live Demo

Try Lumo.js in action:

• Interactive Examples
• Premium Showcase Pages
• CodePen Demos

Coming soon 🚀

🚀 Future Scope

Upcoming ideas for Lumo.js:

• Mouse depth parallax
• Scroll reveal animation engine
• Morph / assemble animations
• Timeline animation utilities
• Animation preset packs
• Scroll storytelling utilities
• React wrapper
• Vue wrapper
• Plugin ecosystem

🏢 Official Launch

This project is officially launched under:

On Time Tech Academy (OTT Academy)

Focused on building real-world skills and modern technology solutions.

🚀 Building modern web experiences with simplicity.

📄 License

MIT License © 2026 Sachin Singh

💥 Author

Made with ❤️ by Sachin Singh

💼 Developer
🌐 Web & UI Enthusiast
⚡ Lightweight animations for modern web experiences.