ClockBook

"What if time wasn't a linear flow, but a living book that reacts to your presence? The ClockBook transforms this philosophical question into a tangible, interactive artifact featuring 7 animated displays, 30 hieroglyphic symbols, and a fluid color gradient system that responds to human proximity."

The ClockBook is a luminous, multi-display clock designed as a unique object: a sculpted book that reveals seven animated circular portals and a central screen dedicated to the time.

Each GC9A01 portal displays a living, real-time graphic — rings, glyphs, pulses — while the large ST7796 screen remains fully autonomous and stable, ensuring perfect readability.

The project is built around a simple question:

What does time look like when you give it shape?

Behind its appearance, the ClockBook is also a technically ambitious build.

It runs on an ESP32-S3, two independent SPI buses, a custom graphics engine, a VL53L0X presence sensor, and a modular software architecture capable of driving a main display and seven circular screens simultaneously.

This Instructable walks through every stage of the project:

1. the electronic design (SPI2/SPI3 topology, wiring, power)
2. the multi-display prototyping process
3. the PortalManager graphics engine
4. the autonomy of the ST7796 time interface
5. the integration of the VL53L0X sensor
6. the construction of the book-shaped enclosure
7. and the essential code excerpts to help you reproduce or adapt the system

The goal is twofold:

to show how this living clock is built, and to share the techniques required to create your own multi-display systems or light-based installations.

Welcome to the ClockBook.

Here, time takes shape.

Supplies

Purchased Components / Recycled / Already Available:

1. 1 ESP32-S3 N16R8
2. 7 GC9A01 Round Displays
3. VL53L0X Time-of-Flight Sensor
4. 3D Printing Filament (PLA Black) (optional, I printed 7 rings for GC9A01, 1 frame for the ST7796)
5. 5V / 5A Power Supply (depend on what you choose but for 7 up to 12 displays ,3A minimum)
6. ST7796 4" TFT Display - Recycled from a previous weather-station build
7. Wooden or plastic Book Enclosure -Recycled box used as the ClockBook frame
8. Embossed Faux Leather Fabric - Gifted decorative material for the cover finish
9. Dupont Wires - Long-term accumulated stock
10. Breadboards

Tools Required

1. Soldering iron (fine tip)
2. Lead-free solder
3. Wire strippers and diagonal cutters
4. Precision screwdrivers
5. 3D printer (optional, for the rings and frame)
6. Multimeter (voltage + continuity)
7. Craft knife / X-Acto
8. Tweezers (optional, for tight wiring)
9. Drill or rotary tool — for making holes in the enclosure and adjusting internal mounts.
10. Glue for Embossed Faux Leather Fabric
11. I use a recycled ATX power supply for stable 3,3V/5V/12V rails during early testing of the multi-display setup with HU-M28 module.
12. Arduino IDE or PlatformIO

The Upcycling Philosophy

“The best parts bin is the one you’ve been filling for years.”

The ClockBook was built with a strong upcycling mindset.

Instead of buying everything new, I tried to reuse components, materials, and leftovers from old projects whenever possible.

What I Learned About Upcycling Electronics

✅ Old displays never die —

The ST7796 spent 2 years in a drawer before finding its perfect home in this project.

✅ Keep everything —

The messy bundle of Dupont wires from failed prototypes?

They finally became useful.

✅ Ask around —

The embossed faux leather came from a friend’s upholstery leftovers.

✅ Look in community spaces —

Local makerspaces often have donation bins filled with connectors, wire, foam, and materials that cost nothing.

Environmental Impact

By reusing components, I avoided:

extra packaging

additional shipping emissions

unnecessary purchases

waiting for new deliveries

Upcycling didn’t just save money —

it shaped the identity of the ClockBook itself.

Step 1: What Is the ClockBook?

ClockBook explores a simple question: What if time wasn't linear, but a living book that reacts to human presence?

Drawing inspiration from:

1. Stargate hieroglyphs (alien symbols encoding time)
2. Predator vision (thermal color shifts)
3. Ancient grimoires (mystical knowledge encoded in pages)

Each portal represents a "page" of time — not static, but alive and responsive. The closer you get, the more time seems to "wake up" around you, transitioning from the cold, distant past (cyan) through the warm present (violet) to the immediate, urgent now (red).

The Sentinel Portal on the spine acts as a watchful eye, reacting faster than the others — a guardian of temporal flow.

At its core, it’s a sculpted book-shaped enclosure containing:

1. Seven GC9A01 round portals, each running its own graphical animation
2. A standalone ST7796 4″ TFT display, dedicated to clean time and date display
3. An ESP32-S3 N16R8, driving all animations across two independent SPI buses
4. A VL53L0X distance sensor, allowing the clock to subtly react to your presence

The idea behind the ClockBook is simple:

to give time a visual and dynamic form, where each portal expresses a different temporal rhythm through rings, glyphs, points, pulses, and motion.

Why seven portals?

Because time is rarely one-dimensional.

Here, each circular display becomes a “temporal lens,” an interpretation of motion, cycles, and flow.

Some portals show slow oscillations, others react faster, some display glyph-based patterns reminiscent of a cosmic calendar.

Technical Philosophy

The project is intentionally built around modularity:

1. The ST7796 clock UI is fully autonomous (it does not depend on the portals).
2. The PortalManager engine drives all GC9A01 displays from a single source of truth.
3. The wiring uses two separate SPI buses (SPI2 + SPI3) for optimal speed and stability.
4. Every animation is computed in real time on the ESP32-S3, without external libraries or prerendered frames.

This gives the ClockBook a dual nature:

1. An artistic object
2. A sophisticated embedded system

Step 2: Concept, Art & Inspiration

The ClockBook was designed from the beginning as more than a clock.

