GitHub - nandandas2407-web/NandanX: A js library with 200+ effect

███╗   ██╗ █████╗ ███╗   ██╗██████╗  █████╗ ███╗   ██╗██╗  ██╗
████╗  ██║██╔══██╗████╗  ██║██╔══██╗██╔══██╗████╗  ██║╚██╗██╔╝
██╔██╗ ██║███████║██╔██╗ ██║██║  ██║███████║██╔██╗ ██║ ╚███╔╝ 
██║╚██╗██║██╔══██║██║╚██╗██║██║  ██║██╔══██║██║╚██╗██║ ██╔██╗ 
██║ ╚████║██║  ██║██║ ╚████║██████╔╝██║  ██║██║ ╚████║██╔╝ ██╗
╚═╝  ╚═══╝╚═╝  ╚═╝╚═╝  ╚═══╝╚═════╝ ╚═╝  ╚═╝╚═╝  ╚═══╝╚═╝  ╚═╝

The Everything Frontend Library

60+ engines · 250+ effects · Zero dependencies · One file

Drop it in. One line. Everything comes alive.

by Nandan Das

What is NandanX?

NandanX is a zero-dependency, single-file creative UI animation library. Magnetic cursors, physics simulations, WebGL shaders, particle systems, scroll reveals, smart forms, accessibility tools, real-time sync — all in one drop-in nandanx.js.

No build tools. No config. No framework required. Just drop it in and call one line.

Installation

# npm
npm install nandanx

# yarn
yarn add nandanx

# pnpm
pnpm add nandanx

CDN

<script src="https://unpkg.com/nandanx/nandanx.js"></script>

Local

<script src="nandanx.js"></script>

Quick Start

<script src="nandanx.js"></script>
<script>
  NandanX.auto();   // All 60+ engines. 250+ effects. One line.
</script>

Or pick your init mode:

NandanX.auto()      // Full auto — cursor + particles + AI enhance + theme
NandanX.minimal()   // Bare minimum — cursor + hover + scroll only
NandanX.init({      // Full manual control
  cursor:   { type: 'dot-ring' },
  particle: { mode: 'ambient' },
  theme:    { default: 'dark' },
  a11y:     true
})

Core Modes
Cursor Engine
Hover Engine
Scroll Engine
Particle Engine
Physics Engine
Text Engine
3D Engine
Mood System
Modal & Toast Engine
Theme Engine
Charts Engine
State Engine
Gesture Engine
Typography Engine
Shader Engine
Particle Systems Engine
Physics World Engine
Cursor FX Engine
Glitch Engine
Audio Visualizer Engine
3D Scene Engine
Page Transitions Engine
Gradient Engine
Smooth Scroll Engine
Parallax Engine
SVG Morph Engine
Spring Engine
Reveal Engine
Advanced UI Engine
Smart Form Engine
Microinteractions Engine
Holographic UI Engine
Adaptive UI Engine
Infinite Marquee Engine
WebGL Engine
Network Engine
Storage Engine
Event Bus Engine
Audio Engine
Drag Engine
Media Engine
Noise Engine
WebRTC Engine
Live Chat Engine
Sync Engine
Layout Engine
Search Engine
Router Engine
Accessibility Engine
Config
Data Attributes
Browser Support
License

Core Modes

NandanX.auto(options)     // Init everything with sensible defaults
NandanX.minimal(options)  // Init with no particles, no auto-detect
NandanX.init(options)     // Full manual init — you control everything

Cursor Engine

NandanX.cursor.init(options)

NandanX.cursorTrail(options)           // Rainbow particle trail
NandanX.cursorSpotlight(options)       // Spotlight effect
NandanX.cursorBlob(options)            // Organic blob cursor
NandanX.cursorDotRing(options)         // Dot + ring cursor
NandanX.cursorEmoji('🔥', options)     // Emoji cursor
NandanX.cursorReactive('.btn', opts)   // Cursor reacts to elements

Hover Engine

