Chroma Design Guide

This guide provides code snippets and visual examples to explain how to create application and game animations using the Chroma Animation API. Chroma animations can play as game engine content and even play on web pages like this page. The design templates from [ChromaDesign_Template] are available to get started making a Chroma Design.

Getting Started Videos

Web Chroma Editor - Kitty Kraken Capture

Web Chroma Editor - Blend Tool - Trails

Chroma RGB - Gradient Tool

Chroma RGB - Text Tool

C++ Chroma Animation Sample App - Streaming on Windows PC and Cloud

UE4 Chroma Animation Sample App - Streaming on Windows PC and Cloud

Unity Chroma Animation Sample App - Streaming on Windows PC and Cloud

Chroma RGB - Quick Fire Animation

The [Web Chroma Editor] creates Chroma animations and code snippets from several input sources. Designers can create Chroma animations without writing any code. The toolset can use input sources as video, text, camera, web cam, desktop capture, gradients, patterns, images, and blended animations.

[OBS Studio] has a virtual camera feature which allows desktop capture to record Chroma animations from [gameplay] or even from streaming YouTube videos. The web app can generate [embedded code] to embed Chroma animations in source code for [multiple programming languages]. The web app supports [transform tools].

See the documentation on [Streaming Chroma RGB] to learn how to utilize the [Razer Streaming Portal]. Streaming can be controlled from the browser or from the Chroma API. See the [streaming logic flow]. Add the [Razer Streaming Panel] Twitch Extension to control Chroma RGB streaming from your live channel.

Sample Chroma plugins and projects with all the sample effects ported from this Chroma Design Guide are available for download.

Sample Description	Branch (supports ASCII paths)	Branch (supports Unicode paths)
C++ Chroma Sample App	[master]	[SUPPORT_UNICODE]
C++ Chroma Game Loop Sample	[master]	[SUPPORT_UNICODE]
C++ Chroma Game Sample	[master]	[SUPPORT_UNICODE]
C++ Chroma RGB Modding Sample	[master]	[SUPPORT_UNICODE]
C# Chroma Sample App	[master]	[SUPPORT_UNICODE]
C# Chroma Game Loop Sample	[master]	[SUPPORT_UNICODE]
C# Chroma Stream App	[master]
Visual Basic Chroma Sample App	[master]
Visual Basic Chroma Game Loop Sample	[master]
Godot/Lua Chroma Sample App	[master]
HTML5 Chroma Stream App	[master]
Java Chroma Stream App	[master]
ClickTeamFusion Chroma Stream App	[master]
UE4 Chroma Sample Apps	[master]	[SUPPORT_UNICODE]
UE5 Chroma Sample Apps	-	[SUPPORT_UNICODE]
Unity Chroma Sample Apps	[master]	[SUPPORT_UNICODE]

Applications and games can integrate Chroma in two-ways.

Designers can create Chroma Animations using the toolset and add animations as content directly to the game engine.
Developers can use the API to manipulate arrays directly and set Chroma effects through code. The Chroma Game Loop Samples show how to blend several animations at the same time by using arrays.

These are some of the most common methods from the [Chroma API]. The Chroma Editor toolset is built on top of the same Chroma API that developers have access to.

The development cycle tends to shedule Chroma integration at the end of the development cycle. Chroma can be added before release or in an update/patch. Placing Chroma integration at the end shortens the development time by adding Chroma effects to existing game events.

The development time for Chroma integration is typically around 1 week for a single developer. Chroma Designs, code samples, and revisions can be provided by request to speed up the development process.

Some Chroma Design samples are available to review and see what kind of effect ideas are possible.

Chroma Design	Link	Miscellaneous
Amazing Frog	[Chroma Design: Amazing Frog]	-
Roblox	[Chroma Design: Roblox]	[Roblox Sample Chroma Mod]

Animations can be created from sprites using the [Unity Plugin: Chroma Capture Tool]. In this case, a fish sprite was added to a plane in front of the capture camera. While capturing the sprite was translated and rotated to create a fish-like behaviour. Sprites with high contrast like this clown fish are going to be more recognizable on the physical hardware.

Animations can be created from trail renderers using the [Unity Plugin: Chroma Capture Tool]. When trails use textures with grayscale gradients the animation can be used as a template and later changed to any color. With the move tool trails can be puppeted across the screen to create a trail across the keyboard. Individual trails can be used for effects like weapon fire. Multiple trails can be moved to create effects like claws.

The grayscale trail can be colorized at runtime using multiply RGB with min/max threshold.

Animations can be created from particle systems using the [Unity Plugin: Chroma Capture Tool].

The grayscale particles can be colorized at runtime using multiply RGB.

The method 'fadeStartFrames' will fade in the start of an animation to black given the number of frames. The number of frames is relative from the first frame of the animation.


ChromaAnimation.fadeStartFrames(layerName, numberOfFrames);

The method 'fadeEndFrames' will fade out the end of an animation to black given the number of frames. The number of frames is relative from the last frame of the animation.


ChromaAnimation.fadeEndFrames(layerName, numberOfFrames);

The methods 'fadeStartFrames' and 'fadeEndFrames' can be used to blink an animation layer.

The method 'multiplyIntensity' multiplies layer RGB values by a floating point number which can also be used to fade parts of an animation.


ChromaAnimation.multiplyIntensity(animationName, frameId, intensity);

The method 'multiplyIntensity' can the lower the intensity of an existing layer.

Multiply layer intensity by 25%.

The method 'multiplyIntensityRGB' multiplies layer RGB values by the red, green, and blue (0 to 255) values to tint the color of a layer.


