All of the lights

Let's get down to business and code our first app.

First, you need to connect your Spencer to your computer's USB port.

random image
random image

random image

CircuitBlocks should now say "Spencer connected".

random image

If CircuitBlocks didn't recognize your Spencer, please check if the USB cable is plugged in properly and if you are using a working USB port on your computer.

If you still cannot get CircuitBlocks to recognize your Spencer, something possibly went wrong with the driver installation on your computer. Drivers are these little programs that help your computer communicate with Spencer and they sometimes act funny. Reach out to us via email at if you cannot get your computer to recognize your Spencer. 

Let's make Spencer display an animation on its LED display

Find the section called "LED matrix" on the left side of the screen.

This group of blocks has different commands in it that are used for drawing images and on Spencer's LED display (we also call this display the "LED matrix").

random image

Find the block called "Play animation".

random image

Drag and drop the block into the turquoise block that's already in the drawing area. 

Stick the Play animation block under the text saying "Arduino run first".

We want to put the play animation block here so that the animation starts playing only once when the device starts.

random image
Click on the tiny arrow on the Play animation block and a drop-down menu will appear. Here you can find all the GIF animations that are saved on your Spencer's flash memory.

Currently, you cannot add new GIF animations to your Spencer, but we're working on making that easily doable in the next CircuitBlocks update.

On the other hand, you can manipulate the individual pixels of the display, but we'll cover that later on in the tutorial.

Ah yes, back to the tutorial - pick the "heart" animation because I like that one :)

random image

Perfect! Our first ever program is done (that was easy!).

This code that we have written just now is going to play the heart animation on your Spencer when it turns on and the animation is going to be played endlessly. 

Before going further, press the Save button on the top left of the screen and save your program. Name it something creative. 

random image

Alrighty, now find the big red Run button on the top right and press it.

random image

A yellow loading bar will appear on the top of the screen.

random image

Your program is now going through a process called compilation. 

Code compilation (or code compiling) 
 is the transformation from a human-readable form of code (such as the colorful blocks you are looking at) into machine code (a form of code that the computer understands - ones and zeros all squashed together).  

Since this is the first time you are compiling code for your Spencer, it might take a few minutes to compile. 
This is happening because
CircuitBlocks needs to compile all the important core parts of the code needed for your Spencer and save it to your computer. When this compiles for the first time, it will be saved on your computer and all of your next programs will compile much faster (yay!).

random image

If your code was compiled and uploaded successfully, you should see the heart animation playing on your Spencer.

Is everything ok? Great, let's move on.

Something not working? Please press the Send error report on CircuitBlocks' homepage, contact us via email at and provide us with your error report ID.