NandanX.lift(target)               // Float up + shadow on hover
NandanX.glow(target, '#9333ea')    // Neon glow on hover
NandanX.glitch(target)             // RGB glitch on hover
NandanX.spotlight(target)          // Spotlight follows mouse
NandanX.shake(target)              // Shake on hover
NandanX.float(target)              // Float up gently
NandanX.magneticText(target)       // Letters move with cursor

NandanX.hover.lift('.btn')
NandanX.hover.neon('.card')
NandanX.hover.glitch('h1')
NandanX.hover.shake('.btn')
NandanX.hover.morph('.avatar')
NandanX.hover.skew('.btn')
NandanX.hover.spotlight('#hero')
NandanX.hover.liquid('.btn')
NandanX.hover.tilt('.card', { maxAngle: 20, glare: true })
NandanX.hover.magneticText('h1')
NandanX.hover.borderTrace('.btn')
NandanX.hover.underline('a')
NandanX.hover.colorShift('.btn', '#9333ea22')

Scroll Engine

NandanX.reveal(target, type, options)
NandanX.parallax(target, speed)       // Parallax element (speed 0–1)
NandanX.counter(target, to, opts)     // Animated number counter
NandanX.stagger(target, delay)        // Stagger child elements

Particle Engine

NandanX.particles('ambient',       { count: 60 })
NandanX.particles('constellation', { count: 80, lineColor: '#9333ea' })
NandanX.particles('fireworks')
NandanX.particles('warp',          { speed: 2 })
NandanX.particles('matrix',        { color: '#a855f7' })

NandanX.ripple(target)     // Water ripple on click
NandanX.shockwave(target)  // Shockwave on click
NandanX.explode(target)    // Pixel explosion on click
NandanX.fire(x, y)         // Fire burst at coordinates
NandanX.snow()             // Snow particles
NandanX.confetti(x, y)     // Confetti burst

Physics Engine

NandanX.physicsWorld(options)           // Start physics simulation
NandanX.addPhysicsBody(target, opts)    // Add element to physics world
NandanX.shake(amplitude, duration)      // Shake the world

Text Engine

NandanX.typewriter(target, { speed: 60, loop: false, cursor: true })
NandanX.scramble(target,   { chars: 'ABCDEF0123456789' })
NandanX.gradientText(target, ['#9333ea', '#7c3aed', '#a855f7'])
NandanX.neonText(target, '#9333ea')
NandanX.wave(target)

3D Engine

NandanX.tilt(target, { maxAngle: 15, glare: true, scale: 1.05 })
NandanX.flip(target, 'click')     // Flip card on click
NandanX.glass(target)             // Glassmorphism
NandanX.holo(target)              // Holographic sheen
NandanX.parallax3D(target, depth) // 3D depth parallax

Mood System

NandanX.setMood('soft')        // Soft pastels, gentle easing
NandanX.setMood('hyper')       // Neon, fast, explosive
NandanX.setMood('calm')        // Blue tones, slow transitions
NandanX.setMood('aggressive')  // Red, fast, intense
NandanX.setMood('broken')      // Glitch / matrix aesthetic
NandanX.setMood('romantic')    // Pinks, hearts, slow blur

Modal & Toast Engine

NandanX.toast('Saved!',         { type: 'success' })
NandanX.toast('Deleted',        { type: 'error', duration: 3000 })
NandanX.toast('Heads up',       { type: 'warning' })
NandanX.toast('FYI',            { type: 'info' })
NandanX.modal({ title: 'Hello', content: 'World', size: 'md' })
NandanX.confirm('Are you sure?', { onConfirm: () => {} })
NandanX.tooltip(target, 'Tooltip text')

Theme Engine

NandanX.setTheme('dark')       // dark · light · neon · ocean
NandanX.setTheme('light')      // sunset · forest · midnight
NandanX.setTheme('neon')
NandanX.setTheme('ocean')
NandanX.autoDarkMode()
NandanX.generateTheme('#7c3aed')       // Generate full theme from one color
NandanX.mouseGradient('#el', colors)   // Gradient follows mouse

Charts Engine

NandanX.lineChart('#chart', data, { grid: true, smooth: true })
NandanX.barChart('#chart',  data, { radius: 4 })
NandanX.donutChart('#chart', data, { cutout: 0.6 })

State Engine