ChromaAnimation.multiplyIntensityRGB(animationName, frameId, red, green, blue);

The method 'multiplyIntensityAllFramesRGB' will multiply intensity for red, green, and blue on all frames of the animation.

// Tint all frames in the animation to be cyan

'multiplyIntensityColor' multiplies the intensity using a color. Use 'multiplyIntensityColor' with 'lerpColor' to create color transitions.

The method 'fillThresholdColorsRGB' sets an RGB value for non zero colors that are below a certain threshold.


ChromaAnimation.fillThresholdColorsRGB(animationName, frameId, threshold, red, green, blue);

Turn darker colors green.

Change light and dark colors.

The method 'copyNonZeroAllKeys' copies the non zero colors from one layer to another.


ChromaAnimation.copyNonZeroAllKeys(animationName, sourceAnimationName, targetAnimationName, frameId);

Copy a layer while matching the background color in dark areas.

Add a layer to the background layer.

Subtract a layer from the background layer.

Copy intersecting nonzero colors to the background layer.

Duration Override

The method 'overrideFrameDuration' sets a uniform duration for all frames in the animation. The minimum duration is 0.033 (30 frames per second).

Set the animation playback to 30 FPS. This is the recommended animation playback speed so that visuals playback smoothly.

Reverse the order of the animation frames.

Invert the animation colors.

Duplicate the animation frames and mirror.

Add a pause delay to the animation.

Reducing the number of frames is another way to speed up the animation.

Doubling the number of frames is another way to slow down the animation.

Trim the start of the animation. This eliminates blank frames so that the animation starts faster.

Trim the end of the animation. This eliminates several blank frames so that the animation wraps immediately.

Some animations are a single frame and are used as a shape template. When the animation is used for intersecting operations, the first frame needs to be duplicated to match the animation length used in a copy/add/subtract/fade operation.

Random black and white colors can be used to add variability to an animation.

Threshold can be used to make random keys more sparse.

Threshold can be used to make random keys more sparse and assign a color.

The method 'useIdleAnimation' enables or disables the idle animation mechanism. If the flag is `true`, the idle animation will play when no other animations are playing. If the flag is `false` the idle animation is disabled.

// Enable Idle Animation
ChromaAnimation.useIdleAnimation(EChromaSDKDeviceEnum.DE_ChromaLink, true);
ChromaAnimation.useIdleAnimation(EChromaSDKDeviceEnum.DE_Headset, true);
ChromaAnimation.useIdleAnimation(EChromaSDKDeviceEnum.DE_Keyboard, true);
ChromaAnimation.useIdleAnimation(EChromaSDKDeviceEnum.DE_Keypad, true);
ChromaAnimation.useIdleAnimation(EChromaSDKDeviceEnum.DE_Mouse, true);
ChromaAnimation.useIdleAnimation(EChromaSDKDeviceEnum.DE_Mousepad, true);

// Disable Idle Animation
ChromaAnimation.useIdleAnimation(EChromaSDKDeviceEnum.DE_ChromaLink, false);
ChromaAnimation.useIdleAnimation(EChromaSDKDeviceEnum.DE_Headset, false);
ChromaAnimation.useIdleAnimation(EChromaSDKDeviceEnum.DE_Keyboard, false);
ChromaAnimation.useIdleAnimation(EChromaSDKDeviceEnum.DE_Keypad, false);
ChromaAnimation.useIdleAnimation(EChromaSDKDeviceEnum.DE_Mouse, false);
ChromaAnimation.useIdleAnimation(EChromaSDKDeviceEnum.DE_Mousepad, false);

var flag = true;
ChromaAnimation.useIdleAnimation(EChromaSDKDeviceEnum.DE_Keyboard, flag);

var idleAnimation = '../ChromaCommon/animations/BlackAndWhiteRainbow_Keyboard.chroma';

// set the idle animation
ChromaAnimation.setIdleAnimation(idleAnimation);

Randomly select a key and circle outward from that key over the length of frames.

Randomly select two keys and draw a line from one to the other.

let maxRow = ChromaAnimation.getMaxRow(EChromaSDKDevice2DEnum.DE_Keyboard);
let maxColumn = ChromaAnimation.getMaxColumn(EChromaSDKDevice2DEnum.DE_Keyboard);

// pick first key
let pointAColumn = Math.floor(Math.random() * maxColumn) % 22;
let pointARow = Math.floor(Math.random() * maxRow) % 6;

// pick a different second key
let pointBColumn;
let pointBRow;
do {
  pointBColumn = Math.floor(Math.random() * maxColumn) % 22;
  pointBRow = Math.floor(Math.random() * maxRow) % 6;
} while (pointAColumn == pointBColumn && pointARow == pointBRow);

let color = ChromaAnimation.getRGB(0, 255, 0);

let frames = baseAnimation.Frames;
let frameIndex = 0;
let frame = frames[frameIndex];
let colors = frame.Colors;
for (let i = 0.0; i <= 1.0; i += 0.04) { // 1.0/22.0
  let r = Math.floor(ChromaAnimation.lerp(pointARow, pointBRow, i));
  let c = Math.floor(ChromaAnimation.lerp(pointAColumn, pointBColumn, i));
  if (r >= 0 && r < maxRow &&
    c >= 0 && c < maxColumn) {
    let row = colors[r];
    row[c] = color;
  }
}

Set hotkeys to a color on top of an animation layer.

Set animated hotkeys on top of another animation layer.

Show health bar on the F-Keys.

Show ammo bar on the F-Keys.

Show loading a Chroma Animation from embedded data.

Platform	Link	Screenshot
Web	[ChromaDesignConverter]
Desktop	[ChromaDesignConverter]