# Threejs Transition Material for React Three Fiber

> MeshTransitionMaterial is a new material type I created for React Three fiber. Why? Changing the color of materials is instantaneous and generally boring.

Canonical page: https://andersonmancini.dev/videos/threejs-transition-material-for-react-three-fiber

Published: 2024-02-06 · Duration: 1:54 · Category: Components · Tags: three.js, react-three-fiber, shaders, three-js, transition, material, transition-material, glsl

Watch: [YouTube](https://www.youtube.com/watch?v=0upCVT8kkW8) · [Subscribe to the channel](https://www.youtube.com/@AndersonMancini?sub_confirmation=1)

Buy it now:

MeshTransitionMaterial is a new material type I created for React Three fiber. Why? Changing the color of materials is instantaneous and generally boring.

With this new material, you can choose the type of transition you want when changing colors, and the material will manage everything internally. Simple and easy to use, all you need to do is import the material and change the color.

There are currently 3 options for transition: Morph, Circular Glow, and Ink Splatter. The level of flexibility of the new material is impressive and will give a different touch to any project you create using Three.js with React Three Fiber.

This will be my first paid content. I need your help to continue creating free content and incredible materials for the community, making the lives of beginner programmers easier and our lives simpler when implementing new effects.

The Vanilla Three.js version is under development and will be available soon.

## Links from the video

- [Live demo](https://www.patreon.com/andersonmancini/shop/meshtransitionmaterial-for-react-three-121382?source=youtube)

## Related projects

- [Transition Material](https://andersonmancini.dev/projects/transition-material.md) — Available to buy on Patreon

## Related articles

- [Changing a material's color like a transition, not a cut](https://andersonmancini.dev/blog/mesh-transition-material.md)