The goal was to create an object that does not only display time, but gives time a presence — through light, motion, and form.

Its inspiration comes from several worlds:

1. old illuminated books, filled with symbols and geometric diagrams
2. astronomical clocks, where time is measured through cycles rather than digits
3. cinematic “magical interfaces”, where light becomes language
4. scientific instruments and artifacts, both functional and mysterious

The idea of using a book-shaped enclosure came naturally: a book is an intimate, structured object that contains stories.

Here, it becomes the container for a luminous mechanism that tells the story of time in a different way.

Why a circular design?

The circle is the most universal symbol of time:

1. cycles
2. revolutions
3. seasons
4. oscillations
5. repetition

Each GC9A01 display acts as a temporal portal, a small window into a graphical interpretation:

1. breathing rings
2. rotating glyphs
3. pulses and ripples
4. color transitions influenced by presence
5. traces of motion that linger like memories

Together, the seven portals form a living front plate—an external “mechanism,” instead of a hidden one.

Why seven portals?

There is no mystical reference here.

Seven simply creates a beautifully balanced composition around the central display.

It surrounds the ST7796 with a slightly irregular but harmonious symmetry that immediately draws the eye.

The center (ST7796) shows stable, readable information:

1. time
2. date
3. temperature
4. humidity
5. all rendered with hand-coded digits, icons, and UI elements

Around it, the portals represent flow, movement, and the graphical interpretation of time.

A living clock

The ClockBook is designed as a small luminous artifact—an object that feels present.

It does not connect to the internet, does not track data, and does not speak.

But it reacts.

When someone approaches, the animations shift in color and intensity.

When the room is calm, the portals slow down.

They create the impression that time itself is breathing.

This approach blends:

1. design
2. electronics
3. animation
4. embedded engineering
5. sculptural light
6. modular software architecture

This hybrid identity — half artistic object, half embedded system — defines the essence of the ClockBook.

Step 3: Wiring & SPI Architecture (SPI2 / SPI3 / I²C)

The ClockBook uses a multi-bus architecture to drive eight displays and a sensor from a single ESP32-S3.

To keep the system stable and responsive, the wiring was designed around three separate communication channels:

1. SPI2 → dedicated to the ST7796 (main 4″ display)
2. SPI3 → shared by all seven GC9A01 round displays
3. I²C → used only for the VL53L0X ToF distance sensor

This separation is crucial: it avoids bandwidth conflicts, ensures consistent framerates across the portals, and keeps the ST7796 refresh perfectly smooth.

1. Why two SPI buses?

Driving eight displays from a single bus would slow everything down.

The ST7796 alone can consume a large portion of the bandwidth if its updates are heavy.

To keep things efficient:

SPI2 → ST7796 only

1. No shared traffic
2. No contention
3. Fully stable UI
4. Time, date, temperature, humidity are always crisp

SPI3 → GC9A01 × 7

1. Shared SCLK, MOSI, DC
2. One unique CS pin per display
3. Allows the PortalManager to update each portal independently
4. Maintains smooth animations even with all seven screens active

This layout gives you the best of both worlds:

stability on the main display, fluidity on the portals.

2. GC9A01 Wiring (SPI3 Shared Bus)

All seven round displays share the same lines:

1. SCLK → SPI clock
2. MOSI → data
3. DC → data/command
4. RESET → tied together or controlled manually (optional)

But each display has its own CS line:

CS0 → Portal 1

CS1 → Portal 2

CS2 → Portal 3

CS3 → Portal 4

CS4 → Portal 5

CS5 → Portal 6

CS6 → Portal 7

This ensures the ESP32-S3 can address each GC9A01 individually.

Important:

GC9A01 displays do not need MISO, simplifying the wiring.

3. ST7796 Wiring (SPI2 Dedicated Bus)

The ST7796 uses its own bus to guarantee high-speed drawing for the UI:

SPI2_SCLK → ST7796_SCK

SPI2_MOSI → ST7796_MOSI

SPI2_DC → ST7796_DC

SPI2_CS → ST7796_CS

RESET → ST7796_RST

BLK → 3.3V (or PWM if brightness control is desired)

Because the ST7796 works on a clean, isolated bus, it never slows down when the portals are busy.

This is what allows the ClockBook to display:

1. smooth time digits
2. date
3. temperature
4. humidity
5. hand-coded icons
6. all without flicker or delay

4. I²C Wiring (VL53L0X Distance Sensor)

The ToF sensor uses only two lines:

SDA (shared I²C data)

SCL (shared I²C clock)

No timing conflict occurs because:

1. the sensor is lightweight
2. it updates only a few times per second
3. it does not compete with the SPI buses

The result is a clean separation of responsibilities between the portals and the presence detection.

The VL53L0X is used exclusively by the portal engine.

It does not influence the ST7796 interface, which remains completely autonomous.

5. Grounding & Power Distribution

All components must share a common ground (GND).

This is essential when mixing multiple SPI devices.

Power lines:

1. 5V → GC9A01 backlights + ST7796 VCC
2. 3.3V → logic for ESP32-S3, VL53L0X, and display interfaces

Use thick wires for 5V (the seven backlights draw real current).

Use separate branches if possible to avoid voltage drops.

ST7796 runs on SPI2, fully isolated.

1. It displays time, date, temperature, humidity and all UI graphics.
2. It does not depend on the portals and does not react to the VL53L0X.
3. Seven GC9A01 displays share SPI3 (SCLK, MOSI, DC) with one CS pin each.
4. All animations are generated by the PortalManager engine.
5. VL53L0X communicates via I²C and sends a normalized presence value only to PortalManager.
6. It has no connection to the ST7796 interface.

This architecture guarantees stability, clean separation of responsibilities, and smooth multi-display rendering.

Edit 1:

ESP32-S3 Pin Constraints (What You Can and Cannot Use)

The ESP32-S3 is one of the most flexible microcontrollers available, but not all GPIOs can be used freely.

Some pins are reserved, some are input-only, and some behave differently during boot.

Here is a clean breakdown of what is safe, unsafe, and input-only.

🚫 Pins You Should NOT Use (Reserved / Special Function)

These pins are not available for displays, sensors, or general I/O.

USB Pins (internal USB PHY)

GPIO19 — USB D–

GPIO20 — USB D+

These two pins are hard-wired to the USB peripheral.

Do not use them for SPI, I²C, CS lines, buttons, LEDs, etc.

⚠️ Pins That Are Boot-Sensitive (Avoid for SPI / CS)

These pins affect the boot mode of the ESP32-S3.

If pulled HIGH or LOW at the wrong moment, the board may fail to boot.

GPIO0 — Must be HIGH at boot (strapping pin)

GPIO3 — Can trigger download (flash) mode

GPIO1 — RTC (unreliable at boot)

GPIO2 — RTC (unreliable at boot)

GPIO3 — RTC (unreliable at boot)

You can technically use them for simple inputs (buttons),

but avoid using them for:

1. SPI MOSI/SCLK/DC
2. Chip-Select (CS) lines
3. Reset pins
4. Display control

This prevents random boot failures.

⛔ Input-Only Pins (Cannot Drive Displays or Outputs)

These pins cannot output signals.

They are input-only and therefore unsuitable for SPI, I²C, CS, LEDs, etc.

GPIO45 — Input only

GPIO46 — Input only

You may use them for:

1. reading a switch
2. reading a sensor output
3. a mode-selection jumper

But not for anything requiring a digital output.

⭐ Summary Table

GPIO GroupPinsUsage

DO NOT USE

GPIO19, GPIO20

USB D+/D– (reserved)

BOOT-Sensitive

GPIO0, GPIO1, GPIO2, GPIO3

Avoid for SPI/CS/RST

Input-Only

GPIO45, GPIO46

Only for simple inputs

Fully Usable

GPIO4–18, 21, 33–44

Displays, SPI2, SPI3, I²C, CS

The pins I used in ClockBook (ESP32S3-N16R8)

GC9A01 (SPI3 – bus portails)

1. VCC → 3,3V
2. RST → 3,3V
3. BL → 5V

Pins SPI communs :

1. SCLK → 10
2. MOSI → 13
3. DC → 5
4. MISO → non utilisé
5. RST → non utilisé , mis a 3,3V

Pins CS individuels :

Portal 0 → 12

Portal 1 → 11

Portal 2 → 4

Portal 3 → 19

Portal 4 → 20

Portal 5 → 21

Portal 6 → 40 (Sentinelle)

Écran central ST7796 (SPI2 – bus séparé)

1. VCC → 5V

Pins SPI :

1. SCLK → 14
2. MOSI → 15
3. MISO → 16
4. DC → 9

Pins panel :

1. CS → 8
2. RST → 7
3. BL (PWM backlight) → 6

Make sure all grounds are tied together.

Step 4: Prototyping & Bench Tests

The photos above show the early testing phase: breadboard experimentation, the cardboard ring used to validate the SPI timing on multiple GC9A01 displays, the first rendering tests, and the ATX power supply used for stable bench operation.

Photos overview:

1. Top left: ESP32-S3 bench with breadboard and wiring
2. Top center: cardboard prototype ring for display arrangement
3. Top right: first rendering tests on circular displays
4. Bottom left: single-portal animation test
5. Bottom right: ATX power supply used during early electrical validation

Before assembling the ClockBook inside its final enclosure, I built a complete prototyping environment to validate every part of the system: SPI buses, power rails, display timing, and the PortalManager rendering pipeline.

With eight displays running in parallel, stability had to be guaranteed before any mechanical work.

This step documents show the early tests that shaped the final device.

1. Establishing a Stable Power Setup

Driving seven GC9A01 displays + one ST7796 requires clean 5V backlight power and stable 3.3V logic rails.

For the prototyping phase, I used a bench setup based on:

1. a recycled ATX power supply
2. a 24-pin breakout module
3. solid 5V and 3.3V distribution
4. shared ground for all components

This allowed safe current delivery while testing animations at full brightness.

2. ESP32-S3 Bench Setup

The ESP32-S3 N16R8 was first mounted on a breakout board to simplify wiring and to access pins quickly while switching between SPI2, SPI3 and I²C.

This setup allowed me to verify:

1. SPI2 speed + stability for the ST7796
2. SPI3 shared bus logic for the seven GC9A01 portals
3. I²C communication with the VL53L0X
4. pin mapping and timing

3. First Wiring Tests (Breadboard Stage)

With the microcontroller ready, I tested the signal routing using a breadboard:

1. shared SCLK / MOSI / DC lines
2. individual CS lines
3. RESET logic
4. voltage measurement under load
5. backlight current draw
6. noise level on SPI3 during animation bursts

This stage ensured that the GC9A01 modules would run smoothly long before entering the enclosure.

4. Testing Display Integration

Before mounting any screen inside the book enclosure, each portal was validated individually:

1. correct rotation
2. colors
3. glyph rendering
4. ring pulsation
5. brightness uniformity
6. SPI refresh stability

This step prevented wiring errors and ensured uniform behavior across all seven portals.

5. Full Bench Test Before Assembly

Finally, all components were powered and tested together on the bench:

1. ST7796 displaying time, date, temperature, humidity (all hand-coded icons)
2. seven GC9A01 portals running independent animations
3. VL53L0X presence affecting portal intensity only
4. PortalManager running at stable framerate
5. no SPI conflicts, no flicker, no resets

Only when the entire setup was stable did I begin assembling the final ClockBook.

