ShaderKit User Guide

1. Introduction

Welcome to ShaderKit, a powerful browser-based tool for creating stunning visual effects and animations using code. Whether you are a generative artist or just learning graphics programming, ShaderKit lets you write, preview, and render high-quality shaders directly in your browser.

Key Features:

• Real-Time Editing: See your changes instantly.
• Cloud Rendering: Export up to 8K video without freezing your computer.
• Vibe Mode (AI): An intelligent assistant to help you write and fix code.
• ShaderToy Compatible: Familiar syntax (mainImage, iTime, etc.).

2. Getting Started

Creating an Account

While you can experiment freely, creating an account is highly recommended to:

• Save your Projects: Keep your work safe in the cloud.
• Use Cloud Rendering: Access high-power servers to render videos.
• Use AI Features: Access "Vibe Mode" assistance.

To sign up, simply click the "Create Account" button in the top right corner.

The Interface

• The Editor (Left/Center): This is where you write your code. You can switch between different "buffers" (tabs like Image, Common, iChannel0) to organize complex effects.
• The Preview (Background): Your code is compiled instantly and runs in the background.
• The Toolbar (Top): Access Project Settings, New Shader, and your Account profile.
• Controls (Bottom): Play/Pause time, reset the timer, and adjust resolution scaling.

Custom Resolution

The resolution display in the stats bar is interactive and allows you to set custom dimensions:

• Click the width value to edit only the width. The height will automatically adjust to maintain aspect ratio when the window is resized.
• Click the height value to edit only the height. The width will automatically adjust to maintain aspect ratio when the window is resized.
• Click the "x" separator to edit both width and height simultaneously. Both dimensions will be locked and won't change when resizing.
• When you set a custom resolution, that dimension becomes locked (indicated by a different background color). Locked dimensions stay fixed even when you resize the browser window.
• To reset: Change the Scale dropdown to any preset value (2X, Full, 1/2, etc.) to clear the custom resolution locks and return to automatic scaling.

Tip: Hover over the resolution display to see a tooltip with quick instructions.

3. Creating Shaders

ShaderKit uses GLSL, the standard language for graphics programming. If you are coming from ShaderToy, you will feel right at home.

Using the Library

Don't want to start from scratch?

1. Open the Library tab on the left.
2. Browse categories like Shapes, Noise, or Palettes.
3. Click an item to insert the code snippet directly into your editor.

Uniforms

You can control your shader with inputs called "Uniforms".

• Built-in: iTime (time in seconds), iResolution (screen size), iMouse (mouse position).
• Custom: You can add your own sliders in the Uniforms tab to tweak values (like speed or color) without changing the code.

4. Vibe Mode (AI Assistant)

Stuck on a math problem? Want to change colors but don't know how? Vibe Mode acts as your co-pilot.

How to use it:

1. Click the Vibe Mode toggle or press the AI button.
2. Type a request in plain English (e.g., "Make the circle pulse to the beat" or "Fix the syntax error on line 45").
3. The AI will analyze your code and apply changes automatically.

Models & Credits

Vibe Mode uses advanced AI models. Using them consumes Credits:

• Haiku: Fastest & Cheapest. Good for quick fixes and simple logic.
• Sonnet: Balanced. Great for general coding tasks.
• Opus: Most Powerful. Best for complex math and heavy logic, but costs the most credits.

Note: You can see your Credit Balance in your User Settings.

5. Exporting & Cloud Rendering

One of ShaderKit's most powerful features is Cloud Rendering. Instead of using your own computer to render a heavy 4K video, we do it for you on our servers.

Video Export

1. Go to the Render tab.
2. Select your settings:
   • Resolution: From 720p up to 8K.
   • Frame Rate: 30 or 60 FPS.
   • Duration: How long the video should be.
3. Click Render.
4. Your job is sent to the Cloud. You can close the tab or keep working; we'll notify you when it's done.

GIF Export

Perfect for sharing on social media.

1. Go to the GIF tab.
2. Adjust settings like Dithering (controls dot patterns) and Palette (colors).
3. Click Create GIF.

6. Managing Projects

Saving & Forking

• Save: Keeps your changes on your current project.
• Fork: Creates a copy of the current project. This is great if you want to experiment on a shader you found (or one of your own) without breaking the original version.

Project Lineage

ShaderKit tracks the history of your creativity. You can view a project's Lineage to see which shader it was "forked" from, allowing you to trace the evolution of an effect.

7. Troubleshooting & Support

Reporting Bugs

If you encounter an issue or a crash, you don't need to leave the app.

1. Click the Bug Icon (usually near the top right or in the menu).
2. Select the category (e.g., Bug, Performance, Feature Request).
3. Describe what happened.
4. Click Submit.

Common Issues

• Black Screen: Check for compilation errors in the console at the bottom of the editor.
• Slow Performance: Try lowering the Resolution Scale in the bottom controls (e.g., set to 0.5x).