GENESIS

• 

  START

• 

  NO SHAPE YET

• 

  STRUCTURE

• 

  FRAGMENTS BUILDING AND SHAPE

• 

  EVERYTHING DEVELOPED

What it does

GENESIS is a single-page website with one main 3D object called the "Genesis Core."

As you scroll down the page, this object changes through three different stages:

Void The object starts as a calm glowing sphere floating in space with small particles around it. Bloom The sphere starts breaking apart and turns into a sharp crystal-like shape. A wireframe layer grows around it. Ascension The object becomes highly energetic. Its surface moves aggressively, and the surrounding particles explode outward.

The camera also moves as you scroll. The same scroll value controls the camera movement, object changes, colors, and animations, so everything stays perfectly synchronized.

How we built it

We built it using:

React + TypeScript for the website structure Tailwind CSS v4 for styling React Three Fiber (R3F) for 3D graphics drei for helpful 3D utilities React Three Postprocessing for visual effects

For the 3D object, we wrote custom GLSL shaders to create:

Surface movement using noise effects Glow around the object Custom particle animations

The scrolling system works like this:

GSAP ScrollTrigger tracks how far the user has scrolled. It stores that progress in one shared place. The 3D scene reads that value directly every frame.

This avoids using normal React state for animation, which keeps the experience smooth and fast.

The particle explosion is also handled completely by the GPU. Instead of updating thousands of particles using JavaScript every frame, we send the data once and let the graphics card handle the movement.

Challenges we faced

The biggest problem was with the glowing effects.

The bloom effect and shader glow were too strong, causing the whole screen to become almost white in some areas. Because of this, the text placed over the 3D scene became difficult to read.

We fixed this by:

Reducing the bloom strength Limiting the shader glow intensity Adding proper dark backgrounds behind text Adding shadows behind text so it remains readable

We also had to learn the new way Tailwind CSS v4 handles configuration because it no longer uses the traditional tailwind.config.js file. Instead, themes are defined directly inside CSS using @theme.

Things we are proud of

Created a fully GPU-powered particle explosion with around 3,500 particles without constantly updating positions with JavaScript. Built the entire experience around one continuous 3D object instead of switching between separate scenes. Delivered a clean production build using strict TypeScript with no type errors. What we learned

During development, we learned:

How to create realistic 3D effects using GLSL shaders How noise-based movement can create natural object deformation How lighting effects like bloom and tone mapping can affect the final look How to properly use Tailwind CSS v4's new styling system How to connect custom shaders with React Three Fiber using shaderMaterial How to build smooth scroll-based 3D experiences where everything stays synchronized

Built With

• drei
• gsap
• react
• react-three-fiber
• tawilwind
• typescript
• vite