Engine-Agnostic
2D/3D Graphics
for the Web
A production-ready, TypeScript-first scene graph library with physics, animation, plugins, and multi-renderer support. Build once, render anywhere.
pnpm add @joroya/core @joroya/renderer-threeBuilt for Modern Graphics
Everything you need to build stunning 2D and 3D graphics applications β from physics and animation to plugins and framework integrations.
Engine-Agnostic
One scene graph, three renderers. Write your scene logic once and render with Three.js (WebGL), SVG, or Canvas2D β swap freely without changing code.
TypeScript-First
Complete type definitions, intelligent autocompletion, and full type safety. Every API surface is typed and documented with TSDoc.
Scene Graph
Hierarchical node-based architecture with attachable components: geometry, materials, cameras, lights, physics bodies, animators, and more.
Physics & Animation
Built-in cannon-es physics with rigid bodies, colliders, joints, and raycasting. Keyframe animation system with blending, crossfade, easing, and spring helpers.
Plugin System
Extend the renderer without forking. Register custom ComponentHandlers via ThreeRenderer.usePlugin() β third-party packages can add new component types.
React & Vue Bindings
Declarative scene building with React JSX components and Vue 3 composables. useFrame, useScene, and auto-managed lifecycle hooks for seamless integration.
Core Capabilities
Oroya Animate goes beyond rendering. Animate, interact, and generate β all from a unified, engine-agnostic API.
Animation System
Keyframe-based animations with AnimationClip, AnimationMixer, and multiple interpolation modes. Animate any property β position, rotation, scale, color β with precise timing control.
Interactivity
Built-in event system with raycasting for 3D and DOM event delegation for SVG. Click, hover, and drag objects in your scene with a unified API across renderers.
Generative Art
Create algorithmic art with the SvJs engine. Perlin noise, gaussian distributions, and SVG primitives for building organic, procedural visuals directly in the browser.
Boolean Operations (CSG)
Create complex shapes by combining simple geometries. Union merges shapes, Subtract carves holes, and Intersect keeps only overlapping regions β all powered by Constructive Solid Geometry.
Lighting System
Illuminate your 3D scenes with four light types: Ambient for uniform glow, Directional for sunlight, Point for light bulbs, and Spot for flashlights. Full shadow casting support.
One Scene Graph, Three Renderers
Write your scene logic once. Render with Three.js for immersive 3D WebGL, SVG for scalable vector graphics, or Canvas2D for lightweight browser-native 2D.
Three.js Renderer WebGL
@joroya/renderer-three
Full 3D rendering powered by Three.js and WebGL. Support for perspective and orthographic cameras, PBR materials, glTF model loading, and real-time interaction events.
SVG Renderer Vector
@joroya/renderer-svg
Lightweight vector graphics rendering. Perfect for generative art, data visualization, interactive diagrams, and resolution-independent graphics with CSS styling support.
Canvas2D Renderer Canvas
@joroya/renderer-canvas2d
Zero-dependency browser-native 2D rendering. Perfect for UI overlays, HUDs, procedural patterns, and 2D games. Full transform hierarchy and hardware-accelerated Canvas API.
Simple, Powerful API
Create scenes with an intuitive, TypeScript-first API. Add nodes, attach components, and render with your engine of choice β all in a few lines of code.
- Hierarchical scene graph with node-based architecture
- Attachable components: geometry, materials, cameras
- Swap renderers without changing scene logic
- Built-in primitives: box, sphere, cylinder, plane
import { Scene, Node, createBox, Material,
Camera, CameraType } from '@joroya/core'
import { ThreeRenderer } from '@joroya/renderer-three'
// Create a scene
const scene = new Scene()
// Add a camera
const camera = new Node('camera')
camera.addComponent(new Camera({
type: CameraType.Perspective,
fov: 60, near: 0.1, far: 200,
}))
camera.transform.position = { x: 0, y: 2, z: 5 }
scene.add(camera)
// Add a cube with material
const cube = new Node('cube')
cube.addComponent(createBox(1.5, 1.5, 1.5))
cube.addComponent(new Material({
color: { r: 0.29, g: 0.48, b: 1.0 }
}))
scene.add(cube)
// Render with Three.js
const renderer = new ThreeRenderer({
canvas: document.querySelector('canvas')!,
width: 800, height: 600,
})
renderer.mount(scene)
renderer.render()Ready to Get Started?
Install the core package and your preferred renderer. You'll be rendering your first scene in under a minute.
pnpm add @joroya/core @joroya/renderer-three threeimport { Scene, Node, createBox, Material } from '@joroya/core'
import { ThreeRenderer } from '@joroya/renderer-three'
const scene = new Scene()
const cube = new Node('cube')
cube.addComponent(createBox(1, 1, 1))
cube.addComponent(new Material({ color: { r: 0.4, g: 0.5, b: 1 } }))
scene.add(cube)
const renderer = new ThreeRenderer({ canvas, width: 800, height: 600 })
renderer.mount(scene)
renderer.render()