Hi everyone! I'm Marcos, an independent digital creator from Venezuela. Today I want to share a small project I built entirely from scratch: a web page where a candle slowly consumes itself second by second, showing exactly how much time is left until the New Year.

The Idea

I wanted to create something visual, calming, and slightly philosophical — a way to feel the year passing by instead of just reading a countdown. So I built The Year Candle: a single web page where a green candle with a golden holder burns down mathematically, in perfect sync with the calendar.

How It Works

The math is simple but elegant. The script calculates the percentage of the year that has already passed (from January 1st to December 31st) and applies that percentage to the height of the candle. Every second, the candle shrinks a tiny bit. By the time December 31st at 11:59:59 PM arrives, the candle is completely gone.

The best part? It works automatically for every visitor in their own local timezone. Someone in Tokyo, someone in Madrid, and someone in Caracas all see the candle burning according to their own clock. No server, no database, just pure client-side JavaScript.

Features I'm Proud Of

  • A "ghost" shadow behind the candle shows the original full height, so you can visually see how much has been consumed.
  • A flickering green flame with occasional magical sparks that rise from it.
  • Wax drips that slowly slide down the sides of the candle.
  • Automatic New Year celebration: when the clock strikes midnight on December 31st, the page detects the year change without reloading, fireworks explode across the screen, the new year number appears big at the top, slides down, and the candle rebuilds itself from scratch to start burning again for the new year.
  • A donate button in the corner, because I'm trying to build a sustainable path as an independent creator.

The Tech Stack

Just the classics, no frameworks:

  • HTML5 for the structure
  • CSS3 with gradients, animations, and keyframes for all the visuals
  • Vanilla JavaScript for the math, the canvas-based fireworks, and the automatic year detection

I also split the code into three separate files (index.html, css/style.css, js/script.js) to keep things clean and maintainable. The whole project is hosted for free on GitHub Pages.

Try It Yourself

You can watch the candle burning right now at:
👉 The Year Candle

Support My Work

I'm building small, useful, and aesthetic digital experiences, one project at a time. If you enjoyed this or found it interesting, you can support my independent work here:
☕ Buy me a coffee on Ko-fi

What's Next

I'm planning to build more mini web tools — a breathing guide, a focus timer, maybe an interactive map. If you have ideas or suggestions, I'd love to hear them in the comments.

Thanks for reading, and happy coding! 🕯️✨