Pronab Chakraborty Logo
Pronab PRONAB / SYSTEM

Pronab Chakraborty — Independent Frontend Developer, Motion First

INDEPENDENT FRONTEND DEVELOPER MOTION FIRST
GSAP / THREE.JS / WEBGL INDIA / WORLDWIDE · 2026
INTERACTIVE SYSTEMS FRONTEND & MOTION ARCHITECTURE
02 / POSITION

INDEPENDENT FRONTEND DEVELOPER. MOTION FIRST.

I build scroll-driven experiences: GSAP timelines, Three.js scenes, and the performance work underneath them.

Directing the experience is the part I like.

03 LIVE SYSTEM

THE INTERFACE IS ALIVE.

The website exposes its own runtime behavior: frame budget, input tracking, scroll dynamics, and rendering state.

SCROLL VELOCITY STATIONARY
+0.00 PX/MS
FRAME TIME 60.0 FPS
11.4 MS
TARGET: 16.67MS BUDGET
ACTIVE CHAPTER SYNCED
03 / LIVE SYSTEM
SCROLLTRIGGER CONTEXT
GPU RASTER / DPR CAPPED
1.50 DPR
HARDWARE CAPPED AT 1.5
WEBGL RENDERER STANDBY
IDLE
OFFSCREEN SUSPENDED
INPUT SENSOR POINTER
X: 0.50 · Y: 0.50
NORMALIZED VIEWPORT DELTA
VIEWPORT MATRIX DESKTOP
1440 × 760
DYNAMIC CLIENT VIEWPORT
LIVE SYSTEM EVENT STREAM RUNTIME LOG [ROLLING]
STATUS: SYSTEM READY.
NOW SEE WHAT IT BUILDS ↘
04 SELECTED WORK
ENGINEERED EXPERIENCES

SYSTEMS IN MOTION.

Three digital environments designed around modular architecture, frictionless user journeys, and deterministic automation.

01 NEXUS WORLD MODULAR ARCHITECTURE ↘
02 PET BOOKING SYSTEM SERVICE JOURNEY ↘
03 LOCAL BUSINESS GROWTH OS DATA LIFECYCLE ↘
SCROLL TO EXPLORE SYSTEMS ↓
05 SYSTEM 01
01

NEXUS
WORLD

A SYSTEM. NOT A LANDING PAGE.

ROLE PRODUCT / ENGINEERING
STACK EVENT BUS / WORKER POOL / GSAP
TYPE MODULAR TECHNOLOGY STUDIO
ARCHITECTURE // EVENT-DRIVEN TOPOLOGY
INGEST INPUT STREAM REST / Webhook Payload
ROUTER API GATEWAY JWT Auth & Rate Limit
CORE EVENT BUS topic/v1 PubSub Broker
READY WORKER 01 Payload Transform
ACTIVE WORKER 02 State Synchronizer
IDLE WORKER 03 Webhook Dispatcher
OUTPUT SERVICES / SYNC Downstream Consumer Flush
LIVE EVENT BUS // DISPATCHER
ACTIVE
SYSTEM 01 STATUS ONLINE — READY FOR SERVICE TRANSITION
06 SYSTEM 02
02

PET BOOKING
SYSTEM

FROM INTENT TO APPOINTMENT.

ROLE UI/UX & INTERACTION SYSTEM
STACK CALENDAR SYNC / STATE ENGINE
TYPE FRICTIONLESS SERVICE JOURNEY
USER JOURNEY // SEQUENTIAL PROGRESSION
01 // DISCOVER

Intent Recognition

User specifies pet care intent. Non-selected options quiet down to eliminate choice paralysis.

Full Grooming ($65) Checkup ($80) Daycare ($45)
02 // SCHEDULE

Time Selection

Deterministic provider slot availability checked client-side without page refreshes.

10:00 AM 01:30 PM 04:00 PM
03 // AUTOMATE

Behind the Interaction

Immediate state confirmation with downstream workflow triggers.

✓ BOOKING CONFIRMED
✓ CALENDAR UPDATED
✓ CUSTOMER NOTIFIED
✓ FOLLOW-UP QUEUED
LIVE SCHEDULER // PET WORKFLOW
Full Grooming ($65)
1. CHOOSE SERVICE
2. AVAILABLE SLOTS
07 SYSTEM 03
03

LOCAL BUSINESS
GROWTH OS

FROM LEAD TO ACTION.

