Ignite the Magic!

Hi, I’m Julibe, and I Craft Digital Experiences!

Whatsapp Facebook Twitter Dribbble Instagram Envelope

Haunt Me!

Contact Me!

BauhaClock ⏰ Minimal 3D Analog Clock

BauhaClock – 001
Ready to watch time fly? Discover this vibrant, interactive 3D clock that brings a modern, colorful aesthetic right to your screen! Play, click, and enjoy!
A nostalgic and playful exploration of time! This project marks my 2012 transition from traditional 3D software to pure JavaScript, turning mathematical primitives into a vibrant, interactive 3D clock.
julibe #julibe #ThreeJS #WebGL #CreativeCoding #WebDesign #DigitalArt #Minimalism #JavaScript #Timepiece #ModernUI #ColorTheory #FlashEra #RetroCode #foryou
👻⏰ 🕰️ ⏳ ✨ 🎨 🚀 💻 🌈 🤩 🔥 🌟 🛠️👻
Step right up and witness a piece of personal history! 🌟 Dive into my very first Three.js experiment from 2012, where I left the fading world of Flash behind and embraced the magic of pure WebGL code. Click to watch time literally fly, explore dynamic colors, and see how mathem

BauhaClock ⏰ Minimal 3D Analog Clock

v. 3.1.7

Play with Time

My Leap into the WebGL Dimension! ✨

In a nutshell...

The "Too Long; Or too scary??? Anyway don't Wanna Read" version... 🔮

Imagine a sleek, beautifully rounded 3D clock living right in your browser, shifting its gorgeous color palette every 15 minutes. But the real story is under the hood! This was my bridge between the visual editors I loved and the world of pure, programmatic geometry. It combines smooth rotation math with dynamic lighting to turn a utility into a piece of digital art.

Time As A Visual Experience

Forget boring digital numbers and flat interfaces. BauhaClock is a mesmerizing, fully interactive 3D analog clock that transforms your screen into a modern art gallery! Built with a deep appreciation for minimal geometric design, this digital timepiece feels incredibly tangible, complete with soft shadows and dynamic lighting that reacts to the environment.

A Living, Breathing Canvas

Time never stands still, and neither does this clock! Every fifteen minutes, the entire aesthetic shifts through a stunning, generative color palette, bringing a gentle, rhythmic pulse to your digital space. Whether you want to click the canvas to watch time fly by in a sped-up day animation or cu

About

Thinking about building something similar?

These estimates will give you a clear picture of the technical scope, development timeline, and investment required to turn the idea into an awesome reality. 

Big results start with clear information and smart decisions.

Difficulty: very_hard
Value: ~ $550 to $1.500 USD
Details
Minimum
Value: $550
Maximum
Value: $1.500

Duration: ~ 4 to 2 Weeks
Details
Minimum
Hours: 30
Days: 4
Maximum
Hours: 70
Days: 9
Weeks: 2
Value: ~ $90 to $240 USD
Details
Minimum
Value: $90
Maximum
Value: $240

Duration: ~ 1 Day
Details
Hours: 10
Days: 1
Value: ~ $60 to $160 USD
Details
Minimum
Value: $60
Maximum
Value: $160

Duration: ~ 0 to 1 Day
Details
Minimum
Hours: 3
Maximum
Hours: 8
Value: ~ $210 to $550 USD
Details
Minimum
Value: $210
Maximum
Value: $550

Duration: ~ 1 to 4 Days
Details
Minimum
Hours: 10
Days: 1
Maximum
Hours: 30
Days: 4
Value: ~ $80 to $200 USD
Details
Minimum
Value: $80
Maximum
Value: $200

Duration: ~ 0 to 1 Day
Details
Minimum
Hours: 4
Maximum
Hours: 9
Days: 1
Value: ~ $110 to $300 USD
Details
Minimum
Value: $110
Maximum
Value: $300

Duration: ~ 1 Day
Details
Hours: 20
Days: 3

