Matias 🧉 @matiNotFound Twitter profile

Pinned Tweet

Matias 🧉

1 month

🚀New work is out! The 2024 @nextjs conf site. Creating a multiplayer game for it is a dream come true. We put a ton of love into this one! Hope people enjoy it. Thanks to the entire team that made this possible. 🖤 @basementstudio @vercel

31

49

711

Last Seen Profiles

@Paula10754767

@officialdjmky

@BinorRaja

@joordyboody2

@IgorSwartz53360

@baby_tgurl

@BinorRaja

@abn_gydy

@Serechu_

@minhanh1925

@AnthropoceneUCL

@isastaycle

@Mariam134260959

@EmilyTexdahl

@tunafxsh

@Raaaatiba

@ho_elvy

@Aron9312

@stwmaniax

@hepminsa

@taraxakum_desu

@Gemma__S97

@RedqueenCallme

@jeslyxo

@VERMELHOU2022

@i32g3r4oZZMwK7J

@bcspartakpleven

@theLemniscat

@nnhhiind

@in_ayaa

@cian2me

@SadesyS8cjW5

@VairagyaSadhana

@MrBearing2

@OkayMuslum

Matias 🧉

@matiNotFound

1 year

I created a @threejs app that shows if @PepitoTheCat is out 🐈 #PepitoArtChallenge

32

450

5K

Matias 🧉

@matiNotFound

4 months

Have you ever enjoyed the sunset shadow on a website? Here is a sneak peek of what we have been cooking with @matiasperz_ at @basementstudio : 🔗 📝 Article coming soon

54

85

1K

Matias 🧉

@matiNotFound

1 month

My favorite feature of the @nextjs conf site: The 3D badge refracts light from the HTML page. We'll release a case study soon with each little trick, so follow @basementstudio if you don't want to miss it! (Of course, made with @threejs and drei)

19

43

742

Matias 🧉

@matiNotFound

4 months

Curious about how we created the soft shadows on the Daylight site? Check out our technical breakdown, complete with interactive examples! 📝 Read it here: @matiasperz_ @basementstudio

13

46

389

Matias 🧉

@matiNotFound

1 year

🧪 New experiment! 3D Liquid shader made with @threejs and #raymarching . 🔗 Live demo: 🌊 The shader uses the object rotation to generate the waves with ray-marching. 💻 Source code: #shaders #threejs #drei

4

54

302

Matias 🧉

@matiNotFound

3 months

🧪 New #threejs experiment. Featured on the @basementstudio lab! With @_Nico_brc_ , we implemented "Vertex Animation Texture" to simulate a waving flag 🇦🇷. More details & link below 👇🧵

15

25

253

Matias 🧉

@matiNotFound

1 month

How to properly test your multiplayer app? Just throw a bunch of bots at it 🔥🔥 @liveblocks

9

7

254

Matias 🧉

@matiNotFound

7 months

Can @threejs run on your terminal? Of course! I'm using react-inc + node-canvas-webgl to achieve it. I also created a small Nextjs-like framework to manage scenes. CLI game coming soon...

16

21

237

Matias 🧉

@matiNotFound

7 months

We have been cooking some shaders... @0xca0a @basementstudio

15

223

Matias 🧉

@matiNotFound

10 months

🧪 Exploring digital gardening on @threejs ! In this new post, I experimented with how to grow branches along a path and generate new ones procedurally. 📚 Docs: 🌱 Demo: A resume of the docs is available on the thread 🧵

5

33

225

Matias 🧉

@matiNotFound

1 year

🧪 Just added a new experiment with @threejs and React Three Fiber. #threejs #drei #rtf #shaders

11

22

207

Matias 🧉

@matiNotFound

11 months

Hi! Today, I'm starting a new job as a creative developer at @basementstudio !! To celebrate, I did a @threejs experiment, a mesh reveal/dissolve shader. 🎉🧪 Demo: Docs:

8

17

207

Matias 🧉