ROLE FULLSTACK / WORKFLOW PIPELINE
STACK WEBHOOKS / LEAD SCORING / CRM
TYPE INBOUND DATA LIFECYCLE
DATA LIFECYCLE // TRIAGE & DISPATCH
INCOMING LEAD Apex Logistics Fleet Maintenance Contract · Commercial
98% MATCH SCORE
SERVICE FIT 100%
LOCATION FIT 95% (Within 12mi)
INTENT RATING IMMEDIATE CALL
STATUS ROUTED & NOTIFIED
AUTOMATED ACTION PIPELINE:
⚡ CRM SYNC
📱 INSTANT SMS
✉️ DISPATCH EMAIL
⏱️ 15M SLA TIMER
LIVE TRIAGE STREAM // SIMULATOR
Dr. Sarah Lin 98% MATCH
Dental Implant Consultation
⚡ VIP AUTO-ROUTED · SMS CONFIRMED
Apex Logistics 92% MATCH
Fleet Maintenance Contract
⚡ CRM SYNCED · DISPATCH NOTIFIED
THREE SYSTEMS. ONE PRINCIPLE.

OBSERVE.
ENGINEER.
SHIP.

Every system begins by observing the true bottleneck, engineering deterministic modular logic, and shipping performant experiences without bloat.

EXPLORE CORE PRINCIPLES ↓
08 / PRINCIPLES

OBSERVE. ENGINEER. SHIP.

OBSERVE. 01

Find the actual problem.

Before interfaces, understand friction. The screen is rarely the actual problem. Trace data bottlenecks, operational friction, and user resistance before committing code.

ENGINEER. 02

Design the system.

Structure before decoration. Predictable state and clean interfaces outlast visual novelty. Decoupled modules that perform bounded responsibilities reliably.

SHIP. 03

Put it in front of real users.

A system becomes real when people can use it. Real validation beats speculative architecture. Ship functional builds, observe genuine interaction, and refine ruthlessly.

OBSERVE. ENGINEER. SHIP.

PROVE IT.

WATCH IT WORK ↓
09 / WORKING LAB

LOGIC,
MADE VISIBLE.

A shortest-path algorithm, executed step by step. Routing deterministically from A to F across weighted undirected edges.

ALGORITHM DIJKSTRA
SOURCE / TARGET A → F
CURRENT STATUS STATUS: READY
OPTIMAL COST 7 (PENDING)
SPEED:
VERTEX DISTANCE TABLE
NODE DISTANCE PREVIOUS STATUS
EXECUTION EVENT STREAM
RESOLUTION

PATH FOUND.
BUT SYSTEMS ARE NOT ONLY LOGIC. THEY ALSO HAVE BEHAVIOR.

10 / PERFORMANCE ↓
10 / PERFORMANCE

IF IT DROPS
FRAMES,
THE DESIGN
ISN'T FINISHED.

Motion is not an aesthetic layer applied after the engineering is done. Frame rate, compositor scheduling, memory footprint, and GPU fillrate define how an interface actually feels.

FRAME BUDGET 16.67 MS TARGET
LIVE FRAME TIME 16.4 MS LIVE
DEVICE PIXEL RATIO 1.50 CAPPED
SPATIAL CORE LOOP OFFSCREEN (PAUSED)
MOTION PREFERENCE FULL MOTION
01 / 06
01 / PRINCIPLE

COMPOSITOR FIRST.

Prioritize properties handled on the GPU compositor thread without forcing synchronous browser layout or repaint passes.

FAST-PATH (COMPOSITOR)
  • transform: translate3d()
  • transform: scale()
  • opacity
REFLOW: 0MS · REPAINT: 0MS
AVOID CONTINUOUS
  • width / height
  • top / left / margin
  • filter: blur() / drop-shadow()
TRIGGER GEOMETRY RECALC
02 / PRINCIPLE

16.67MS FRAME BUDGET.

At 60 frames per second, the browser has exactly 16.67 milliseconds to parse JavaScript, compute styles, execute layout, paint raster tiles, and composite layers.

FRAME DURATION: 16.67MS 60 FPS TARGET
JS
STYLE
LAYOUT
PAINT
COMPOSITE
IDLE HEADROOM
JavaScript Style Composite Headroom (>40%)
03 / PRINCIPLE

DPR ≤ 1.5

MORE PIXELS ≠ BETTER MOTION. Capping device pixel ratio on high-DPI displays prevents catastrophic fillrate degradation on mobile and integrated GPUs.

01 NATIVE DPR 3.0× 9× pixel fillrate load. High thermals & battery drain.
02 CAPPED DPR 1.5× Visually indistinguishable retina clarity with 55% less raster load.
03 STABLE 60FPS Predictable frame time across Apple Silicon, discrete & mobile GPUs.
04 / PRINCIPLE

