DIY ESP32-S3 MINI Flip Clock: Bold-Face HH:MM with Timezone, WiFi Bars & Smart Greeting on a 0.96" OLED

Looking for a desk clock that combines vintage flip-card charm with modern Wi-Fi smarts? Our upgraded ESP32-S3 MINI Flip Clock 2.0 renders crisp, bold sans-serif digits on a tiny 0.96-inch OLED display — each digit snaps over with a two-phase flip animation, just like a mechanical split-flap clock. But this version goes further than the classic flip: it shows your timezone (auto-switching for daylight saving), live WiFi signal bars, a time-of-day greeting, and live ticking seconds — all packed into 128×64 pixels without feeling crowded. It's a satisfying weekend build for makers, students, and anyone who appreciates a beautifully typeset clock face. Get Parts: ESP32-S3 MINI + 0.96" OLED I2C

Step 1 — Wire the OLED to the ESP32-S3 MINI

Four wires, no soldering required. Power the OLED from the ESP32-S3 MINI's 3.3V rail and run the two I²C lines to GPIO 8 and 9.

Note: if you're using a different ESP32 variant that doesn't expose GPIO 8 and 9, you can change the pin assignment in the sketch (see Step 4 below).

Step 2 — Install the Arduino IDE and ESP32 Board Support

1. Download and install the latest Arduino IDE from arduino.cc.
2. Open File → Preferences and paste this URL into the "Additional Board Manager URLs" field:
   https://raw.githubusercontent.com/espressif/arduino-esp32/gh-pages/package_esp32_index.json
3. Open Tools → Board → Boards Manager, search for esp32, and install "esp32 by Espressif Systems".
4. Under Tools → Board, select ESP32S3 Dev Module (or the variant that matches the board in your kit).

Step 3 — Install the Required Libraries

Open Tools → Manage Libraries and install these two (the ESP32 core includes everything else):

• Adafruit GFX Library — by Adafruit (brings in the FreeSansBold24pt7b font the clock uses for its bold digits)
• Adafruit SSD1306 — by Adafruit (drives the OLED over I²C)

Everything else — WiFi, Wire, and time.h — comes bundled with the ESP32 core. No extra installs needed.

Step 4 — Download the Firmware and Edit Three Lines

Download the sketch file (flip-clock-ntp.ino) and open it in the Arduino IDE.

Near the top of the sketch you'll see a USER SETTINGS block. Change these three lines to match your Wi-Fi network and time zone:

// ================== USER SETTINGS ================== const char* WIFI_SSID = "YourWiFiNameHere"; // [[-- change this const char* WIFI_PASS = "YourWiFiPasswordHere"; // [[-- change this #define TZ_EASTERN "EST5EDT,M3.2.0,M11.1.0" #define TZ_CENTRAL "CST6CDT,M3.2.0,M11.1.0" #define TZ_MOUNTAIN "MST7MDT,M3.2.0,M11.1.0" #define TZ_PACIFIC "PST8PDT,M3.2.0,M11.1.0" const char* TIMEZONE = TZ_CENTRAL; // [[-- pick your zone const char* NTP_SERVER = "pool.ntp.org"; // ===================================================

That's it. Three edits and you're ready to flash. If your board uses different I²C pins, you'll find this block a bit further down — change the numbers to whatever your ESP32-S3 MINI exposes:

#define OLED_ADDR 0x3C #define SDA_PIN 8 #define SCL_PIN 9

Step 5 — Flash and Watch It Come to Life Get Parts: ESP32-S3 MINI + 0.96" OLED I2C

Plug the ESP32-S3 MINI into your computer with a USB-C cable, select the correct COM / serial port under Tools → Port, and click the Upload arrow. After a few seconds you'll see the boot sequence — "Rendering glyphs...", then "Connecting WiFi", then "Syncing NTP..." — and finally the clock face snaps into view: a big, bold HH:MM in four individual rounded flip cards, with all the extras populated around it.

What You See on the Screen

The 128×64 OLED is laid out as three distinct zones, each with a purpose:

