Visual Foundations

Before jumping into your first scene, it’s important to understand how Murali thinks about space, positioning, and visuals.

Murali uses a deterministic, world-coordinate system — not pixels — which makes animations predictable and reproducible.

This page builds the mental model you need.

---

Key Idea

Murali is not pixel-based.

Everything is defined in a world coordinate system, which makes:

• layouts predictable
• animations resolution-independent
• outputs reproducible

---

Colors

Murali defines constants for colors so that it is easy to use them while creating scenes.

Category	Color	Preview
Achromatic	WHITE	#FFFFFF
	BLACK	#000000
	GRAY_A → GRAY_E
Blue	BLUE_A → BLUE_E
Teal	TEAL_A → TEAL_E
Green	GREEN_A → GREEN_E
Yellow	YELLOW_A → YELLOW_E
Gold	GOLD_A → GOLD_E
Orange	ORANGE_A → ORANGE_E
Red	RED_A → RED_E
Maroon	MAROON_A → MAROON_E
Purple	PURPLE_A → PURPLE_E
Pink	PINK_A → PINK_E
Pure	PURE_RED / PURE_GREEN / PURE_BLUE

How to think about colors

• Use palette constants (e.g. BLUE_C, GREEN_E) for semantic meaning
• Use raw colors (Vec4) for fine-tuned visuals (backgrounds, subtle tones)
• Prefer consistency over variety

use murali::colors::*;

let circle_id = scene.add_tattva(
    Circle::new(1.5, 48, GREEN_E),
    ORIGIN,
);

---

Positions

In Murali, the center of the screen is (0, 0, 0).

You define positions using:

Vec3::new(x, y, z)

• +x → right
• -x → left
• +y → up
• -y → down
• z → depth (used for layering; higher values come closer to the camera)

In Murali, positions are absolute and deterministic — the same coordinates always produce the same visual result.

You can either use raw vectors:

Vec3::new(2.0, 1.0, 0.0)

Or use predefined constants from murali::positions.

use glam::Vec3;

pub const ORIGIN: Vec3 = Vec3::ZERO;
pub const CAMERA_DEFAULT_POS: Vec3 = Vec3::new(0.0, 0.0, 10.0);

pub const UP: Vec3 = Vec3::Y;
pub const DOWN: Vec3 = Vec3::NEG_Y;
pub const LEFT: Vec3 = Vec3::NEG_X;
pub const RIGHT: Vec3 = Vec3::X;

Common Position Constants

Name	Vector	Meaning	Visual
UP	(0, 1, 0)	Move upward	⬆️
DOWN	(0, -1, 0)	Move downward	⬇️
LEFT	(-1, 0, 0)	Move left	⬅️
RIGHT	(1, 0, 0)	Move right	➡️
ORIGIN	(0, 0, 0)	Center of screen	🎯
CAMERA_DEFAULT_POS	(0, 0, 10)	Default camera position	📷

---

Themes

Murali provides two built-in themes:

• dark (default)
• light

Themes define:

• background color
• surface colors
• text colors
• accent colors

Once you're comfortable, you should create your own theme to define a consistent visual identity.

Creating a custom theme

1. Create a themes/ folder next to your Cargo.toml
2. Add a file (e.g. sesh.toml)
3. Define the required fields

Example:

name = "murali-dark"
background = "#0A121C"
surface    = "#1C2E45"
surface_alt = "#2B405C"
text_primary = "#F2F7FC"
text_muted   = "#BCCEE2"
accent      = "#56C1F4"
accent_alt  = "#AA8EF9"
positive    = "#4FD193"
warning     = "#F9B742"

---

Palettes

For advanced use cases, Murali supports custom palettes.

Palettes allow you to define your own color systems beyond the built-in constants.

How to create a palette

1. Create a palette/ folder next to your Cargo.toml
2. Add a file (e.g. my_palette.toml)
3. Define your colors inside

This feature is evolving — examples will be added soon.

---

You now have the core mental model for how Murali represents visuals.

→ Continue to First Scene