Who is Delowar Hossain?

Delowar Hossain is a creative developer and UI/UX designer based in Joypurhat, Bangladesh. He runs the studio The Compiled Thought, builds WebGL-driven editorial websites, design systems, and AI-augmented product experiences, with public recognition targets clearly labelled until they are earned and verifiable.

What does Delowar Hossain do?

He works at the intersection of creative front-end engineering and product design. The practice covers WebGL shaders, GSAP motion choreography, Next.js + React systems, generative AI integration, design systems and editorial art direction. Each year he rebuilds his portfolio from scratch under a new codename.

Where is Delowar Hossain based?

He is based in Joypurhat, Rajshahi Division, Bangladesh, and accepts remote engagements worldwide. The studio works in English and Bengali across European, North-American and South-Asian time zones.

How can I hire Delowar Hossain?

Send a brief to hello@delowarhossain.dev or use the contact form at 2027.delowarhossain.dev/contact. The studio takes a small number of engagements each quarter — typically WebGL-led marketing sites, design systems for product teams, and AI-augmented prototypes.

What is The Compiled Thought?

The Compiled Thought is the studio name Delowar Hossain has shipped portfolios and editorial work under since 2023. It produces creative-developer engagements, an annual portfolio edition, public lab experiments and a journal on craft, code, taste and sustaining practice.

Why does Delowar Hossain rebuild his portfolio every year?

Each annual portfolio is treated as a separate studio system — a new codename, a new visual register, a new architectural opinion about what a portfolio should be. The current edition (MMXXVII) is the eighth in the series; older editions are documented at 2027.delowarhossain.dev/portfolios.

Delowar Hossain — Creative Developer & UI/UX Designer in Bangladesh

Folio MMXXVII

Creative Developer. Award-grade web experiences where typography, motion, and engineering converge.

Selected Works

Start a Project

UI / UX DESIGNWEBGLTHREE.JSGSAPCREATIVE DIRECTIONWEB DESIGNLOGO & BRANDINGFRAMER · WEBFLOWGLSL SHADERSAI INTEGRATIONMMXXVIIUI / UX DESIGNWEBGLTHREE.JSGSAPCREATIVE DIRECTIONWEB DESIGNLOGO & BRANDINGFRAMER · WEBFLOWGLSL SHADERSAI INTEGRATIONMMXXVII

I believe an interface should disappear, leaving only the canvas and the content. I build digital products at the intersection of brutalist editorial design and fluid, high-performance creative development — where typography, motion, and engineering converge into a single physical-feeling experience.

Practitioner

Delowar Hossain - self-taught creative developer from Joypurhat, Bangladesh, with a path from B.A. Political Science into independent web practice and current B.Sc. Computer Science (in progress) at University of the People. Building for the web since 2023.

Full story

Direction

Editorial Restraint

Massive whitespace. Strict grids. Type that demands attention. Decisions, not decoration.

Engineering

Performance Discipline

Sub-50 ms interactions. 60 fps motion. Lighthouse 95+. Craft, measured.

System

Production-Grade Motion

Choreographed scroll, GSAP timelines, custom shaders — repeatable, accessible, calm.

Creative DeveloperThree.js · GLSL · WebGLEditorial TypeNext.js · Nuxt · ReactLogo & Brand · Webflow · FramerArt DirectionAI Integration · RAGCreative DeveloperThree.js · GLSL · WebGLEditorial TypeNext.js · Nuxt · ReactLogo & Brand · Webflow · FramerArt DirectionAI Integration · RAG

Selected &
Targeted.

View All Archive

View Archive

Six chapters,one quiet reel.

A vertical reel index for selected motion work, 2026–2027. Public chapters use verified static covers while project footage is cut.

Chapter index ↗

01Aura Void · the noise fieldBuild00:24
02Halcyon OS · ambient AI surfacesConcept00:31
03Echo Atlas · binaural citiesBuild00:42
04On craft, in 2027Reflection00:58

Five years. Five chapters.One slow, deliberate climb.

