SRGB Interactive Effect Builder Declarative Engine Reference

This document provides a complete reference for all configurable properties. The engine is designed to be fully declarative, allowing you to build complex, animated effects by defining <meta> properties in an HTML file's head, with no JavaScript required.

Global Settings

These properties control the entire effect's behavior and are defined without an object prefix (e.g., obj1_).

Property	Label	Type	Description & Values
`enableAnimation`	Enable Animation	`boolean`	A global toggle for all time-based animations, including gradients, rotations, and shape movements.
`enableSound`	Enable Sound Reactivity	`boolean`	A global toggle for all audio-reactive properties on all objects.
Global Color Palette
`enablePalette`	Enable Global Color Palette	`boolean`	If true, overrides the individual `Color 1` and `Color 2` settings for all objects with the global palette colors defined below.
`paletteColor1`	Palette Color 1	`color`	The global color to be used for all `Color 1` properties when the palette is enabled.
`paletteColor2`	Palette Color 2	`color`	The global color to be used for all `Color 2` properties when the palette is enabled.

Core Object Properties

These are the fundamental properties required to define an object's position, size, and basic appearance on the canvas.

Property	Label	Type	Description & Values
`shape`	Shape	`combobox`	Defines the fundamental geometry or behavior of the object, which determines which shape-specific properties are available.
`x`	X Position	`number`	The horizontal coordinate of the object's top-left corner in the canvas coordinate system (`0` is the left edge).
`y`	Y Position	`number`	The vertical coordinate of the object's top-left corner in the canvas coordinate system (`0` is the top edge).
`width`	Width	`number`	The total width of the object's bounding box in pixels.
`height`	Height	`number`	The total height of the object's bounding box in pixels.
`rotation`	Static Rotation	`number`	The base rotation of the object in degrees, where `0` is no rotation. This is overridden by `rotationSpeed`.

Fill, Gradient, & Animation

Controls the object's color, fill style, and how its appearance changes over time.

Property	Label	Type	Description & Values
`gradType`	Fill Type	`combobox`	Determines the fill style. `solid`: A single, solid color using `gradColor1`. `linear`: A linear gradient between `gradColor1` and `gradColor2`. `radial`: A circular gradient between `gradColor1` and `gradColor2`. `alternating`: For multi-part objects, alternates between `gradColor1` and `gradColor2`. `random`: For multi-part objects, randomly assigns either `gradColor1` or `gradColor2`. `rainbow` / `rainbow-radial`: An animated, cycling rainbow gradient.
`gradColor1`	Color 1	`color`	The primary color for solid fills or the starting color for gradients. Can be overridden by the Global Color Palette.
`gradColor2`	Color 2	`color`	The secondary color used as the end point for gradients. Can be overridden by the Global Color Palette.
`cycleColors`	Cycle Colors	`boolean`	If true, smoothly animates `gradColor1` and `gradColor2` through the entire color spectrum (hue wheel).
`cycleSpeed`	Color Cycle Speed	`number`	Controls the speed of hue animation. Only has an effect when `cycleColors` is set to `true`.
`animationSpeed`	Animation Speed	`number`	A master speed control for the object's primary animation, such as gradient scrolling or fire particle movement.
`rotationSpeed`	Rotation Speed	`number`	The speed at which the object continuously rotates. A positive value is clockwise; a negative value is counter-clockwise. Overrides static `rotation`.
`animationMode`	Animation Mode	`combobox`	Determines the behavior of scrolling animations. `loop`: The animation repeats seamlessly in one direction. `bounce`: The animation moves back and forth. `bounce-reversed`: The animation for each part of a grid moves in the opposite direction. `bounce-random`: The animation for each part of a grid moves back and forth in a random order.
`scrollDir`	Scroll Direction	`combobox`	Specifies the direction for `linear` gradients.
`useSharpGradient`	Use Sharp Gradient	`boolean`	If true, creates a hard line between colors in a gradient instead of a smooth blend.
`gradientStop`	Gradient Stop %	`number`	For smooth gradients, the midpoint of the blend. For sharp gradients, the width of the `gradColor1` band. A percentage from `0` to `100`.
`phaseOffset`	Phase Offset	`number`	For multi-part objects (grids, rings, etc.), this staggers the start time of each part's animation, creating a delay or wave effect.

Stroke (Outline)

