Tutorials
Learn Oroya Animate step by step, from your first 3D scene to advanced generative art and multi-renderer techniques.
Beginner
Start here if you're new to Oroya Animate.
Hello Cube
Create your first 3D scene with a rotating cube
Color Palette
Multiple geometries, materials, and composition
Save & Load Scenes
JSON serialization for persisting scenes
Visual editor (alpha)
Tour of apps/editor β the React-based scene authoring tool that ships with v1.0.
Intermediate
Build on the basics with more complex scenes and renderers.
Solar System
Hierarchical transforms and parent-child animations
SVG Generative Art
SVG renderer and procedural generation
Cameras & Viewpoints
Camera positioning and dynamic viewpoints
SVG Gradients & Filters
Gradients, blur, drop-shadow, clip-paths and masks
SVG Animations
Declarative animations with animate and animateTransform
Keyframe Animation
AnimationMixer, KeyframeTrack and interpolation modes
Orbit Controls
Camera manipulation with orbit, pan and zoom
Physics: rigid bodies, joints, and collision events
Drop a stack of boxes onto a floor, link them with joints, and react to collisions β all from the Oroya scene graph.
Animator: clip library, crossfade, and keyframe events
Drive named animation clips with play() / crossFade() and react to footstep-style keyframe events.
React bindings: <OroyaCanvas> and useFrame
Build a 3D scene from React JSX β declarative components, hooks, and per-frame updates.
Developer tools: Inspector, Input, and Assets
Debug overlay, action-mapped input, and a preloading asset cache β the three packages that turn a demo into an app.
Advanced
Push the boundaries with procedural generation and multi-renderer patterns.
Procedural City
Algorithmic generation of complex scenes
Multi-Renderer
Same scene rendered with multiple backends
SVG Interactive
Interactive SVG with event delegation
3D Interactivity
Raycasting and pointer events with ThreeRenderer
Plugins: extend the renderer without forking
Register a ComponentHandler that intercepts a custom component type and ships your own backend objects.