Step 5: Building the Enclosure (Book Design & Integration)

The ClockBook enclosure is a major part of the project’s identity.

Instead of a simple box, the goal was to create an object that feels like an artifact — something between a sculpted book, an illuminated manuscript, and a technological relic.

This step explains how the enclosure was built, prepared, textured, and how the eight displays were integrated inside it.

1. Choosing a Book-Shaped Enclosure

The base enclosure started as a recycled plastic box, originally shaped like a book.

This form immediately suggested:

1. a narrative object
2. a container of stories
3. a perfect frame for circular portals
4. a surface large enough for eight displays

Using a book shape gives the ClockBook a distinctive look that stands apart from typical maker enclosures.

2. Preparing the Internal Structure

Inside the box, I added a rigid support layer to hold:

1. the seven GC9A01 displays arranged around the center
2. the ST7796 main screen in the middle
3. cable paths
4. mounting points for the ESP32-S3 and wiring
5. the VL53L0X on the side portal

This inner structure was designed to keep the displays perfectly aligned and to hide all wiring once the box is closed.

3. Foam & Felt Layer for Display Mounting

To protect the displays and avoid mechanical stress on the PCBs, the inside of the enclosure includes a combined foam and felt mounting layer.

This layer provides cushioning, stabilizes the screens, and keeps the wiring safe during assembly and during normal use.

The process:

1. a thin felt sheet was added first to protect the back of the displays
2. a compressed foam sheet was placed above it for structural support
3. circular openings were cut precisely to match each GC9A01 diameter
4. a rectangular cutout was made for the ST7796
5. all holes were manually cut depending on fit
6. the foam layer holds the screens firmly without forcing or bending the PCBs

This dual-layer approach (felt + foam) ensures:

1. no vibration damage
2. no pressure on solder joints
3. clean alignment of all eight displays
4. long-term durability inside the book enclosure

It also makes the inside of the ClockBook look clean, organized, and professional.

4. Decorating the Exterior (Faux Leather & Relief Work)

The outside of the enclosure was covered with:

1. embossed faux leather, offering a textured, antique finish
2. careful stretching and gluing for a seamless surface
3. precise cuts around the circular openings
4. a frame around the ST7796 to “anchor” the screen visually

The result is a rich, tactile surface that gives the ClockBook its unique aesthetic — part old manuscript, part mysterious device.

5. Installing the Portals

Each GC9A01 display was inserted from behind and aligned so that:

1. the screen sits perfectly centered in the circular cut
2. the bezel hides the PCB edges
3. the visual balance of the front face is maintained

The GC9A01 modules fit tightly against the foam, preventing movement with screws.

6. The Sentinel Portal (Side Display)

One GC9A01 display was mounted on the side of the book to act as a Sentinel Portal:

1. shows simplified high-intensity graphics
2. reacts to the VL53L0X
3. gives the ClockBook a “living edge” and presence

This side portal adds depth and makes the object feel alive from multiple angles.

7. Final Assembly

Once all screens were mounted:

1. wiring was routed behind the foam layer
2. the ESP32-S3 was secured to the base
3. the VL53L0X was mounted under the Sentinel
4. the front panel was carefully closed

At this stage, the ClockBook becomes a solid object: no visible wires, no exposed electronics, only the luminous portals and the central interface.

Step 6: The Portal System (Seven Circular Displays)

The ClockBook features seven GC9A01 circular displays, arranged around the central ST7796.

Each one acts as a “temporal portal”: an independent window showing a unique visual interpretation of time through rings, glyphs, pulses, and rotating elements.

What each portal shows

Each GC9A01 portal renders a different aspect of time:

1. Portal 1 – Seconds spiral: expanding / contracting rings
2. Portal 2 – Glyph seconds: the temporal glyph leaves a 3-second trailing memory
3. Portal 3 – Harmonic pulses: slow breathing animation
4. Portal 4 – Circular markers: minimalist seconds arc
5. Portal 5 – Rotating symbols: time as shifting geometry
6. Portal 6 – Micro-pulses: subtle high-frequency ticks
7. Portal 7 – Presence sentinel(only if close): activates on VL53L0X detection

All portals are driven by a unified engine called the PortalManager, which handles:

1. animations
2. color transitions
3. timing
4. presence influence (from the VL53L0X)
5. brightness and dimming
6. per-portal rendering

This system allows all seven portals to remain visually connected while still behaving independently.

1. The Concept Behind the Portals

Unlike a traditional clock, the portals do not show numbers.

Instead, they display movement, cycles, and continuous transitions.

Examples include:

1. breathing rings
2. rotating glyphs
3. particle-like pulses
4. oscillation patterns
5. “temporal echoes” where a trace follows the motion

Each animation is designed to suggest:

1. time passing
2. circular motion
3. memory
4. flow

The result is a front interface that feels alive, constantly shifting, but never chaotic.

2. All Portals Share the Same SPI Bus

All seven GC9A01 screens share the same SPI3 bus:

1. SCLK
2. MOSI
3. DC

Each display has its own CS pin, allowing the ESP32-S3 to address them individually.

This shared-bus architecture allows the ClockBook to use only one high-speed SPI channel for all the portals, while keeping the ST7796 completely separate on SPI2.

3. The PortalManager (Graphics Engine)

The PortalManager is a custom engine written specifically for this project.

Its responsibilities:

1. generate circular animations
2. compute transitions and timing
3. select colors and palettes
4. apply presence-based modulation
5. refresh the GC9A01 displays efficiently
6. avoid bus conflicts
7. keep frame rate stable

Each portal registers in the manager as an object with:

1. animation type
2. color palette
3. rotation speed
4. frame timing
5. intensity and brightness
6. reaction rules to presence

This modularity makes it easy to expand the system with new animations.