Don’t let the numbers scare you, let’s talk!

The Juicy Details!

All treats, no tricks, just the sweet facts! 🍭

Have you ever looked at a blank code editor and felt entirely out of your depth? That was me back in the day! I set out on a wild mission to rescue the humble analog clock from boring 2D walls, but more importantly, I was on a mission to prove something to myself. This project is a time capsule-my very first attempt at building something beautiful in the browser using pure 3D code.

After the fall of Flash, I had to venture out of my comfort zone. It was scary, it was frustrating, but creating this vibrant, interactive clock was the moment I finally fell in love with the magic of the canvas! 🌈

Ready to take control of my 2012 experiment? Here’s how you navigate this joyful little app:

  1. Watch the Magic: Simply open the project and let it run. The colors will automatically shift every 15 minutes, syncing with your local time.
  2. Time Travel: Click anywhere on the clock’s background! You’ll trigger a hyper-speed animation that blasts through a full 24-hour cycle in just a few seconds.
  3. Set the Mood: Use the “Next 15m Color” picker in the UI panel to instantly inject your favorite hue into the 3D room!
  4. Orbit: Click and drag to pan around the clock. Admire those code-generated primitive curves from every angle!

My personal inspiration for this wasn’t just aesthetic; it was driven by pure, stubborn determination. I already knew my way around the 3D space from hours spent rendering scenes in Cinema 4D and using the ugly Lightwave 3D that they teach us in college. I kind of understood lighting, materials, and cameras. But doing it all in code? That was a different beast.

When Flash was on its last legs (I blame Apple and this thing called the iPhone), it finally introduced a Z-axis, but honestly, wrapping my head around it was out of my league at the moment. I even tried wrestling with Papervision3D, but it was giving me a massive headache! 🤕 It wasn’t until 2012, feeling a bit more confident in my skills, that I decided to give Three.js a proper go. Using primitives and writing everything in pure code was totally new to me, but it was exactly the challenge I needed to move forward.

“The only reason for time is so that everything doesn’t happen at once.”
– Albert Einstein

“Time is a storm in which we are all lost.”- William Carlos Williams

“Those who make the worst use of their time are the first to complain of its brevity.”- Jean de La Bruyère

Let’s paint a picture of the web back then: the beloved era of Macromedia (I mean Adobe) FLASH was ending, and a new, native 3D web was rising. I wanted to build something that felt tangible, like a beautifully crafted designer toy sitting on your desk, but I had to do it using tools that felt completely alien to me at the time.

I was kind of comfortable spinning around viewports in heavy software, but the idea of typing out numbers to generate a shape in the void of a web browser? Mind blown. 🤯 I chose a clock because time is universally relatable, but I injected it with dynamic colors and smooth animations to make checking the time the most visually pleasing part of the day! 🚀

To truly appreciate this project, we have to talk about the tectonic shift the web went through. For years, the beloved era of FLASH was the undisputed king of rich, interactive web experiences. When FLASH began its inevitable decline, the creative coding community was left scrambling for a new champion.

Enter native WebGL. Suddenly, the browser could tap directly into the GPU without any plugins! But writing raw WebGL is notoriously complex. That’s when Ricardo Cabello (the brilliant Mr.doob, my personal real-life Super Hero!) released Three.js to the public on April 24, 2010. It was the new cool thing in town-a lightweight wrapper that made 3D on the web accessible to us mere mortals. It changed the landscape of digital art forever, turning mathematical abstraction into accessible creativity.

The Game-Plan!

