Home Open Editor

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

The Library is your collection of reusable code snippets, functions, and templates. Don't want to start from scratch? The Library has you covered.

Pre-Built Functions

ShaderKit includes a curated collection of useful functions organized by category:

  • ShaderKit Helpers: Anti-aliasing, raymarching templates, and other utilities
  • Shapes: Common 2D and 3D shape functions
  • Noise: Various noise functions (Perlin, Simplex, etc.)
  • Palettes: Color palette generators
  • Math: Mathematical functions and utilities
  • Effects: Visual effects and post-processing

To use a function:

  1. Open the Library tab on the left sidebar
  2. Browse categories or use the search feature
  3. Click on a function to see its details
  4. Many functions have multiple parts - click through them to insert code step-by-step
  5. The code will be inserted at your cursor position in the editor

Adding Your Own Functions

You can create and save your own reusable functions to the library:

  1. Open the Library tab
  2. Scroll to the "My Functions" section
  3. Click the "Add Function" tile (the + icon)
  4. Fill in the function details:
    • Title: Name of your function
    • Description: What the function does
    • Category: Organize it into a category
    • Parts: Add one or more code parts (useful for multi-step functions)
    • Tags: Add tags to help others find it
  5. Choose if you want it to be Public (visible to everyone) or Private (only you)
  6. Click Save

Tip: Functions with multiple parts are great for complex code that needs to be inserted in steps, like raymarching setups.

Templates

Templates are complete shader projects you can use as starting points:

  • Public Templates: Templates shared by the community - browse and use them freely
  • Your Templates: Templates you've saved from your own shaders

To use a template:

  1. Open the Library tab
  2. Scroll to the "Templates" section
  3. Click on a template to load it as a new shader project
  4. All code, settings, and uniforms will be loaded

To save your shader as a template:

  1. Open the Info tab
  2. Click "Save as Template"
  3. Your shader will be saved and appear in the Templates section

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.

Focus Cursor Mode

When working with complex shaders that have multiple channels or files, you can control where Vibe Mode focuses its edits:

  • Global Mode (Default): Vibe Mode can edit anywhere in your shader code, making broader changes when needed
  • Focus Cursor Mode: When enabled, Vibe Mode prioritizes edits near your cursor position or current selection

To toggle Focus Cursor mode:

  1. Open the Vibe Mode interface
  2. Click the "Focus Cursor" button
  3. When active (highlighted), edits will focus on the area around your cursor
  4. When inactive, Vibe Mode can make broader changes across your code

Tip: Use Focus Cursor when you want precise, localized edits. Use Global mode when you want the AI to make broader structural changes.

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.

Browser Recording

ShaderKit includes a built-in screen recorder that captures your shader directly from the canvas. This is perfect for quick demos or when you want to record exactly what you see on screen.

Recording Settings

Before recording, you can configure:

  • Format: Choose between WebM (VP9) or MP4 (H.264)
  • Quality: High, Medium, or Low (affects file size and bitrate)
  • Frame Rate: 30 or 60 FPS
  • Countdown: 0, 3, 5, or 10 seconds before recording starts
  • Duration: Optional - set a maximum recording duration (auto-stops when reached)
  • Start Time: Set the initial time value for the shader when recording begins
  • Reset Time on Start: Reset the shader's time to 0 when recording begins

How to Record

  1. Click the Record Video button (camera icon) in the sidebar
  2. Adjust your recording settings in the modal
  3. Click Start Recording
  4. If countdown is enabled, wait for the countdown to finish
  5. Recording will start automatically
  6. Click Stop Recording when done (or it will auto-stop if duration is set)
  7. Your video will be processed and ready to download

Note: Browser recording requires a secure connection (HTTPS) and browser support for MediaRecorder API. The recording captures exactly what you see on screen at your current resolution.

Automations

Automations let you create multi-step render workflows that run automatically. Perfect for batch processing or creating multiple outputs from a single shader.

Creating an Automation

  1. Go to the Render tab
  2. Scroll to the Automations section
  3. Click "Add New Automation"
  4. Give your automation a name
  5. Add steps:
    • Video Step: Renders a video with specified settings (resolution, frame rate, duration, etc.)
    • Image Step: Renders a still image at a specific time
    • You can add multiple steps - they'll run in sequence
  6. Configure each step's settings (resolution, quality, duration, etc.)
  7. Click Save

Running an Automation

  1. Make sure your shader project is saved (automations require a saved project)
  2. Go to the Render tab
  3. Find your automation in the list
  4. Click Run
  5. All steps will be queued and processed in order
  6. You can monitor progress in the render queue

Tip: Automations are great for creating multiple resolutions of the same shader, or generating both video and image outputs automatically.

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.

Auto-Save & Recovery

ShaderKit automatically saves your work to your browser's local storage to prevent data loss. This is especially useful if you accidentally close a tab or forget to save your project.

How Auto-Save Works:

  • Automatic Saving: Your shader state is automatically saved after successful compilation and every 30 seconds while you're working.
  • What Gets Saved: All your code (channels, common code, uniforms), project settings (title, description, filters, resolution), and UI state (active tabs, loop duration).
  • Status Indicator: Check the sidebar for the auto-save status indicator:
    • "Unsaved" (red): You have unsaved changes
    • "Auto-saved X ago" (green): Your work is saved locally
    • "No changes": Everything is up to date

Recovering Your Work:

If you accidentally close a tab or lose your work:

  1. Open ShaderKit in a new tab or window
  2. Look for the Restore button (undo icon) in the sidebar
  3. Click it to restore your auto-saved project
  4. Your code, settings, and everything else will be restored exactly as you left it

Note: Auto-save works even for projects you haven't saved to your account yet. This means you can recover work even if you forgot to click "Save"!

