Intro to the interface

A tour of the design editor interface: the canvas, layers, the Properties panel, and the ways to share and export.

What's covered

  • Navigating the editor interface
  • Projects, shaders, and layers
  • The available component categories
  • Setting component props in the Properties panel
  • Previewing shaders at different dimensions
  • Working with the infinite canvas
  • Creating responsive variations of a shader
  • Sharing projects and exporting images, videos, or code
  • Installing shaders into your project with the Shaders MCP

Key concept

If you've used Figma, the layout will look familiar. A shader is a stack of components on an infinite canvas, and the canvas holds several variations at once so you can compare them before you export.