Discover Veldara

Veldara blends the elegance of Svelte 5 with the depth of Three.js — right at your fingertips. Built to be robust and flexible, yet intuitive and easy to learn.

Unleash Three.js

The web is becoming increasingly spatial. At the heart of Veldara is a composable, declarative API for building high-performance Three.js experiences on the web.

Connect everything

Veldara ships built-in tools for physics, XR, animation, layout, and model loading, along with extensive helpers, so building stunning 3D apps for the web feels effortless.

Our mission:

Build immersive 3D worlds on the web — instantly.

> npm i @veldara/core
Get started

Introducing

Veldara 8

Everything you need for a 3D app on the web

Veldara is more than a rendering layer. It is a complete ecosystem that takes you from prototype to production-grade experience.

Declarative scenes

Describe your 3D scene as components — Veldara manages the lifecycle of your Three.js objects while you focus on the experience.

Physics built in

A Rapier-powered physics engine with first-class integration: collisions, constraints, and rigid bodies in a few lines of code.

XR support

VR and AR experiences from the same codebase. The full power of WebXR, without the boilerplate.

Animation toolkit

Springs, timelines, and scroll-driven animations with a declarative API — motion becomes a natural part of the scene.

Model loading

GLTF, DRACO, and KTX2 support with automatic caching and suspense — your models simply appear.

3D layout

A flexbox-like layout system in 3D space — align, arrange, and scale objects the way you would a UI.

Code that is a joy to write

No imperative scene management, no manual cleanup. You write components, and Veldara renders them — reactively.

  • Full TypeScript support with automatic type inference
  • Hot module replacement — scene state updates without a reload
  • Any Three.js object is directly accessible when you want to go deeper
Scene.svelte
<script>
  import { T, useTask } from '@veldara/core'

  let spin = $state(0)
  useTask((delta) => { spin += delta })
</script>

<!-- A spinning cube, that is all -->
<T.Mesh rotation.y={spin}>
  <T.BoxGeometry />
  <T.MeshStandardMaterial color="#2C5C88" />
</T.Mesh>

<T.DirectionalLight position={[3, 10, 7]} />
2.4M+
monthly downloads
31k+
GitHub stars
400+
contributors
100%
open source

The next dimension is one command away

Join thousands of developers already building the spatial future of the web with Veldara.

> npm i @veldara/core
Documentation
← CONEN — Portfolio