Watch on YouTube

ESP32-S3 RGB LED Matrix Wi-Fi + NTP Time Clock Project -1 Basic Clock

ESP32-S3 Internet Clock with 8×8 NeoMatrix (Wi-Fi + NTP Time)

This project turns an ESP32-S3 and an 8×8 RGB NeoMatrix (NeoPixel/WS2812) into a tiny Internet clock. The ESP32 connects to Wi-Fi, synchronizes the local time from an NTP server, then scrolls the time as HH:MM across the 8×8 display.

How it works (high level)

1) ESP32-S3 connects to your router using <WiFi.h>.
2) It syncs time from an NTP server using "time.h" and configTime().
3) The time is formatted as HH:MM and saved into a small text buffer.
4) The NeoMatrix renders the text and scrolls it across the 8×8 panel.

RGB Color

The clock text color is controlled using RGB (Red, Green, Blue) values, where each color channel ranges from 0 to 255 and different combinations create different colors on the NeoMatrix. By adjusting the color_RED, color_GREEN, and color_BLUE variables, you can easily customize the appearance of the clock to any color you like. To quickly find the exact RGB values for a specific color, you can use the online RGB Color Picker Color Picker .

Libraries used

These includes tell you exactly what the sketch depends on:

#include <WiFi.h>
#include "time.h"
#include <Adafruit_GFX.h>
#include <Adafruit_NeoMatrix.h>
#include <Adafruit_NeoPixel.h>

Install Adafruit NeoMatrix using Arduino Library Manager. It will also pull required dependencies such as Adafruit GFX Library and Adafruit NeoPixel.

Important user settings you MUST edit

1) Text color (RGB)

Set your clock text color using 0–255 values:

//set the color of display made of Red, Green and Blue 
unsigned int color_RED = 17;
unsigned int color_GREEN = 43;
unsigned int color_BLUE = 171;

These values are used here:

matrix.setTextColor(matrix.Color(color_RED, color_GREEN, color_BLUE));

Note: If you set all colors to 0 (black), the text becomes invisible. The sketch includes a safety check:

// if user set all colors to 0, the display will be turned off so set it green
if (color_RED == 0 && color_GREEN == 0 && color_BLUE == 0) {
  color_GREEN = 200;
}

This ensures the matrix never looks “dead” due to an invisible color setting.

2) Wi-Fi SSID and password

Replace these with your real Wi-Fi name and password:

const char* WIFI_SSID     = "WiFi";
const char* WIFI_PASSWORD = "passW0rd";

During startup, the ESP32 prints connection progress in Serial Monitor and times out after about 15 seconds (30 retries × 500ms).

3) NTP server

The default NTP server is:

const char* ntpServer = "pool.ntp.org";

You can keep it as-is. If you ever want to use a local server, replace the hostname with your preferred NTP server.

4) Time zone offset and daylight saving offset

These two settings control local time:

// Toronto-ish: UTC-5, plus 1 hour DST
const long  gmtOffset_sec      = -5 * 3600;  // -5 hours
const int   daylightOffset_sec = 3600;       // +1 hour for DST

How to set them:

• gmtOffset_sec = (UTC offset hours) × 3600. Example: UTC-5 → -5*3600, UTC+2 → 2*3600.
• daylightOffset_sec = 0 if you do not want DST adjustment, or 3600 if your region is currently observing DST (+1 hour).

These are applied here:

configTime(gmtOffset_sec, daylightOffset_sec, ntpServer);

Display configuration

Matrix data pin

The data pin is defined here:

#define MATRIX_PIN 14

If your wiring uses a different GPIO, change this number to match.

NeoMatrix layout + color order

Your matrix is initialized like this:

Adafruit_NeoMatrix matrix(8, 8, MATRIX_PIN,
  NEO_MATRIX_TOP    + NEO_MATRIX_LEFT +
  NEO_MATRIX_ROWS   + NEO_MATRIX_PROGRESSIVE,
  NEO_RGB           + NEO_KHZ800);

Two common reasons the display looks “wrong”:

• Rotation / wiring direction: If text appears upside down or mirrored, adjust the NEO_MATRIX_* flags (TOP/BOTTOM, LEFT/RIGHT, ROWS/COLUMNS, PROGRESSIVE/ZIGZAG).
• Color order: This code uses NEO_RGB. Some panels are NEO_GRB. If red/green/blue don’t match, change NEO_RGB to the correct order.

Brightness

Brightness is set in initMatrix():

matrix.setBrightness(40);

Increase for a brighter display, reduce to lower heat and power draw.

How the time is generated as HH:MM

The clock stores the formatted time in a 6-character buffer:

char timeText[6] = "00:00";

Then updateTimeText() reads NTP-synced local time and writes the text:

// Format HH:MM
snprintf(timeText, sizeof(timeText), "%02d:%02d",
         timeinfo.tm_hour,
         timeinfo.tm_min);

This is updated once per second in the main loop.

How scrolling works on an 8×8 display

An 8×8 matrix is too narrow to show HH:MM at once, so the sketch scrolls the text. It draws the time at a changing X position (scrollX), then moves it left by one pixel on each update.

int16_t scrollX = 8;
const uint16_t scrollIntervalMs = 120;

Each scroll step:

matrix.fillScreen(0);
matrix.setCursor(scrollX, 0);
matrix.print(timeText);
matrix.show();
scrollX--;

When the text fully exits the left side, the code resets it to start again from the right edge:

int16_t textWidth = 30;
if (scrollX < -textWidth) {
  scrollX = matrix.width();
}

Serial Monitor output (debugging)

This sketch prints useful messages:

• Wi-Fi connection progress and IP address
• Whether time sync succeeded
• The formatted time string (e.g., Time text: 14:32)

If the display is blank, the Serial Monitor is the first place to check to confirm Wi-Fi and NTP are working.

Project demonstration

After upload and reset:

• ESP32 connects to Wi-Fi
• Syncs time from pool.ntp.org
• Shows OK briefly on the matrix
• Continuously scrolls the current time as HH:MM

Downloads and links

The full code is provided below this article. Parts, tools, and datasheets are also linked below this article.

Images

ESP32 S3 Matrix

ESP32 S3 Matrix pin out

ESP32-S3_RGB_8x8_matrix-3

ESP32-S3_RGB_8x8_matrix1

ESP32-S3_RGB_8x8_matrix-2

ESP32-s3_internet_clock_animation

ESP32 S3 Matrix

ESP32 S3 Matrix pin out

ESP32-S3_RGB_8x8_matrix-3

ESP32-S3_RGB_8x8_matrix1

ESP32-S3_RGB_8x8_matrix-2

ESP32-s3_internet_clock_animation