npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2025 – Pkg Stats / Ryan Hefner

lumoslite

v1.0.9

Published

A simple animate-on-scroll library like AOS

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

mehrabpzmehrabpz

Keywords

frontendscrollanimationaosvanilla-jsjavascript

Readme

✨ Lumos – Modern Scroll Animations Library

🚀 Features

✨ Lightweight & Fast
Optimized for performance with minimal footprint, ensuring smooth animations without slowing down your website.

🎯 Easy to Use
Just add data-animation attributes and class="lumos" to your HTML elements and you’re ready to go — no complex setup required.

⚡ Framework Agnostic
Works with plain JavaScript, React, Vue, Angular, or any other framework with zero extra configuration.

🎨 Customizable Animations
Easily configure animation **duration, delay, easing, to match your design.

📱 Responsive & Mobile-Friendly
Animations are designed to work seamlessly across all screen sizes and devices.

🔄 Multiple Animation Types
Supports a wide variety of effects like fade, slide, zoom, flip, and more.

🛡️ No Dependencies
Pure JavaScript — no need for jQuery or any other external libraries.

🌍 CDN & npm Support
Available through npm for modern workflows or CDN for quick integration into any project.

🧩 Extendable
Easily extend Lumos with custom animations or integrate it with other UI libraries.

🧰 Technologies Used

  • JavaScript (ES6+) – Core functionality and animation logic
  • CSS3 & Tailwind – Styling and animation effects
  • HTML5 – Semantic structure and attribute-based animation triggers
  • npm – Package management and distribution
  • CDN – Easy integration without build tools
  • Rollup / Webpack – (if used) Bundling and optimization for production

✨ Overview

Lumos is a lightweight and modern JavaScript library for creating scroll-based animations with minimal effort.
It allows developers to animate elements as they appear in the viewport, making websites more dynamic, engaging, and visually appealing.

Inspired by libraries like AOS, Lumos is built to be fast, framework-agnostic, and highly customizable — perfect for both small projects and large-scale applications.

Whether you need subtle fade-ins, sliding effects, or more complex animations, Lumos provides a simple yet powerful API to bring your designs to life.

📸 Preview

🌐 Live Demo

Check out the live version of this Generator:
👉 View Demo

🔗 Connect with Me

Feel free to reach out or follow me on social media:

📅 Project Date: 2025-09-27

🛠️ Lumos is designed to be simple and intuitive. You can use it with npm in modern workflows or via CDN for quick setup.

📦 Using Lumos via npm

npm i lumoslite

🌐 Using Lumos via CDN

If you don’t want to install via npm, you can quickly include Lumos using a CDN.
Just add the following lines inside your <head> and <body>:

<!-- Lumos CSS -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/lumos.css">

<!-- Lumos JS -->
<script src="https://unpkg.com/[email protected]/dist/lumos.min.js"></script>

<script>
	lumoslite.init()
</script>