SRGB Interactive Effect Builder

Welcome to the SRGB Interactive Effect Builder! This guide explains the features to help you create stunning visual effects.

The builder is divided into two main panels:

The Controls Panel on the left is where you manage all the objects and global settings for your effect.
The Canvas Panel on the right contains the visual editor and the main Toolbar.

Controls Panel (Left)

Each object gets its own collapsible panel containing tabbed sections for its properties (e.g., Geometry, Fill-Animation, Stroke). You can perform several actions on these panels:

Rename: Click the object's name (e.g., "Object 1") to edit it.
Reorder: Click and drag the icon to change the rendering order (layering).
Lock/Unlock: Use the / button to prevent an object from being moved on the canvas.
Duplicate/Delete: Use the menu button () to access options for duplicating or deleting an object.

Use the Global Overrides in the "General Settings" panel to apply a master color palette or color cycle effect to all objects at once.

Canvas Interaction

Select: Click an object to select it. Hold Shift or Ctrl to select multiple objects.
Manipulate: Drag a selected object to move it, drag its square handles to resize, or drag its circular handle to rotate.
Snapping: Objects will automatically snap to the edges and centers of other objects and the canvas for easy alignment.

Toolbar

The toolbar above the canvas provides quick access to powerful tools:

History ( / ): Undo and Redo your recent changes.
Copy/Paste Properties ( / ): Copy property groups (like size, color, animation) from one object and paste them onto others.
Alignment & Matching: With object(s) selected, you can align them to the screen, match their sizes, or fit them to the canvas instantly.
Constrain to Canvas: Toggle whether objects are allowed to be moved or resized outside the canvas boundaries.

Keyboard Shortcuts

Arrow Keys: Nudge selected objects by a small amount.
Shift + Arrow Keys: Nudge in larger steps.
Delete / Backspace: Delete selected objects.
Ctrl/Cmd + Z / Y: Undo and Redo.
Ctrl/Cmd + C / V: Copy/Paste properties.
Escape: Deselect all objects.

The real power of the builder lies in its specialized shapes and tools. When you change an object's Shape property, different settings will appear.

The Polyline Tool

Drawing: Click the Add Polyline button. Click on the canvas to place points, then Double-click or press Enter to finish.
Editing Nodes: After creating a polyline, select it and drag its nodes. Double-click a line segment to add a node, or Alt+Click a node to delete it.
Path Animation: Animate a sub-object (particle) that travels along the path. You can customize its shape, speed, trail, and how it behaves when it reaches the end.

The Pixel Art Editor

Editing: On a `pixel-art` object, click the Edit button on any frame to open the built-in editor.
Tools: Use the editor's tools to paint, Fill areas, or / flip your art.
Special Colors: Use the editor's palette to paint with special values that are interpreted by the renderer, like forcing a pixel to be opaque White (1.0), the object's Color 1 (0.3), or Color 2 (0.4).

Importing Spritesheets & GIFs

Paste from Clipboard: You can quickly paste an image or GIF from your clipboard directly into a `pixel-art` object. Press Ctrl+V when a pixel art object is selected to open the paste menu.
Sprite Sheets: A sprite sheet is a single image file containing a sequence of animation frames. The tool will automatically split the image into individual frames based on the frame dimensions you provide.
GIF Upload: Click the Upload GIF button in the object's settings to process an animated GIF file into a series of frames.

The Pixel Art Gallery

Access: On a `pixel-art` object, click the Browse Gallery button in the "Pixel Art" tab to open the community gallery.
Functionality: Browse and search for pixel art from public community effects.
Usage: Clicking Insert on an item will append its animation frames to your currently selected `pixel-art` object.

Other Shapes

Explore other shapes like the Spawner, Strimer, and Audio Visualizer, each with their own unique set of properties to discover.

Spawner: A particle system that generates shapes and text with customizable physics like gravity, speed, rotation, and trails. You can even use a custom SVG path for the particle shape.
Strimer: Creates a dynamic effect of blocks moving in columns, designed to simulate animated cables or other vertical elements. Features include various animations like 'Bounce' or a 'Snake' effect.
Audio Visualizer: Renders audio data as bars or a line. You can choose from linear, circular, or polyline layouts and customize the number of bars, spacing, and smoothing.

Make your effects dynamic by enabling reactivity in an object's Audio or Sensor tabs.

Audio Reactivity: To preview, click the Start Listening button on the toolbar and share the audio from another browser tab.
Sensor Reactivity: Create effects that respond to real-time data like CPU load. You can turn an object into a Sensor Meter (a filling bar) or a Time Plot (a real-time graph).

Save: Saves your current project to your "My Projects" gallery in the cloud. You must be signed in.
Open: Opens the gallery panel to load one of your saved projects.
Community Gallery: Opens the gallery panel to browse public effects from all users.
Upload: Load an effect from a `.html` file from your computer.
Export: Generates a .zip file containing your effect and a thumbnail, ready to be imported into SignalRGB.
Share: Saves your project and generates a unique URL that can be opened by other Effect Builder users.
Import to SignalRGB: Creates a special link to apply your effect's settings to an *already installed* effect in SignalRGB.

Export Presets

When you click the Export button, the "Export Properties" modal allows you to decide which properties a user can change in SignalRGB. Properties that are not checked will be "hardcoded" with the value you set in the builder. The preset buttons help you quickly select common configurations:

Expose All / Hardcode All: These buttons provide a quick way to check or uncheck every single property for all objects.
Minimal (User-Friendly): Selects only the most common properties (like a main color gradient and master speed), hiding more complex options from the end-user.
Static (No Animation): Selects all properties *except* for those related to speed and animation, creating a non-moving effect.
Animation / Colors / Geometry / Gradients: These presets select logical groups of properties, allowing you to quickly expose only the controls relevant to that category.

Controls

Community Gallery