Pinned Tweet
Lots of cool projects happened in 2025, I'm excited to be back at work !
Available for freelance design & dev work
(DMs are open)
↳ chakibmzn.com
15
48
848
25,292
35mm is a website showcasing film photography through the lenses of the iconic Cannon F1 !
I had a ton of fun building this with @threejs and @greensock
live link 👇
27
51
834
40,811
Webgl infinite medias gallery w @threejs + shader process creation
19
21
713
32,604
X-Rays visualizer using @threejs render targets + postprocessing shaders
Live demo + github 👇
17
42
540
27,110
Converting a @threejs scene to ASCII art using a custom postprocessing shader
Live → ascii-postprocessing.vercel.…
🧵 Explanation Thread 👇
17
39
368
33,374
If you want to see a technical breakdown of the 35mm website, I wrote a blog post on @codrops where I detail the Three.js/shaders code !
It's live on Codrops🔗⬇️
13
23
377
15,074
decided to add the next level.
shaders + instancedMesh
@threejs
11
21
366
14,574
Infinit vortex Art Gallery using
@threejs Instanced Mesh API + shaders
Live demo link ↓
15
18
339
16,983
Another media gallery exploration using @threejs InstancedMesh and compute shaders.
live demo 👇
6
14
316
15,891
Sobel Edge detection postprocessing using @threejs
I made the model with Blender
3
15
288
12,554
Realtime Environment map + some postprocessing using @threejs
6
11
223
10,796
I'm currently available for new freelance adventures !
Creative web development work, working remotely from Paris.
RT appreciated 🙏
6
19
203
13,692
Mesh-selective postprocessing effect using render targets and custom edge detection shader w @threejs
A new creative web project is coming 📸
5
11
179
8,797
New Design & Development work for Blinkpath,
an independent design/branding agency.
Built with @astrodotbuild and @greensock 🚀
Live website 👇
12
6
179
21,427
I wrote a tutorial for @codrops on how to create this pixel displacement effect with RGB shift using Three.js shaders.
You can read it here : tympanus.net/codrops/2024/08…
3
11
163
7,192
Integrating Cannon physics engine in @threejs + trigger gravity on scroll
3
2
129
4,675
Exploring some postprocessing effects combinations with custom shaders in @threejs
4
2
117
5,509
Persona morphing using the Javascript Canvas2D API
I tried different methods for this one (including Webgl) but the canvs2D ended up giving the best results !
available on the new @LumaLabsAI website
lumalabs.ai/dream-machine
4
6
116
5,404
🚨 New Work for @LumaLabsAI !
Introducing: Dream Machine ✨
Ideate, visualize, create videos, and share your dreams with the world using the power of AI.
design by @leoyakxi
dev by me
lumalabs.ai/dream-machine
7
9
111
8,809
If you are curious to know how I made this morphing effect for the new @LumaLabsAI Dream Machine website, I wrote an article on @codrops where I explain the core concepts behind it !
check it here
tympanus.net/codrops/2024/12…
3
9
94
3,871
My 35mm side project got a SOTD on @awwwards !
Big thanks to the jury ! 🙌
Today’s #SOTD goes to @Jean_mazouni for "35MM".
awwwards.com/sites/35mm
A stunning showcase of film photography through the lens of the iconic Canon F1.
Congratulations! 🏆
#technology #photography #3D
6
4
69
6,948
I'm so glad to win my first SOTD with my friend @leoyakxi, I hope this will be the first of many to come!
Design @leoyakxi
Development @Jean_mazouni (myself)
Artistic direction @tuhin
And thanks to all the @LumaLabsAI Team !
Today’s #SOTD goes to @LumaLabsAI, @leoyakxi, @Jean_mazouni, and @tuhin for "Luma Dream Machine".
awwwards.com/sites/lumadream…
Your ultimate visual thought partner—turn ideas into reality. Ideate, visualize, and share your vision with the world.
Congratulations! 🏆
#technology #animation #interaction
4
54
3,587
Flow field animation with @threejs using GPGPU + particles morphing
github.com/J0SUKE/particles-…
2
2
42
1,873
New work for @sesame !
Sharing a glimpse of their brand new conversational AI and a technical post on the model that powers it !
I had a lot of fun building their new web experience (especially this new demo) !
try it out ! It's live 👇
3
1
32
3,342
Introducing : Legends ✨
A website showcasing the most iconic moments of international football.
I had a lot of fun building this project using @threejs and @greensock
visit it live → legends-six.vercel.app/
2
3
25
3,553
Very glad to collaborate with @revealparis and @noemistauffer on @fresh_fonts new website😄
live → freshfonts.io
case study → jeanmazouni.com/work/fresh-f…
First alright website, ever. Thanks for sticking around with us. 💙
↳ freshfonts.io
1
1
17
4,606
New work for @LumaLabsAI !
Releasing a brand new website experience designed by @leoyakxi and developed by me !
check the live site 👇
2
17
1,463
🚨 New website for @hyperonline_ ! The ultimate app for building and sharing AI companions and characters.
I'm so glad it's finally released ! we have pushed the web experience to the next level.
visit it live → hyper.online/
Hyper is now on the web.
To kick off V1, we’re starting with our avatar companion manager: update your Hyper AIs and publish changes to your users right from the website.
10
1,272
Demo → x-ray-visualizer-threejs-yh1…
Github → github.com/J0SUKE/X-Ray-Visu…
14
1,823
I worked with the @hyperonline_ team on the development of the new assets manager for the Hyper web app !
you can now upload, delete and edit assets directly from the web !
Introducing a pro dashboard for Hyper AI Creators and VTubers to manage:
+ VRM Avatars
+ Backgrounds
+ Props
and everything else they need to build great stories on the app.
1
11
1,719
The Three.js EffectComposer will provide the rendered scene as a texture, we will modify the texture UVs to make a grid of squares, once I'm happy with size of the grid, I move to the ASCII part.
1
9
822
Thanks ! I made the model myself using blender, the trick is to have each face have an individual color, then once loaded in threejs I apply a luminance effect to each individual material to enhance the edge detection
2
9
320
🚨 New Work !
In collaboration with @atomicdothealth we created their brand new website.
Atomic Health is a strategic design agency focused on the future of digital health.
🔨Development by me.
Visit it live → atomic.health/
1
9
1,116
It’s the same concept except for my cass I made each surface have a unique color with Blender, which results to to an individual meshes with a unique Id in threejs
4
159
It’s a single texture containing all the images, each instance have a set of coordinates to pick a region from the texture
1
4
155
I create a new set of UVs that will display the ASCII texture according to the grid I created earlier
1
3
665
Thank you sir !
Compute shaders in this case refers to doing the 3d movement calculations in the vertex shaders instead of doing it in a JavaScript loop, making it much more performant.
2
107