Create a Scene

Scene is the basic element of NarraLeaf-React. It defines a period of time and background.

Define a Scene

You can define a scene by creating a Scene instance:

import { Scene } from "narraleaf-react";
 
const scene = new Scene("scene 1 - wake up", {
    background: "<your background image url>",
});

The first parameter of the scene constructor should be a name, this name is used to identify the scene.

Note: the name may overlap with other scenes.

The second parameter is an optional configuration. You can find the config doc here.

Tips: you can use a pure color background through the background config

const scene = new Scene("scene 1 - wake up", {
    background: "#f0f0f0",
});

If you are using Next.js, you can import an image using loader:

import youImage from "./your-image.png";
 
const scene = new Scene("scene 1 - wake up", {
    background: youImage,
});