🛍️ Shop beautifully, shop happily – Beautiful Code #8

Hey everyone! It’s Marc 👋

How are you?

I hope your week is going great!

Today, I’m bringing you 3 unique e-commerce sites where design and interactivity play a key role. We’re used to seeing very static e-commerce sites with hardly any interactions or animations. Online stores are usually quite boring!

The ones I’m sharing with you have animated elements, moving text, and even some micro-interactions made with WebGL, the technology I mentioned in the last newsletter.

Here’s today’s content!

😍 Websites

1. Und

2. Vntnr.

3. ZETR

🔨 Tools

1. Remove.bg

Remove.bg is an online tool that automatically removes image backgrounds in seconds. Using artificial intelligence, it identifies the main subject, like people or objects, and accurately removes the background, making it easy to create clean, professional visuals without needing advanced graphic editing software.

2. Burogu

Burogu.pro is a tool designed to help creators and marketers manage and optimize blog content. It offers features like keyword research, SEO optimization, and content performance tracking, helping users enhance their content strategy and improve search engine rankings. Burogu.pro aims to simplify the blogging workflow, making it easier to produce high-quality, SEO-friendly content.

3. Coolors

Coolors.co is a color scheme generator that helps designers and creatives quickly find and create color palettes. With just a tap, it generates color combinations that can be customized, saved, and shared. Coolors.co also allows users to explore trending palettes, adjust colors based on accessibility standards, and extract colors from images, making it a versatile tool for creating visually cohesive designs.

🧰 Resources

1. UnDraw

unDraw.co is a platform offering a collection of open-source illustrations for personal and commercial use. The illustrations are customizable, allowing users to adjust colors to match their brand or project theme seamlessly. unDraw is widely used by designers and developers to enhance websites, presentations, and apps with unique, modern visuals without licensing hassles.

2. React Google Maps

React Google Maps, part of the Vis.gl suite, is a React library that enables developers to integrate Google Maps into their React applications with ease. It provides customizable components and hooks to control map behavior, add markers, overlays, and more. The library simplifies working with Google Maps in React projects, making it ideal for creating interactive, location-based applications with responsive and dynamic map features.

3. UI Colors – Tailwind CSS Color Generator

UI Colors is a color palette generator tailored for Tailwind CSS, enabling designers and developers to create color schemes that integrate seamlessly with Tailwind's utility-first framework. It provides easy customization of shades for each color, ready for direct use in Tailwind projects, which streamlines the process of designing consistent, theme-based UIs in web development.

🤖 Code and snippets

Here you will find code snippets from CodePen that you can use in your projects and adapt to your needs. As I mentioned in the introduction, this week is all about examples with different GSAP plugins.

1. Text Split Effect

A shifting gradient background using CSS animations, adding smooth color transitions for a visually engaging effect.
Author: Matthew Morete

2. Metallic Gradient Border 

A cool metallic gradient made with CSS and linear gradient.
Author: Yu-En W

3. Clay Character

A fun, clay-like character crafted entirely with CSS and HTML, displaying impressive styling techniques to create a 3D, animated look without any JavaScript.
Author: Alvaro Montoro

😂 Humor

New finalest fuck this shit final 🕺

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