DEV Community: SUJIT KOJI

THREE.JS VISION MOUSE DISTORTION // VOL. 04

SUJIT KOJI — Sun, 29 Mar 2026 08:25:37 +0000

A real-time WebGL experiment exploring fluid distortion and chromatic refraction through mouse interaction.
Built with Three.js and GLSL, the experience blends dynamic motion, procedural effects, and cinematic visuals on the modern web.

THREE.JS ELEGANCE: INTERACTIVE FLOWER SHADER VOL. 03

SUJIT KOJI — Sat, 28 Mar 2026 08:21:16 +0000

Elegance: Interactive Flower Shader

A sophisticated, interactive visual experience blending high-end editorial design with advanced WebGL techniques. This project features a 3D-distorted floral gallery element powered by Three.js and custom GLSL Shaders.

Three.js #GLSL #Shaders

THREE.JS MIND SCAPE // VOL. 02

SUJIT KOJI — Fri, 27 Mar 2026 09:34:37 +0000

THREE.JS MIND SCAPE // VOL. 02

An exploration of digital tactile experiences through Refraction Shaders and Interactive Distortion. This experiment pushes the boundaries of WebGL by blending organic motion with high-end typography.

Tech Stack: Three.js, GLSL (Shaders), Custom Pipeline.
Key Feature: Dynamic RGB Shift & Mouse-Inertia Displacement.
Vibe: Minimalist, Cinematic, High-Fashion.

THREE.JS MORPHING VOID // VOL. 01

SUJIT KOJI — Thu, 26 Mar 2026 06:46:22 +0000

Pushing the limits of Three.js with custom GLSL noise displacement. 128-segment density for that ultra-smooth liquid transition. No videos, no heavy assets-just pure, optimized math.

Engine: Three.js

Shader: Simplex 3D Noise

Vibe: Industrial Minimalist

THREE.JS LIQUID ART // VOL. 02

SUJIT KOJI — Sat, 21 Mar 2026 18:51:27 +0000

An exploration into high-end GPU-accelerated visuals and fluid motion.

This experiment focuses on the intersection of mathematics and art, utilizing custom GLSL Shaders to create a responsive, liquid-like surface. The interaction is driven by a smooth Lerp-based mouse tracking system that distorts a 3D mesh in real-time.

Engineering "Interfaces That Feel Alive" - My Design Philosophy

SUJIT KOJI — Tue, 17 Mar 2026 17:42:07 +0000

Portfolio:

The Core Concept

Websites shouldn't just be viewed; they should be felt. When we talk about "Awwwards-level" digital experiences, it isn't just about a flashy color palette or a trendy typeface. It’s about that organic flow-the thin line between a static UI and an immersive environment.

The Vision: Motion-First Identity

My portfolio (screenshot above) is built on a single principle: Interfaces that feel alive - not just animated. In this hero section, I focused on three pillars to define my digital identity:

The Living Core: The central organic blob isn't a pre-rendered video or a simple loop. It’s a performance-driven shader designed to give the interface a "pulse" that responds to the environment.

Typography & Hierarchy: By using high-contrast, minimalist Sans-Serif, I let the message breathe while the motion does the heavy lifting.

Technical Sophistication: Every interaction is locked at a cinematic 60FPS to ensure the premium feel remains buttery smooth.

The Creative Tech Stack

To bridge the gap between functional UI and high-end aesthetics, I utilized a stack that balances performance with creative freedom:

Next.js: For a robust, SEO-friendly architecture.
React Three Fiber (R3F): Bringing 3D into the DOM with seamless state management.
Custom GLSL Shaders: Crafting unique visual textures that go beyond standard CSS.
GSAP & Framer Motion: For orchestrating complex layout transitions and micro-interactions.

Beyond the Code

For me, code is more than just logic-it's a medium for Digital Architecture. As a Creative Frontend Developer and WebGL Specialist, I am constantly pushing the boundaries of how we interact with the web.

The goal is always the same: Move away from "templates" and toward "experiences."

I'd love to hear from other creative engineers:
How do you balance heavy WebGL graphics with web performance? Let's discuss in the comments!