# Blurry Analog Clock ## Overview https://youtu.be/IsuGVVXcmFA ![](https://cdn-learn.adafruit.com/assets/assets/000/143/026/medium800thumb/led_matrices_ezgif-89a9674ad9965782.jpg?1773690244) Turn your MatrixPortal S3 into a beautiful analog clock with animated backgrounds that change throughout the day. The clock displays hour and minute hands over a flowing gradient background, inspired by [blurry LED art gallery sculptures](https://www.bitforms.art/artwork/diorama-i-long). The background shifts through four palettes — morning, daytime, evening, and nighttime — each with its own color scheme that transitions automatically based on the time of day. A slow wave animation ripples through the gradient, giving it a calming, water-like motion. At nighttime, twinkling yellow stars appear scattered across the dial. A soft glow halo surrounds the clock hands, and plus-shaped hour markers make it easy to read at a glance. The whole display is designed to sit behind a diffuser panel for a blurred, dreamy look — inspired by LED artwork encased in thick resin.   ![](https://cdn-learn.adafruit.com/assets/assets/000/143/001/medium640thumb/led_matrices_bg-loop.jpg?1773677632) ![](https://cdn-learn.adafruit.com/assets/assets/000/143/002/medium640/led_matrices_hero-side-mount.jpg?1773677702) We think this makes a great desk piece or wall-mounted accent clock. It also works as a playful way to help kids learn how to tell time — the colorful backgrounds and animated hands keep it engaging, and the large, simple hour markers make it easy to follow.   ![](https://cdn-learn.adafruit.com/assets/assets/000/143/003/medium640/led_matrices_hero-desk.jpg?1773677810) ![](https://cdn-learn.adafruit.com/assets/assets/000/143/004/medium800/led_matrices_hero-black.jpg?1773677847 ) ![](https://cdn-learn.adafruit.com/assets/assets/000/143/005/medium800/led_matrices_parts.jpg?1773677851 ) ## Parts Featured ### 32x32 RGB LED Matrix Panel - 4mm Pitch [32x32 RGB LED Matrix Panel - 4mm Pitch](https://www.adafruit.com/product/607) Bring a little bit of Times Square into your home with this totally adorable 5 inch square 32 x 32 RGB LED matrix panel. These panels are normally used to make video walls, here in New York we see them on the sides of busses and bus stops, to display animations or short video clips. We thought... In Stock [Buy Now](https://www.adafruit.com/product/607) [Related Guides to the Product](https://learn.adafruit.com/products/607/guides) ![Powered 32x32 RGB LED Matrix Panel - 4mm Pitch. Matrix emits blue-green LEDs.](https://cdn-shop.adafruit.com/640x480/607-07.jpg) Featured ### Adafruit Matrix Portal S3 CircuitPython Powered Internet Display [Adafruit Matrix Portal S3 CircuitPython Powered Internet Display](https://www.adafruit.com/product/5778) Folks love our [wide selection of RGB matrices](https://www.adafruit.com/category/327) and accessories for making custom colorful LED displays... and our RGB Matrix Shields and FeatherWings can be quickly soldered together to make the wiring much easier. But what if we made it... Out of Stock [Buy Now](https://www.adafruit.com/product/5778) [Related Guides to the Product](https://learn.adafruit.com/products/5778/guides) ![Video of Adafruit Matrix Portal S3 linked up to a matrix displaying the "Adafruit Matrix Portal" in white letters and red, green and blue circles jumping around. ](https://cdn-shop.adafruit.com/product-videos/640x480/5778-06.jpg) Featured ### 5V 2A Switching Power Supply w/ USB-A Connector [5V 2A Switching Power Supply w/ USB-A Connector](https://www.adafruit.com/product/1994) Our 5V 2A USB power adapter is the perfect choice for powering single-board computers like Raspberry Pi, BeagleBone, or anything else that's power-hungry! This adapter was specifically designed to provide 5.25V, not 5V, but we still call it a 5V USB adapter. We did this on purpose to... In Stock [Buy Now](https://www.adafruit.com/product/1994) [Related Guides to the Product](https://learn.adafruit.com/products/1994/guides) ![5V 2A Switching Power Supply with USB-A Connector](https://cdn-shop.adafruit.com/640x480/1994-01.jpg) Featured ### Pink and Purple Woven USB A to USB C Cable - 1 meter long [Pink and Purple Woven USB A to USB C Cable - 1 meter long](https://www.adafruit.com/product/5153) This cable is not only super-fashionable, with a woven pink and purple Blinka-like pattern, it's also made for USB C for our modernized breakout boards, Feathers, and more.  [If you want something just like it but for Micro B, we...](https://www.adafruit.com/product/4111) Out of Stock [Buy Now](https://www.adafruit.com/product/5153) [Related Guides to the Product](https://learn.adafruit.com/products/5153/guides) ![Angled shot of coiled pink and purple USB cable with USB A and USB C connectors.](https://cdn-shop.adafruit.com/640x480/5153-02.jpg) ### Part: Grey Translucent PLA quantity: 1 Grey Translucent PLA [Grey Translucent PLA](https://amzn.to/4btUgZh) ### Part: M3X6mm Screws quantity: 5 M3X6mm Screws ### Part: M2.5X6mm Screws quantity: 5 M2.5X6mm Screws ### Part: M2.5X10mm Screws quantity: 1 M2.5X10mm Screws # Blurry Analog Clock ## Circuit Diagram This provides a visual reference for wiring of the components.  ![](https://cdn-learn.adafruit.com/assets/assets/000/143/025/medium800/led_matrices_idc-copnnect.jpg?1773689373 ) The Matrix Portal is connected to the Matrix Display through the included IDC cable. The **IDC** cable plugs into the **JIN HUB75** port on the display. The other end plugs into the socket header on top of the MatrixPortal. (The Matrix Portal mounts to the printed plate to position the board so the buttons can be pressed from the side of the display.) ## Power The power cable plugs into the **VCC** and **GND** header pins, where the clip can grip to the nubs next to the pins. Use the included machine screws to fasten to the **red** wire to the **5V** terminal The **black** wire to the **GND** terminals on the Matrix Portal. # Blurry Analog Clock ## Install CircuitPython [CircuitPython](https://github.com/adafruit/circuitpython) is a derivative of [MicroPython](https://micropython.org) designed to simplify experimentation and education on low-cost microcontrollers. It makes it easier than ever to get prototyping by requiring no upfront desktop software downloads. Simply copy and edit files on the **CIRCUITPY** drive to iterate. ## Set up CircuitPython Quick Start! Follow this quick step-by-step for super-fast Python power :) Info: [Download the latest version of CircuitPython for this board via circuitpython.org](https://circuitpython.org/board/adafruit_matrixportal_s3/) ## Further Information For more detailed info on installing CircuitPython, check out [Installing CircuitPython](https://learn.adafruit.com/welcome-to-circuitpython/installing-circuitpython). **Click the link above and download the latest UF2 file.** Download and save it to your desktop (or wherever is handy). ![led_matrices_Save_to_Desktop.png](https://cdn-learn.adafruit.com/assets/assets/000/095/075/medium640/led_matrices_Save_to_Desktop.png?1601050695) Plug your MatrixPortal S3 into your computer using a known-good USB cable. **A lot of people end up using charge-only USB cables and it is very frustrating! So make sure you have a USB cable you know is good for data sync.** Click the **Reset** button (indicated by the green arrow) on your board. When you see the NeoPixel RGB LED (indicated by the magenta arrow) turn purple, press it again. At that point, the NeoPixel should turn green. If it turns red, check the USB cable, try another USB port, etc. If double-clicking doesn't work the first time, try again. Sometimes it can take a few tries to get the rhythm right! ![led_matrices_Buttons.jpg](https://cdn-learn.adafruit.com/assets/assets/000/126/017/medium640/led_matrices_Buttons.jpg?1699492993) Info: You will see a new disk drive appear called **MATRXS3BOOT**. Drag the **adafruit\_circuitpython\_etc.uf2** file over to **MATRXS3BOOT****.** ![led_matrices_matrix.png](https://cdn-learn.adafruit.com/assets/assets/000/126/018/medium640/led_matrices_matrix.png?1699493436) The LED will flash. Then, the **MATRXS3BOOT**  drive will disappear and a new disk drive called **CIRCUITPY** will appear. That's it, you're done! :) ![led_matrices_CircuitPy.png](https://cdn-learn.adafruit.com/assets/assets/000/122/618/medium640/led_matrices_CircuitPy.png?1689369656) # Blurry Analog Clock ## Create Your settings.toml File CircuitPython works with WiFi-capable boards to enable you to make projects that have network connectivity. This means working with various passwords and API keys. As of [CircuitPython 8](https://circuitpython.org/downloads), there is support for a  **settings.toml**  file. This is a file that is stored on your  **CIRCUITPY** drive that contains all of your secret network information, such as your WiFi SSID and SSID password. It is designed to separate your sensitive information from your  **code.py**  file so you are able to share your code without sharing your credentials. Warning: Your settings.toml file should be stored in the main directory of your **CIRCUITPY** drive. It should not be in a folder. ### WiFi Credentials The most minimal  **settings.toml**  file must contain your WiFi SSID and password, as that is the minimum required to connect to WiFi and sync the clock via NTP. Copy this example, paste it into your  **settings.toml** , and update the values with your network credentials. ```python CIRCUITPY_WIFI_SSID = "your_wifi_ssid" CIRCUITPY_WIFI_PASSWORD = "your_wifi_password" ``` - `CIRCUITPY_WIFI_SSID` — Your WiFi network name - `CIRCUITPY_WIFI_PASSWORD` — Your WiFi password If these values are missing or blank, the clock will skip WiFi and enter the manual time-set mode on boot ### Timezone and Daylight Saving Time The clock uses your standard UTC offset along with automatic US Daylight Saving Time computation to keep the time accurate year-round. Add these lines to your  **settings.toml**  file. ```python TZ_STD_OFFSET = "-5" DST_AUTO = "true" ``` - `TZ_STD_OFFSET` — Your standard UTC offset without daylight savings time (DST) applied. Common US values: `-5` for Eastern, `-6` for Central, `-7` for Mountain, `-8` for Pacific. Use `0` for GMT or `+1` for CET. - `DST_AUTO` — Set to `"true"` to automatically add +1 hour during US DST (second Sunday in March through first Sunday in November in much of the US). Set to `"false"` for non-US timezones or locations that do not observe DST. ### Display Rotation The display can be rotated to accommodate different mounting orientations. This sets the default rotation on boot. ```python DISPLAY_ROTATION = "90" ``` - `DISPLAY_ROTATION` — The rotation angle in degrees. Accepted values are `0`, `90`, `180`, and `270`. The rotation determines which direction the USB cable points when the clock is mounted. - `0` — USB cable points left - `90` — USB cable points down (recommended for wall mounting) - `180` — USB cable points right - `270` — USB cable points up You can also cycle through rotations at run time with a long press on the UP button. ### Complete settings.toml File Here is the complete  **settings.toml**  file with all available options. Copy this into the root of your  **CIRCUITPY**  drive and update the values for your setup. ```python CIRCUITPY_WIFI_SSID = "your_wifi_ssid" CIRCUITPY_WIFI_PASSWORD = "your_wifi_password" TZ_STD_OFFSET = "-5" DST_AUTO = "true" DISPLAY_ROTATION = "90" ``` ### settings.toml Tips All values in the  **settings.toml**  file must be enclosed in double quotes. This includes numeric values like `TZ_STD_OFFSET` and `DISPLAY_ROTATION`. The code converts them to the appropriate type internally. If you run into connectivity issues, verify that the values in your **settings.toml** file match the variable names expected in **code.py**. The required names are: `CIRCUITPY_WIFI_SSID`, `CIRCUITPY_WIFI_PASSWORD`, `TZ_STD_OFFSET`, `DST_AUTO`, and `DISPLAY_ROTATION`. You can leave out the WiFi credentials entirely to use the clock in offline mode with the manual time-set feature. The timezone and rotation settings still apply in offline mode if present. # Blurry Analog Clock ## Code # Code the Clock Once you've finished setting up your MatrixPortal S3 with CircuitPython, you can access the code and necessary libraries by downloading the Project Bundle. To do this, click on the  **Download Project Bundle**  button in the window below. It will download to your computer as a zipped folder. ![](https://cdn-learn.adafruit.com/assets/assets/000/143/009/medium640/led_matrices_cp-code.jpg?1773681013) https://github.com/adafruit/Adafruit_Learning_System_Guides/blob/main/MatrixPortal_S3_Analog_Clock/code.py Copy  **code.py**  to the root of your  **CIRCUITPY**  drive. Then, copy the required library files from the bundle's  **lib**  folder to the  **lib**  folder on your  **CIRCUITPY**  drive. ![](https://cdn-learn.adafruit.com/assets/assets/000/143/010/medium800/led_matrices_lib.jpg?1773686071 ) The only library required is  **adafruit\_ntp.mpy**. This is used for syncing time over WiFi via NTP. ### How It Works The code draws an analog clock face on the 32x32 RGB LED matrix using two display layers. A background layer handles the gradient and wave animation. A foreground layer with transparency handles the clock hands, hour markers, and stars. Both layers are composited together every frame and pushed to the display. ### Clock Geometry ```python WIDTH = 32 HEIGHT = 32 CENTER_X = 16 CENTER_Y = 16 CLOCK_RADIUS = 14 MINUTE_HAND_LEN = 11 HOUR_HAND_LEN = 7 ``` These values define the clock face layout on the 32x32 pixel grid. The center point is at pixel (16, 16). The hour markers sit at a radius of 14 pixels from center. The minute hand extends 11 pixels and the hour hand 7 pixels. - `CENTER_X` / `CENTER_Y` — Shift the clock face position if your panel has an offset - `CLOCK_RADIUS` — How far the hour markers sit from center - `MINUTE_HAND_LEN` / `HOUR_HAND_LEN` — Length of each hand in pixels. Keep the minute hand shorter than the radius to leave a gap between the hand tip and the markers ### Time Periods ```python SYNC_INTERVAL = 3600 MORNING_HOUR = 6 DAY_HOUR = 12 EVENING_HOUR = 17 NIGHT_HOUR = 20 ``` The background gradient changes automatically based on the current hour. Four time-of-day periods are defined using 24-hour boundaries. The NTP time re-syncs once per hour by default. - `MORNING_HOUR` — Hour when the morning palette begins (default 6 AM) - `DAY_HOUR` — Hour when the daytime palette begins (default 12 PM) - `EVENING_HOUR` — Hour when the evening palette begins (default 5 PM) - `NIGHT_HOUR` — Hour when the nighttime palette begins (default 8 PM) - `SYNC_INTERVAL` — How often to re-sync with NTP in seconds ### Wave Animation ```python WAVE_SPEED = 0.9 WAVE_SPEED_FAST = 1.8 WAVE_AMP = 2.5 WAVE_LEN_X = 0.22 WAVE_LEN_Y = 0.15 ``` The background gradient has a slow, calming wave animation that displaces the gradient colors vertically. Two overlapping sine waves create an organic, water-like ripple effect. A short press on the UP button toggles between the calm and fast speeds at runtime. - `WAVE_SPEED` — Default wave speed in radians per second (calm mode) - `WAVE_SPEED_FAST` — Fast wave speed, toggled with UP button - `WAVE_AMP` — Maximum row displacement in pixels. Higher values create more dramatic waves - `WAVE_LEN_X` — Horizontal frequency of the wave. Lower values create wider, gentler curves - `WAVE_LEN_Y` — Vertical frequency of the secondary wave. Adds organic irregularity ### Color Palettes ```python GRAD_MORNING = ( (0x73, 0x61, 0xB5), (0xF2, 0xBC, 0x42), (0x5D, 0x6A, 0x2F) ) GRAD_DAY = ( (0x31, 0x6B, 0xB4), (0xC4, 0xDC, 0xF4), (0xD7, 0xB9, 0x96) ) GRAD_EVENING = ( (0x63, 0x9B, 0xAC), (0xB9, 0x65, 0x65), (0x7C, 0xA0, 0xD2) ) GRAD_NIGHT = ( (0xCD, 0x41, 0x7E), (0x64, 0x29, 0x69), (0x2F, 0x6E, 0x99) ) ``` Each time period has a three-stop gradient that flows from top to bottom of the display. The colors are inspired by the Florida Arts License Plate. Each tuple contains three RGB color values: the top color, the middle color, and the bottom color. - First tuple — Top of the display - Second tuple — Middle of the display - Third tuple — Bottom of the display The gradient is built with 32 steps (one per row) and blends smoothly between the three stops. ### Hand and Marker Colors ```python HAND_MORNING = 0x00C6FF HAND_DAY = 0xDD5500 HAND_EVENING = 0xEAFF00 HAND_NIGHT = 0xFFDD00 MARKER_MORNING = 0x00C6FF MARKER_DAY = 0xDD5500 MARKER_EVENING = 0xEAFF00 MARKER_NIGHT = 0xFFDD00 ``` Each time period has its own hand and marker color, chosen for contrast against the background gradient. The hand color is also used for the center pivot dot and the glow halo around the hands. The glow is automatically computed at 30% of the hand brightness. - `HAND_*` — Color of the hour and minute hands for each period. Use hex RGB values like `0xFF0000` for red - `MARKER_*` — Color of the 12 hour markers (the plus-shaped dots around the dial) ### Stars ```python STARS = [ (3, 3, 0.0), (27, 5, 0.8), (2, 24, 1.5), (28, 27, 2.3), (11, 2, 3.0), (22, 29, 3.8), (8, 10, 4.2), (24, 12, 5.0), (9, 22, 5.7), (23, 21, 0.4), ] ``` Stars appear only during the nighttime period. Each entry is an x position, y position, and a phase offset that controls the twinkle timing. The stars fade in and out using a slow sine wave, creating a gentle twinkling effect in yellow. - First value — X pixel position (0 to 31) - Second value — Y pixel position (0 to 31) - Third value — Phase offset in radians. Different values make each star twinkle at a different time You can add, remove, or reposition stars. Avoid placing them within the clock radius where the hands sweep. ### Radial Glow ```python BG_MULTS = (0.75, 0.90, 1.10, 1.35) GLOW_RADIUS = 16.0 ``` The background has a radial vignette effect that makes the center of the display brighter and the edges dimmer. This is achieved by using a 128-entry palette with four brightness tiers. A pre-computed glow map assigns each pixel to a tier based on its distance from center. - `BG_MULTS` — Brightness multipliers for the four tiers, from edge to center. The default goes from 75% of the base gradient color at the edges to 135% at the center. Each channel is clamped to 255 so no pixel exceeds the maximum LED output - `GLOW_RADIUS` — How far the center glow extends in pixels. At 16.0 it covers nearly the entire 32x32 panel ```python TZ_STD_OFFSET = int(os.getenv("TZ_STD_OFFSET") or "-5") DST_AUTO = (os.getenv("DST_AUTO") or "true").lower() == "true" ``` US Daylight Saving Time is computed automatically from the date. The code calculates the second Sunday in March and the first Sunday in November to determine if DST is currently active. If so, it adds one hour to the standard UTC offset. This is recomputed on every hourly NTP re-sync, so if the clock is running across a DST transition, it will pick up the change within the hour. These values are read from your  **settings.toml**  file. See the Create Your settings.toml File page for details. ### Display Setup ```python rgb_matrix = rgbmatrix.RGBMatrix( width=WIDTH, height=HEIGHT, bit_depth=2, ... doublebuffer=True, ) ``` The matrix is initialized at `bit_depth=2` with double buffering. The low bit depth provides a fast scan cycle that eliminates visible flicker on camera and in person. Double buffering prevents tearing during frame updates. The display uses manual refresh so the entire frame is drawn before being pushed to the panel. ### WiFi and NTP On boot, the code checks for WiFi credentials in  **settings.toml**. If found, it connects to WiFi, syncs the time via Network Time Protocol (NTP), and computes the DST offset from the date. If WiFi is not available or the connection fails, the display shows a message and enters a manual time-set mode. In the manual time-set mode, the UP button increments the blinking value, the DOWN button toggles between hours and minutes, and a long press on either button confirms the time. ### Button Controls During normal clock operation, the two buttons on the MatrixPortal S3 control different features. The  **UP button**  has two actions. A short press toggles the wave animation speed between calm and fast. A long press (1.5 seconds) cycles the display rotation through 0, 90, 180, and 270 degrees. The  **DOWN button**  cycles through the four background palettes for demoing or tweaking colors. After cycling through morning, day, evening, and night, one more press returns to automatic time-based mode. ### Drawing the Clock Face Each frame, the code performs these steps in order. 1. Update the background bitmap with the wave animation and radial glow 2. Clear the foreground bitmap to transparent 3. Draw the 12 hour markers as plus-shaped crosses 4. Draw twinkling stars if in nighttime mode 5. Draw the glow halos for both hands 6. Draw the minute hand (single pixel width) on top of the glow 7. Draw the hour hand (three pixel width) on top of the glow 8. Draw the center pivot dot 9. Push the completed frame to the display The frame loop runs at approximately 20 frames per second with a 0.05 second sleep between frames. # Blurry Analog Clock ## 3D Printing 3MF files for 3D printing are oriented and ready to print on FDM machines using PLA filament. Original design source files may be downloaded using the links below. ![](https://cdn-learn.adafruit.com/assets/assets/000/143/006/medium640/led_matrices_parts-3d.jpg?1773680507) [Edit Design](https://a360.co/47QCRsv) [Matrix Clock Design.3mf](https://cdn-learn.adafruit.com/assets/assets/000/143/022/original/matrix-clock-design.3mf?1773687985) Info: The dropdown on the Fusion 360 site allows you to pick your preferred 3D file format like STEP, STL, etc. ### Slice with settings for PLA material The parts were sliced using BambuStudio using the slice settings below. - PLA filament 220c extruder - 0.2 layer height - 10% gyroid infill - 200mm/s print speed - Tree Supports - 60 C heated bed ![](https://cdn-learn.adafruit.com/assets/assets/000/143/007/medium640/led_matrices_slice.jpg?1773680845) ## Design Source Files The project assembly was designed in Fusion 360. Once opened in Fusion 360, It can be exported in different formats like STEP, STL and more. Electronic components like Adafruit's boards, displays, connectors and more can be downloaded from the [Adafruit CAD parts GitHub Repo](https://github.com/adafruit/Adafruit_CAD_Parts/) ![](https://cdn-learn.adafruit.com/assets/assets/000/143/008/medium640/led_matrices_cad.jpg?1773680868) # Blurry Analog Clock ## Assembly Shorten the included power cable so it will reach from the Matrix Portal to the power input once connected without too much excess wire, as shown below a few steps down. You can also remove one of the plastic header ends and wires from the branch point, since we only need one set of connections. ![](https://cdn-learn.adafruit.com/assets/assets/000/143/011/medium640/led_matrices_power-shorten.jpg?1773686633) The printed brackets and wall extrusions mount to the display with M3 screws. ![](https://cdn-learn.adafruit.com/assets/assets/000/143/012/medium640/led_matrices_bracket-fasten.jpg?1773686707) The Matrix Portal fastens on top of a printed plate that orients the board so the buttons can be pressed from the side of the display. ![](https://cdn-learn.adafruit.com/assets/assets/000/143/014/medium640/led_matrices_matrixportal-plate.jpg?1773687264) ![](https://cdn-learn.adafruit.com/assets/assets/000/143/015/medium640/led_matrices_matrixportal-mount.jpg?1773687324) The power cable plugs into the VCC and GND header pins, where the clip can grip to the nubs next to the pins. ![](https://cdn-learn.adafruit.com/assets/assets/000/143/016/medium640/led_matrices_power-connect.jpg?1773687418) Use the included machine screws to fasten to the red wire to the 5V terminal and the black wire to the GND terminal on the Matrix Portal. ![](https://cdn-learn.adafruit.com/assets/assets/000/143/019/medium640/led_matrices_idc-copnnect.jpg?1773687511) The printed diffuser has nubs on two of the sides that align to the two slots on the side of the display. Press fit the diffuser one side at a time. You can use the two extruded wall mounts to help remove the diffuser if needed. Now we can use a USB-C cable to power it up and mount it on a wall or set it on a desk. ![](https://cdn-learn.adafruit.com/assets/assets/000/143/020/medium640/led_matrices_diffuser-nubs.jpg?1773687642) ![](https://cdn-learn.adafruit.com/assets/assets/000/143/021/medium640/led_matrices_back-mounted.jpg?1773687832) # Blurry Analog Clock ## Usage Once the clock is assembled and powered on, it will either sync time automatically over WiFi or enter the manual time-set mode depending on your  **settings.toml**  configuration. ### Boot Sequence On power up, the display shows  **WIFI ...**  while the MatrixPortal S3 connects to your network and syncs the time via NTP. The entire boot process takes a few seconds. Once the time is set, the clock face appears immediately. If no WiFi credentials are found in  **settings.toml** , the display shows  **NO WIFI IN TOML**  for two seconds and then enters the manual time-set screen. If credentials are present but the connection fails, the display shows  **WIFI ERROR**  before falling back to manual mode. ![](https://cdn-learn.adafruit.com/assets/assets/000/143/023/medium640/led_matrices_manual-set.jpg?1773688257) ### Manual Time Set The manual time-set screen displays  **SET**  at the top with  **HH:MM**  in the center. The active field blinks to indicate which value you are editing. Hours are edited first. - **UP button (short press)** — Increments the blinking value. Hours wrap from 23 back to 0. Minutes wrap from 59 back to 0. - **DOWN button (short press)** — Toggles between editing hours and minutes. You can switch back and forth as many times as needed to get both values right. - **Long press either button (1.5 seconds)** — Confirms the displayed time and starts the clock. The bottom of the screen shows  **UP**  and  **DOWN**  as button hints. ### Time-of-Day Backgrounds The background gradient transitions automatically based on the current hour. Each period has its own color palette with matching hand and marker colors. - **Morning (6 AM to 12 PM)** — Purple to gold to olive green gradient with cyan hands - **Daytime (12 PM to 5 PM)** — Blue to pale blue to sandy tan gradient with rich orange hands - **Evening (5 PM to 8 PM)** — Teal to salmon to periwinkle gradient with yellow-green hands - **Night (8 PM to 6 AM)** — Pink to purple to blue gradient with yellow hands and twinkling yellow stars The transition happens instantly when the clock crosses a period boundary. There is no gradual blend between periods. ![](https://cdn-learn.adafruit.com/assets/assets/000/143/024/medium640thumb/led_matrices_bg-loop.jpg?1773688358) ### Wave Animation The background gradient has a continuous wave animation that gently displaces the colors up and down across the display. Two overlapping sine waves at different speeds and angles create an organic, water-like ripple. Behind the diffuser, this creates a soft, calming motion. The default wave speed is set to a calm pace. A short press on the UP button toggles to a faster, more energetic wave. Press again to return to calm. ### Radial Glow The center of the display is brighter than the edges. This radial vignette effect is built into the background gradient with four brightness tiers that fade from 135% of the base gradient color at the center down to 75% at the edges. No pixel ever exceeds the maximum LED brightness — the percentages are relative to the gradient color, not the hardware limit. Behind the diffuser, the tiers blend into a smooth glow. ### Clock Hands The minute hand is drawn as a single pixel line. The hour hand is drawn as a three pixel wide line to make it easy to tell the two apart. Both hands have a soft glow halo that is drawn behind them at 30% of the hand color. Behind the diffuser, the glow creates a smooth brightness ramp from the background into the hand color. A small dot at the center marks the pivot point where the hands meet. ### Hour Markers All twelve hour positions are marked with plus-shaped crosses. Each cross is five pixels: one in the center and one extending in each cardinal direction. The markers use the same color as the clock hands for the current time period. ### Nighttime Stars During the nighttime period, ten yellow stars appear scattered across the clock face. Each star twinkles independently using a slow sine wave that fades the brightness up and down. The stars are positioned in the corners and inner areas of the dial, away from the hand sweep paths. ### Display Rotation The display can be rotated to match your mounting orientation. The default rotation is 90 degrees, which positions the USB cable pointing straight down for wall mounting. A long press on the UP button (hold for 1.5 seconds) cycles through the four rotations at runtime. The rotation applies instantly. The serial console prints the current angle each time you cycle. - **0 degrees**  — USB cable points left - **90 degrees**  — USB cable points down - **180 degrees**  — USB cable points right - **270 degrees**  — USB cable points up You can also set the default rotation in  **settings.toml**  with the `DISPLAY_ROTATION` value so it boots into your preferred orientation. ### Background Demo Mode A short press on the DOWN button cycles through the four background palettes regardless of the current time. This is useful for demoing all four looks or for tweaking colors in a well-lit environment. The cycle order is morning, daytime, evening, nighttime. One more press after nighttime returns to automatic time-based mode. The serial console prints the current mode each time you cycle. ### Daylight Saving Time The clock automatically adjusts for US Daylight Saving Time. On boot, it syncs the time with the standard UTC offset, reads the date, and checks whether the current date falls between the second Sunday in March and the first Sunday in November. If so, it adds one hour to the offset and re-syncs. The DST check also runs on every hourly NTP re-sync. If the clock is running continuously across a DST transition, it will pick up the change within one hour. For locations outside the US or that do not observe DST, set `DST_AUTO` to `"false"` in  **settings.toml**  and use the correct fixed offset in `TZ_STD_OFFSET`. ### Button Quick Reference During normal clock operation: - **UP short press**  — Toggle wave speed (calm / fast) - **UP long press (1.5s)** — Cycle display rotation - **DOWN short press**  — Cycle background palettes (morning, day, evening, night, auto) During manual time set: - **UP short press**  — Increment the blinking value - **DOWN short press**  — Toggle between hours and minutes - **Long press either button (1.5s)** — Confirm time and start clock ## Guide Products ### 32x32 RGB LED Matrix Panel - 4mm Pitch [32x32 RGB LED Matrix Panel - 4mm Pitch](https://www.adafruit.com/product/607) Bring a little bit of Times Square into your home with this totally adorable 5 inch square 32 x 32 RGB LED matrix panel. These panels are normally used to make video walls, here in New York we see them on the sides of busses and bus stops, to display animations or short video clips. We thought... In Stock [Buy Now](https://www.adafruit.com/product/607) [Related Guides to the Product](https://learn.adafruit.com/products/607/guides) ### Adafruit Matrix Portal S3 CircuitPython Powered Internet Display [Adafruit Matrix Portal S3 CircuitPython Powered Internet Display](https://www.adafruit.com/product/5778) Folks love our [wide selection of RGB matrices](https://www.adafruit.com/category/327) and accessories for making custom colorful LED displays... and our RGB Matrix Shields and FeatherWings can be quickly soldered together to make the wiring much easier. But what if we made it... Out of Stock [Buy Now](https://www.adafruit.com/product/5778) [Related Guides to the Product](https://learn.adafruit.com/products/5778/guides) ### 5V 2A Switching Power Supply w/ USB-A Connector [5V 2A Switching Power Supply w/ USB-A Connector](https://www.adafruit.com/product/1994) Our 5V 2A USB power adapter is the perfect choice for powering single-board computers like Raspberry Pi, BeagleBone, or anything else that's power-hungry! This adapter was specifically designed to provide 5.25V, not 5V, but we still call it a 5V USB adapter. We did this on purpose to... In Stock [Buy Now](https://www.adafruit.com/product/1994) [Related Guides to the Product](https://learn.adafruit.com/products/1994/guides) ### Pink and Purple Woven USB A to USB C Cable - 1 meter long [Pink and Purple Woven USB A to USB C Cable - 1 meter long](https://www.adafruit.com/product/5153) This cable is not only super-fashionable, with a woven pink and purple Blinka-like pattern, it's also made for USB C for our modernized breakout boards, Feathers, and more.  [If you want something just like it but for Micro B, we...](https://www.adafruit.com/product/4111) Out of Stock [Buy Now](https://www.adafruit.com/product/5153) [Related Guides to the Product](https://learn.adafruit.com/products/5153/guides) ## Related Guides - [Adafruit MatrixPortal S3](https://learn.adafruit.com/adafruit-matrixportal-s3.md) - [LED Matrix Sports Scoreboard](https://learn.adafruit.com/led-matrix-sports-scoreboard.md) - [Pico Bootloader Retro Console](https://learn.adafruit.com/pico-bootloader-retro-console.md) - [MIDI for Makers](https://learn.adafruit.com/midi-for-makers.md) - [Driving TM1814 addressable LEDs](https://learn.adafruit.com/driving-tm1814-addressable-leds.md) - [Qualia S3 Fireplace](https://learn.adafruit.com/qualia-s3-fireplace.md) - [NAU7802 Pet Food Scale](https://learn.adafruit.com/nau7802-pet-food-scale.md) - [World Clock](https://learn.adafruit.com/world-clock.md) - [Sound Reactive Sunflower Baby Crib Mobile with Bluetooth Control](https://learn.adafruit.com/sound-reactive-sunflower-baby-crib-mobile-with-bluetooth-control.md) - [Circle of Fifths Euclidean Synth with synthio and CircuitPython](https://learn.adafruit.com/circle-of-fifths-euclidean-synth-with-synthio-and-circuitpython.md) - [USB C Dock](https://learn.adafruit.com/usb-c-dock.md) - [AS5600 Super Smooth Rotary Encoder](https://learn.adafruit.com/as5600-smooth-rotary-encoder.md) - [Glider Paper Airplane Controller](https://learn.adafruit.com/glider-paper-airplane-controller.md) - [PyLeap ESP32-S3 TFT Boxing Glove Tracker w/ Adafruit IO](https://learn.adafruit.com/esp32-s2-tft-boxing-glove-tracker-w-adafruit-io.md) - [Scroll an SMS Text Message on your RGB Matrix](https://learn.adafruit.com/scroll-an-sms-text-message-on-your-rgb-matrix.md) - [Fruit Jam Nintendo Entertainment System and Retro Jam](https://learn.adafruit.com/fruit-jam-nintendo-entertainment-system.md)