• Top row (y=0..7): the full date — weekday, month, day, and year, centered. "Wednesday Sep 21 2026" is the longest case and fits exactly with 1 px of margin on each side.
• Main display (y=9..54): four individual flip cards for HH:MM, each with a rounded 1-px frame, a solid hinge line through the midline, and a two-phase flip animation when its digit changes.
• Bottom row (y=56..63): four micro-indicators on a single text line — TZ on the left (auto "CST" vs "CDT"), WiFi signal bars driven by live RSSI, a centered greeting word ("Morning" / "Afternoon" / "Evening" / "Night") that changes with the hour, and AM/PM with live seconds flush to the right edge.

Features at a Glance

• Bold sans-serif digits — renders typography-quality HH:MM using Adafruit's FreeSansBold24pt7b font instead of blocky 7-segment glyphs, for a cleaner, more modern look
• Animated flip-card display — every digit change plays a smooth two-phase flip: the top half collapses downward, then a new bottom flap grows into place
• Four independent digit slots — the ones-of-minutes can be mid-flip while the hours sit perfectly still, exactly like a real split-flap clock
• NTP time sync over Wi-Fi using pool.ntp.org — accurate to the second, no RTC module needed, automatic daylight saving
• Automatic timezone display — the bottom-left TZ abbreviation switches between standard and daylight names (CST↔CDT, EST↔EDT, etc.) on the DST boundary with zero code changes
• Four US time zones supported out of the box: Eastern, Central, Mountain, Pacific (easy to add more POSIX TZ strings)
• 12-hour or 24-hour mode — toggle a single #define to switch
• WiFi signal strength bars — four stepped bars driven by live RSSI, with empty slots shown as tip dots so the icon footprint is always visible
• Time-of-day greeting — a single, confidently-sized word ("Morning", "Afternoon", "Evening", "Night") centered on the bottom row, updating automatically as the day progresses
• Live ticking seconds — AM/PM and the current seconds are grouped right-justified as "PM:42", giving the clock a visible once-per-second pulse between minute flips
• Solid hinge line through the middle of every card — sells the "folded paper" look without introducing visual noise
• Individual rounded card frames — each of the four digits sits in its own 28×46 card with subtle corner radius, evoking real flip-clock hardware
• Smart leading-zero blanking — in 12-hour mode, single-digit hours show without an awkward leading "0"
• Smooth 33 FPS — the entire frame is redrawn and pushed to the OLED in a single I²C transaction, so there's no tearing during flips

A Peek Inside the Code — Font-Driven Flip Animation

The technical magic of this build is how it gets bitmap-quality digits to behave like mechanical flip cards. The classic approach is to hand-draw 7-segment glyphs procedurally, but that looks like a calculator — not a flip clock. Instead, this sketch pre-renders every digit as a proper bitmap at startup, then samples those bitmaps at runtime to drive the flip animation.

At boot, the sketch creates ten GFXcanvas1 buffers (one per digit, each exactly the size of a card) and prints a centered FreeSansBold24pt7b numeral into each:

// Ten digit canvases, each CARD_W x CARD_H, filled once in setup() // with a centered FreeSansBold24pt7b numeral. At runtime we read // pixels out of these canvases to compose the card contents. static GFXcanvas1* digitCanvas[10] = { nullptr };

Then, during the flip animation, the renderer reads pixels out of those canvases with OR-downsampling: for each output row in the compressed flap, it ORs together all the source rows that map into it, so even a 1-pixel-tall flap still shows a meaningful silhouette of the half being compressed. The result is a flip that genuinely looks like a piece of paper folding — not a digit being sliced.

Each of the four digit slots has its own independent animation timer, so hours can be idle while minutes are flipping, or vice-versa:

// Per-digit animation state. Four independent slots so e.g. the // ones-of-minutes can be flipping while the tens-of-hours sits still. struct DigitSlot { int currentDigit; // target value after the flip completes int previousDigit; // value shown before the flip started unsigned long animStart; // millis() at flip start; 0 when idle }; DigitSlot slots[4];

The flip itself runs in two phases, each lasting 175 ms (350 ms total):