const store = NandanX.store('app', { count: 0, user: null })

store.set('count', 1)
store.get('count')           // → 1
store.subscribe('count', (val) => console.log(val))
store.reset()

Gesture Engine

NandanX.swipeLeft(target,  () => console.log('swiped left'))
NandanX.swipeRight(target, handler)
NandanX.gesture.tap(target, handler)
NandanX.gesture.longPress(target, handler)
NandanX.gesture.pinch(target, ({ scale }) => console.log(scale))
NandanX.gesture.keyboard('ctrl+k', handler)

Typography Engine

NandanX.splitText(el, { type: 'chars' })         // Split into chars/words
NandanX.marqueeText(el, { speed: 40 })            // Scrolling marquee
NandanX.waveText(el, { amplitude: 12 })           // Wave animation
NandanX.countUp(el, 9847, { suffix: '+' })        // Number count-up
NandanX.glitchText(el, { continuous: false })     // Glitch animation

Shader Engine

NandanX.shaderPlasma('#hero')
NandanX.shaderWave('#section')
NandanX.shaderNoise('#bg')
NandanX.shaderVortex('#el')

Particle Systems Engine

NandanX.scanlines(el)
NandanX.digitalNoise('#bg')
NandanX.pixelCorrupt(el, { blockSize: 8 })

Physics World Engine

NandanX.physicsWorld({ gravity: 0.5 })
NandanX.addPhysicsBody('#el', { restitution: 0.8 })

Cursor FX Engine

NandanX.cursorFX.trail()
NandanX.cursorFX.magnetic('.btn', { strength: 0.4 })
NandanX.cursorFX.spotlight('#hero')
NandanX.cursorFX.blob()

Glitch Engine

NandanX.glitchText(el, { continuous: false })
NandanX.glitchImage(el)
NandanX.glitchIn(el)
NandanX.glitchLoop(el, { interval: 3000 })

Audio Visualizer Engine

NandanX.audioVizBars('#canvas',   { audioSrc: '#audio-el', barCount: 64 })
NandanX.audioVizWave('#canvas',   { audioSrc: '#audio-el' })
NandanX.audioVizRadial('#canvas', { audioSrc: '#audio-el' })
NandanX.audioReactive('.el',      { audioSrc: '#audio-el' })

3D Scene Engine

NandanX.scene3d('#container', { camera: { z: 5 }, background: '#000' })
NandanX.card3D('#card',  { depth: 20, shine: true })
NandanX.button3D('#btn', { depth: 4 })

Page Transitions Engine

NandanX.fadeTransition({ duration: 400 })
NandanX.curtainTransition({ color: '#0f0f1a' })
NandanX.blockWipeTransition({ rows: 5, cols: 8 })
NandanX.startLoader()

Gradient Engine

NandanX.meshGradient('#bg', ['#9333ea', '#7c3aed', '#a855f7'])
NandanX.animatedGradient('#el', ['#9333ea', '#c084fc'], { speed: 4 })
NandanX.glassEffect('#card',   { blur: 12, opacity: 0.1 })
NandanX.neumorphism('#card',   { distance: 10, intensity: 0.2 })
NandanX.gradientMesh('#bg',    { colors: ['#9333ea', '#7c3aed', '#6d28d9'] })
NandanX.aurora('#bg',          { intensity: 0.5 })

Smooth Scroll Engine

NandanX.butterSmooth({ ease: 0.08 })
NandanX.scrollTo('#section', { offset: -60 })
NandanX.initSmoothScroll(options)

Parallax Engine

NandanX.parallaxLayer('#hero', { speed: 0.5, direction: 'y' })
NandanX.meshLayers('#container', layers)
NandanX.stickyStory('#section', keyframes)
NandanX.horizontalScroll('#track')
NandanX.mouseParallax('#scene', '.layer', 20)
NandanX.scrollTimeline(el, keyframes, options)

SVG Morph Engine

NandanX.svgDraw('#path',  { duration: 1500, easing: 'ease-in-out' })
NandanX.svgBlob('#shape', { speed: 2, complexity: 5 })
NandanX.svgMorph('#shape', fromPath, toPath, { duration: 800 })
NandanX.clipMorph('#el', ['circle(50%)', 'polygon(...)'], { interval: 2000 })