01·2023
First line of code
Started the programming journey at 17. Daily HTML + CSS reps, vanilla JS experiments, and the first deployed personal site at 2023.delowarhossain.dev.
02·2024
First freelance brief
Picked up React, Tailwind, and the Next.js mental model. Shipped the 2024.delowarhossain.dev rebuild and the first client landing pages.
03·2025
WebGL + motion deep-dive
Went all-in on GSAP, Lenis, and raw WebGL2. Rebuilt the portfolio at 2025.delowarhossain.dev around shader-driven heroes and editorial typography.
04·2026
Studio voice locked in
Shipped the 2026.delowarhossain.dev edition — editorial-first, scroll-pinned process timelines, and the first WebGL displacement transitions.
05·2027
MMXXVII · Creative-Folio
Next.js 16 · React 19 · GSAP · Lenis · raw WebGL2. Open for Q1 ’27 → Q4 ’27. Two ambitious products in active development.

What I'mdoing right now.

Updated roughly once a month. The full /now page has the recent commits feed, the books I'm reading, and what's on the deck.

Open /now

BUILDING
Aura Void v2 — cursor-attractive fluid sim shader
WRITING
‘Flexible page transitions’ essay (April ’26)
READING
‘Designing Sound’ — Andy Farnell
LISTENING
Floating Points — Cascade

Verified Metrics & Footprint

Grounded Evidence.

Every metric below is anchored to a public audit, live production surface, or GitHub footprint. Click any metric to inspect its verification source.

Process notes, until quotes are verified.

Discovery starts with source-of-truth data, measurable outcomes, accessibility constraints and performance budgets before visual polish.
D
Discovery
Collaboration note, The Compiled Thought
Creative direction is paired with engineering checks: every motion idea needs a fallback, a reduced-motion state and a measurable frame budget.
B
Build
Collaboration note, The Compiled Thought
Handoff includes code, content assumptions, verification notes and rollback paths so a launch can stay calm after the first deploy.
H
Handoff
Collaboration note, The Compiled Thought
Public praise stays unpublished until it has a real person, permission and a source that can be verified outside the portfolio.
P
Proof
Verification rule, The Compiled Thought

What I do, in detail.

01
Creative Development
Pushing the boundaries of the browser. Custom 3D environments, complex shader materials, and fluid particle systems that respond to interaction with microscopic precision.
- WebGL
- Three.js
- GLSL
- GSAP
02
UI / UX Design
Crafting minimalist, intuitive interfaces that prioritise content and motion. Rigid grids and editorial whitespace to frame digital narratives effectively.
- UI / UX
- Design Systems
- Webflow
- Framer
03
Art Direction
Defining the visual language. From typography selection to color grading and motion choreography, every pixel aligns with the core brand identity.
- Art Direction
- Logo & Branding
- Typography
- Motion
04
Full-Stack Engineering
Production-grade systems with AI integration. Full-stack architecture, edge deployments, real-time pipelines, and pragmatic dev-ex.
- Next.js
- Node / Python
- AI / RAG
- DevOps

Workflows · Scaffolding → Shaders → Motion → Hardening

View Services

Concept to Shader.

Workflow 011–2 weeks

Editorial Scaffolding & Token Architecture

Establish the typographic baseline, CSS design tokens, and semantic document graph before drawing a single polygon. Every aesthetic choice is anchored to a measurable contrast and token budget.

Workflow Implementation & Deliverables

Token Architecture4-tier CSS variable design tokens in tailwind.config.ts with WCAG AA L>=0.85 contrast guarantees

Editorial Type ScaleNewsreader 72pt display hierarchy paired with JetBrains Mono 10pt monospace system labels

Semantic Document GraphNext.js 16 App Router route tree with canonical metadataBase and dual JSON-LD + llms.txt contracts

Atmosphere Palette MatrixPure ink-950 dark mode with semantic border tokens calibrated for 0-jank theme switching

Deliverables

✓Design system token schema (Tailwind / CSS vars)
✓App Router route scaffolding & canonical layout graph
✓Schema.org Person & WebSite JSON-LD graph

