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

View Full Engine Documentation

Layout Overview

The builder is divided into two main, resizable columns:

• 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 where you can directly manipulate your objects. The Toolbar with alignment, property, and history tools is located just above the canvas.

The Controls Panel (Left)

This is where you manage all the objects and global settings for your effect.

• General Settings: This panel contains properties for your entire effect, such as its Title, Description, and the Global Overrides.
• Add New Object / Polyline: Use the buttons at the bottom to add a new shape or start drawing a new polyline on the canvas.
• Object Panels: Each object gets its own collapsible panel, which contains tabbed sections for different property groups (e.g., Geometry, Fill-Animation, Stroke). You can perform several actions here:
  • Rename: Click the object's name (e.g., "Object 1") to edit it.
  • Reorder: Click and drag the icon to change the rendering order (layers). Objects at the top of the list are drawn last (on top).
  • Lock/Unlock: Use the / button to prevent an object from being accidentally moved or resized on the canvas.
  • Duplicate/Delete: Use the menu button () to access options for duplicating or deleting an object.
• Shape-Specific Settings: The real power of the builder lies in its specialized shapes. When you change an object's Shape property, different settings will appear for shapes like Text, Oscilloscope, Strimer, Tetris, Spawner, and more.
• Strokes: You can add an outline to most shapes by enabling it in the Stroke tab within an object's panel. You can customize its color, thickness, and even apply its own independent animations.

Using the Polyline Shape

The Polyline is a powerful tool for creating custom paths and advanced animations. It allows you to draw any shape you can imagine directly on the canvas.

• Drawing a Polyline:
  1. Click the Add Polyline button to activate the drawing tool.
  2. Click on the canvas to place the starting point (node).
  3. Continue clicking to add more nodes and define your path.
  4. Double-click or press Enter to finish drawing.
• Editing Nodes: After a polyline is created, you can select it and drag its square node handles to adjust the path. Double-click on a line segment to add a new node, or Alt+Click on an existing node to delete it.
• Curve Styles: In the Polyline tab, you can change the Curve Style:
  • straight: Connects nodes with sharp, straight lines.
  • loose-curve: Creates a smooth Bézier curve that is influenced by the nodes.
  • tight-curve: Creates a smooth spline (Catmull-Rom) that passes directly through every node, perfect for defining precise paths.
• Path Animation: In the Object tab, you can enable an animation that travels along your polyline. You can control the animated object's shape, size, speed, and even have multiple objects follow the path with custom spacing.
• Along-Path Gradients: In the Stroke tab, you can set the Stroke Scroll Direction to along-path or along-path-reversed. This makes the gradient color flow seamlessly along the entire length of your custom path, from start to end or vice-versa.

The Canvas & Toolbar (Right Panel)

This is your visual workspace where you can directly manipulate objects using the mouse, keyboard, or the toolbar buttons above the canvas.

• Select: Click an object to select it. Hold Shift or Ctrl while clicking to select multiple objects. Clicking on an empty area will deselect everything.
• Manipulate: With an object selected, you can:
  • Drag to move it.
  • Drag the square handles on its bounding box to resize it.
  • Drag the circular handle at the top to rotate it.
• Toolbar Actions:
  • History: Use the Undo and Redo buttons to step through your recent changes.
  • Copy/Paste Properties: Use to copy property groups (like size, color, animation) from one object and to paste them onto others.
  • Alignment: Align selected objects to the screen edges or center.
  • Matching: With multiple objects selected, match the width, height, or size of the others to the first one you selected.
  • Fit to Canvas: Instantly resize an object to fill the entire canvas area.
• Keyboard Shortcuts:
  • Arrow Keys: Nudge selected objects by a small amount.
  • Shift + Arrow Keys: Move selected objects in larger steps.
  • Delete / Backspace: Delete all selected objects.
  • Ctrl+Z: Undo the last action.
  • Ctrl+Y: Redo the last undone action.
  • Ctrl+C: Copy properties from the selected object.
  • Ctrl+V: Paste copied properties to the selected object(s).
  • Escape: Deselect all objects.

Using Global Overrides

To quickly apply a consistent style across all objects, you can use the Global Overrides found in the General Settings panel. These are located in their own collapsible section.

• The Global Color Palette allows you to set a master Color 1 and Color 2. When enabled, it overrides the individual color settings for every object.
• The Global Color Cycle forces all objects to cycle through the color spectrum. When enabled, it overrides the individual "Cycle Colors" setting on every object and uses the Global Color Cycle Speed slider.

Using Sound Reactivity

You can make your effects react to audio playing in another browser tab. The shapes will respond to the volume and frequencies (bass, mids, highs) of the sound.

1. Click the Start Listening button on the toolbar above the canvas.
2. Your browser will open a screen sharing prompt. Select the Tab option at the top.
3. Choose the browser tab that is playing music or sound.
4. Important: Make sure to check the "Share tab audio" checkbox at the bottom of the prompt before clicking "Share".