4. Presence Influence (VL53L0X → Portals Only)

The VL53L0X ToF sensor does not affect the ST7796.

Instead, its distance readings are converted into a normalized presenceLevel that is sent directly to the PortalManager.

Effects include:

1. color intensification when someone approaches
2. faster rotation
3. stronger pulsation
4. deeper contrast
5. dynamic “aura” effects around glyphs

This gives the ClockBook a sense of awareness — the portals feel responsive, almost watchful.

5. Circular Rendering Techniques

Rendering on circular displays requires a different approach than rectangular TFTs.

The PortalManager uses:

1. polar coordinate mapping
2. sinusoidal modulation
3. ring-based iteration loops
4. angular sweeping
5. radial fade gradients
6. glyph atlas rendering

These techniques allow animations to feel smooth and natural on round screens.

6. Examples of Portal Animations

Here are some of the key animations used in the ClockBook:

• Ring Pulsation

A central ring expands and contracts smoothly, modulated by presence.

• Rotating Glyphs

Hieroglyph-like symbols rotate around the center, inspired by astronomical diagrams.

• Particle Swirls

Small light particles orbit the screen, creating a cosmic effect.

• Temporal Echo

A point rotates while leaving a fading trail behind it.

• Dual Rings

Two rings rotate in opposite directions, creating interference patterns.

Each animation is designed to be:

1. lightweight for ESP32-S3
2. visually expressive
3. in harmony with the other portals

7. The Sentinel Portal

One GC9A01 is placed on the side of the book and acts as the Sentinel Portal.

It uses:

1. simplified animations
2. high-contrast glyphs
3. strong presence modulation

This creates a “watchful eye” effect on the side of the enclosure —

a subtle signal that the ClockBook is alive.

8. Rendering Frequency & Performance

With the ESP32-S3 N16R8:

1. all seven portals update at high speed
2. animations remain fluid
3. no frame drops occur
4. SPI3 remains stable even under full load
5. no interference with the ST7796

This is one of the core achievements of the system.

Step 7: Presence System (VL53L0X)

The ClockBook includes a subtle presence-sensing system based on the VL53L0X Time-of-Flight distance sensor.

Its purpose is not to gather data, but to give the portals a reactive, living quality.

When someone approaches the ClockBook, the seven GC9A01 portals respond through intensity, motion, and color.

When the room is empty, they slow down and fade gently.

The ST7796 interface remains fully autonomous — only the portals react.

1. Why Presence Instead of Motion?

The VL53L0X was chosen because:

1. it provides clean, reliable distance measurements
2. it works even in low light
3. it detects approach, not just motion
4. it avoids false positives (pets, background noise, vibration)
5. it integrates beautifully with a calm, ambient object like the ClockBook

Unlike PIR sensors, which detect heat changes, the ToF sensor measures actual distance, enabling smooth transitions.

2. I²C Wiring (Simple & Lightweight)

The VL53L0X uses only two lines:

1. SDA
2. SCL

It runs independently from the SPI buses, creating no interference with:

1. SPI2 (ST7796)
2. SPI3 (GC9A01 portals)

Even during rapid portal animations, the VL53L0X remains fully stable.

3. Converting Distance to Presence Level

In the firmware, the raw distance is normalized into a single parameter:

presenceLevel = map(distance, close → far);

This becomes a value between 0.0 and 1.0.

Examples:

1. Someone very close → presenceLevel = 0.8–1.0
2. Person standing at normal distance → 0.3–0.6
3. Room empty → 0.0–0.1

This value is sent only to the PortalManager, never to the ST7796.

4. How the Portals React

Each portal uses the presenceLevel differently, depending on its animation mode.

Examples:

• Color Intensity

Dynamic Color Shift with Presence

The portals are not static.

When the VL53L0X detects a person approaching the ClockBook, the seven GC9A01 displays gradually shift their color palette:

1. Far distance → cold colors
2. blue, cyan, indigo, minimalist tones
3. Medium distance → neutral hues
4. violet, turquoise, soft gradients
5. Close presence → warm colors
6. orange, amber, red, glowing rings

This transition is fully real-time and distance-based.

The ClockBook reacts like a living object:

the closer you are, the warmer the portals become.

This gives the sculpture a subtle emotional behaviour, turning time into a form of presence-aware light.

• Pulsation Speed

Rings expand and contract faster when someone is near.

• Rotational Dynamics

Glyphs rotate more energetically at high presence.

• Particle Activity

More particles, or higher speed, when presence is strong.

• Aura Effects

A soft glow or shimmer appears around certain animations.

These effects are always subtle, never aggressive — the ClockBook remains a calm, ambient object.

5. The Sentinel Portal (Side GC9A01)

The side-mounted GC9A01 acts as a Sentinel Portal:

1. simpler animations
2. fast reaction to presence
3. behaves like an “eye” or awareness indicator

Because it is directly visible from the side, it gives the ClockBook a sense of depth and “attention”.

6. No Interaction With the ST7796

The weather/time/date display is not influenced by presence.

The ST7796 interface is:

1. autonomous
2. static
3. always readable
4. unaffected by animation load
5. unaffected by the VL53L0X

This preserves clarity and avoids confusion for the user.

7. Smooth Transitions (No Flicker, No Jumps)

The presenceLevel is smoothed using easing to avoid jumps:

1. linear interpolation
2. gradual fade-in/out
3. soft acceleration curves

This ensures the portals breathe, rather than react abruptly.

8. Purpose of the Presence System

The goal is not “smart detection”.

It is emotional behavior, giving the ClockBook:

1. awareness
2. subtle response
3. calm interactivity
4. a sense of life

The presence system is what turns the ClockBook from a clock into a living object.

Step 8: The ST7796 Time Interface (UI, Digits, Icons, Weather)