Defines an optional border for an object. Most shapes support strokes.

Property	Label	Type	Description & Values
`enableStroke`	Enable Stroke	`boolean`	A master switch to render the object's outline.
`strokeWidth`	Stroke Width	`number`	The thickness of the outline in pixels.
`strokeGradType`	Stroke Type	`combobox`	The fill style for the stroke. Supports all the same gradient and animation types as the main object fill.
`strokeGradColor1`	Stroke Color 1	`color`	The primary color for the stroke. Can be overridden by the Global Color Palette.
`strokeGradColor2`	Stroke Color 2	`color`	The secondary color for stroke gradients. Can be overridden by the Global Color Palette.
`strokeCycleColors`	Cycle Stroke Colors	`boolean`	If true, the stroke colors will animate through the hue spectrum, independent of the main fill.
`strokeAnimationSpeed`	Stroke Animation Speed	`number`	Controls the scroll speed of the stroke gradient animation.
`strokeScrollDir`	Stroke Scroll Direction	`combobox`	The direction for animated linear stroke gradients. `right, left, up, down`: Standard directions for most shapes. `along-path`: For Polylines only. The gradient animates from the start of the path to the end. `along-path-reversed`: For Polylines only. The gradient animates from the end of the path to the start.

Audio Reactivity

Allows objects to react dynamically to system audio. The global enableSound property must be enabled.

Property	Label	Type	Description & Values
`enableAudioReactivity`	Enable Sound Reactivity	`boolean`	Toggles audio reactivity on or off for this specific object.
`audioTarget`	Reactive Property	`combobox`	The visual property that will be affected by the audio. For example, `Size` will make the object grow and shrink with the beat. Not all targets work with all shapes.
`audioMetric`	Audio Metric	`combobox`	The audio frequency range the object will listen to (e.g., `bass`, `volume`).
`audioSensitivity`	Sensitivity	`number`	Multiplies the intensity of the audio reaction.
`beatThreshold`	Beat Threshold	`number`	Adjusts the sensitivity of the beat detection algorithm. Higher values require a more pronounced "beat" to trigger a reaction.
`audioSmoothing`	Smoothing	`number`	Smooths the visual response to audio, reducing flickering. Only affects the `Volume Meter` target.

Sensor Reactivity

Allows objects to visualize real-time system sensor data (e.g., CPU Load, Temperature).

Property	Label	Type	Description & Values
`enableSensorReactivity`	Enable Sensor Reactivity	`boolean`	Toggles sensor reactivity on or off for this object.
`sensorTarget`	Reactive Property	`combobox`	The method used to visualize the sensor data. `Sensor Meter` creates a fill bar, while `Time Plot` creates a historical line graph.
`userSensor`	Sensor	`sensor`	A dropdown list of available system sensors to monitor.
`sensorValueSource`	Sensor Value	`combobox`	The specific data point to use from the sensor (its current `value`, historical `min`, or historical `max`).
`timePlotLineThickness`	Line Thickness	`number`	For `Time Plot`, defines the thickness of the graph line.
`timePlotFillArea`	Fill Area	`boolean`	For `Time Plot`, if true, fills the area beneath the graph line with the object's selected fill style.
`sensorMeterShowValue`	Show Value	`boolean`	For `Sensor Meter`, displays the current sensor value as text.
`timePlotAxesStyle`	Axes Style	`combobox`	For `Time Plot`, controls the visibility of the X and Y axes.
`timePlotTimeScale`	Time Scale (Seconds)	`number`	For `Time Plot`, sets the duration displayed across the graph.

Shape Properties

This section provides a complete, all-in-one reference for each shape. Each table lists all applicable general properties followed by the shape's unique properties.

Rectangle

A standard rectangle that can be subdivided into a grid for creating complex, phased animations.

Applicable General Properties: Core, Fill & Animation, Stroke, Audio Reactivity, Sensor Reactivity

Property	Label	Type	Description & Values
`numberOfRows`	Number of Rows	`number`	Divides the rectangle into a specified number of horizontal rows. Range: `1` to `100`.
`numberOfColumns`	Number of Columns	`number`	Divides the rectangle into a specified number of vertical columns. Range: `1` to `100`.

Star

Applicable General Properties: Core, Fill & Animation, Stroke, Audio Reactivity, Sensor Reactivity