Plotting a safe course through the scary maze! 🧭

  • Thinking in Code, Not Clicks: The biggest hurdle was mental. Transitioning from visual tools like Cinema 4D to writing explicit X, Y, and Z coordinates for primitives (like cylinders and boxes) felt like learning to walk again.
  • Generating the Clock Face: Drawing 60 perfect little tick marks dynamically in 3D without loading a massive texture file was a tricky puzzle.
  • The Time Travel Animation: Interpolating a fake “fast-forward” time object over a few seconds, while ensuring it cleanly hands back control to the real system clock without a visual glitch.
  • Embracing the Math: By sketching out the scene on paper first, I was able to calculate the exact radians and offsets needed to position the primitive geometries perfectly in the Three.js scene graph.
  • Canvas Textures to the Rescue: Instead of importing an image, the code generates an HTML5 <canvas> in memory, draws the tick marks using basic 2D rotation math, and wraps that directly onto the 3D cylinder as a texture!
  • Dual Time States: I implemented a toggle that switches the clock’s data source from Date.now() to an interpolated animation timeline, ensuring a seamless snap back to reality when the ride is over.

Beyond being a personal milestone, this project serves as a fantastic ambient display for modern workspaces. It provides a non-intrusive, visually pleasing way to gauge the passage of time without inducing the anxiety of ticking digital numbers. It proved to me-and hopefully to you-that the browser is an incredibly powerful canvas for interactive art.

This clock perfectly handles local time syncing, dynamic ambient color shifting based on an algorithmic palette, complete 3D camera control, and a beautifully sleek UI. What it *doesn’t* do is track timezones or set alarms. It is intentionally scoped to be a pure, joyful expression of the present moment and a celebration of code-generated geometry!

This magic trick wouldn’t be possible without these incredible open-source heroes:

  • Three.js: The ultimate powerhouse that made the 3D web accessible.
  • Polyhaven: For providing the gorgeous, realistic HDRI lighting environment.
  • Google Fonts: For serving up the crisp ‘Oswald’ and ‘Roboto’ typefaces that make the UI pop.

The Nerd Stuff!

I think we are going to need a bigger boat... ahem, I meant cauldron! ✨

JavaScript, Three.js, HTML5 Canvas, CSS

This project leverages a powerful 3D scene graphed inside an HTML <canvas> element. By utilizing a perspective camera and an orbit controller, the user can freely explore the environment. Instead of imported 3D models, every element of the clock (the face, the casing, the hands) is generated using built-in Three.js primitives like RoundedBoxGeometry and CylinderGeometry. The scene uses a dynamic MeshPhysicalMaterial for the clock body, which reacts beautifully to the HDRI environment map.

  • Custom user palettes to allow completely personalized color rotations throughout the day.
  • A subtle web audio tick or chime that matches the minimalist visual aesthetic.
  • Implementing localized weather data to adjust the clock’s material properties (e.g., adding a frosty texture on cold days!).

If the user switches tabs during the “time travel” click animation, the browser’s requestAnimationFrame throttling can cause the animation to finish slightly out of sync with the intended duration.

Play with Time
BauhaClock - 001
BauhaClock - 002
BauhaClock - 003
BauhaClock - 004

* Pricing, timelines, content, and designs are subject to change without prior notice.
Certain projects or aspects displayed are presented for demonstration purposes only and may include partial or placeholder content, conceptual work and/or early-stage ideas, and may not reflect the final delivered product.

* All values provided are preliminary estimates based on the scope that similar projects may present.
These are intended for general reference only and should not be considered final or binding figures.

More spooktastic codes ready to ignite your curiosity!

Guau - 001

GUAU 🐶 Pawesome Owners! 🦴✨

Guau! Premium dog food, grooming, and health products for your best friend. 🦴
View More!
Prismatico - 001

Prismatico 🎨 Your colors, your hues!

Equip the ultimate Prisma artifact! Roll for perception with accessibility checks, brew custom gradients in the alchemy lab, and scribe your loot into legendary scrolls. Your quest for the perfect hue ends here.
View More!
phantom-protocol-002-1

Phantom Protocol 🤖 You were never here

The AI Renaissance didn't begin with a bang, but with a whisper in the static. Humanity was was optimized out! Are you ready for Phantom Protocol?
View More!
Keep Up to Date? Sure, it's cool! No thanks, I'm afraid