# Sula

> Sula is a free browser editor for animated WebGL shader backgrounds. Pick one of 32 shaders, tune colors, motion and cursor effects, and embed the result in Webflow, Framer, React or plain HTML. No account needed. Sula for Mac turns the same looks into a live wallpaper and screensaver: https://sula.ink. Made by treo.studio.

Sula Designer, the editor, runs at https://sula.ink/designer and needs JavaScript and WebGL. The interface is available in English, German, Spanish, French, Italian, Japanese and Korean.

## What it does

- 32 animated shaders in four groups: Gradients (13), Light (7), Liquid (9) and Analog (3)
- Presets for every shader, plus your own saved presets in the browser
- Controls for the color palette, motion, shape and grain
- Hover and click effects that react to the cursor
- Previews in mockups: a landing page, a login screen, a dashboard, a Mac desktop and a phone
- Share links that send a look from one device to another

## How to use a shader on a website

- Embed (Webflow, Framer, HTML): copy the snippet from Export and paste it into an embed element as the first child of a section with `position: relative`. Content on top of the shader needs `position: relative` too. Webflow and Framer only run it on the published site.
- npm package for React, Vue, Svelte and other frameworks: [@studio-treo/sula](https://www.npmjs.com/package/@studio-treo/sula)

## Tools for AI agents (WebMCP)

In browsers with WebMCP the editor registers tools an agent can call on the page:

- `list_shaders`: every shader with its category and presets
- `get_state`: current shader, preset, parameters with values and ranges, speed and look
- `select_shader`: open a shader on the stage
- `apply_preset`: apply a preset of the current shader
- `set_parameters`: set parameters, the motion speed and the look (brightness, contrast, saturation, vignette, grain)
- `randomize`: roll the dice for new values, colors or look
- `get_embed_code`: the embed snippet, npm usage and look file of the current look
- `create_share_link`: upload the look and return a public share link

## Sula for Mac

A paid Mac app that turns your shaders into a live wallpaper (it pauses when nobody sees it) and a screensaver with a Liquid Glass clock. Looks from Sula Designer move over with a share link or a .sula file. Get it at https://sula.ink/mac

## Links

- [Sula Designer](https://sula.ink/designer): the app itself
- [Product page](https://sula.ink/mac): the Mac app
- [npm package](https://www.npmjs.com/package/@studio-treo/sula): the runtime for frameworks
- [Imprint](https://www.treo.studio/impressum)
- [Privacy](https://www.treo.studio/datenschutz#sula): analytics with Pirsch, cookieless and without personal data

## More from treo.studio

- [Koppel](https://koppel.treo.studio/): write Webflow, Framer and Shopify custom code in VS Code or Cursor
- [Measings](https://measings.treo.studio/): easing library for GSAP, CSS, Tailwind and Webflow