Landscape JS
v1.0.17 — stable
binarystar.studio

Install using your preferred package manager.

$ npm install @binarystarstudio/landscapejs

Generate random, stunning landscape visualizations with just one line of code.

main.js
import { Landscape } from 'landscape-js';

// Initialize with a single line
const scene = new Landscape({ container: '#app' });
scene.render();

Create landscapes with specific attributes.

main.js
import { Landscape } from 'landscape-js';

// Initialize with specific settings
const scene = new Landscape({
  container: '#app',
  dayTime: false,
  numberOfStars: 750
  numberOfMountains: 3
});
scene.render();

Recreate previous generated landscapes by its seed.

main.js
import { Landscape } from 'landscape-js';

// Recreate a previous generated scence using a seed
const scene = new Landscape({
  container: '#app',
  seed: 'eyJyYW5kb21TZWVkIjo2OTQ4MTgwOTkwMTM2MjQsImRheVRpbWUiOmZhbHNlfQ=='
});
scene.render();

Landscape Settings

Create an underwater landscape.

Draw the water body.

50
50
50

Landscape during the daytime.

Draw the sky.

Draw the moon.

Draw the sun.

50
50
50
50
50

Designed for the Modern Web

Everything you need to create immersive background experiences.

Lightweight Core

Pure Canvas API with no external dependencies. Under 5kb gzipped and ready to drop into any project.

Fully Customizable

Adjust colors, noise levels, sun position, and mountain density via a simple JSON config object.

Zero Dependencies

No heavy frameworks required. Just include the script tag and you're ready to paint the sky.

15k+
Downloads
4kb
Bundle Size
100%
TypeScript
MIT
License
View on Github
binarystar.studio