feat: smoothly change the colours

src/hooks/useSmoothTransitionColor.tsx

@@ -0,0 +1,25 @@
+import { useRef } from 'react';
+
+import { useFrame } from '@react-three/fiber';
+import { Color, MeshStandardMaterial } from 'three';
+
+const TRANSITION_SPEED = 5;
+
+export const useSmoothTransitionColor = ({
+  color,
+  initialMaterial = new MeshStandardMaterial(),
+}: {
+  color: string | Color;
+  initialMaterial?: MeshStandardMaterial;
+}): MeshStandardMaterial => {
+  const materialRef = useRef<MeshStandardMaterial>(initialMaterial);
+
+  useFrame((_, delta) => {
+    if (materialRef.current) {
+      const targetColor = new Color(color);
+      materialRef.current.color.lerp(targetColor, delta * TRANSITION_SPEED); // Smooth transition
+    }
+  });
+
+  return materialRef.current ?? initialMaterial;
+};

src/modules/models/FirTree/useFirTree.tsx

@@ -4,6 +4,7 @@ import { GLTF } from 'three-stdlib';
 
 import { MODELS_3D_ROOT_PATH } from '@/config/models';
 import { useSeason } from '@/context/SeasonContext';
+import { useSmoothTransitionColor } from '@/hooks/useSmoothTransitionColor';
 import { Seasons } from '@/types/seasons';
 import { fromRGB } from '@/utils/colors';
 
@@ -39,8 +40,10 @@ type UseFirTree = {
 export const useFirTree = (): UseFirTree => {
   const { season } = useSeason();
   const { nodes, materials } = useGLTF(GLB_FILE_PATH) as GLTFResult;
-  const spineMaterial = new MeshStandardMaterial().copy(materials.Spine);
-  spineMaterial.color = COLORS_BY_SEASON[season];
+  const spineMaterial = useSmoothTransitionColor({
+    color: COLORS_BY_SEASON[season],
+    initialMaterial: materials.Spine,
+  });
 
   return {
     nodes,

src/modules/models/Garden.tsx

@@ -2,6 +2,7 @@ import { RoundedBox } from '@react-three/drei';
 import { Vector3 } from '@react-three/fiber';
 
 import { useSeason } from '@/context/SeasonContext';
+import { useSmoothTransitionColor } from '@/hooks/useSmoothTransitionColor';
 import { Seasons } from '@/types/seasons';
 
 const COLORS_BY_SEASON = {
@@ -20,13 +21,15 @@ type Props = {
 
 export const Garden = ({ position }: Props): JSX.Element => {
   const { season } = useSeason();
+  const materialRef = useSmoothTransitionColor({
+    color: COLORS_BY_SEASON[season],
+  });
 
   return (
     <RoundedBox
       scale={[SIZE_IN_METERS, HEIGHT_IN_METERS, SIZE_IN_METERS]}
       position={position}
-    >
-      <meshStandardMaterial color={COLORS_BY_SEASON[season]} />
-    </RoundedBox>
+      material={materialRef}
+    />
   );
 };

src/modules/models/Tree/useTree.tsx

@@ -4,6 +4,7 @@ import { GLTF } from 'three-stdlib';
 
 import { MODELS_3D_ROOT_PATH } from '@/config/models';
 import { useSeason } from '@/context/SeasonContext';
+import { useSmoothTransitionColor } from '@/hooks/useSmoothTransitionColor';
 import { Season, Seasons } from '@/types/seasons';
 import { fromRGB } from '@/utils/colors';
 
@@ -40,8 +41,10 @@ type UseTree = {
 export const useTree = (): UseTree => {
   const { season } = useSeason();
   const { nodes, materials } = useGLTF(GLB_FILE_PATH) as GLTFResult;
-  const leafMaterial = new MeshStandardMaterial().copy(materials.Leaf);
-  leafMaterial.color = COLORS_BY_SEASON[season];
+  const leafMaterial = useSmoothTransitionColor({
+    color: COLORS_BY_SEASON[season],
+    initialMaterial: materials.Leaf,
+  });
 
   return {
     season,