Independent / Freelance
Frontend and graphics engineering across interactive web applications, visualization systems, and real-time 3D experiences.
Frontend / Graphics Engineer
Moaaz Rafique
Building web applications with interactive 2D and 3D graphics, real-time rendering, and procedural systems.
Selected Work
01
Ohana Development
Real estate website with 3D scenes, camera path animations, and scroll-based transitions.
- 3D Scenes
- Camera Animation
- Scroll Animation
- GLSL
02
Procedural Flower
Procedural plant structures generated from phyllotactic distributions and custom geometry.
- Three.js
- WebGPU
- Procedural
03
Paper Folding
Using Rodrigue's Rotation formulae as base to create a paper folding algorithm.
- Three.js
- WebGPU
- Procedural
- Origami
04
Kitchen Configurator
Interactive 3D kitchen configurator with product modules, spatial placement, rotation, measurements, and Shopify integration.
- React
- Three.js
- Shopify
- 3D
05
Tetrahedron Rotation
Geometric transformation study exploring the rotation of a tetrahedron on its side.
- Three.js
- Geometry
- Math
06
Crystal/Rock Generation - Worley Noise
Procedural Worley noise shader with vertex displacement and controls for color, roughness, metalness, transmission, clearcoat, specular, and opacity.
- Worley Noise
- Vertex Displacement
- Custom Materials
- Shader Uniforms
- PBR
07
Animated Torus
Torus geometry that continuously flips inside-out using vertex distortion with controls for the deformation parameters.
- Geometry Distortion
- Vertex Shader
- Interactive Controls
- Procedural Animation
08
Process Animation
Fragment shader animations representing different AI states including idle, standby, listening, and processing.
- Fragment Shader
- Procedural Animation
- AI States
- UI Feedback
09
Lightning
Lightning effect using instanced geometry and custom shaders.
- VFX
- Instancing
- Custom Shader
- Lightning
10
Tron Track Visualization
Tron-style racing visualization with different trail effects implemented using fragment shaders.
- Fragment Shader
- Trail Effects
- VFX
- Racing Visualization
Experiments
01
Sphere Depth
Depth-shading experiment using custom depth shaders and post-processing.
- Depth Shader
- Post-Processing
- Depth Shading
- GLSL
02
Boids
GPU-accelerated flocking simulation.
- Three.js
- WebGPU
- TSL
03
Motion and effects
Procedural motion and geometry experiment.
- Three.js
- Geometry
- Motion
04
Font Morph
Typography experiment morphing between different fonts.
- Typography
- Animation
05
Motion
Collection of interactive motion studies exploring timing, movement, and spatial interaction.
- JavaScript
- Motion
- Interaction
06
Interactive Grid
Interactive grid experiment exploring pointer-driven deformation and motion.
- JavaScript
- Interaction
- Motion
07
Rotation
Day and night cycle recreated using only HTML and CSS.
- HTML
- CSS
- Animation
08
Phyllotaxis / Types
Study of natural forms generated from phyllotactic patterns, including flowers, cones, and scales.
- Three.js
- Geometry
- Phyllotaxis
09
Coin Jar
Physics-based coin drop simulation using Rapier and Three.js.
- Three.js
- Rapier
- Physics
10
Box Rotation
Geometric transformation study exploring rotation, orientation, and spatial relationships.
- Three.js
- Geometry
- Math
11
Clay Effect
Custom clay-style material applied to architectural geometry with ambient-occlusion-based shading.
- Custom Material
- Clay Shading
- Ambient Occlusion
- Architecture
12
TSL SSGI Scene
TSL post-processing experiment implementing screen-space global illumination, temporal anti-aliasing, and interactive scene controls.
- TSL
- SSGI
- TRAA
- Post-Processing
- Scene Controls
13
TSL Transitions
Post-processing experiment using TSL with noise-based transitions, Sobel and DotScreen effects, camera movement, particles, and scroll interaction.
- TSL
- Post-Processing
- Noise
- Scroll Interaction
- Camera Animation
p5.js Experiments
Spool
Spool generation with different parameters
Bounded Creatures
Multiple creatures moving independently while maintaining space
Beating Spider Web
This was produced because of inaccuracies of the bezier function or rounding errors (maybe)
Spider web (more of a bezier curve function extension)
Playing around with higher level/order bezier functions and what kind of result we get
Displaced Bubble
A bubble moving through the world experiencing different forces of wind and turbulence
2D Light Reflection
A 2D lighting reflection with moveable surfaces and points
2D TownScraper Study
Started with a study of how generation of townscraper would work in 2D not sure about the result though
QuadTree
Learning the implementation of QuadTree
Opening and closing animation for a sphere
The study for the above torus animation
Bouncing Ball
A physics experiment with a ball bouncing with randomly generated ground planes
Metaballs
Metaballs, balls join into each other when they get close
Constant Dashed Line
Generating dashed line with consistent spacing regardless of length
Raymarched Random Art
Persisted results of raymarching
Boxes rotating around a circle
This is a box rotating around a circle such while scaling
Tech Stack
Frontend Engineering
React / TypeScript / JavaScript / Next.js / Vite
Zustand / Tailwind CSS / shadcn/ui / R3F
3D Graphics & Rendering
Three.js / WebGL / WebGPU / GLSL / TSL
R3F / Drei / Postprocessing / Custom Shaders
Creative Development
p5.js / PixiJS / Fabric.js / Canvas / SVG
GSAP / Motion / Interactive Visual Systems
Simulation & Procedural Systems
GPU Compute / Instancing / Physics / Spatial Algorithms
Procedural Geometry / Real-time Simulation / Data Visualization
Full Stack Development
Node.js / REST APIs / Firebase / Databases / Authentication
Image Processing / Model Processing / Node Canvas
Experience
Dreambeat Studios
Full-stack and graphics engineering with Three.js, React, and interactive web systems.
Optimum Soft
Software engineering across frontend and full-stack applications using the MERN stack.