🍪 Yummy Yummy! – Beautiful Code #49

Hey! It’s Marc 👋

How are you?

As I mentioned last week, today I want to show you a project I finished just before the summer break. It’s the new website for Filipinos — those chocolate-covered cookies I used to love as a kid (and still do!).

The project came through North, a digital product agency based in Barcelona. My task was to develop the frontend of the site based on their design and specifications.

As usual for this kind of project, I went with Nuxt 3 for the frontend and GSAP (my long-time favorite) for animations and interactions. These are the kinds of projects I truly enjoy — bringing a static Figma design to life on the web 😊

You’ll find the link to the site at the top of the “Websites” section in today’s newsletter so you can check it out in action — let me know what you think!

Enjoy! Here’s this week’s content ready for you! 

If you're new here, let me quickly explain what Beautiful Code is all about. 👇

Hope you have a great rest of the week!

Before we continue I want to remind you that you can support Beautiful Code buying me a coffee ☕️ I love good coffee! 😍

😍 Websites

1. Filipinos

👉 Check it out

2. Molazone

👉 Check it out

3. Heidelberg Materials

👉 Check it out

🔨 Tools & Resources

1. Cosmic UI

Cosmic UI is a sci‑fi themed UI component library offering futuristically styled, SVG‑based interactive elements. It’s built for modern web apps and allows creators to use customizable components that evoke a space / futuristic vibe — great for dashboards, futuristic layouts, or interfaces that want that “out of this world” visual style.

👉 Check it out

2. Splide

Splide.js is a lightweight, flexible, and accessible JavaScript library for creating sliders and carousels. It’s written in TypeScript, has no external dependencies, and is designed to work well across devices and screen sizes. You can configure it in many ways—looping, fading, vertical or horizontal mode, autoplay, lazy loading, thumbnails—and it integrates with frameworks like React, Vue, and Svelte.

👉 Check it out

3. Blendy

Blendy is a lightweight, framework‑agnostic JS library by Taha Shashtari that lets you smoothly transition one element into another with minimal setup. You assign “from” and “to” elements using data-blendy-from and data-blendy-to IDs, initialize Blendy, and then call toggle / untoggle to animate between them. It supports both “dynamic” and “spring” animation modes and works in any JS setup (React, Vue, plain HTML, etc.).

👉 Check it out

🤖 Code and snippets

Here you will find code snippets from CodePen that you can use in your projects and adapt to your needs.

1. Action bar - Follow the leader

Author: Una Kravets

👉 Check it out

2. Gallery button

Author: Rafa

👉 Check it out

3. Elastic checkboxes

Author: Josetxu

👉 Check it out

😂 Humor

My Artboard VS My Layers Panel

I hope you enjoy it, and if you like it and want to support me, you can:

• You can support me by buying me a coffee ☕️

• Forward it to a friend and invite them to subscribe

• Share it on your social networks

Or if you just want to say hello, reply to this email or write me on Twitter/X and let's talk!

That's all for today. I hope you enjoyed the content, and see you next week! 👋

Cheers!
Marc