Chroma Design Guide
(Note: Click on the keyboard canvas to start live editing the Chroma effect.)

This guide provides code snippets and visual examples to explain how to create interesting animations using the Chroma Animation API. Note: Click the numbered buttons to play the corresponding animation on connected Chroma devices. A library of Chroma animation templates can be found [here]. The Chroma animation format is interchangible between various game engines and also plays on web pages (I.e. this page).

Sample projects that correspond to the animation guide are available for download.
Note: The [ChromaDesignConverter] automates porting JS Chroma Animation JavaScript to C++/C#/UE4/Unity/PC/XBOX.
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.


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.

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.