The ST7796 4″ display forms the calm, stable heart of the ClockBook.

While the surrounding portals move, pulse, and react to presence, the central interface is designed to remain clear, readable, and autonomous.

It displays:

1. time
2. date
3. local temperature
4. local humidity

Every element—including digits, icons, separators, and layout—is hand-coded, with no external fonts or graphics.

The ST7796 runs on SPI2 alone, completely isolated from the portal engine.

1. Fully Custom UI (No Fonts, No Bitmaps)

Every component of the interface is drawn manually using geometric primitives:

1. custom-built numbers
2. pixel-precise icons
3. proportional layout
4. internal grid for alignment

This gives the ClockBook a unique, cohesive visual identity instead of relying on generic libraries.

The drawing pipeline is optimized to keep the interface crisp and flicker-free at all times, regardless of portal activity.

2. Hand-Coded Digits

Time digits are rendered using a custom function that draws:

1. vertical bars
2. horizontal segments
3. diagonal transitions
4. rounded corners
5. controlled thickness

The result is a clean, modern style that stays perfectly readable from a distance.

The digits scale smoothly and perform extremely well thanks to their procedural nature.

3. Time Layout (Hours • Minutes • Temporal Marker)

The UI is intentionally minimal:

1. large hours and minutes centered on the screen
2. clean spacing around the borders
3. no ornamentation
4. visually balanced composition

This minimalism ensures the central display remains easy to read, even when surrounded by seven animated portals.

4. A Unique Seconds Marker (Time Reference + Memory)

Instead of a traditional seconds counter, the ClockBook uses a glyph-based seconds marker—a rotating hieroglyph that serves both as a temporal reference and as a narrative element.

This marker:

1. Indicates the current second through its rotation
2. Carries a trace of the past

As it moves, it leaves behind:

1. a fading trail representing the previous 3 seconds
2. a half-lit echo indicating the transition toward the next moment

This creates the impression that the seconds “drag” fragments of the past with them.

It becomes a subtle metaphor for time itself:

every instant pulls a ghost of the previous ones.

It is both functional and poetic—a signature of the ClockBook aesthetic.

5. Custom Weather & Sensor Icons

The UI includes hand-drawn icons for environmental data:

1. thermometer icon for temperature
2. drop icon for humidity

Each icon is coded manually using geometric elements:

1. circles
2. arcs
3. rectangles
4. pixel-level details

All information comes from local sensors only—no internet or API required.

6. Date Display

The date is displayed in a clean, minimal format:

1. day of the month
2. month
3. spacing aligned with the clock grid

It complements the time digits without taking visual focus away from them.

7. Full Independence From the Portal System

The ST7796 interface is completely isolated from the portal engine:

1. it does not react to the VL53L0X
2. it does not change color with presence
3. it does not share animation timing
4. it does not receive data from PortalManager

This guarantees perfect stability and legibility at all times.

8. Performance

Because the ST7796 is driven on its own SPI bus (SPI2):

1. there is no flicker
2. no slowdown from the portals
3. no bus conflicts
4. updates remain smooth and clean

This is crucial for keeping the ClockBook practical and usable as a real clock.

Step 9: Boot Sequence & Portal Initialization

Before the ClockBook begins its normal operation, the system performs a structured boot routine.

This routine guarantees that:

1. each display initializes correctly
2. the SPI buses are stable
3. the portals start in sync
4. the ST7796 is ready before animations begin
5. no flicker or black refresh appears during startup

The boot sequence is visible through the Serial Monitor and during the first seconds after powering on.

1. Power-Up & Hardware Checks

When the ESP32-S3 starts, it performs the following steps:

1. initializes the CPU cores
2. configures the SPI2 and SPI3 buses
3. configures pin modes (DC, RST, CS0…CS6)
4. initializes I²C for the VL53L0X
5. performs internal memory checks
6. enables PortalManager in an “inactive” state

This ensures the system reaches a stable baseline before touching the displays.

2. ST7796 Initialization (First, Always)

The ST7796 is initialized first, on its dedicated SPI2 bus:

1. the screen is reset
2. orientation is configured
3. color mode is set
4. brightness/backlight is enabled
5. UI layers are prepared
6. the first time + date frame is drawn

The ST7796 must be fully ready before any portal animation begins.

This gives the ClockBook a clean, professional startup instead of a chaotic flicker.

3. Portal Initialization (GC9A01 × 7)

Once the ST7796 is ready, the ClockBook initializes each of the seven GC9A01 screens one by one, in a controlled sequence.

For each portal:

1. Reset pulse
2. CS pin selection
3. GC9A01 init commands
4. set rotation (per portal orientation)
5. set color mode
6. clear the framebuffer
7. register portal into PortalManager

4. PortalManager Startup

After all portals are physically initialized, the PortalManager engine comes online.

It performs:

1. registration of each portal object
2. assignment of animation classes
3. loading initial color palettes
4. time-based randomization (seeded)
5. preparing frame timing
6. clearing internal buffers
7. enabling the first animation frame

At this point, the portals do not animate yet—they are “armed,” waiting for the start pulse.

5. Wake-Up Sequence (Smooth Appearance)

To avoid a sudden blast of color, the ClockBook uses a progressive wake-up animation:

1. portals fade in
2. rings or glyphs appear gradually
3. motion ramps up softly
4. colors transition from dark → primary palette
5. intensity increases over ~1 second

This makes the ClockBook feel like it is “waking up”, not “turning on”.

Your film of the boot confirms this effect: the portals appear alive immediately, but never abruptly.

6. Presence System Activation (Last Step)

Only after all displays and animations are stable, the VL53L0X presence system activates.

This prevents:

