How it all started

After more than two intense years of studying programming, I found myself in a tough spot. I had sent out thousands of job applications in Finland, hoping for a breakthrough. In the meantime, I tried to keep my spirits up: I took a short trip to Rabat with my boyfriend, and I dove into courses on technologies that had always piqued my curiosity — like Next.js and Kotlin. But reality hit hard. Months went by, and I only got a handful of callbacks — not a single job offer.

That’s when I decided to flip the script: From now on, I’ll build projects that people will use. And that’s how Ho! Ho! Ho! came to life.

The project

The idea was simple but playful: create a website for an open call for Christmas 2024. The reward? A free custom website. I built it using React, GSAP, React Router, Redux, React Hook Form, Chart.js, react-i18next, PostgreSQL, and AWS. When the project ended, I received dozens of proposals from Finland, Germany, United States, Brazil, Colombia, and more.

There was another reason this project was special to me: animations. I hadn’t worked much with them before, but I wanted this site to feel festive and alive. So I challenged myself to make it snow.

Learning to make it snow

I started researching and discovered GSAP, one of the most powerful animation libraries out there. After reading through their getting started guide, I created my first little animations. And then came the big idea: the website should be snowing all the time.

I spent days testing: how fast flakes should fall, how they should rotate, and how to avoid that awkward feeling of identical elements. Slowly, I pieced together an approach.

Designing the snowflakes

I defined three types of snowflakes:

Heavy → large, yellow
Medium → average, green
Light → small, purple

Each flake followed a few rules:

All snowflakes rotate infinitely at random speeds.
They travel from view height 0 to 100, starting and ending just outside the visible screen area.
Each flake follows a unique horizontal trajectory, defined by its view width start and end positions.
Each flake has a random duration for its fall. Heavy flakes drift slowly, while light ones drop quickly.
When a flake finishes its travel, it is deleted and replaced by a new one with random parameters.

Scaling with the screen

The snowfall shouldn’t feel the same on a phone and on a widescreen monitor. I wanted it to adapt, following a simple rule: More screen, more snow. So I wrote this function:

Of course, behind the scenes there was more code (creating the divs, positioning them, deleting and creating new ones), but this function was the heart of the logic. On different screens, it roughly produced these results:

1600x900px:

1280x720px:

960x540px:

Beyond the snow

After finishing the snow effect, I added more festive touches: a Ho! Ho! Ho! popping in the front page (visible in the opening video of this making-of), smooth page transitions, loading animations for content etc. Every little detail made the project brighter and more joyful.

Looking back

What started as a way to rethink my job search became a project that connected me with people from around the world. And along the way, I didn’t just learn GSAP; I learned how to create an experience that feels alive.

Weblogs