Tools & Stack

Tailwind CSS
Next.js 16
TypeScript 5.9
Figma

Artifact: Token & Contrast Matrix

SYS-01

// tailwind.config.ts tokens

bg-ink-950:#080808 (L=0.03)

text-warmwhite:#f5f4f0 (L=0.96)

accent-peach:#e3bfb4 (L=0.78)

Contrast Ratio18.2:1 (Passes AAA)

Source: Verified from production engineering architecture

Workflow 022–3 weeks

GLSL Shader Pipeline & WebGL Canvas

Author multi-octave fragment shaders and WebGL2 render loops with hardware-conscious constraints: DPR capping, off-screen pausing, and zero-leak context management.

Workflow Implementation & Deliverables

GLSL Kernel AuthoringMulti-octave fractional Brownian motion (fbm) noise shaders with hardware-friendly SIMD math

DPR Clamping HarnessDevice-pixel-ratio clamped to max 1.75 to prevent fill-rate starvation on 4K/Retina displays

Lifecycle WatchdogIntersectionObserver (threshold: 0.01) halting GPU animation loops immediately when off-screen

Context Loss ResilienceAutomatic WebGL context lost & restored handlers preventing blank canvases after GPU sleep

Deliverables

✓Verified GLSL fragment shaders (HeroShaderGpu, NoiseField)
✓DPR-capped canvas lifecycle harness (src/lib/dpr.ts)
✓30 production lab experiment kernels (/lab)

Tools & Stack

raw WebGL2
GLSL Shaders
Three.js
Canvas API

Artifact: GLSL Fragment Pipeline

SYS-02

// HeroShader.frag

precision highp float;
uniform vec2 u_resolution;
uniform float u_time;
uniform vec2 u_mouse;

void main() {
  vec2 uv = gl_FragCoord.xy / u_resolution;
  float n = fbm(uv * 3.0 + u_time * 0.05);
  gl_FragColor = vec4(vec3(n * 0.85), 1.0);
}

DPR Cap: 1.75IO Threshold: 0.01

Source: Verified from production engineering architecture

Workflow 032–3 weeks

Kinetic Choreography & Shared rAF Bus

Synchronize smooth scrolling with WebGL rendering through a unified requestAnimationFrame loop and continuous exponential damping. Zero React re-renders on the scroll hot path.

Workflow Implementation & Deliverables

Shared rAF Event BusCentralized rafBus.ts ticker with deterministic subscriber priorities eliminating 1-frame scroll lag

DOM-Level Scroll InjectionLenis velocity and progress written directly to <html> custom properties without React state

Continuous Exponential DampingFrame-rate-independent damping (k = -60 * ln(1 - f)) stable across 60Hz and 120Hz displays

Hardware Motion Killswitchprefers-reduced-motion hooks immediately halting physics calculations and GPU transforms

Deliverables

✓Zero-allocation shared rAF bus (src/lib/rafBus.ts)
✓Frame-rate-independent damping library (src/lib/damp.ts)
✓Lenis smooth scroll integration (SmoothScrollProvider.tsx)

Tools & Stack

Lenis Scroll
GSAP Core
rafBus.ts
damp.ts

Artifact: rAF Synchronization Loop

SYS-03

// Deterministic execution pipeline

1. Lenis.on('scroll') → write CSS vars

2. rafBus.tick(now, dt) → priority order

3. damp(cur, tgt, k=7.67, dt) → 120Hz

4. canvas.render() → 0-frame lag

Frame Budget8.33ms (120fps cap)

Source: Verified from production engineering architecture

Workflow 041–2 weeks

Zero-Jank Hardening & Verification Gate

Enforce strict Content Security Policy, sub-100ms interaction latency, zero layout shift, and automated TypeScript quality gates before deployment.

Workflow Implementation & Deliverables

Strict CSP HardeningContent Security Policy in next.config.mjs targeting Grade A on securityheaders.com with zero unsafe-eval

