Open to roles & commissionsBengaluru, India20:46:47 IST

Suraj

Design Engineer. I build interfaces, AI products and moving images.

Eight years shipping React at Microsoft Teams scale, now building conversational AI. On the side I make motion work and shoot medium-format film.

See the work Watch how I work

01 — Process

Watch me work.

A one-minute reel of how a piece gets made, cut like a motion piece. Pause it, jump to a chapter, drag the scraps around, or switch on keyframes to see how it's built.

Reel · Take 01

Brief → Final cut · 8 scenes

00 — Title · A process reel

How a piece gets made.

Every piece starts as a pile of ideas. This is one coming together, from brief to final cut.

Creative brief

Client: Shell × Quantzig
Problem: Thousands of documents. Nobody can find anything.
Goal: Answers people trust, with the source attached.
Due: Yesterday.

01 — Brief

It starts with a brief, not a pixel.

First I listen. Who is this for, what has to change, and how will we know it worked? Good motion and good interfaces both start with the story they need to tell.

01 Hook

02 Problem

03 Turn

02 — Storyboard

Then I storyboard it.

Flows, beats and transitions are sketched before anything gets polished. For a product that's the user journey; for a film it's the shot list. It's the same discipline.

Send ↗

03 — Design

Design the system, not just the screen.

Type, colour, components and accessibility, so every screen and every frame comes from one kit. I've built this at Microsoft Teams scale.

Graph editor · power3.inOut

Position · 5 keys · onion skin

04 — Animate

Then it moves.

Easing, timing and choreography make an interface feel alive and keep a story moving. After Effects for film; Rive, GSAP and WebGL for the web.

// answer with receipts
const answer = await rag
  .ask(question)
  .withSources()
  .stream();

return <Answer cite={answer.sources} />

$ vercel --prod

✓ Deployed to bysuraj.in in 41s

05 — Build

And then I ship it.

Production React, Next.js and TypeScript, and now conversational AI: RAG pipelines and LLM interfaces built end to end.

11A

Portra 400

29A

HP5+ @ 800

44A

Ektar 100

06 — Develop

Off screen, I shoot film.

A Pentax 67II and ten frames a roll. Film keeps my eye honest: every frame has to earn its place.

Open the contact sheet →

17A

01 · Quantzig × Shell

Enterprise Knowledge Copilot

52A

02 · Tech Mahindra × Microsoft

Teams at enterprise scale

83A

03 · Mirafra × Pratham Books

Stories built for every screen

07 — Final cut

The final cut.

Three projects, from brief to ship. Open any one for the full story.

Selected work

Case notes · 2022—Now

17A

01 · Quantzig × Shell

Enterprise Knowledge Copilot

A conversational interface that turns a sprawling enterprise knowledge base into answers you can trace back to a source.

2026

52A

02 · Tech Mahindra × Microsoft

Teams at enterprise scale

React interfaces inside Microsoft Teams built to feel fast, dependable and inclusive for a very large audience.

2024—25

83A

03 · Mirafra × Pratham Books

Stories built for every screen

A digital storytelling platform that makes illustrated children's books inviting on any device.

2022—23

Two ways in

Roles · Commissions

Full-time

Hire me

For design-engineer and product-engineer roles. I take a product from Figma to production and care about the last 10%: motion, accessibility and performance.

FrontendReact · Next.js · TypeScript · Tailwind
AI & LLMRAG · LangChain · Agents · Python · FastAPI
CraftDesign systems · WCAG · Performance · Testing
BackendNode.js · Supabase · PostgreSQL

Résumé Email me

Freelance

Commission me

For studios, founders and brands who need one person who can design it, animate it and ship it.

Motion graphicsAfter Effects · Premiere · Blender
Rive interactionsState machines for interactive UI
AI buildsChat products, RAG tools, prototypes
Film portraitsEditorial & portrait on 6×7 film

Start a project Contra

04 — Credits

In order of appearance

Full Stack Developer · 2026 — Now: QuantzigNow; Conversational AI over Shell's enterprise knowledge base, built end to end from the RAG pipeline to the chat UI.
Senior Software Engineer · 2024 — 2025: Tech Mahindra; Scalable, accessible React components for Microsoft Teams.
Senior Software Engineer · 2022 — 2023: Mirafra Technologies; Interactive storytelling features for PrathamBooks.org.
Front-end Developer · 2021 — 2022: Liftoff LLC; Core features for the Sphere Web platform in React and Redux.
Front-end Developer · 2018 — 2020: Broadridge Financial Solutions; Migrated a global post-trade management system to component-based React.

Written, designed, animated & built by

Suraj.

B.E. Information Science — Ramaiah Institute of Technology, 2018

05 — Contact

Let's make something.

surajcommercial@gmail.com

SurajSuraj.