IF YOU CAN'T SEE IT, DON'T RENDER IT.

WebGL loops, particle physics, and canvas animations are suspended the exact frame they exit the viewport.

VIEWPORT IN
INTERSECTION: 1.0
RAF LOOP: ACTIVE
VIEWPORT OUT
INTERSECTION: 0.0
RAF LOOP: CANCELLED (0% GPU)
LIVE STATUS: Spatial Core loop pauses automatically when outside viewport.
05 / PRINCIPLE

SAME DIRECTION. LESS WORK.

Responsive choreography is not shrinking desktop layouts into tiny boxes. It is orchestrating complexity to match device thermals and input models.

DESKTOP 750 Particle Lattice Multi-Wave Shockwaves DPR 1.5 Capped
TABLET 500 Particle Lattice Single Radial Wave DPR 1.25 Capped
MOBILE 320 Particle Lattice Touch Radial Pulse DPR 1.0 Native
06 / PRINCIPLE

MOTION IS OPTIONAL. INFORMATION IS NOT.

Prefers-reduced-motion is treated as a first-class architectural mode: continuous rotations halt, pinned scroll gates yield to natural vertical flow, and 100% of narrative remains accessible.

FULL MOTION Continuous 3D rotation, ScrollTrigger scrubbed pinning, magnetic cursor lerping.
REDUCED MOTION Static spatial equilibrium, unpinned vertical storytelling, immediate state transitions.
RESOLUTION

TECHNICAL CONTROL
CREATES CREATIVE FREEDOM.

We controlled performance. Now we can afford spatial expression.

11 / THREE.JS CORE ↓
11 / THREE.JS CORE

BEHAVIOR,
IN SPACE.

Interactive mathematical particle lattice in dynamic equilibrium. Reacts to pointer displacement, depth vectors, and radial shockwaves.

RESOLUTION

EXPERIMENTS
BECOME PRODUCTS.

12 / NEXUS WORLD ↓
12 NEXUS WORLD

SYSTEMS
BECOME
PRODUCTS.

Nexus World is a product-driven technology studio building web applications, AI systems, automation, and digital products.

FOCUS

WEB APPLICATIONS · SAAS · AI SYSTEMS · AUTOMATION · DIGITAL PRODUCTS

ROLE

CO-FOUNDER · CREATIVE ENGINEERING

DISCIPLINE CHAIN

PRODUCT → DESIGN → ENGINEERING → AUTOMATION → AI → ITERATION

STUDIO METHODOLOGY PROGRESSIVE PIPELINE // 05 STAGES
01 / DISCOVER

DISCOVER.

Find the actual problem.

BUSINESS · USERS · FRICTION · OPPORTUNITY
02 / DESIGN

DESIGN.

Shape the system before the interface.

FLOW · ARCHITECTURE · INTERACTION · DATA
03 / BUILD

BUILD.

Turn the model into a working product.

FRONTEND · BACKEND · APIs · INFRASTRUCTURE
04 / AUTOMATE

AUTOMATE.

Remove repeated work from the system.

AI · WORKFLOWS · EVENTS · INTEGRATIONS
05 / IMPROVE

IMPROVE.

Ship. Observe. Refine.

OBSERVE · ENGINEER · SHIP
STUDIO CHANNELS
LinkedIn ↗ Facebook ↗
HUMAN TURN

SYSTEMS ARE BUILT
BY PEOPLE.

13 / ABOUT ↓
13 ABOUT

I LIKE BUILDING
THINGS THAT RESPOND.

Pronab Chakraborty, creative engineer and founder.
PROFILE & BACKGROUND

Pronab Chakraborty

Creative Engineer · Co-Founder, Nexus World

I am an independent frontend developer and creative engineer based in India, building digital products with teams worldwide. My focus sits at the intersection of motion, architecture, and interaction—crafting interfaces that respond immediately and feel genuinely alive.

At Nexus World, I engineer web applications and automation systems that solve real operational friction. I care less about decorative trends and more about why a system exists, how it performs under load, and how direct the user experience feels.

BASED IN INDIA
WORKING WORLDWIDE
FOCUS FRONTEND / MOTION / SYSTEMS
STUDIO NEXUS WORLD
INVITATION

I LIKE WORKING ON THINGS
THAT NEED MORE THAN ANOTHER TEMPLATE.

14 / CONTACT ↓
14 CONTACT

HAVE AN EXPERIENCE
WORTH DIRECTING?

Directing the experience is the part I like. Let's create something intentional.

LET'S BUILD IT
DIRECT CHANNELS
LinkedIn ↗ Facebook ↗