LumaJS Documentation - Built with LumaJS

Introduction

LumaJS is designed for developers who want the power of modern frameworks without the bloat. Built from the ground up with performance in mind, it provides three core capabilities in a single, unified package.

⚛️

React-like Reactivity

Hooks, components, and state management with a familiar API. Just 3KB for the core reactivity system.

✨

GSAP-style Animations

30+ easing functions, timeline sequencing, and scroll triggers. Professional animations in just 7KB.

🎨

Three.js-like 3D

WebGL rendering with custom shaders, geometries, and camera controls. Full 3D engine in only 12KB.

Installation

Via npm

# Install via npm
npm install @krishna.dev1/lumajs

# Or using yarn
yarn add @krishna.dev1/lumajs

Via CDN

<!-- Core + Animation + 3D (all modules) -->
<script src="https://unpkg.com/@krishna.dev1/lumajs/dist/luma.umd.min.js"></script>

<!-- Just core reactivity -->
<script src="https://unpkg.com/@krishna.dev1/lumajs/dist/luma.esm.min.js" type="module"></script>

Quick Start

Get up and running with LumaJS in under a minute.

import { h, mount, useState } from '@krishna.dev1/lumajs';

function Counter() {
  const [count, setCount] = useState(0);

  return h('div', {},
    h('h1', {}, `Count: ${count}`),
    h('button', { 
      onClick: () => setCount(count + 1) 
    }, 'Increment')
  );
}

mount(Counter, document.getElementById('app'));

Interactive Demo

Core Reactivity

LumaJS provides a React-like reactivity system with hooks and components.

Creating Elements with h()

import { h } from '@krishna.dev1/lumajs';

// Basic element
const element = h('div', { class: 'container' }, 'Hello World');

// With styles
const styled = h('button', {
  style: { color: 'blue', padding: '10px' },
  onClick: () => console.log('clicked')
}, 'Click me');

// Nested elements
const nested = h('div', {},
  h('h1', {}, 'Title'),
  h('p', {}, 'Paragraph')
);

Hooks

LumaJS implements all the essential React hooks with a compatible API.

Hook	Description	Usage
`useState`	Manage component state	`const [value, setValue] = useState(initial)`
`useEffect`	Side effects with cleanup	`useEffect(() => { ... }, [deps])`
`useRef`	Mutable references	`const ref = useRef(initial)`
`useMemo`	Memoized computed values	`const value = useMemo(() => compute(), [deps])`
`useCallback`	Memoized functions	`const fn = useCallback(() => { ... }, [deps])`

useState Example

function TodoList() {
  const [todos, setTodos] = useState([]);
  const [input, setInput] = useState('');

  const addTodo = () => {
    setTodos([...todos, input]);
    setInput('');
  };

  return h('div', {},
    h('input', {
      value: input,
      onInput: (e) => setInput(e.target.value)
    }),
    h('button', { onClick: addTodo }, 'Add'),
    h('ul', {},
      ...todos.map(todo => h('li', {}, todo))
    )
  );
}

Animations

Professional-grade animations with a GSAP-like API.

Basic Animation

import { to } from '@krishna.dev1/lumajs/dist/luma-animate';

// Animate an element
to(element, {
  opacity: 0,
  x: 100,
  rotation: 180
}, {
  duration: 1000,
  easing: 'easeOutBack'
});

Animation Demo

Available Easings

30+ easing functions including: linear, easeIn, easeOut, easeInOut, easeInBack, easeOutBack, easeInElastic, easeOutElastic, easeInBounce, easeOutBounce, and spring physics.

Timeline

Sequence multiple animations with precise timing control.

import { Timeline } from '@krishna.dev1/lumajs/dist/luma-animate';

const tl = new Timeline();

tl.to(box1, { x: 100 }, { duration: 1000 })
  .to(box2, { y: 100 }, { duration: 800, position: '+=200' })
  .to(box3, { scale: 2 }, { duration: 500, position: '-=300' })
  .play();

3D Rendering

Create stunning 3D scenes with WebGL, all in just 12KB.

Basic 3D Scene

import { Scene, PerspectiveCamera, WebGLRenderer, Mesh, 
         BoxGeometry, PhongMaterial } 
from '@krishna.dev1/lumajs/dist/luma-3d';

// Create scene
const scene = new Scene();
const camera = new PerspectiveCamera(75, width / height, 0.1, 1000);
const renderer = new WebGLRenderer(canvas);

// Create mesh
const geometry = new BoxGeometry(1, 1, 1);
const material = new PhongMaterial({ color: [0.5, 0.5, 1.0] });
const cube = new Mesh(geometry, material);

scene.add(cube);
camera.position[2] = 5;

// Animation loop
function animate() {
  requestAnimationFrame(animate);
  cube.rotation[1] += 0.01;
  renderer.render(scene, camera);
}

animate();

Geometries

Built-in geometry primitives for common 3D shapes.

Geometry	Constructor	Description
Box	`new BoxGeometry(width, height, depth)`	Rectangular prism / cube
Sphere	`new SphereGeometry(radius, segments, rings)`	Spherical shape
Plane	`new PlaneGeometry(width, height)`	Flat rectangular surface

Materials

Material types for different rendering styles.

import { BasicMaterial, PhongMaterial } 
from '@krishna.dev1/lumajs/dist/luma-3d';

// Basic material (solid color)
const basic = new BasicMaterial({
  color: [1.0, 0.0, 0.0] // RGB (red)
});

// Phong material (lighting)
const phong = new PhongMaterial({
  color: [0.5, 0.8, 1.0], // RGB (light blue)
  shininess: 32.0
});

Camera & Controls

Interactive camera controls for 3D scenes.

import { OrbitControls } from '@krishna.dev1/lumajs/dist/luma-3d';

const controls = new OrbitControls(camera, canvas);

// Controls are automatically enabled:
// - Drag to rotate
// - Scroll to zoom
// - Automatic camera updates

Complete Examples

Counter Application

import { h, mount, useState } from '@krishna.dev1/lumajs';

function App() {
  const [count, setCount] = useState(0);

  return h('div', { style: { padding: '20px' } },
    h('h1', {}, `Count: ${count}`),
    h('div', { style: { display: 'flex', gap: '10px' } },
      h('button', { onClick: () => setCount(count - 1) }, '-'),
      h('button', { onClick: () => setCount(0) }, 'Reset'),
      h('button', { onClick: () => setCount(count + 1) }, '+')
    )
  );
}

mount(App, document.getElementById('root'));