Property	Label	Type	Description & Values
`points`	Star Points	`number`	The number of points on the star. Range: `3` to `50`.
`starInnerRadius`	Star Inner Radius %	`number`	Defines the radius of the inner vertices as a percentage of the outer radius, controlling how sharp the points are. Range: `1` to `99`.

Polygon

Applicable General Properties: Core, Fill & Animation, Stroke, Audio Reactivity, Sensor Reactivity

Property	Label	Type	Description & Values
`sides`	Polygon Sides	`number`	The number of equal sides for the polygon (e.g., 3 for a triangle, 8 for an octagon). Range: `3` to `50`.

Ring

A circular shape composed of individual, animatable segments.

Applicable General Properties: Core, Fill & Animation, Stroke, Audio Reactivity, Sensor Reactivity

Property	Label	Type	Description & Values
`innerDiameter`	Inner Diameter	`number`	The diameter of the empty space inside the ring, creating the doughnut shape. Range: `1` to `width-2`.
`numberOfSegments`	Number of Segments	`number`	The total number of individual segments that compose the ring. Range: `1` to `50`.
`angularWidth`	Segment Angle	`number`	The arc length of each individual segment, measured in degrees. Range: `1` to `360`.

Text

Renders text using a built-in pixelated font.

Applicable General Properties: Core, Fill & Animation, Audio Reactivity

Property	Label	Type	Description & Values
`text`	Display Text	`textfield`	The string of text to be rendered.
`fontSize`	Font Size	`number`	Controls the scale of the pixel font. Range: `2` to `100`.
`pixelFont`	Font Style	`combobox`	Selects between the available `small` (3x4) or `large` (5x5) pixel fonts.
`textAlign`	Text Align	`combobox`	Horizontal alignment of the text within its bounding box (`left`, `center`, `right`).
`textAnimation`	Text Animation	`combobox`	Applies an animation effect to the text (`marquee`, `wave`, `typewriter`).
`textAnimationSpeed`	Text Animation Speed	`number`	Controls the speed of the selected text animation. Range: `1` to `100`.
`showTime`	Show System Time	`boolean`	If true, overrides the `text` property to display the current system time.
`showDate`	Show System Date	`boolean`	If true, overrides the `text` property to display the current system date.
`autoWidth`	Auto-Width	`boolean`	If true, the object's `width` property is automatically adjusted to fit the text content.

Fire & Fire-Radial

A particle-based effect that simulates fire. The base shape defines the emission area for the particles.

Applicable General Properties: Core, Fill & Animation, Audio Reactivity

Property	Label	Type	Description & Values
`fireSpread`	Fire Spread %	`number`	For the `fire-radial` shape only. Controls how far particles travel from the center, as a percentage of the shape's radius. Range: `1` to `100`.

Oscilloscope

Generates a continuous, animated waveform.

Applicable General Properties: Core, Fill & Animation, Stroke, Audio Reactivity

Property	Label	Type	Description & Values
`lineWidth`	Line Width	`number`	The thickness of the drawn waveform. Range: `1` to `20`.
`waveType`	Wave Type	`combobox`	The mathematical shape of the wave (e.g., `sine`, `square`).
`frequency`	Frequency	`number`	Controls the number of peaks and troughs visible within the shape's bounds. Range: `1` to `50`.
`pulseDepth`	Pulse Depth %	`number`	Controls the amplitude (height) of the wave. Range: `0` to `100`.
`oscDisplayMode`	Display Mode	`combobox`	The layout of the animation (`linear`, `radial`, `seismic`).
`fillShape`	Fill Shape	`boolean`	If true, fills the area under/inside the wave.
`enableWaveAnimation`	Enable Wave Animation	`boolean`	Toggles the movement of the wave.
`oscAnimationSpeed`	Wave Animation Speed	`number`	Controls the speed of the wave's movement, independent of the fill animation speed. Range: `0` to `100`.
`waveStyle`	Seismic Wave Style	`combobox`	For `seismic` mode, the style of the expanding rings.
`waveCount`	Seismic Wave Count	`number`	For `seismic` mode, the number of concentric rings to display. Range: `1` to `20`.

Audio Visualizer

A powerful shape that visualizes audio frequencies as a bar, line, or area graph.

Applicable General Properties: Core, Fill & Animation