Settings:

You can enable or disable auto-save in your User Settings (accessible from the top toolbar). Auto-save is enabled by default and recommended for most users.

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.

AI Tags

ShaderKit can automatically suggest tags for your shader using AI. This helps categorize your work and makes it easier for others to discover it.

Using AI Tags

  1. Open the Info tab
  2. In the Tags field, click the "AI Tags" button
  3. The AI will analyze your shader code and suggest relevant tags
  4. Suggested tags will be added to your existing tags (duplicates are automatically removed)

Available Tags

Common tags include: 2D, 3D, Animation, Fractal, Zoom, Noise, Raymarching, Particles, Audio, Abstract, Landscape, Loop, Symmetry, Layers, and more.

You can also click on tag suggestions below the input field to quickly add common tags.

7. Sidebar Controls & Buttons

The sidebar contains essential controls for editing, rendering, and managing your shaders. Here's what each button does:

Main Tabs

  • Editor: Switch to the code editor view
  • Render: Access cloud rendering and export options
  • Library: Browse functions, templates, and code snippets
  • Info: View and edit project information, tags, and settings

Editor Controls

These buttons appear when you're on the Editor tab:

  • Compile (Sync icon): Manually compile your shader code. Usually not needed if Instant Render is enabled.
  • Pause Render: Pause/unpause the shader animation
  • Reset: Reset the time counter to 0
  • Pause Time: Pause/unpause the time variable (iTime stops advancing)
  • Fullscreen: Enter fullscreen mode for the preview canvas
  • Capture Frame (Camera icon): Download the current frame as a PNG image
  • Record Video (Video icon): Open the browser recording modal
  • Display Mode: Toggle between editor view and display-only view
  • Choose File (Folder icon): Load a shader file from your computer

Quick Toggles

  • Turbo FPS: Enable maximum frame rate rendering (see Turbo FPS section below)
  • Instant Render: Automatically compile shader when you stop typing (with delay)
  • Texture Filtering: Toggle between Linear (smooth) and Nearest (pixel-perfect) texture filtering

Auto-Save Controls

  • Save as New (Save icon): Save your current project as a new shader with a timestamp-based name
  • Restore (Undo icon): Restore your work from auto-save (appears when auto-save data exists)
  • Status Indicator: Shows current save status (Unsaved, Auto-saved, No changes)

8. Turbo FPS Mode

Turbo FPS automatically finds and maintains the highest consistent frame rate your hardware can handle for the current shader.

What It Does

  • Incrementally increases the frame rate until performance drops
  • Locks the frame rate at the last stable increment before the drop
  • Bypasses frame rate limiting settings
  • Continuously adapts to find the maximum consistent performance

When to Use It

  • Performance Testing: See how fast your shader can run on different hardware
  • Cellular Automata: Shaders that simulate cellular automata benefit from maximum frame rates
  • Simulations: Physics simulations, particle systems, and similar computational shaders
  • Feedback Effects: Shaders with feedback loops that need to run as fast as possible

Considerations

  • Battery Life: Turbo FPS can drain battery faster on laptops
  • Heat: May cause your device to heat up more due to sustained high performance
  • Recording: Turbo FPS works fine for recording - it will maintain the highest stable frame rate

How to Toggle

Click the "Turbo FPS" button in the sidebar to enable/disable. The button shows "On" or "Off" to indicate the current state.

Note: You can set Turbo FPS as your default in User Settings.

9. User Settings

ShaderKit offers extensive customization through User Settings. Access them by clicking your profile icon in the top toolbar and selecting "Settings".

Editor Settings

  • Default Theme: Choose the color scheme for the code editor (Monokai, Dracula, etc.)
  • Interface Theme: Choose the color scheme for the UI (can be linked to editor theme)
  • Themes Linked: When enabled, changing the editor theme also changes the interface theme
  • Editor Font Size: Adjust the size of text in the code editor (default: 12px)
  • Editor Tab Size: Number of spaces for indentation (default: 4)
  • Auto Compile Delay: How long to wait after you stop typing before auto-compiling (default: 1000ms)

Rendering Settings

  • Default Instant Render: Automatically compile shader when you stop typing (default: off)
  • Default Resolution Scale: Default resolution multiplier (0.5 = half resolution, 1.0 = full resolution)
  • Default Turbo Mode: Enable Turbo FPS by default for new shaders
  • Max Frame Rate Enabled: Enable frame rate limiting
  • Max Frame Rate: Maximum frames per second when limiting is enabled (default: 60)
  • Texture Filtering: Default texture filtering mode (Linear or Nearest)

Project Settings

  • Default Loop Duration: Default loop time for loop control (default: 10.0 seconds)
  • Default Channel Tab: Which channel tab to show by default when opening a new shader (default: iChannel0)
  • Auto-Save Enabled: Enable automatic saving to browser storage (default: on, recommended)

Interface Settings

  • Show Tooltips: Display helpful tooltips on hover (default: on)
  • Mouse Input Anywhere: Allow mouse input to affect shader even when cursor is outside canvas
  • ShaderToy Compatibility Mode: Enable compatibility features for ShaderToy code

Recording Settings

These settings are used as defaults for the browser recorder:

  • Recording Format: Default video format (webm or mp4)
  • Recording Quality: Default quality level (high, medium, low)
  • Recording Frame Rate: Default frame rate (30 or 60 FPS)
  • Recording Countdown: Default countdown duration before recording starts

Shader List Settings

  • Group Variants in List: Group shader variants together in your shader list view

Saving Settings

Your settings are automatically saved to your account and synced across devices. You can also:

  • Save: Click "Save" to apply your changes
  • Reset: Click "Reset" to restore all settings to their default values

10. 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).
Theme