Spring Engine

NandanX.springAnimate('#el', 'translateX', 200, { stiffness: 0.12, damping: 0.7 })
NandanX.springFollow('#el', { strength: 0.1, friction: 0.85 })

Reveal Engine

NandanX.scrollReveal('.section', { type: 'fade-up', stagger: 100 })
NandanX.progressBar('#bar', 75,  { color: '#9333ea', animated: true })
NandanX.entrance('#hero', 'fade-up', { delay: 200 })

Advanced UI Engine

NandanX.carousel3D('#container',  { autoplay: 3000, perspective: 1000 })
NandanX.physicsSlider('#container', { friction: 0.92 })
NandanX.virtualScroll('#list', items, (item) => `<div>${item.name}</div>`, { itemHeight: 48 })
NandanX.animatedTabs('#tabs',    { indicator: 'slide' })
NandanX.accordion('#accordion',  { multiple: false })
NandanX.starRating('#rating',    { max: 5, value: 3 })

Smart Form Engine

NandanX.smartForm('#my-form', {
  rules:    { email: 'required|email', password: 'required|min:8' },
  onSubmit: (data) => console.log(data)
})
NandanX.floatLabel('#form')
NandanX.passwordStrength('#password-input')

Microinteractions Engine

NandanX.magneticEl('#btn',  { strength: 0.4 })
NandanX.pressRipple('#btn')
NandanX.tiltCard('#card',   { maxAngle: 12 })
NandanX.borderGlow('#card')
NandanX.jelly('#btn')

NandanX.microinteractions.pulseRing('.el')
NandanX.microinteractions.pressRipple('button')
NandanX.microinteractions.jelly('.card')
NandanX.microinteractions.heartbeat('.icon')
NandanX.microinteractions.shimmer('.btn')
NandanX.microinteractions.button3D('button')
NandanX.microinteractions.fillSwipe('button', '#9333ea')
NandanX.microinteractions.wiggle('.icon')

Holographic UI Engine

NandanX.holoCard('#card',   { intensity: 0.8 })
NandanX.holoFoil('#heading')
NandanX.neonBorder('#panel')
NandanX.holoBadge('#badge')
NandanX.holoPanel('#panel')

Adaptive UI Engine

NandanX.autoEnhance('#app',  { buttons: true, cards: true, sections: true })
NandanX.stickyNav('nav',     { offset: 0, className: 'scrolled' })
NandanX.lazySection('.section')

Infinite Marquee Engine

NandanX.infiniteMarquee('#marquee', { speed: 40, gap: 32 })
NandanX.logoStrip('#logos', [
  { src: 'logo1.svg', alt: 'Brand 1' },
  { src: 'logo2.svg', alt: 'Brand 2' }
])

WebGL Engine

NandanX.webgl.gradient('#canvas', { colors: ['#9333ea', '#7c3aed'] })
NandanX.webgl.ripple('#canvas')
NandanX.webgl.plasma('#canvas',   { speed: 1.0 })
NandanX.webgl.metaballs('#canvas')

Network Engine

const res = await NandanX.network.get('/api/data')
const res = await NandanX.network.post('/api/submit', { body: data })
NandanX.network.sse('/events',      (data) => console.log(data))
NandanX.network.poll('/api/status', { interval: 5000, onData: handler })

Storage Engine

NandanX.storage.set('key', value)
NandanX.storage.get('key')
NandanX.storage.remove('key')
NandanX.storage.setWithExpiry('key', value, ttlMs)
NandanX.storage.cookie.set('name', 'value', { days: 7 })

Event Bus Engine

NandanX.on('app:ready',  handler)
NandanX.off('app:ready', handler)
NandanX.emit('app:ready', { user: 'Alice' })

const state = NandanX.events.reactive({ count: 0 })
NandanX.events.watch(state, 'count', (newVal) => console.log(newVal))

Audio Engine

NandanX.audio.click()
NandanX.audio.hover()
NandanX.audio.success()
NandanX.audio.error()
NandanX.audio.notification()

Drag Engine