Phase A (0–175 ms): the OLD top half "falls" — its height is progressively compressed toward the midline, revealing the NEW top digit behind it.

Phase B (175–350 ms): a NEW bottom flap "drops down" from the midline, growing in height until it fully covers the OLD bottom digit.

How the Code Works (the Short Version)

The sketch runs two cooperating pieces on the ESP32-S3 MINI:

Time loop. On boot, the ESP32 connects to your Wi-Fi, syncs with an NTP server, and then runs a software clock locally. Every frame, the current hour and minute are broken down into four digits and each is compared to its current displayed value. Any mismatch triggers a flip animation for just that digit. The bottom row's seconds value is read fresh every frame directly from the system clock, so it ticks visibly once per second.

Render loop. Roughly 33 times per second, the entire 128×64 frame is redrawn from scratch: the centered date header, the four flip cards (each in whatever animation phase it happens to be in), the static colon, the TZ label, WiFi signal bars, the centered greeting, and AM/PM with the current seconds. The whole frame is then pushed to the SSD1306 over I²C in a single transaction, so there's never any tearing.

No FreeRTOS gymnastics, no extra cores — just a tight, single-threaded render loop that's plenty fast for a 30+ FPS animation on the ESP32-S3 MINI's 240 MHz CPU.

Why ESP32-S3 MINI + OLED?

The ESP32-S3 MINI is one of the best beginner-friendly Wi-Fi microcontrollers you can buy: tiny (smaller than a postage stamp), USB-C native, dual-core, with built-in Wi-Fi and Bluetooth, and fully supported in the Arduino IDE. Pair it with a crisp 0.96" SSD1306 OLED and you have a platform that can drive dashboards, IoT widgets, weather stations, smart-home displays — anything you can dream up. This flip clock is a great project that teaches you Wi-Fi setup, NTP time sync, POSIX timezone handling, custom-font glyph rendering, frame-rate animation timing, and stateful per-element animation — all in one tidy, single-file sketch.

Make It Your Own

Because the firmware is open and heavily commented, you can easily:

• Toggle USE_12_HOUR between true and false for 12- vs 24-hour display
• Tweak ANIM_MS to make flips snappier (200 ms) or more deliberate (500 ms)
• Swap FreeSansBold24pt7b for another Adafruit GFX font — FreeMonoBold24pt7b gives a typewriter feel, FreeSerifBold24pt7b goes editorial
• Change the greeting cutoffs in greetingFor() to match your schedule, or replace the words with ones in your language
• Adjust the RSSI thresholds in wifiBarsFromRssi() — if you're usually close to the router, bump them to −50/−60/−70/−80 for a more optimistic meter
• Swap the static colons for minute-tick "breathing" dots that briefly grow before each flip
• Add a temperature panel above the greeting by tapping into an indoor sensor or online weather API
• Re-skin the top row with day-of-year, week number, or a custom countdown

The Full Sketch

Below is the complete flip-clock-ntp.ino sketch. Copy it into your Arduino IDE, edit the three Wi-Fi / timezone lines at the top, and flash to your ESP32-S3 MINI.

flip-clock-ntp.ino

