Zephyr3D by Pranshu Kumar GondZephyr3D by Pranshu Kumar Gond

Zephyr3D

Pranshu Kumar Gond

Frontend Engineer

Web Developer

React

Tailwind CSS

three.js

Introduction

Zephyr3D is a cutting-edge 3D component library, crafted using React Three Fiber, Tailwind CSS, and GSAP, focusing on creative coding techniques like shader programming and procedural generation. Zephyr3D offers a rich collection of visually striking components such as fluid blobs, dynamic particle meshes, and other immersive 3D elements that bring a touch of artistry and innovation to web development. Zephyr3D empowers developers to add unique, responsive 3D elements with ease, ideal for websites, landing pages, or any project requiring a fresh, interactive aesthetic.

Features

Currently there are a bunch of components that I have built which can be categorized into three categories.

1. Data Display

This includes all components that are used to display any kind of data. For now this cateogry only contains a headless Card component which can render a 3D canvas. The design can be desinged as per the user's preferences using Tailwind CSS.

2. Particle Systems

This includes particle systems. Currently, it has components like ParticlesWave, ParticlesMesh, and MorphParticleMeshes.

3. Blobs

This includes 3D animating blobs made using perlin noise. It includes a couple of components - Blob and MusicBlob

Links

Github Link (Open source project)

https://github.com/madraven05/zephyr3d

Demo Link

https://zephyr3d-website.vercel.app/

Like this project

Posted Oct 22, 2024

Zephyr3D is a 3D component library with React Three Fiber, Tailwind, and GSAP, offering fluid blobs, particle meshes, and creative shaders for stunning visuals.

Likes

Views