• Beautiful Code
  • Posts
  • 👽 WebGL: Another World to discover – Beautiful Code #7

👽 WebGL: Another World to discover – Beautiful Code #7

Today, I'm bringing you a selection of awesome websites built with WebGL. For those who don't know, WebGL (Web Graphics Library) is an API that allows you to render 3D and 2D graphics within web browsers without the need for additional plugins.

Hey everyone! It’s Marc 👋

Welcome to my weekly newsletter.

Today, I'm bringing you a selection of awesome websites built with WebGL. For those who don't know, WebGL (Web Graphics Library) is an API that allows you to render 3D and 2D graphics within web browsers without the need for additional plugins. It uses JavaScript and is based on OpenGL ES (a version of OpenGL for mobile devices) to interact with the device’s GPU (Graphics Processing Unit) and achieve high performance in graphics creation.

There are several libraries that simplify the use of WebGL for creating 3D and 2D graphics on the web, greatly easing direct work with the WebGL API, such as Three.js, Pixi.js or Babylon.js, among others.

In the tools section, I've put together a selection of product directories, alternatives to Product Hunt, where you can list and launch your digital products. I’ve used all three for the launch of Supasnap.

Do you know any websites, tools, resources, or code snippets that could be featured on Beautiful Code? Send them to me! 👇
https://tally.so/r/mRJRGP

With that said, here’s today’s content!

😍 Websites

🔨 Tools

Uneed.best is a platform for launching tech products, similar to Product Hunt. It gives creators fair visibility to showcase their innovations in categories like development, design, and marketing. The platform focuses on daily product launches and community engagement, helping users discover and support new tech ideas

Microlaunch is a platform designed for makers and startups to launch tech products, gather feedback, and attract early customers. It offers extended visibility for product launches, lasting up to 30 days, and provides features like community advice, scoring for both ideas and products, and tools to help developers gain traction. Microlaunch also includes a premium option to boost product exposure, with testimonials praising its ability to drive traffic and support growth​.

DevHunt is an open-source platform built specifically for developers to launch and discover new dev tools. It focuses on providing visibility for tools like APIs, frameworks, and open-source projects. As a community-driven alternative to Product Hunt, DevHunt emphasizes fairness by requiring users to log in with GitHub to vote or comment, ensuring authentic feedback. It features various categories to help developers easily find and share tools, all within a developer-centric environment.

🧰 Resources

Shadcn is a collection of open-source UI components that developers can copy, customize, and integrate directly into their applications. Unlike typical component libraries, it is not installed via npm; instead, you copy the component code from the Shadcn repository and adapt it to your needs. It is commonly used with frameworks like Next.js and styled with Tailwind CSS. Shadcn is designed to be flexible, offering a wide range of components like buttons, forms, and tables, allowing developers to accelerate the development process.

Flowbite is a UI component library built with Tailwind CSS, offering interactive elements like buttons, modals, and carousels. It integrates smoothly with frameworks like React and Vue and is customizable through Tailwind’s utility classes. Flowbite also provides a Figma design system for easier UI planning before coding

Huge icons is a vast icon library with over 37,000 customizable icons in various styles like stroke and solid. It supports formats such as SVG and React, and can be easily integrated into design tools like Figma. The library offers both free and premium versions, with premium providing lifetime access and regular.

🤖 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.

CSS.glass is an online tool that generates glassmorphism effects for web design. It allows users to adjust transparency, blur, and shadows to create frosted glass-like elements and provides ready-to-use CSS code for projects.

A code to make your cursor have gravity and stick to links.
Author: Sikriti Dakua

An animated MMR counter, incrementing unit by unit. Impressive, just like everything Jhey creates!
Author: Jhey

😂 Humor

Not everything is as it seems!

.

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