Once enabled for an object, you can select a Reactive Property. Basic shapes can Flash, change Size or Rotation, or turn into a Volume Meter. Specialized shapes like the Spawner have their own unique reactive targets.

If no audio is connected, shapes will react to a default preview animation for design purposes. Please note: This feature is a preview tool, and the audio response may differ slightly from the final effect in SignalRGB's native audio engine.

Using Sensor Reactivity

Create animations that react to real-time hardware data like CPU load or temperature. To use this, select an object, go to its Sensor tab, and enable reactivity.

• Sensor Meter: Changes the object into a vertical bar that fills up based on a sensor's current value (from its minimum to maximum). You can also have it display the numeric value as text.
• Time Plot: Turns the object into a real-time line graph showing the recent history of a sensor's value. You can customize the time scale and fill the area under the curve.

Using the Strimer Shape

This shape is designed to simulate the animated lighting effects of PC cable strimers. It features multiple blocks of light moving vertically within columns.

• Animation Style:
  • Bounce / Loop: Blocks move up and down, either rebounding at the edges or wrapping around.
  • Cascade: Creates a continuous "waterfall" of light as blocks spawn sequentially.
  • Audio Meter: Turns the columns into a real-time audio visualizer.
  • Snake: Creates a single "snake" of light that travels in a zig-zag pattern.
• Pulse Effect (Modifier):
  • Pulse Speed: This slider makes the blocks gently fade their brightness in and out, creating a "breathing" effect that can be layered on top of any other animation style.
• Movement Controls:
  • Animation Speed: Controls the speed of block movement, independent of the fill/gradient animation.
  • Direction: Set blocks to move Up, Down, or Random.
  • Easing: Controls the acceleration of the blocks for more dynamic motion.

Using the Spawner Shape

The Spawner is a powerful and versatile particle emitter. You can control both how particles are spawned and what they look like, allowing for effects from simple snowfall to complex digital rain.

Its controls are organized into several tabs:

• Spawner Tab: Controls the emitter's behavior.
  • Emitter Style: Sets the spawning pattern, like an explode from the center, a falling rain, a rising fountain, or a sideways flow.
  • Initial Speed & Initial Speed Variance: Control the starting velocity of particles. Variance adds randomness for a more natural look.
  • Gravity: Applies a constant downward (or upward, if negative) force to particles after they spawn.
  • Other controls let you manage the number of particles, their creation rate, and how long they live.
• Particle Tab: Controls the appearance and special properties of the individual particles.
  • Particle Shape: You can choose from standard shapes like circle or star, or use special types:
    • matrix: Turns particles into falling trails of characters. You can customize the Character Set, the Trail Length, and add a Glow effect. The lead character's color is set by Fill Color 1, while the trail uses Fill Color 2 (for solid fills) or the full gradient for other fill types.
    • random: Each new particle will be a random shape from all other available types.
    • custom: Allows you to use your own SVG path data for the particle shape.
  • Trail Effect (for any shape):
    • You can add a fading trail to any particle type by using the Trail settings.
    • Enable Trail: Toggles the effect on or off.
    • Trail Length: Controls the number of copies in the trail.
    • Leader Color: Sets the color of the main particle, while the trail fades into the spawner's main fill color. This allows you to create effects like a trail of fading stars or circles.
  • Other Properties: You can also control the particle's Size (with randomness) and Rotation Speed (with variance).

Using the Tetris Shape

This shape creates an animation of falling and stacking blocks that fill the object's bounds.

• Drop Physics (Animation Style):
  • Gravity / Linear: Blocks fall one by one with either realistic or constant speed.
  • Gravity-Fade: Blocks fall with gravity and then fade out after settling.
  • Fade-in-Stack: Blocks fade in sequentially from the bottom up, then fade out all at once.
  • Fade-in-Out: Blocks fade in from the bottom, hold for a set duration, and then fade out from the bottom.
• Controls:
  • Drop Speed: Controls the speed of falling or fading blocks.
  • Bounce Factor: For Gravity physics, controls how much blocks bounce on impact.
  • Hold Time: For the Fade-in-Out animation, sets how long the fully stacked blocks remain visible before starting to fade out.

Exporting and Installing Your Effect

When you click the Export button, a dialog will appear with several options. One key option is Minimize Properties for Export. Checking this box will optimize the exported file by only including essential or shape-relevant controls (like colors and speeds) in the SignalRGB UI. All other properties will be "baked in" to the effect as fixed values. This is great for sharing a clean, easy-to-use version of your effect with others.

• 1. Click Download .zip File.
• 2. Find the downloaded `.zip` file and extract its contents into your SignalRGB effects folder, which is typically located at:
  Documents\WhirlwindFX\Effects
• 3. For better organization, it is recommended to place the effect files inside a new subfolder for your effect (e.g., Documents\WhirlwindFX\Effects\MyEffect).
• 4. Restart the SignalRGB application. Your new effect will now appear in the effects list.