@matiNotFound

7 months

🚀 Just published a tailwind package to scale font sizes between breakpoints! 📦 Just by using text-min-[size] and text-max-[size], it will scale your text between mobile and desktop. You can also set custom breakpoints globally or with classNames.

5

19

149

Matias 🧉

@matiNotFound

5 months

Wrote a blog post about the shaders we did for Vercel Ship! Check it out here:

Shipping Ship: Behind the Particle Shader Effect for Vercel’s Conf | basement.studio

See how this ethos came to life in the particle shader effect we created for Vercel Ship.

basement.studio

@basementstudio

5 months

New blog post 📓 We're revealing a step-by-step tutorial on how we built the shader effect for the @vercel ship site using WebGL. Link in the thread below

12

38

328

6

17

133

Matias 🧉

@matiNotFound

3 months

Threejs-Lab N.72 We made our own implementation of the drei's RenderTexture component. This allows us to pause the render when needed. (The scene shown inside the monitor is not rendered when we turn off the screen.) 🔗 @threejs @basementstudio

2

11

125

Matias 🧉

@matiNotFound

3 months

I’m happy to share that I’m starting a new position as Technical Lead at @basementstudio ! Looking forward to continue working with this amazing team. 🖤🚀

11

1

111

Matias 🧉

@matiNotFound

7 months

Testing new ways to interact with the @vercel ship logo demo: @basementstudio

4

10

108

Matias 🧉

@matiNotFound

20 days

the @basementstudio is cooking something 👀

4

2

105

Matias 🧉

@matiNotFound

1 year

I'm using @IFTTT to listen to Pepito's tweets and save them into @airtable . Then fetch the data in @nextjs and set the environment based on the latest tweet. I created the backgrounds using @BlockadeLabs . I also added some animations using @Blender .

1

5

93

Matias 🧉

@matiNotFound

9 months

Wooow my second project at @basementstudio has just won an awwward! Congrats to the entire team 👏🎉

awwwards.

@awwwards

9 months

New SOTD "KidSuper World" by @basementstudio Check out their amazing work at . #SOTD #ArtAndIllustration #ECommerce

2

15

143

7

1

85

Matias 🧉

@matiNotFound

6 months

Just managed to run @threejs + react-three-fiber on the terminal. (using puppeteer+vite to render the canvas)

3

5

77

Matias 🧉

@matiNotFound

17 days

The next conf site won a SOTD! 🔥🟦 Congrats to the entire team @vercel & @basementstudio

Next.js

@nextjs

17 days

Honored to have the Next.js Conf site named today's @awwwards site of the day.

5

11

194

4

3

72

Matias 🧉

@matiNotFound

1 year

A new #threejs experiment is on the way! Using paths to create plant branches. My focus is on figuring out how to transform geometry to follow a path and create procedural branches and leaves. Stay tuned for updates! 🌱

2

6

72

Matias 🧉

@matiNotFound

1 month

First (small) PR merged intro drei 🔥 Now, you can type the attributes of your instances to create custom shaders for them easily, also updated docs and examples. docs: demo:

4

6

72

Matias 🧉

@matiNotFound

4 months

📝 New post! We have been shipping performance updates on the Daylight site and also writing down every trick we learned on the way, here👇🏻

Matias Perez

@matiasperz_

4 months

Hey! It's us again, now with a post about the development experience for the Daylight project. We share some tools and tricks we've been working on lately. Check check check 👉🏼 @matiNotFound @basementstudio

10

20

270

0

3

55

Matias 🧉

@matiNotFound

7 days

The @daylightco site was featured at the GSAP showcase 💚💚 We made two blog posts on the creation of this site: - Creating the shadows: - Enhancing our development experience:

Creating Daylight | The Devex | basement.studio

Discover how we enhanced our development process for the Daylight project, from debugging tips to performance boosts maintaining a clean codebase. Meet you down below!

basement.studio

GSAP

@greensock

7 days