Property	Label	Type	Description & Values
`vizLayout`	Layout	`combobox`	The overall arrangement: `Linear` or `Circular`.
`vizDrawStyle`	Draw Style	`combobox`	How frequencies are rendered: `Bars`, `Line`, or `Area`.
`vizBarCount`	Bar Count	`number`	The number of frequency bands to display. Range: `2` to `200`.
`vizBarSpacing`	Bar Spacing	`number`	The space between each bar. Range: `0` to `20`.
`vizStyle`	Bar Origin	`combobox`	For `Linear` layout, determines if bars grow from the `bottom`, `top`, or expand from the `center`.
`vizSmoothing`	Smoothing	`number`	Applies smoothing to the bar height changes for less jittery movement. Range: `0` to `99`.
`vizInnerRadius`	Inner Radius %	`number`	For `Circular` layout, defines the size of the empty central hole. Range: `0` to `95`.
`vizLineWidth`	Line Width	`number`	For `Line` and `Area` styles, defines the thickness of the graph line. Range: `1` to `20`.
`vizAutoScale`	Auto-Scale Height	`boolean`	If true, the loudest frequency always reaches the maximum height.
`vizMaxBarHeight`	Max Bar Height %	`number`	When `vizAutoScale` is false, this sets a hard limit on bar height. Range: `5` to `100`.
`vizUseSegments`	Use LED Segments	`boolean`	If true, renders bars as discrete, stacked segments.
`vizSegmentCount`	Segment Count	`number`	The number of segments to divide each bar into. Range: `2` to `64`.
`vizSegmentSpacing`	Segment Spacing	`number`	The spacing between each segment in a bar. Range: `0` to `10`.

Tetris

An animation that simulates falling blocks stacking up within the shape's bounds.

Applicable General Properties: Core, Fill & Animation, Audio Reactivity

Property	Label	Type	Description & Values
`tetrisBlockCount`	Block Count	`number`	The number of blocks to drop in a single animation cycle. Range: `1` to `50`.
`tetrisAnimation`	Drop Physics	`combobox`	The physics governing block movement. Values: `linear`, `gravity`, `gravity-fade`, `fade-in-stack`, `fade-in-out`.
`tetrisSpeed`	Drop/Fade-in Speed	`number`	Controls the speed of the animation. Range: `1` to `100`.
`tetrisBounce`	Bounce Factor %	`number`	How much blocks bounce on impact. Range: `0` to `90`. Only affects `gravity` physics.
`tetrisHoldTime`	Hold Time	`number`	For the `fade-in-out` animation, this sets how long the fully stacked blocks remain visible before fading out.

Pixel Art

Renders a static image based on a 2D array of alpha values provided as a JSON string.

Applicable General Properties: Core, Fill & Animation, Audio Reactivity, Sensor Reactivity

Property	Label	Type	Description & Values
`pixelArtData`	Pixel Art Data	`textarea`	A JSON string representing a 2D array. Each number from `0` (transparent) to `1` (opaque) corresponds to a pixel's alpha value. Example: `[[1, 0, 1], [0, 1, 0], [1, 0, 1]]`.

Strimer

A specialized shape that simulates the animated lighting effects of PC cable strimers, featuring multiple columns of moving light blocks.

Applicable General Properties: Core, Fill & Animation

