# Delowar Hossain — Full content snapshot > Bridging editorial design and high-performance creative development. I build immersive digital products where typography, motion, and engineering converge. Email: hello@delowarhossain.dev Studio: The Compiled Thought Location: Joypurhat, Bangladesh Edition: MMXXVII (2027) Booking: Now booking Q2 ’27 → Q4 ’27 Resume: https://delowarhossain.dev/resume.pdf ## Identity Name: Delowar Hossain Role: Creative Developer & UI/UX Designer Base: Panchbibi, Joypurhat, Bangladesh Languages spoken: English, Bengali ## Expertise - UI/UX Design - Web Design - Logo & Branding - Webflow Design - Framer Design - Creative Development - Three.js · WebGL - GLSL Shaders - GSAP · Lenis - Next.js · Nuxt.js - Art Direction - AI Integration ## Services ### 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. ### UI / UX Design Crafting minimalist, intuitive interfaces that prioritise content and motion. Rigid grids and editorial whitespace to frame digital narratives effectively. ### Art Direction Defining the visual language. From typography selection to color grading and motion choreography, every pixel aligns with the core brand identity. ### Full-Stack Engineering Production-grade systems with AI integration. Full-stack architecture, edge deployments, real-time pipelines, and pragmatic dev-ex. ## Journey ### 2025 — Now — Creative Developer · The Compiled Thought Leading creative engineering on award-winning sites. Shipping immersive WebGL, AI-native interfaces, and editorial product systems for studios and Series-A startups. ### 2023 — 2025 — Full-Stack & Frontend Engineer Built scalable web platforms serving tens of thousands of users. React / Next.js / Node / cloud — with a strong design sensibility and a love of motion. ### 2020 — 2023 — Self-Taught Engineer Started the coding journey while finishing a B.A. in Political Science. Daily reps in the open-source ecosystem and the first GLSL deep-dive. ### 2017 — 2020 — Independent Designer Logo, branding, and editorial design for local businesses. Where the typographic obsession really started. ## Awards & recognition ### Awwwards · 2024 — Site of the Day For Aura Void — a design language merging editorial restraint, technical depth, and interactive storytelling. ### The FWA · 2024 — FWA of the Day For Terminal State — combining editorial product structure with expressive frontend craft and performance discipline. ### CSS Design Awards · 2024 — Best UI Design Selected for interface precision, calm complexity, and a production-friendly AI workflow experience. ### Product Hunt · 2024 — #3 Product of the Day Ranked for turning a niche creative utility into a sharp, highly shareable product workflow. ## Selected works ### Aura Void (2027) URL: https://delowarhossain.dev/works/aura-void Category: WebGL · Creative Direction Role: Creative Direction,Shaders,Frontend Engineering An ambient WebGL world built around a single noise field — pressure, depth, and reflection driven entirely by GLSL. v2 introduces a tactile, physics-aware cursor that pulls the field into local minima. **Brief.** Aura asked for a website that would feel like a place rather than a page — somewhere a viewer could sit inside the brand for sixty seconds without scrolling and still feel like the visit was worthwhile. v1 was a static reel; v2 had to be physical. **Approach.** Everything visual is one fragment shader sampling a 3D noise field. The cursor is treated as a soft body with mass and drag — it pulls the field into a local minimum, reflective metals re-light, and the camera reacts a beat behind. No image assets, no DOM overlays. **Solution.** A single 1.4 kB GLSL program ships the entire experience. We added a 'serene mode' that decays cursor influence to zero after eight seconds, so the field is alive but never frantic. The hero loop is 12 seconds; nobody has noticed it loops. **Outcome.** Average dwell time on the landing scene rose from 11 s (v1) to 1 m 34 s (v2). The site won Awwwards SOTD in week one, then FWA the following month. Conversion to the contact route doubled. Metrics: - Lighthouse: 98 - GLSL size: 1.4 kB - Frame budget: 9.2 ms - Avg. dwell: 1m 34s ### Terminal State (2025) URL: https://delowarhossain.dev/works/terminal-state Category: Creative Direction · Editorial Role: Art Direction,Identity,Frontend A typography-driven editorial system for a generative AI studio. Long-form narratives meet kinetic display type and a strict grid — fluid through phone, tablet, and ultrawide. **Brief.** A young generative-AI lab needed a publication, not a marketing site — somewhere their researchers could ship a 4 000-word essay on Friday and a 90-second teaser on Monday without the design buckling. The constraint: zero stock imagery and a single typeface family. **Approach.** We treated the home page as a magazine cover, not a landing page. Variable-font axes are wired to scroll velocity so display headlines feel like they're being printed in real time. The grid is strict — 12 columns at every breakpoint, no exceptions. **Solution.** Three article templates (essay, interview, dispatch) share one body component. Editorial spreads use CSS subgrid so a long pull-quote spans both columns the moment it lands at viewport width ≥ 980. The system survived 64 articles before any team member needed to ask how to publish. **Outcome.** Time-to-publish dropped from 3 hours to 22 minutes. The site won FWA SOTD and was cited by Typewolf for the headline-velocity treatment. The lab's newsletter doubled in subscribers within the launch quarter. Metrics: - CLS: 0.00 - LCP (mobile): 1.1 s - Articles shipped: 64 - Time to publish: 22 min ### Monolith UI (2025) URL: https://delowarhossain.dev/works/monolith-ui Category: Design Systems · Engineering Role: Design Systems,Engineering,Documentation A design system for an enterprise data platform. Density, contrast, and motion calibrated for power users handling 30K+ daily sessions — now with a token pipeline that ships through Style Dictionary. **Brief.** Monolith's data platform served 30 000 power users across nine product surfaces; six different teams shipped UI without a shared vocabulary. We were brought in to land a single system covering tokens, primitives, patterns, and an RFC process — without slowing anyone down. **Approach.** Tokens first, primitives second, patterns last. Tokens were built in Style Dictionary and emitted to CSS, JS, iOS, and Android. Primitives wrap Radix. Patterns are documented as recipes — copy-paste-able, not abstracted into yet-another-component-library. **Solution.** 40 primitives, 64 documented patterns, four density modes, and a contrast checker baked into the docs. The RFC process is a single MDX file with a deadline; comment threads happen in the PR. Six teams adopted the system within twelve weeks. **Outcome.** Time-to-feature dropped 38 % across the largest team. Accessibility regressions in the design-review queue dropped 92 %. Won CSS Design Awards UI of the Day in week two; cited by Brad Frost as a reference for token pipelines. Metrics: - Primitives: 40 - Adopting teams: 6 / 6 - a11y regressions: −92% - Time to feature: −38% ### Kinetica (2025) URL: https://delowarhossain.dev/works/kinetica Category: Typography · Motion Role: Concept,Motion Design,Frontend A kinetic typography study turned product. Variable fonts mapped to scroll, audio amplitude, and reactive cursor velocity — the type behaves like a living organism. **Brief.** A self-initiated experiment: what would a typography study look like if every variable font axis were genuinely interactive — not just decorative? The constraint was a single page, two typefaces, and no images. **Approach.** Three input channels feed the type: scroll velocity drives weight, microphone amplitude drives width, cursor velocity drives slant. Each channel is smoothed with a one-pole low-pass so the text sways instead of jitters. **Solution.** All animation runs on the compositor — `font-variation-settings` is updated once per rAF, never inside React state. The microphone channel asks for permission only when the user opts in via a small icon at the corner of the page; everything works without it. **Outcome.** Featured by Typewolf, Site Inspire, and the Variable Fonts community newsletter. The interaction model has been cited in three subsequent variable-font experiments by other studios. Metrics: - Input channels: 3 - Frame budget: 4 ms - JS bundle: 38 kB - Time to interactive: 0.6 s ### Void Engine (2024) URL: https://delowarhossain.dev/works/void-engine Category: Audio-Visual Experience Role: WebGL,Sound Design,Performance A real-time audio-reactive 3D scene rendered with custom raymarching. Audio FFT bins drive volumetric lighting and material color grading — originally an installation, now a web port. **Brief.** Lokal Sound commissioned a permanent gallery installation that would react to the live room — not pre-rendered video, not a pre-recorded loop. The web port had to feel like the same piece on any laptop, on any network. **Approach.** A single raymarched scene fed by 64 FFT bins. Lower frequencies drive volume density, mids drive material absorption, highs spawn micro-sparks. The web version downsamples FFT to 32 bins and degrades raymarch step count gracefully on integrated GPUs. **Solution.** On the gallery rig (RTX A2000), the piece runs at 1440p / 60fps. On a 2019 MacBook Air it runs at 720p / 45fps with the same visual language — the volumes are softer, the sparks are denser, but it still reads as the same room. **Outcome.** Installed at Lokal Sound's Berlin space for six months. Web port garnered 240 000 unique visitors in its first quarter. Used as a teaching reference at three universities for FFT-driven shader work. Metrics: - FFT bins: 64 - Gallery uptime: 99.97% - Web ports: 720p / 45fps - Unique visitors: 240k ### CrackIt (2027) URL: https://delowarhossain.dev/works/crackit Category: Product · AI Role: Product Design,RAG Systems,Mobile Mobile exam-prep companion with a custom RAG pipeline, syllabus-aware quizzes, and a quiet, paper-like interface. 2027 update adds an offline mode and live tutor handoff. **Brief.** University-entrance prep in South Asia is dominated by 4 000-page textbooks and last-minute coaching. CrackIt's premise: the same content, delivered as a quiet, paper-like companion that knows your syllabus and your weakest topics. **Approach.** A custom RAG pipeline indexes the ten official textbooks per board and retrieves passage-level citations on every answer. Quizzes are generated from the same passages so users can always trace back to the page. The 2027 update adds an offline mode — the most-used 12 % of content fits in 80 MB on-device. **Solution.** The interface is paper-like — single-column, generous leading, no notification badges. Streaks are present but small. The 'live tutor' button sends a snapshot of your last 30 minutes to a human reviewer if the model can't answer with confidence above 0.78. **Outcome.** 180 000 monthly active users, 22 % paid conversion, +14 percentage-point average score lift on mock exams. Featured by Product Hunt (#3 of the day) and the Bangladesh ICT ministry's annual review. Metrics: - Monthly active: 180k - Paid conversion: 22% - Avg. score lift: +14 pp - Offline corpus: 80 MB ### Halcyon OS (2027) URL: https://delowarhossain.dev/works/halcyon-os Category: AI Workspace · Editorial Role: Product Design,Front-end,AI Prompts A serene AI-first workspace for writers. Predictive outlines fade in like ambient mist; commands surface contextually instead of through menus. **Brief.** Most AI writing tools yell. Halcyon wanted to build the opposite — a workspace that quietly proposed an outline as you typed, surfaced commands when you needed them, and got out of the way the moment you started writing the next paragraph. **Approach.** Predictive outlines fade in at 14 % opacity if the cursor pauses for over 800 ms; they vanish the moment you keystroke. Commands surface contextually — type 'tone:' anywhere and the AI tone palette opens; everything else is hidden until needed. **Solution.** A single editor surface with a single keyboard shortcut (`/`) for everything else. Drafts auto-version every 60 seconds; the side panel is a timeline of versions you can scrub through with arrow keys. Sync is local-first via Y.js + tRPC mutations. **Outcome.** Private beta with 1 200 writers across publishing, journalism, and fiction. 71 % weekly retention at week 8 — well above the 30 % industry baseline for AI tools at this stage. Metrics: - Beta writers: 1.2k - W8 retention: 71% - Predictive opacity: 14% - Auto-version: 60 s ### Echo Atlas (2027) URL: https://delowarhossain.dev/works/echo-atlas Category: Spatial Audio · WebXR Role: Concept,WebGL,Audio Walk through a sound-mapped city in your browser. WebXR-ready, but designed first for keyboard + mouse — binaural audio steered by your gaze. **Brief.** Sound mapping experiments tend to require headsets. Echo Atlas wanted the inverse — a binaural city you could walk through in a normal browser, in a normal afternoon, with normal headphones. **Approach.** Field recordings from twelve street corners in Joypurhat were captured with a portable AT-3060. Each recording is anchored to a 3D point in a Three.js scene. The Web Audio API's PannerNode pans them using head-related transfer functions; gaze direction is steered by mouse, arrow keys, or WebXR head tracking. **Solution.** The scene is intentionally sparse — a single empty street, lamps, and twelve invisible audio anchors. Visitors with WebXR-capable headsets get full 6DoF tracking; everyone else still gets binaural pan that responds to gaze. No login, no analytics, no autoplay. **Outcome.** Featured by The Creative Independent and the Web Audio newsletter. Used as reference material in two university courses on spatial sound design. 38 000 unique sessions in the first month, average session 4 m 12 s. Metrics: - Sound anchors: 12 - Avg. session: 4m 12s - Sessions / mo.: 38k - WebXR optional: yes ## Lab experiments ### Fluid Dynamics Shader URL: https://delowarhossain.dev/lab/fluid-dynamics Category: WebGL Custom GLSL fragment shader implementing a lightweight Navier–Stokes simulation for interactive background distortions. ### Volumetric Lighting URL: https://delowarhossain.dev/lab/volumetric-lighting Category: Three.js Raymarching experiments focusing on soft shadows and atmospheric scattering through procedurally-generated fog volumes. ### Particle Systems URL: https://delowarhossain.dev/lab/particle-systems Category: Particles GPGPU particle system with curl-noise advection, instanced rendering and 1.6M particles at 60fps. ### Variable Font Scroll URL: https://delowarhossain.dev/lab/variable-font-scroll Category: Type Scroll velocity → variable font axes (wght, wdth, slnt) for living, kinetic display headlines. ### Magnetic Cursor Field URL: https://delowarhossain.dev/lab/magnetic-cursor Category: Motion A vector field that warps cursor trails into local minima of an SDF — feels physical, not animated. ### FFT Reactive Material URL: https://delowarhossain.dev/lab/fft-material Category: Audio Web Audio API → uniforms that drive material roughness, emissive color, and displacement. ### Shader Storm URL: https://delowarhossain.dev/lab/shader-storm Category: Glitch A composable post-processing chain triggered by the Konami code. RGB shift, scanlines, hue cycling — layered live. ### Signed-Distance Letters URL: https://delowarhossain.dev/lab/signed-distance-letters Category: Type Glyphs rendered from a signed-distance field for crisp scaling, soft glow, and instant kerning experiments. ### Latency Canvas URL: https://delowarhossain.dev/lab/latency-canvas Category: Performance A frame-pacing visualizer drawing your real input → pixel latency. Every dot is one frame, colored by jank. ### Reaction Diffusion URL: https://delowarhossain.dev/lab/reaction-diffusion Category: Simulation A Gray–Scott reaction-diffusion field running on a single canvas pass. Hover seeds chemistry continuously; click reseeds the field. ### Voronoi Cells URL: https://delowarhossain.dev/lab/voronoi-cells Category: Geometry A Voronoi tessellation of moving sites — the cursor adds a heavy site that warps the entire diagram in real time. ### Flow Field Vectors URL: https://delowarhossain.dev/lab/flow-field Category: Vector A grid of arrows reading the curl of a procedural noise field. The cursor injects a local rotational bias into the flow. ### Lissajous Orbits URL: https://delowarhossain.dev/lab/lissajous-orbits Category: Parametric Layered Lissajous curves whose ratios shift with cursor position. The body of the page becomes the parametric instrument. ### Boids Flock URL: https://delowarhossain.dev/lab/boids-flock Category: Behaviour Reynolds-style flocking — separation, alignment, cohesion. The cursor attracts the flock; hold ⇧ while moving to flip it into a predator. ### Wave Interference URL: https://delowarhossain.dev/lab/wave-interference Category: Optics Concentric wavefronts emitted from multiple sources. The cursor is a live source; click to drop a permanent emitter and watch the interference fringe form. ### Kaleidoscope Mirror URL: https://delowarhossain.dev/lab/kaleidoscope Category: Symmetry A six-fold mirrored brush. The cursor draws into one wedge and the geometry replicates around the centre with alternating chirality. ### Metaballs Field URL: https://delowarhossain.dev/lab/metaballs Category: Implicit A field of additive radial gradients approximating an iso-surface. Spheres float and merge softly; the cursor adds a bright bump that pulls the field with it. ## Journal ### Flexible page transitions: borrowing from Patrick Heng (2027.04.18) URL: https://delowarhossain.dev/journal/flexible-page-transitions Category: Motion How to build a route-curtain system that morphs the destination title through the wipe — and how to keep your Lighthouse score above 95 while doing it. ### Scroll as a medium, not a mechanic (2027.02.02) URL: https://delowarhossain.dev/journal/scroll-as-a-medium Category: Scroll Reframing scroll: not a way to consume content faster, but a timeline you can choreograph. A taxonomy of scroll patterns we use at the studio in 2027. ### Shader Math: from a single noise field to a world (2025.11.12) URL: https://delowarhossain.dev/journal/shader-math-deep-dive Category: WebGL How one well-tuned noise function — and a careful color ramp — can stand in for an entire scene. A practical tour of the math we use in production. ### The Quiet Grid: editorial restraint as a UX strategy (2025.08.22) URL: https://delowarhossain.dev/journal/the-quiet-grid Category: Design Why dropping density and trusting whitespace makes information-dense products feel calmer, smarter, and faster. ### RAG Without the Noise: building accurate AI features (2025.06.11) URL: https://delowarhossain.dev/journal/rag-without-the-noise Category: AI Notes from shipping retrieval-augmented features into production. Embeddings, chunking strategies, and a hard line on hallucinations. ### Typography is the product (2025.02.18) URL: https://delowarhossain.dev/journal/typography-as-product Category: Type On variable fonts, reading rhythm, and the case for hand-tuned type pairings instead of ‘safe’ system stacks. ### WebGL on low-end devices: graceful degradation playbook (2027.03.04) URL: https://delowarhossain.dev/journal/webgl-on-low-end-devices Category: Performance Detecting Swiftshader, throttled GPUs, and battery-saver mode — and falling back to a static gradient that still feels intentional. ### Command palettes aren’t just for devs (2027.01.09) URL: https://delowarhossain.dev/journal/command-palettes-arent-just-for-devs Category: UI Why ⌘K belongs on portfolios, agency sites, and even e-commerce — and how to design one that doesn’t feel like Notion.