1. early spikes of presenceLevel
2. sudden intensity changes
3. animation jumps during boot
4. interference with the wake-up sequence

Once active:

1. presenceLevel becomes available to PortalManager
2. the Sentinel Portal gets its first modulation
3. portal animations become responsive

The ST7796 remains unaffected.

7. Final Ready State

When the Boot Sequence ends, the ClockBook enters normal operation:

1. ST7796 → displays time, date, weather
2. PortalManager → runs seven independent animations
3. VL53L0X → provides presenceLevel
4. Sentinel Portal → shows awareness
5. both SPI buses → fully stable
6. framerate → smooth across all portals

The entire process is fast, clean, and visually coherent.

Below, two videos showing the init sequences, serial monitor and all displays.

Step 10: Code Excerpts (Key Parts of the Firmware)

The ClockBook firmware is built around three major systems:

1. The ST7796 time interface (separate SPI bus)
2. The PortalManager engine (seven GC9A01 portals)
3. The VL53L0X presence system (I²C input → animation modulation)

Below are the most important excerpts from the project code, simplified and commented for clarity.

1. Main Setup — Initializing All Buses & Devices

This snippet shows how the ESP32-S3 configures both SPI buses and prepares the displays:

void setup() {

Serial.begin(115200);

delay(200);

// --- INIT SPI2 (ST7796) ---

gfx.begin(); // ST7796 on its own bus

gfx.setRotation(1);

gfx.fillScreen(BLACK);

// --- INIT SPI3 (Portals) ---

portals.begin(); // Initializes CS pins, SPI3, GC9A01 drivers

// --- INIT VL53L0X ---

if (!distanceSensor.begin()) {

Serial.println("VL53L0X not detected!");

}

// --- INITIAL DRAW ---

drawClockUI(); // Time + Date + Weather

}

What this shows:

1. ST7796 is independent
2. portals use SPI3
3. VL53L0X is on I²C
4. the UI is drawn once before animations begin

2. Portal Initialization (7 GC9A01 Displays)

Each portal is initialized one by one, ensuring clean SPI3 operation:

void PortalManager::begin() {

SPI.begin(SPI3_SCLK, -1, SPI3_MOSI); // Shared bus

for (int i = 0; i < PORTAL_COUNT; i++) {

pinMode(portals[i].cs, OUTPUT);

digitalWrite(portals[i].cs, HIGH);

portals[i].display.init();

portals[i].display.setRotation(portals[i].rotation);

portals[i].display.fillScreen(BLACK);

Serial.printf("Portal %d initialized\n", i);

}

}

Key points:

1. SPI3 only uses SCLK + MOSI + DC
2. each portal has its own CS pin
3. initialization is sequential to avoid conflicts

3. Drawing the Custom Time Digits on ST7796

clock uses procedurally drawn digits, not fonts:

void drawDigit(int x, int y, int number, int scale) {

const int thickness = 6 * scale;

const int height = 40 * scale;

const int width = 20 * scale;

switch (number) {

case 0: drawRect(x, y, width, height, thickness); break;

case 1: drawLine(x + width, y, x + width, y + height, thickness); break;

case 2: drawCurve2(x, y, scale); break;

case 3: drawCurve3(x, y, scale); break;

// …

}

}

Why this matters:

1. hand-coded digits = unique design
2. consistent geometry
3. extremely fast rendering on SPI2

4. The Seconds Glyph (Rotating Temporal Marker)

"trotteuse hiéroglyphique" with its fading past:

void drawSecondsMarker() {

float angle = second() * 6.0; // 360° / 60 seconds

float rad = deg2rad(angle);

// trailing echo (past 3 seconds)

for (int t = 1; t <= 3; t++) {

float fade = 60 - (t * 20); // decreasing brightness

drawGlyph(centerX - cos(rad - t * 0.1) * R,

centerY - sin(rad - t * 0.1) * R,

fade);

}

// half-lit transition echo

drawGlyph(centerX - cos(rad - 0.05) * R,

centerY - sin(rad - 0.05) * R,

120);

// main glyph

drawGlyph(centerX - cos(rad) * R,

centerY - sin(rad) * R,

255);

}

Effect:

1. shows the current second
2. leaves a 3-second trail
3. includes a half-lit “future echo”
4. smoothly rotates around the UI center

5. Weather & Sensor Icons (All Hand-Coded)

Example for a custom thermometer icon:

void drawThermometer(int x, int y) {

fillCircle(x, y + 18, 6, RED);

drawRoundRect(x - 3, y - 15, 6, 28, 3, WHITE);

}

Everything is drawn by code, not images.

6. Computing Presence Level (VL53L0X → Portals Only)

The distance from the sensor is normalized into a 0.0–1.0 range:

void updatePresence() {

uint16_t distance = distanceSensor.readRangeSingleMillimeters();

// Smooth normalization

presenceLevel = constrain(1.0 - (distance / 600.0), 0.0, 1.0);

// Send only to portals

portals.setPresence(presenceLevel);

}

Important:

The ST7796 does not use this value.

7. Portal Rendering Loop

Every frame, the portals are updated via PortalManager:

void loop() {

updatePresence(); // I²C → normalized

drawClockUI(); // ST7796 (static)

portals.update(); // all 7 GC9A01 animations

}

Architecture:

1. ST7796 = stable layer
2. GC9A01 = dynamic layer
3. VL53L0X = modulation input

8. Example Portal Animation (Ring Pulsation)

void Portal::animatePulse() {

float intensity = presenceLevel * 0.6 + 0.4;

uint16_t color = colorLerp(baseColor, modColor, intensity);

float r = 40 + sin(millis() * 0.005) * 20 * intensity;

display.drawCircle(centerX, centerY, r, color);

}

Effect:

Presence makes the ring pulse faster and brighter.