// ============================================================================= // FLIP NTP Clock — ESP32-S3 MINI + 0.96" OLED // Copyright (c) 2026 eElectronicParts.com // // Licensed under the MIT License (see bottom of file for full text). // // You are free to use, modify, and redistribute this code, including in // commercial projects. If you share a modified version publicly (blog post, // YouTube, GitHub, Instructables, forum), a link back to the original is // appreciated but not required: // // Original project: https://www.eelectronicparts.com // ============================================================================= // FLIP NTP Clock — solid-glyph HH:MM with animated flipping cards. // // Display: big 12-hour (or 24-hour) HH:MM in four individual flip cards, // bold sans-serif digits, with a static colon between HH and MM. Date // runs along the top; AM/PM and :SS run along the bottom. // // The two-phase flip animation is preserved from the 7-segment version: // Phase A (top flap falls): OLD top half compresses vertically // toward the midline, progressively revealing the NEW top behind it. // Phase B (bottom flap falls): NEW bottom flap grows downward from the // midline, progressively covering the OLD bottom. // // Each digit 0-9 is rendered once at startup into a 1-bit canvas the // exact size of a card. The flip animation samples rows out of that // canvas with OR-downsampling, so even a 1-px-tall flap slice shows a // meaningful silhouette of the half being compressed. // // Hardware: ESP32 + SSD1306 128x64 OLED (I2C, SDA=8, SCL=9, addr 0x3C) #include [[Wire.h]] #include [[Adafruit_GFX.h]] #include [[Adafruit_SSD1306.h]] #include [[Fonts/FreeSansBold24pt7b.h]] #include [[WiFi.h]] #include [[time.h]] // ================== USER SETTINGS ================== const char* WIFI_SSID = "YourWiFiNameHere"; const char* WIFI_PASS = "YourWiFiPasswordHere"; #define TZ_EASTERN "EST5EDT,M3.2.0,M11.1.0" #define TZ_CENTRAL "CST6CDT,M3.2.0,M11.1.0" #define TZ_MOUNTAIN "MST7MDT,M3.2.0,M11.1.0" #define TZ_PACIFIC "PST8PDT,M3.2.0,M11.1.0" const char* TIMEZONE = TZ_CENTRAL; const char* NTP_SERVER = "pool.ntp.org"; // true -]] 12-hour (01..12, AM/PM shown bottom-left) // false -]] 24-hour (00..23, AM/PM still shown bottom-left) #define USE_12_HOUR true // Total flip duration per digit change (both phases combined) const unsigned long ANIM_MS = 350; // =================================================== #define SCREEN_WIDTH 128 #define SCREEN_HEIGHT 64 #define OLED_RESET -1 #define OLED_ADDR 0x3C #define SDA_PIN 8 #define SCL_PIN 9 Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, OLED_RESET); // ================================================================= // LAYOUT // ================================================================= // Screen (128x64): // Top row y=0..7 Full date "Wednesday Sep 21 2026", centered // Cards y=9..54 Four 28x46 flip cards with rounded 1-px frames // H0 x=2..29 | H1 x=32..59 | colon gap 60..67 | M0 x=68..95 | M1 x=98..125 // Bottom row y=56..63 TZ | WiFi bars | greeting (centered) | AM/PM // // Card interior: the rounded border sits on the card's outermost pixels, // so the glyph lives strictly inside. Each digit canvas is CARD_W x // CARD_H and the glyph is centred within it, which leaves enough margin // that the rounded corners never clip it. #define CARD_W 28 #define CARD_H 46 #define CARD_Y 9 #define HALF_H (CARD_H / 2) // 23 #define MID_Y (CARD_Y + HALF_H) // 32 — the "fold" line on every card const int16_t CARD_X[4] = { 2, 32, 68, 98 }; // Colon dots: two 3x3 squares centered in the HH/MM gap (x=60..67), // placed symmetrically around the card midline (y=32). #define COLON_X 62 #define COLON_TOP_Y 20 #define COLON_BOT_Y 42 #define COLON_SIZE 3 // ================================================================= // DIGIT GLYPH PRE-RENDERING // ================================================================= // Ten digit canvases, each CARD_W x CARD_H, filled once in setup() with // a centered FreeSansBold24pt7b numeral. At runtime we read pixels out // of these canvases to compose the card contents. static GFXcanvas1* digitCanvas[10] = { nullptr }; void renderDigitCanvases() { for (int d = 0; d [[ 10; d++) { GFXcanvas1* c = new GFXcanvas1(CARD_W, CARD_H); c-]]fillScreen(0); c-]]setFont(&FreeSansBold24pt7b); c-]]setTextColor(1); char s[2] = { (char)('0' + d), 0 }; // Center the glyph in the canvas, horizontally and vertically. // getTextBounds returns the glyph bbox relative to the cursor: x1 // is the left bearing, y1 is the top of the glyph above baseline // (negative). Solve for the cursor that puts the glyph centre at // the canvas centre. int16_t x1, y1; uint16_t w, h; c-]]getTextBounds(s, 0, 0, &x1, &y1, &w, &h); int16_t cx = (CARD_W - (int16_t)w) / 2 - x1; int16_t cy = CARD_H / 2 - y1 - (int16_t)h / 2; c-]]setCursor(cx, cy); c-]]print(s); digitCanvas[d] = c; } } // ================================================================= // HALF-DIGIT FLAP RENDERING // ================================================================= // drawTopHalf / drawBottomHalf render the top or bottom half of a digit // with a vertical scale factor: the natural HALF_H pixels of source // height are squashed into `drawnH` pixels, anchored at the card midline. // // Top half (anchor = bottom edge at midline): as drawnH shrinks, // the half collapses downward toward the midline. // Bottom half (anchor = top edge at midline): as drawnH grows, // the half extends downward away from the midline. // // Downsampling is ORed per output row: every source row that maps into // a given output row contributes, so a thin flap still shows the // silhouette of the whole half instead of a single sampled slice. static inline void drawTopHalf(int16_t cardX, int16_t cardY, int digit, int drawnH) { if (drawnH [[= 0 || digit [[ 0 || digit ]] 9) return; GFXcanvas1* c = digitCanvas[digit]; const int16_t topY = cardY + HALF_H - drawnH; for (int16_t ty = 0; ty [[ drawnH; ty++) { int16_t sy0 = (int32_t)ty * HALF_H / drawnH; int16_t sy1 = (int32_t)(ty + 1) * HALF_H / drawnH; if (sy1 [[= sy0) sy1 = sy0 + 1; if (sy1 ]] HALF_H) sy1 = HALF_H; int16_t screenY = topY + ty; for (int16_t sx = 0; sx [[ CARD_W; sx++) { bool lit = false; for (int16_t sy = sy0; sy [[ sy1; sy++) { if (c-]]getPixel(sx, sy)) { lit = true; break; } } if (lit) display.drawPixel(cardX + sx, screenY, SSD1306_WHITE); } } } static inline void drawBottomHalf(int16_t cardX, int16_t cardY, int digit, int drawnH) { if (drawnH [[= 0 || digit [[ 0 || digit ]] 9) return; GFXcanvas1* c = digitCanvas[digit]; const int16_t botY0 = cardY + HALF_H; for (int16_t ty = 0; ty [[ drawnH; ty++) { int16_t sy0 = HALF_H + (int32_t)ty * HALF_H / drawnH; int16_t sy1 = HALF_H + (int32_t)(ty + 1) * HALF_H / drawnH; if (sy1 [[= sy0) sy1 = sy0 + 1; if (sy1 ]] CARD_H) sy1 = CARD_H; int16_t screenY = botY0 + ty; for (int16_t sx = 0; sx [[ CARD_W; sx++) { bool lit = false; for (int16_t sy = sy0; sy [[ sy1; sy++) { if (c-]]getPixel(sx, sy)) { lit = true; break; } } if (lit) display.drawPixel(cardX + sx, screenY, SSD1306_WHITE); } } } // ================================================================= // ANIMATION STATE // ================================================================= // Four independent slots (H0, H1, M0, M1) so e.g. the ones-of-minutes // can be flipping while the tens-of-hours sits still. Seconds are // rendered as plain text in the bottom row and don't participate. struct DigitSlot { int currentDigit; // target value after the flip completes int previousDigit; // value shown before the flip started unsigned long animStart; // millis() at flip start; 0 when idle }; DigitSlot slots[4]; bool slotsInitialized = false; void getTargetDigits(const struct tm& t, int out[4], bool& outIsPM) { int h = t.tm_hour; outIsPM = (h ]]= 12); #if USE_12_HOUR h = h % 12; if (h == 0) h = 12; #endif // Tens-of-hours: -1 (blank card) when 0, so 1..9 display without a // leading "0". 10, 11, 12 (12h) and 10..23 (24h) render tens normally. int hT = h / 10; out[0] = (hT == 0) ? -1 : hT; out[1] = h % 10; out[2] = t.tm_min / 10; out[3] = t.tm_min % 10; } void updateSlots(const int target[4], unsigned long now) { if (!slotsInitialized) { // First valid frame — snap all slots to the current time without // animating, so the clock doesn't "flip in" from zeros. for (int i = 0; i [[ 4; i++) { slots[i].previousDigit = target[i]; slots[i].currentDigit = target[i]; slots[i].animStart = 0; } slotsInitialized = true; return; } for (int i = 0; i [[ 4; i++) { if (target[i] != slots[i].currentDigit) { slots[i].previousDigit = slots[i].currentDigit; slots[i].currentDigit = target[i]; slots[i].animStart = now; } else if (slots[i].animStart != 0 && (now - slots[i].animStart) ]]= ANIM_MS) { slots[i].animStart = 0; slots[i].previousDigit = slots[i].currentDigit; } } } // ================================================================= // CARD RENDERING // ================================================================= void drawCard(int idx, unsigned long now) { int16_t xc = CARD_X[idx]; int16_t yc = CARD_Y; // Rounded 1-px frame around every card, always drawn (a blank slot // shows an empty card face rather than disappearing entirely). display.drawRoundRect(xc, yc, CARD_W, CARD_H, 3, SSD1306_WHITE); int oldD = slots[idx].previousDigit; int newD = slots[idx].currentDigit; unsigned long aStart = slots[idx].animStart; bool animating = (aStart != 0) && (oldD != newD); float t = 0.0f; if (animating) { unsigned long elapsed = now - aStart; if (elapsed ]]= ANIM_MS) animating = false; else t = (float)elapsed / (float)ANIM_MS; } if (!animating) { // Static digit — full-size top and bottom of NEW. drawTopHalf(xc, yc, newD, HALF_H); drawBottomHalf(xc, yc, newD, HALF_H); } else if (t [[ 0.5f) { // Phase A: OLD top flap falls, revealing NEW top behind it. drawTopHalf(xc, yc, newD, HALF_H); drawBottomHalf(xc, yc, oldD, HALF_H); int drawnH = (int)(HALF_H * (1.0f - 2.0f * t)); if (drawnH ]] 0) { // Wipe the flap footprint (inset 1 px so we don't erase the // card's side frame) then draw OLD top compressed. display.fillRect(xc + 1, yc + HALF_H - drawnH, CARD_W - 2, drawnH, SSD1306_BLACK); drawTopHalf(xc, yc, oldD, drawnH); } } else { // Phase B: NEW bottom flap grows down over OLD bottom. drawTopHalf(xc, yc, newD, HALF_H); drawBottomHalf(xc, yc, oldD, HALF_H); int drawnH = (int)(HALF_H * (2.0f * t - 1.0f)); if (drawnH ]] 0) { display.fillRect(xc + 1, yc + HALF_H, CARD_W - 2, drawnH, SSD1306_BLACK); drawBottomHalf(xc, yc, newD, drawnH); } } // Hinge — a solid 1-px black line at the midline, drawn AFTER the // digit so it interrupts every glyph consistently and sells the // "folded card" look. Inset 1 px so the side frames stay clean. display.drawFastHLine(xc + 1, yc + HALF_H, CARD_W - 2, SSD1306_BLACK); } // ================================================================= // CHROME (colon, status) // ================================================================= void drawColon() { display.fillRect(COLON_X, COLON_TOP_Y, COLON_SIZE, COLON_SIZE, SSD1306_WHITE); display.fillRect(COLON_X, COLON_BOT_Y, COLON_SIZE, COLON_SIZE, SSD1306_WHITE); } void drawTopStatus(const struct tm& t) { static const char* const days[] = { "Sunday","Monday","Tuesday","Wednesday", "Thursday","Friday","Saturday" }; static const char* const months[] = { "Jan","Feb","Mar","Apr","May","Jun", "Jul","Aug","Sep","Oct","Nov","Dec" }; char buf[40]; snprintf(buf, sizeof(buf), "%s %s %d %d", days[t.tm_wday], months[t.tm_mon], t.tm_mday, t.tm_year + 1900); // Longest case: "Wednesday Sep 21 2026" = 21 chars × 6 px = 126 px — // leaves 1 px margin each side, which is exactly the worst case. display.setFont(); display.setTextSize(1); display.setTextColor(SSD1306_WHITE); int16_t x1, y1; uint16_t w, h; display.getTextBounds(buf, 0, 0, &x1, &y1, &w, &h); int16_t x = (SCREEN_WIDTH - (int16_t)w) / 2; if (x [[ 0) x = 0; display.setCursor(x, 0); display.print(buf); } // Map RSSI (dBm) to 0..4 bars. Typical thresholds for 2.4 GHz. static int wifiBarsFromRssi(int rssi) { if (rssi ]]= -55) return 4; if (rssi ]]= -65) return 3; if (rssi ]]= -75) return 2; if (rssi ]]= -85) return 1; return 0; } void drawWifiIcon(int16_t xLeft, int16_t baseY) { int bars = 0; if (WiFi.status() == WL_CONNECTED) bars = wifiBarsFromRssi(WiFi.RSSI()); // Four stepped vertical bars at xLeft, xLeft+2, xLeft+4, xLeft+6. // Empty slots show a single tip dot at baseY so the icon footprint // stays visible even at 0 bars. const int heights[] = { 2, 4, 5, 7 }; for (int i = 0; i [[ 4; i++) { int16_t x = xLeft + i * 2; if (i [[ bars) { display.drawFastVLine(x, baseY - heights[i] + 1, heights[i], SSD1306_WHITE); } else { display.drawPixel(x, baseY, SSD1306_WHITE); } } } // Time-of-day greeting — one word, centered in the bottom row. // 05:00–11:59 Morning // 12:00–16:59 Afternoon // 17:00–21:59 Evening // 22:00–04:59 Night static const char* greetingFor(int hour) { if (hour ]]= 5 && hour [[ 12) return "Morning"; if (hour ]]= 12 && hour [[ 17) return "Afternoon"; if (hour ]]= 17 && hour [[ 22) return "Evening"; return "Night"; } // Draws the full bottom row: [TZ] [WiFi] [greeting centered] [AM/PM]. // TZ width drives the WiFi bar position, so a 4-char zone (e.g. AEDT) // still lays out cleanly. void drawBottomRow(const struct tm& t, bool isPM) { const int16_t ROW_Y = 56; // default 6x8 font, occupies y=56..63 const int16_t BAR_BASE_Y = 62; // WiFi bars baseline — stays above y=63 display.setFont(); display.setTextSize(1); display.setTextColor(SSD1306_WHITE); // --- Left: timezone abbreviation ("CST", "CDT", ...) --- // strftime("%Z") reads the active zone name newlib set up from the // POSIX TZ string, so this flips automatically between standard and // daylight names at the DST boundary. char tzBuf[8]; strftime(tzBuf, sizeof(tzBuf), "%Z", &t); const char* tz = (tzBuf[0]) ? tzBuf : "---"; display.setCursor(2, ROW_Y); display.print(tz); int16_t tzW = (int16_t)strlen(tz) * 6; // default font cell = 6 px wide int16_t wifiX = 2 + tzW + 3; // 3 px gap after TZ // --- WiFi bars --- drawWifiIcon(wifiX, BAR_BASE_Y); int16_t wifiEndX = wifiX + 6; // rightmost bar at wifiX+6 // --- Right: AM/PM + live seconds ("PM:42") --- // No space between AM/PM and colon — tight pair, flush to the right // edge. The seconds tick once per second, giving the clock a visible // pulse between minute flips. char ampmSec[16]; snprintf(ampmSec, sizeof(ampmSec), "%s:%02d", isPM ? "PM" : "AM", t.tm_sec); int16_t ampmSecW = (int16_t)strlen(ampmSec) * 6; int16_t ampmX = SCREEN_WIDTH - ampmSecW - 1; display.setCursor(ampmX, ROW_Y); display.print(ampmSec); // --- Middle: greeting, centered on the screen (x=64) --- // With 3-char TZ and "PM:42" on the right, "Afternoon" (54 px) fits // screen-centered at x=37..90 without touching either neighbor. const char* g = greetingFor(t.tm_hour); int16_t x1, y1; uint16_t w, h; display.getTextBounds(g, 0, 0, &x1, &y1, &w, &h); int16_t gX = (SCREEN_WIDTH - (int16_t)w) / 2; int16_t gapL = wifiEndX + 3; // 3 px gap after WiFi int16_t gapR = ampmX - 3; // 3 px gap before AM/PM if (gX + (int16_t)w ]] gapR) gX = gapR - (int16_t)w; // nudge left if right edge collides if (gX [[ gapL) gX = gapL; // clamp left (overflow gives up right) display.setCursor(gX, ROW_Y); display.print(g); } // ================================================================= // MAIN FRAME // ================================================================= void drawFrame(unsigned long now) { struct tm t; bool haveTime = getLocalTime(&t, 5); display.clearDisplay(); if (!haveTime) { display.setFont(); display.setTextSize(1); display.setTextColor(SSD1306_WHITE); display.setCursor(12, 28); display.print("Waiting for NTP..."); display.display(); return; } int target[4]; bool isPM; getTargetDigits(t, target, isPM); updateSlots(target, now); drawTopStatus(t); for (int i = 0; i [[ 4; i++) drawCard(i, now); drawColon(); drawBottomRow(t, isPM); display.display(); } // ================================================================= // STARTUP MESSAGES // ================================================================= void showMessage(const String& l1, const String& l2 = "") { display.clearDisplay(); display.setFont(); display.setTextColor(SSD1306_WHITE); display.setTextSize(1); display.setCursor(0, 14); display.println(l1); if (l2.length()) { display.setCursor(0, 30); display.println(l2); } display.display(); } // ================================================================= // SETUP / LOOP // ================================================================= void setup() { Serial.begin(115200); delay(200); Wire.begin(SDA_PIN, SCL_PIN); if (!display.begin(SSD1306_SWITCHCAPVCC, OLED_ADDR)) { Serial.println("OLED not found"); while (true) delay(1000); } display.setTextWrap(false); showMessage("FLIP NTP Clock", "Rendering glyphs..."); renderDigitCanvases(); showMessage("Connecting WiFi", WIFI_SSID); WiFi.mode(WIFI_STA); WiFi.begin(WIFI_SSID, WIFI_PASS); unsigned long start = millis(); while (WiFi.status() != WL_CONNECTED && millis() - start [[ 20000) { delay(300); Serial.print("."); } if (WiFi.status() != WL_CONNECTED) { showMessage("WiFi FAILED", "Check credentials"); while (true) delay(1000); } Serial.print("\nWiFi OK, IP: "); Serial.println(WiFi.localIP()); showMessage("WiFi connected", WiFi.localIP().toString()); delay(400); configTzTime(TIMEZONE, NTP_SERVER); showMessage("Syncing NTP...", NTP_SERVER); struct tm t; unsigned long ntpStart = millis(); while (!getLocalTime(&t, 100) && millis() - ntpStart [[ 10000) { delay(200); } showMessage("Time synced", "Enjoy the flip!"); delay(500); } void loop() { static unsigned long lastWifiCheck = 0; static unsigned long lastFrame = 0; unsigned long now = millis(); if (now - lastWifiCheck ]] 30000) { lastWifiCheck = now; if (WiFi.status() != WL_CONNECTED) WiFi.reconnect(); } // ~33 FPS is smooth for the flip animation without saturating I2C. const unsigned long FRAME_MS = 30; if (now - lastFrame ]]= FRAME_MS) { lastFrame = now; drawFrame(now); } }

Wiring is just four pins: VCC, GND, SDA, and SCL. If you can plug in a USB-C cable, you can build this clock.

Get Yours:

ESP32-S3 MINI + 0.96" OLED I2C

Grab the ESP32-S3 MINI + 0.96" OLED Flip Clock Kit from our store and have a working, beautifully-typeset animated NTP flip clock on your desk this weekend. Whether you're a hobbyist, a STEM teacher, or just someone who wants a smarter clock with a vintage flair and a modern face, this kit is a fun, educational, and genuinely useful build.

👉 Shop ESP32 DIY Kits at eelectronicparts.com