The studio at a glance

The studio is one screen with four parts: the stage in the middle, where the piece plays; Perlin's panel on the right, where you talk to it; the rail on the left, which opens drawers for versions, pieces, assets, code and the gallery; and the top bar, for the piece as a whole. This page goes round each in turn. On a phone the same parts are stacked, as described at the end.

The top bar

From left to right:

• The logo takes you to the home page.
• The piece's title. Click it to rename the piece; ↵ saves and Esc cancels.
• The version stepper, such as v3/5, with arrows for the previous and next version.
• The save state: Saving while changes go up, Saved once they're stored with your studio, and Offline when the server can't be reached. Offline, your work is kept in this browser and syncs when the connection is back.
• New piece starts a fresh piece. The one on stage stays under My pieces, and anything Perlin is building for it carries on.
• Publish lists the piece on the community page, and Share gives you a link to it. See Share links and publishing.
• Export opens a menu: Standalone HTML, Still image, Wallpaper & avatar, Quick clip, Render video, Post a clip, Embed code and Open in viewer.
• Hide Perlin folds Perlin's panel to a slim bar for more room on a computer; the same button then reads Show Perlin.
• Your token balance, with a plus to get more Vybe Tokens, and your account menu (or Sign in).

Share, Publish and Export wait until there is a piece on stage.

The stage

The stage is where the piece runs, live. Before there is one it shows "Make it. Scrub it. Play it. Bend it." and a button, Or start from the gallery.

At the top left, a status label says whether the piece is Live, Loading, Paused or in Error, next to the engine it runs on and its frame rate, which turns red under 30 frames a second. A gallery piece shows a hint for a few seconds after it starts, such as "Hover to ripple the surface".

The Parameters panel sits at the top right: the piece's own sliders, colours, switches and buttons, with Randomize and Reset to defaults at its top. Click its title to fold it, or press P. See Tuning with parameters.

The bar along the bottom holds:

While Perlin works, the stage shows what it's doing, such as Imagining or Writing, with the code arriving underneath. When a piece fails, an error panel says what went wrong, with Fix with AI, Show code and Restart. See Troubleshooting.

You can drop files anywhere on the studio: images become reference images for your next prompt, and fonts, 3D models, audio and video go into your assets.

Perlin's panel

The top of the panel holds five switches that apply to Perlin's next piece of work:

• Sound FX: Perlin makes sound effects and music for the piece.
• Textures: Perlin paints images for it, such as sprites, tiles and backdrops.
• 3D: Perlin makes 3D models for it, kept in your assets.
• Look it over: Perlin watches each new piece run and polishes what it sees.
• Auto-fix: Perlin repairs a piece it wrote when it breaks.

On a narrow panel, Sound FX reads SFX and Look it over reads Look. Sound FX, Textures and 3D and Auto-fix and Look it over cover them in full.

Below is the conversation: what you asked, what Perlin did step by step, and a version chip under each reply that made a piece. The chip on stage is marked Live; click any other to restore it.

At the bottom is the prompt box, and under it a toolbar:

• The engine switch: Auto lets the studio pick, or choose 3D, Shader or 2D.
• The effort menu, showing the current level. See Effort levels.
• The dice (Surprise me) fills the box with an idea.
• The attach button, with Upload reference images, Upload files and Choose from your assets. See Reference images and files.
• Plan first, to have Perlin propose a plan before it builds. See Plan first.
• Send, which becomes Stop while Perlin works.

Folded with Hide Perlin or \, the panel becomes a slim bar with Show Perlin and Ask Perlin buttons, and a sign when Perlin is working or has replied.

The rail and its drawers

The rail runs down the left edge. Each button opens a drawer beside the stage; click it again, or press its key, to close it.

At the bottom of the rail, Keyboard shortcuts (?) lists the studio's keys. Where your browser can install the site as an app, an Install as an app button sits above it.

Pieces from My pieces and the Gallery can also be dragged onto the stage, which runs them as a layer over the piece you're on. See Loading pieces onto a piece.

The Motion panel

Motion: timeline, layers, states on the stage's bar, or M, opens the Motion panel under the stage. It has five tabs, Timeline, Layers, States, Sound and Variations, and a header with the timeline's length in seconds, whether it Loops or Plays once, the Shape it's made for, Record and Render. With the panel open, the stage is framed to that shape. The panel needs a screen at least 1024 pixels wide. See The Motion panel.

On a phone

Below 1024 pixels wide, the stage sits above one panel whose tabs are Chat, Parameters, Versions, Pieces, Assets, Code and Gallery. The panel has three heights: folded to its tabs so the piece gets the screen, under the piece, or over it. Use the arrows at the end of the tab bar, or swipe the bar up or down, to move between them. The buttons in the top bar shrink to icons. See The studio on a phone.

Related

• Make your first piece
• Keyboard shortcuts
• Saving and your pieces
• Editing the code