Below, you'll find the five files needed to test the clockbook, all of these files must be placed in the same folder! I created a folder named "ClockBook" and put them in.

Step 11: Troubleshooting & Tips

Building the ClockBook involves eight displays, multiple buses, and tight wiring inside a compact enclosure.

Here are the most common issues you might encounter during the build, along with the solutions that worked for me.

This section should help anyone reproduce the project without frustration.

1. Black Flicker or Random Flashing on GC9A01 Displays

Symptom:

A portal briefly flashes black, loses a frame, or shows tearing.

Causes:

1. CS line conflict
2. SPI3 bus noise
3. long wires acting as antennas
4. inconsistent 5V backlight supply

Fixes:

1. Keep CS wires as short as possible
2. Twist SCLK + GND together (reduces noise)
3. Add a 100 nF decoupling capacitor near each GC9A01
4. Ensure all GC9A01 share the same GND point
5. Avoid daisy-chain grounds; use a star topology
6. Reduce SPI3 speed slightly (e.g., 40 MHz → 27 MHz)

2. One Portal Works, Others Stay Black

Symptom:

Portal 0 initializes, but Portal 3 or Portal 6 stays black.

Causes:

1. Wrong CS pin definition
2. CS pins floating
3. wiring swapped under the foam
4. one display’s reset holding the bus down

Fixes:

1. Check each CS in your PortalManager.h
2. Pull all CS pins HIGH before initialization
3. Manually pulse the RESET line once
4. Test each GC9A01 individually before integration

3. ST7796 Shows Noise When Portals Animate

Symptom:

The main screen flickers or shows random pixels when all portals run at full speed.

Cause:

SPI2 and SPI3 ground currents interfering.

Fix:

1. Run ST7796 on SPI2 only (architecture already respects this)
2. Add a separate 5V line for ST7796 , i did.
3. Ensure GND is thick and stable
4. Avoid sharing the same thin wire for both buses

4. VL53L0X Gives Erratic Distance Measurements

Symptom:

Presence jumps between 0.1 → 1.0 → 0.2 for no reason.

Causes:

1. insufficient stabilisation time
2. unstable wiring
3. sensor too close to a reflective surface
4. wrong timing budget

Fixes:

1. Add delay(50) between readings
2. Enable long-range mode (sensor.setLongRange(true))
3. Use a short, good-quality SDA/SCL pair
4. Shield the sensor from internal reflections (foam helps)

5. ESP32 Keeps Rebooting (WDT Reset or Brown-Out)

Symptom:

Random reboots, especially with all displays ON.

Causes:

1. insufficient 5V current
2. voltage drop
3. USB power too weak
4. backlights drawing too much simultaneously

Fixes:

1. Use an external 5V / 3–5 A supply
2. Add a large 1000 µF capacitor on the 5V line
3. Avoid powering 8 displays from USB
4. Use JST connectors with proper gauge wires

6. Slow Animations or Lag on Portals

Symptom:

Animations appear slow, stuttering, or desynchronized.

Causes:

1. SPI3 too slow
2. too much Serial printing
3. portal fill too heavy

Fixes:

1. Increase SPI3 frequency
2. Remove Serial prints inside animation loops
3. Use drawFastHLine / drawFastVLine instead of fillScreen
4. Cache repeated values (sin, cos, palette values)

7. Foam Misalignment Causing Screen Pressure

Symptom:

A portal appears dimmer or color shifts slightly.

Cause:

Foam pressing too much on the GC9A01 PCB or backlight.

Fix:

1. Recut the foam hole precisely
2. Add felt lining behind the display
3. Avoid bending the PCB inside the enclosure

8. The Sentinel Portal Does Not React to Presence

Symptom:

Side portal stays static or dim.

Causes:

1. VL53L0X readings always at maximum
2. presenceLevel not updated before portals.update()
3. wrong I²C address in code

Fixes:

1. print distance to Serial to debug
2. ensure updatePresence() is called before portals.update()
3. try alternate I²C address (0x29)

9. Best Practices for a Clean Build

1. Label every CS wire before routing inside the box
2. Keep all SPI wires under 20–25 cm
3. Avoid sharp bends on GC9A01 ribbons
4. Use Dupont→JST adapters for maintenance
5. Test every portal one by one before closing the box
6. Keep a small ventilation gap if displays heat up

10. General Tips for Multi-Display Projects

1. Always begin with a breadboard stage
2. Test one bus at a time
3. Never trust factory wiring colors
4. Log everything to Serial during first tests
5. Use a stable power supply from the start
6. Add one portal at a time, not seven at once
7. When something goes wrong, simplify the setup until it works again

Step 12: Final Thoughts & Conclusion

The ClockBook began as a simple idea:

What would a clock look like if time were treated as light, movement, and presence rather than numbers?

What emerged is a hybrid object — part sculpture, part electronic instrument — built from reclaimed materials, hand-coded graphics, and a carefully tuned multi-display architecture.

The project taught me several things:

1. that a single microcontroller can drive far more than expected when the architecture is clean
2. that circular displays unlock unique visual expressions
3. that presence-based interaction can remain subtle and meaningful
4. that upcycling old parts can shape the identity of an object
5. and that a clock does not have to be static — it can feel alive

The ST7796 brings clarity.

The seven GC9A01 portals bring motion, rhythm, and interpretation.

The VL53L0X adds awareness.

The book-shaped enclosure gives it a story.

Together, they form a luminous artifact — a device that doesn’t just show time, but embodies it.

If you decide to build your own version, adapt it, or extend it, I hope this guide helps you navigate the challenges of multi-display projects and inspires you to explore new visual or interactive forms.

Thank you for reading, and for taking the time to discover the ClockBook.

Feel free to ask questions, modify the design, or create your own interpretation.

Every build tells a different story.