Core Web Vitals AuditProfiling main-thread execution under 8.33ms per frame with LCP < 1.2s and 0.00 Cumulative Layout Shift

Static Quality GateStrict TypeScript 5.9 compilation and ESLint verification passing cleanly with zero type suppressions

LLM & Search VerificationAutomated /llms.txt and /llms-full.txt routes serving full machine-readable portfolio contracts

Deliverables

✓Grade A securityheaders.com audit compliance
✓100/100 Lighthouse performance & a11y profile
✓Production Next.js 16 SSG build bundle

Tools & Stack

securityheaders.com
Google PageSpeed
TypeScript
ESLint

Artifact: Production Verification Gate

SYS-04

Lighthouse Score100 / 100

Security HeadersGrade A (Strict CSP)

Cumulative Layout Shift0.00 (Zero JANK)

Interaction to Next Paint< 50ms (Optimal)

Source: Verified from production engineering architecture

Workflow 01 · Editorial Scaffolding & Token Architecture · 1–2 weeks · 01 / 04

Every year a new portfolio.

The studio rebuilds its portfolio from scratch every year — a different codename, a different visual register, a different idea about what a portfolio should be. 5 editions and counting, each one still live at its own subdomain.

See all 05 editions

MMXXVII
The Compiled Thought
Editorial newsroom architecture. WebGL hero, Lenis-smoothed scroll, scroll-driven process timeline, 30 live lab experiments. Built for sub-100ms interaction, AA contrast, and dual JSON-LD + AI-engine surfaces.
↗ 2027.delowarhossain.dev ✦ You are here
MMXXVI
Studio Press
Single-page editorial micro-folio. Variable-font scroll, three case studies, an inline showreel. Pruned to the bare essentials between two larger systems.
↗ 2026.delowarhossain.dev ↗ View archive
MMXXV
Terminal State
Monolith design-system showcase. Dark UI, dense data, terminal aesthetics. Built around a colour-token system, a custom kinetic cursor and an audio-reactive prelude.
↗ 2025.delowarhossain.dev ↗ View archive
MMXXIV
Void Engine
Experimental folio leaning hard on Three.js: GPU particles, post-processing chain, a custom shader-based page transition. Optimised for desktop showpiece browsing.
↗ 2024.delowarhossain.dev ↗ View archive

Notes on the craft.

All Posts

Continue exploring.

Identity

Practice

Connect

Editorial Restraint

Performance Discipline

Production-Grade Motion

Selected &
Targeted.

Six chapters,one quiet reel.

Five years. Five chapters.One slow, deliberate climb.

First line of code

First freelance brief

WebGL + motion deep-dive

Studio voice locked in

MMXXVII · Creative-Folio

What I'mdoing right now.

Grounded Evidence.

Lighthouse Performance

Public Repositories

Interactive Lab Demos

Shipped Portfolio Editions

Process notes, until quotes are verified.

What I do, in detail.

Creative Development

UI / UX Design

Art Direction

Full-Stack Engineering

Concept to Shader.

Editorial Scaffolding & Token Architecture

GLSL Shader Pipeline & WebGL Canvas

Kinetic Choreography & Shared rAF Bus

Zero-Jank Hardening & Verification Gate

Every year a new portfolio.

The Compiled Thought

Studio Press

Terminal State

Void Engine

Notes on the craft.

Continue exploring.

DelowarHossain.

Editorial Restraint

Performance Discipline

Production-Grade Motion

Six chapters,one quiet reel.

Five years. Five chapters.One slow, deliberate climb.

First line of code

First freelance brief

WebGL + motion deep-dive

Studio voice locked in

MMXXVII · Creative-Folio

What I'mdoing right now.

Grounded Evidence.

Lighthouse Performance

Public Repositories

Interactive Lab Demos

Shipped Portfolio Editions

Creative Development

UI / UX Design

Art Direction

Full-Stack Engineering

Editorial Scaffolding & Token Architecture

The Compiled Thought

Studio Press

Terminal State

Void Engine

Continue exploring.