💚 Site of the Day - Daylight Computer Such a gem, love that calming dappled light shader. Beautiful. credit → @basementstudio 🛠 ScrollTrigger Observer SplitText WebGL React site → showcase →

2

7

66

3

92

Matias 🧉

@matiNotFound

1 year

Check out the source code at my GitHub! It has the best hook I have written in my life:

1

0

46

Matias 🧉

@matiNotFound

2 months

With <InstancedAttribute> it’s super easy to do instancing + custom shaders 🚀🚀🚀

☄︎

@0xca0a

2 months

something @matiNotFound and i have been working on, drei/createInstances & <InstancedAttribute>. makes it easier to control multiple, nested instances, being able to glob them together and even add shader attributes. demo docs

14

26

346

1

4

46

Matias 🧉

@matiNotFound

1 year

VR version soon (?

1

46

Matias 🧉

@matiNotFound

1 year

Finally published my first article! 🚀 How to create a ray-marching renderer in #threejs

Creating a ray-marching renderer in Three.js | MatiasGF.dev

How to create a ray-marching renderer from scratch using ThreeJs.

matiasgf.dev

2

5

41

Matias 🧉

@matiNotFound

4 months

Our offices after Vercel Ship and Daylight launch happened the same day

3

1

41

Matias 🧉

@matiNotFound

4 months

@branmcconnell @matiasperz_ @basementstudio Hi! We used react-ogl for this project. (We will build a technical post in a few days with all the details 🤓)

2

0

40

Matias 🧉

@matiNotFound

4 months

🇦🇷 Feliz día de la Patria! Para festejar que nuestro país es increíble, armé un pequeño sitio que muestra al Arsat sobre la tierra. (**Aún** no muestra su posición real) 🔗 💻 Source 📦 Modelo #threejs

2

7

38

Matias 🧉

@matiNotFound

1 month

Always ship with matecito

kache

@yacineMTB

1 month

argentinian software developers are so cracked can't believe they invented yerba mate just to code better

224

2K

19K

3

0

35

Matias 🧉

@matiNotFound

1 month

We are looking for awesome designers to join our team! (having a basement is not required)

basement.studio

@basementstudio

1 month

Hiring 🏴 The basement doors are open! We’re on the hunt for a: ⬩ Visual Designer ⬩ Brand Designer Ready to join the fam? Apply now! ↳

7

26

148

5

1

35

Matias 🧉

@matiNotFound

2 months

🪄 The basement lab keeps collecting cool magic tricks: Rendering a ton of particles just with css box shadows.

basement.studio

@basementstudio

2 months

Do you need to render 10,000 particles without using WebGL? We got you! Check out the Basement Lab N.74 by @valebearzotti using box-shadows. Demo: Source:

6

19

180

0

27

Matias 🧉

@matiNotFound

4 months

Testing how React 19 can affect one of our sites. It appears that the loading time will get worse since the assets are no longer being fetched in parallel when using suspense 🤔

1

0

25

Matias 🧉

@matiNotFound

1 month

@cramforce The trick is (really) simple. We’ll post it soon!

1

0

23

Matias 🧉

@matiNotFound

3 months

Península de San Pedro, Bariloche 🇦🇷😍

2

23

Matias 🧉

@matiNotFound

3 years

@MicroBLogus @LinyeraOk

1

2

21

Matias 🧉

@matiNotFound

3 months

Awesome menu exploration by @matiasperz_ !

Matias Perez

@matiasperz_

3 months

Some weekend coding explorations

3

44

0

1

20

Matias 🧉

@matiNotFound

3 months

Awesome short film made by the @basementstudio motion team! Congrats @_Nico_brc_ @VillasantiCesar @Dewoomi @Kalil_Fiat 👏👏👏👏

basement.studio

@basementstudio

3 months

Just another day at the office... Huge shoutout to our 2D & 3D team for this incredible short, hope you like it.

15

23

210

0

20

Matias 🧉

@matiNotFound

15 days

The Next Conf site has easter eggs! Open the chat and type /evilrabbit, /vercel or /sanity to see the magic 🪄

0

20

Matias 🧉

@matiNotFound

1 month

The definitive 🐐. I watched him build from complex debugging tools to awesome shaders, not because it was required but because he wanted to push the limit of what was possible. I'm super happy and grateful for all the time we shared as teammates, and excited for the future 🚀❤️

Matias Perez

@matiasperz_

1 month

This week I'm closing a chapter in my professional journey at @basementstudio . These past three years have been filled with fun and challenging experiences alongside an incredible team. I'm also excited to dive into the next chapter, which I'm shaping and will share soon. (1/2)

19

2

150

1

0

19

Matias 🧉

@matiNotFound

2 years

Voxels lava lamp using #threejs and ray-marching #shaders Live: Source:

2

18

Matias 🧉

@matiNotFound

4 months

@matiasperz_ @basementstudio The awesome designers behind the magic: @dmowl_ @_ccrrls and @_Nico_brc_

1

0

17

Matias 🧉

@matiNotFound

7 months

Ganamos un element of the day! 🏆

awwwards.

@awwwards

7 months

[ELEMENT OF THE DAY] Call to Action — Vercel Ship by @basementstudio @evilrabbit_ @0xca0a @gennyxdavila

1

4

42

1

0

17

Matias 🧉

@matiNotFound

5 months

Trajimos la copa a 🇦🇷!

basement.studio

@basementstudio

5 months

All we do is win, win, win, no matter what! Our work for bagged us the 2024 @TheWebbyAwards for People's Voice. Massive thanks to @KidSuper , our incredible team, and to all who voted!

5

15

107

1

0

16

Matias 🧉

@matiNotFound

3 months

Wanna build amazing websites? Join the Basement! 👇👇👇

basement.studio

@basementstudio

3 months

gm, we’re looking for a frontend developer skilled in @nextjs , @typescript & @greensock . Based in Mar del Plata, ARG is a plus. Details are in the link below ↓

11

20

139

0

16

Matias 🧉

@matiNotFound

1 year

@celescript HIZO GALLETAS DE @threejs PARA MI CUMPLEEEE 🎁 🍪

2

1

15

Matias 🧉

@matiNotFound

1 year

Hicimos stickers con @celescript

0

1

14

Matias 🧉

@matiNotFound

10 months

I am happy to share that Basement Chronicles, my first project with @basementstudio , was nominated for a Site of the Month @Awwwards ! 🌟 Dive into our pixelated web adventure powered by @threejs . Check it out (and vote for it) here: #AwwwardsSOTM

basement chronicles - Awwwards SOTD

A pixelated throwback to classic point-and-click game on your browser.

www.awwwards.com

0

14

Matias 🧉

@matiNotFound

29 days

🤯 by @_Nico_brc_

basement.studio

@basementstudio

29 days

Teo & Patas are escaping from the lab. #kineticrush #kineticrushchallenge #b3d

6

11

79

0

1

14

Matias 🧉

@matiNotFound

6 months

❤️

0

1

14

Matias 🧉

@matiNotFound

4 months

@0xca0a @Cody_J_Bennett We also implemented the soft shadows using pmndrs/drei as an inspiration 😉

2

0

13

Matias 🧉

@matiNotFound

6 months

Update on the tailwindcss-text-scale plugin! ✅ Simplified API: use one className to scale your text. 🐛 Fixed bugs. ⚙️ Added option to remove clamp 📝 Updated docs and examples:

2

1

12

Matias 🧉

@matiNotFound

2 years

todo listo para la next conf *apaga slack*

1

0

11

Matias 🧉

@matiNotFound

3 months

👀👀👀👀👀👀👀👀👀👀👀👀👀👀👀👀👀👀👀👀👀👀👀👀👀👀👀👀👀👀

Troy Kirwin

@tkexpress11

3 months

Niantic announced Niantic Studio, their @threejs based 3D creation engine for web (and webXR). This is a revamp of @the8thwall which was acquired back in 2022 Good to see more innovation on the 3D creation/game engine front

10

52

466

3

2

12

Matias 🧉

@matiNotFound

1 year

🔎 Lens distortion with chromatic aberration shader. #glsl #shader #webgl

1

2

10

Matias 🧉

@matiNotFound

3 months

Check out the live demo here! Thanks again to @_Nico_brc_ , who created all the assets and textures.

Experiments | basement.studio

Basement's experimental corner.

lab.basement.studio

0

1

11

Matias 🧉

@matiNotFound

9 months

📝 New post in collaboration with @nachogaran ! Here we wrote about some of the tricks used to create #threejs

KidSuper World

A real company built on unreal ideas.

kidsuper.world

basement.studio

@basementstudio

9 months

Let’s talk about the WebGL magic behind @kidsuper ’s website and how we leveraged some serverless storage solutions from @vercel . Learn from our devs here: ↳

6

19

165

0

2

11

Matias 🧉

@matiNotFound

1 month

@liveblocks is awesome. This was our first time using it and it's super easy to set up. We literally did the tutorial 3 weeks ago 🤣

Steven Fabre

@stevenfabre

1 month

The new @Nextjs Conf site is simply beautiful: Bonus point: the multiplayer game is powered by @liveblocks 🖤

17

38

463

2

0

10

Matias 🧉

@matiNotFound

1 year

Just added a subtle lens flare effect using this package! ✨

Anderson Mancini

@Andersonmancini

1 year

@matiNotFound @threejs @PepitoTheCat Loved it! Congratulations. I guess this will be amazing with a subtle LensFlare 😍

2

0

9

1

0

10

Matias 🧉

@matiNotFound

3 months

Locro, patria y familia con @celescript

1

10

Matias 🧉

@matiNotFound

1 month

Se vienen cositas en el sótano y buscamos designers que quieran romper todo 👇🏻🖤

basement.studio

@basementstudio

1 month

Hiring 🏴 The basement doors are open! We’re on the hunt for a: ⬩ Visual Designer ⬩ Brand Designer Ready to join the fam? Apply now! ↳

7

26

148

1

10

Matias 🧉

@matiNotFound

7 months

🧉🐈💻

0

9

Matias 🧉

@matiNotFound

3 months

In this generated texture, each pixel in the X-axis represents one vertex, and the Y-axis is how that pixel moves over time. Then, we can sample that texture in the vertex shader. The pixel's RGB component will indicate where the vertex should move.

2

0

9

Matias 🧉

@matiNotFound

2 years

@celescript @auronplay JAJAJAJA celes astronauta 🚀

0

8

Matias 🧉

@matiNotFound

4 months

🇦🇷

cel

@celescript

4 months

🇦🇷🥰 hay un re lindo solcito y conseguimos locro 🥰🇦🇷

0

1

2

1

8

Matias 🧉

@matiNotFound

3 months

How can we store simulation data without compromising file size? We used a technique called “Vertex Animation Texture” to store all the vertex data more efficiently. This involves storing each vertex’s movement in a texture, resulting in a 1.9MB file.

1

0

8

Matias 🧉

@matiNotFound

1 month

@cramforce definitely

2

0

6

Matias 🧉

@matiNotFound

1 year

#LaVedadaEnGelatina mañana se vota fuerte 📨🇦🇷

1

7

Matias 🧉

@matiNotFound

6 months

@souporserious It works really good! I managed to load a Vite app with puppeteer and displayed the result as ascii. I still need to test compatibility with ThreeJs

1

0

7

Matias 🧉

@matiNotFound

4 months

👀👀👀👀👀👀

BaseHub

@basehub_ai

4 months

We're excited to introduce BaseHub Templates, production-ready websites, fully customizable, perfect as a starting point for your next big project.

7

15

165

0

7

Matias 🧉

@matiNotFound

2 years

Renderizando voxels en el navegador con OpenGL y threejs. 📦 Repo:

0

1

7

Matias 🧉

@matiNotFound

1 month

@Grou_Grou_ @nextjs @basementstudio @threejs it *can*, but didn't implemented it yet. It's probably simple (catching the event with react-three-fiber) (Also each time you grab the card you are far away from the button) To solve that problem on the hero, it just pushes the block back into the grid 😅

1

0

7

Matias 🧉

@matiNotFound

1 month

uff 🔥

Jose Rago

@ragojose

1 month

darkmode exploration by @dmowl_

5

2

63

0

6

Matias 🧉

@matiNotFound

2 years

Algunos experimentos que hice con threejs 🧪

Experiments | MatiasGF.dev

Some experiments using Three.js

matiasgf.dev

0

3

6

Matias 🧉

@matiNotFound

7 months

@thevetat_ @0xca0a @basementstudio Thanks! The particles are rendered using + a couple of render targets to simulate a "magnet/trail" in the background. The button trick it's just opacity:0 and tracking the position to add particles (same for the letters) Here is an example of the magnet:

1

0

6

Matias 🧉

@matiNotFound

1 year

👨‍💻🧉🌙

2

1

5

Matias 🧉

@matiNotFound

1 year

You can have pepito as your desktop background using wallpaper engine! Download wallpaper engine, click on Open > Open from URL. And paste the url

1

0

5

Matias 🧉

@matiNotFound

1 month

@monish_shriyan Yes! Powered by @liveblocks

1

0

5

Matias 🧉

@matiNotFound

1 month

@JohnPhamous thanks!! also props to @_Nico_brc_ for the model, textures, and for explaining to me how roughness works 😅

0

5

Matias 🧉

@matiNotFound

3 months

We started by creating a cloth simulation in Blender. Our goal was to display that animation in a Three.js sandbox. Our first approach was to embed all the vertex transforms into the .glb file as Morph Targets. However, this resulted in a 13.5 MB file.

2

0

5

Matias 🧉

@matiNotFound

1 month

@mehulkar @liveblocks The “AI” is just a setInterval with random movements 😂

1

0

5

Matias 🧉

@matiNotFound

4 months

The attention to detail of each effect is amazing

Lusion™

@lusionltd

4 months

NEW PROJECT LAUNCH 🚀 ⮡ We are thrilled to announce our latest collaboration with @spaace_io to bring you this immersive 3D storytelling Web experience. A special shout-out to @Plan8_Music for crafting the incredible audio that bring the experience to

27

51

465

0

4

Matias 🧉

@matiNotFound

1 year

@YaelShroom @threejs @PepitoTheCat Yep. I will first move the data to Vercel Postgres (due to the rate limits of Airtable) and then create a public api

1

0

4

Matias 🧉

@matiNotFound

1 month

@grabbou @nextjs @basementstudio @vercel yeah! (press / to chat with them)

0

4

Matias 🧉

@matiNotFound

1 year

👀👀

Vadim Demedes 🇺🇦

@vadimdemedes

1 year

🎨 (Re)launching Pastel - a Next.js-like framework for CLI apps made with Ink. – Files as commands – Put files into nested folders to create subcommands – Define options and arguments via Zod (full type-safety) – Auto-generated --help Live now →

13

84

644

1

0

4

Matias 🧉

@matiNotFound

1 month

@dmowl_

0

4

Matias 🧉

@matiNotFound

5 months

@basementstudio @vercel 🚀🚀🚀🚀

1

0

4

Matias 🧉

@matiNotFound

1 year

#Config2023

0

1

4

Matias 🧉

@matiNotFound

6 months

👀👀👀

Célia Lopez

@CliaLpz

7 months

Happy to finally release this little #webgl experience for Chivas made with my talented friend @makio64 and the team at @SwipeBack 🥃✨ Voice and sound design @cestjorel Motion made in #C4D #redshift ⤷ Spread love here @fwa