NandanX.drag.draggable('#el',    { bounds: 'parent' })
NandanX.drag.sortable('#list',   { onSort: (order) => console.log(order) })
NandanX.drag.resizable('#panel', { handles: ['se', 'sw'] })
NandanX.drag.dropzone('#zone',   { onDrop: (files) => console.log(files) })

Media Engine

NandanX.animate('#el', [
  { transform: 'translateY(0)' },
  { transform: 'translateY(-20px)' }
], { duration: 600, easing: 'ease-out' })
NandanX.pulse('#btn', { scale: 1.05, duration: 800 })

Noise Engine

NandanX.noiseBackground('#bg', { speed: 0.002, opacity: 0.06 })

WebRTC Engine

NandanX.webrtc.startVideo('#video-el')
NandanX.webrtc.stopVideo()
NandanX.webrtc.shareScreen('#video-el')

Live Chat Engine

NandanX.buildChat('#chat', {
  name:      'Support',
  onMessage: (msg) => console.log(msg)
})

Sync Engine

NandanX.sync.connect('wss://your-server.com')
NandanX.sync.send('event-name', payload)
NandanX.sync.on('event-name', handler)

Layout Engine

NandanX.masonry('#grid', { columns: 3, gap: 16 })
NandanX.gridMatch('#grid')
NandanX.stickyColumns('#layout', { offset: 80 })

Search Engine

NandanX.search.init('#input', items, {
  keys:     ['title', 'description'],
  onResult: (results) => renderList(results)
})
NandanX.search.highlight('#results', query)

Router Engine

NandanX.router.init({
  '/':      () => renderHome(),
  '/about': () => renderAbout(),
  '/work':  () => renderWork()
})
NandanX.router.go('/about')
NandanX.router.back()

Accessibility Engine

NandanX.a11y.init()                  // Auto-enhance for screen readers
NandanX.a11y.focusTrap('#modal')     // Trap focus inside element
NandanX.a11y.announce('Saved!')      // ARIA live region announcement
NandanX.a11y.skipLink('#main')       // Skip-to-main-content link

Config

Tweak global defaults before calling NandanX.init():

NandanX.config.set({
  theme:         'dark',
  reducedMotion: false,
  debug:         false,
  cursor: {
    type:  'dot-ring',
    color: '#9333ea',
    size:  12
  },
  particle: {
    mode:  'ambient',
    count: 60
  }
})

Data Attributes

Apply effects with pure HTML — no JS required:

<!-- Hover effects -->
<button data-nx-hover="lift">Lift</button>
<button data-nx-hover="glow">Glow</button>
<button data-nx-hover="glitch">Glitch</button>
<button data-nx-hover="tilt">Tilt</button>

<!-- Scroll reveal -->
<section data-nx-reveal="fade-up">...</section>
<section data-nx-reveal="slide-left" data-nx-delay="200">...</section>

<!-- Particles -->
<div data-nx-particles="ambient"></div>
<div data-nx-particles="constellation"></div>

<!-- Cursors -->
<div data-nx-cursor="spotlight"></div>
<div data-nx-cursor="blob"></div>

<!-- Modals -->
<button data-nx-modal="my-modal">Open</button>
<div id="my-modal" data-nx-modal-content>...</div>

Browser Support

Browser	Version
Chrome	90+
Firefox	88+
Safari	14+
Edge	90+

File Structure

nandanx-v1.0.0/
├── nandanx.js          ← Full bundle (drop this in)
├── package.json
├── LICENSE
├── README.md
└── js/                 ← Individual engine modules
    ├── config.js
    ├── core.js
    ├── cursor.js
    ├── hover.js
    ├── scroll.js
    ├── particle.js
    ├── physics.js
    ├── text.js
    ├── modal.js
    ├── theme.js
    ├── charts.js
    ├── state.js
    ├── gesture.js
    └── ...50+ more engines

License

Built with obsession by Nandan Das

Name		Name	Last commit message	Last commit date
js		js
.npmignore		.npmignore
LICENSE		LICENSE
README.md		README.md
nandanx.js		nandanx.js
package.json		package.json

Latest commit

History

Folders and files

Repository files navigation