Property	Label	Type	Description & Values
General & Layout
`strimerColumns`	Columns	`number`	The number of vertical columns. Range: `1` to `50`.
`strimerBlockCount`	Block Count	`number`	The number of animated blocks per column. Range: `1` to `100`.
`strimerBlockSize`	Block Size	`number`	The height of each individual light block.
`strimerBlockSpacing`	Block Spacing	`number`	For `Cascade` animation, this sets the vertical distance between blocks.
Animation & Movement
`strimerAnimation`	Animation	`combobox`	The primary animation style for the blocks. Values: `Bounce`, `Loop`, `Cascade`, `Audio Meter`, `Snake`.
`strimerAnimationSpeed`	Animation Speed	`number`	Controls the speed of the block movement, independent of the fill animation speed. Range: `0` to `100`.
`strimerDirection`	Direction	`combobox`	The initial movement direction for blocks in `Bounce` and `Loop` modes. Values: `Up`, `Down`, `Random`.
`strimerEasing`	Easing	`combobox`	Controls the acceleration curve of the block movement for more dynamic motion.
`strimerSnakeDirection`	Snake Direction	`combobox`	For `Snake` animation, sets the path to be vertical (along columns) or horizontal (across rows).
Effects & Modifiers
`strimerPulseSpeed`	Pulse Speed	`number`	A modifier that creates a "breathing" effect by fading blocks in and out. This is layered on top of the primary animation. Set to `0` to disable.
`strimerPulseSync`	Sync Columns	`boolean`	If true, all columns pulse together. If false, they pulse sequentially for a wave-like effect.
`strimerGlitchFrequency`	Glitch Frequency	`number`	Makes blocks occasionally stutter or disappear for a high-tech look. Set to `0` to disable.
Audio Meter Controls
`strimerAudioSensitivity`	Audio Sensitivity	`number`	A general multiplier for the height of the audio bars.
`strimerAudioSmoothing`	Audio Smoothing	`number`	Smooths out the bar movement to prevent flickering.
`strimerBassLevel`	Bass Level	`number`	Multiplier for the bass column(s). `100` is normal.
`strimerTrebleBoost`	Treble Boost	`number`	Multiplier for the treble/volume columns.

Spawner

A powerful particle emitter that generates and animates a stream of other shapes. The Spawner's own fill/stroke properties are applied to each particle it creates.

Applicable General Properties: Core, Fill & Animation, Stroke, Audio Reactivity

Property	Label	Type	Description & Values
Emitter Properties
`spawn_animation`	Emitter Style	`combobox`	The behavior and direction of particle emission. Values: `explode`, `fountain`, `rain`, `flow`.
`spawn_count`	Max Particles	`number`	The maximum number of particles on screen at once.
`spawn_spawnRate`	Spawn Rate	`number`	How many new particles are created per second.
`spawn_lifetime`	Lifetime (s)	`number`	How long each particle lasts, in seconds.
`spawn_speed`	Initial Speed	`number`	The starting speed of newly created particles.
`spawn_speedVariance`	Initial Speed Variance (±)	`number`	Adds randomness to each particle's starting speed.
`spawn_gravity`	Gravity	`number`	A constant downward (or upward, if negative) force applied to particles.
`spawn_spread`	Spread Angle	`number`	The angle (in degrees) for `Explode` or `Fountain` emitters.
Particle Appearance Properties
`spawn_shapeType`	Particle Shape	`combobox`	The geometric shape of the emitted particles. Values: `rectangle`, `circle`, `polygon`, `star`, `sparkle`, `custom`, `matrix`, `random`.
`spawn_size`	Particle Size	`number`	The base size of each particle in pixels.
`spawn_size_randomness`	Size Randomness %	`number`	How much to vary each particle's size from the base size. Range: `0` to `100`.
`spawn_rotationSpeed`	Particle Rotation Speed	`number`	The average rotational speed of each individual particle.
`spawn_rotationVariance`	Rotation Variance (±deg/s)	`number`	Adds randomness to each particle's rotation speed.
`spawn_initialRotation_random`	Random Initial Rotation	`boolean`	If true, each particle starts at a random angle.
`spawn_svg_path`	Custom SVG Path	`textarea`	The SVG `d` attribute path data for the `custom` particle shape. The path should be centered on the (0,0) origin for proper rotation.
Matrix Particle Properties
`spawn_matrixCharSet`	Matrix Character Set	`combobox`	The set of characters to use for the `matrix` particle type.
`spawn_matrixTrailLength`	Matrix Trail Length	`number`	The number of characters in each falling `matrix` trail.
`spawn_matrixEnableGlow`	Enable Character Glow	`boolean`	Adds a glow effect to the `matrix` characters.
`spawn_matrixGlowSize`	Character Glow Size	`number`	The size and intensity of the glow effect.
Generic Trail Properties
`spawn_enableTrail`	Enable Trail	`boolean`	Enables a fading trail behind each particle (any shape except `matrix`).
`spawn_trailLength`	Trail Length	`number`	The number of segments in each particle's trail.
`spawn_leaderColor`	Leader Color	`color`	The color of the lead particle. The trail fades to the spawner's main fill color.
Audio Reactivity
`spawn_audioTarget`	Spawner: Reactive Target	`combobox`	Which property of the spawner will react to sound. Affects `Spawn Rate`, `Initial Speed`, `Particle Size`, etc.