feat(components): Scale tiles and add gradient

Tiles scale up on hover and now are colored with gradient

src/components/Grid/index.jsx

@@ -1,6 +1,8 @@
 import { useThree } from '@react-three/fiber'
 import { useAspect } from '@react-three/drei'
 import { Flex, Box } from '@react-three/flex'
+import { animated, useSprings } from '@react-spring/three'
+import { useRef } from 'react'
 import { Text } from '../Text'
 
 export function Grid({
@@ -13,11 +15,23 @@ export function Grid({
 }) {
   const { size } = useThree()
   const [vpWidth, vpHeight] = useAspect(size.width, size.height)
+  const matRef = useRef()
+  const [springs, api] = useSprings(rowNumber * columnNumber, () => ({
+    scale: [1, 1, 1],
+    opacity: 0.2,
+    loop: true,
+    config: { mass: 5, tension: 350, friction: 40 }
+  }))
+
+  // useFrame(({ clock }) => {
+  //   // sphereRef.current.rotation.y += -0.01;
+  //   matRef.current.emissiveIntensity = Math.abs(Math.sin(clock.elapsedTime * 0.5))
+  // })
 
   return (
     <Flex
       size={[vpWidth, vpHeight, 0]}
-      position={[-vpWidth / 2, vpHeight / 2, 152]}
+      position={[-vpWidth / 2, vpHeight / 2 + 0.3, 152]}
       alignItems='center'
       justifyContent='center'
       name='.Grid'>
@@ -27,25 +41,47 @@ export function Grid({
           flexWrap='wrap'
           width={columnNumber * boxWidth + columnNumber * (2 * boxMargin)}
           flexGrow={1}>
-          {[...Array(rowNumber * columnNumber).keys()].map((k, i) => (
-            <Box width={boxWidth} margin={boxMargin} key={k}>
-              <mesh position={[boxWidth / 2, -boxHeight / 2, 0]}>
-                <planeBufferGeometry args={[boxWidth, boxHeight]} />
-                <meshStandardMaterial args={[{ transparent: true, opacity: 0.2 }]} />
-              </mesh>
-              <Text
-                font={text[i].font}
-                fontSize={text[i].fontSize}
-                letterSpacing={0.1}
-                textAlign='center'
-                anchorX='center'
-                position-x={boxWidth / 2}
-                anchorY='middle'
-                position-y={-boxHeight / 2}>
-                {text[i].content}
-                <meshStandardMaterial color='#403d39' />
-              </Text>
-            </Box>
+          {springs.map(({ scale, opacity }, i) => (
+            <group
+              onPointerOver={() =>
+                api.start((index) => {
+                  if (index === i) {
+                    return { scale: [1.1, 1.1, 1], opacity: 0.5 }
+                  }
+                  return { scale: [1, 1, 1], opacity: 0.2 }
+                })
+              }
+              onPointerLeave={() => api.start(() => ({ scale: [1, 1, 1], opacity: 0.2 }))}>
+              <Box width={boxWidth} margin={boxMargin}>
+                <animated.mesh scale={scale} position={[boxWidth / 2, -boxHeight / 2, 0]}>
+                  <planeBufferGeometry args={[boxWidth, boxHeight]} />
+                  <animated.meshPhysicalMaterial
+                    ref={matRef}
+                    color='red'
+                    roughness={0.5}
+                    metalness={1}
+                    emissive='blue'
+                    emissiveIntensity={0.5}
+                    transparent
+                    opacity={opacity}
+                  />
+                  {/* <meshStandardMaterial args={[{ transparent: true, opacity: 0.1 }]} /> */}
+                  {/* <shaderMaterial ref={material} attach='material' {...data} /> */}
+                </animated.mesh>
+                <Text
+                  font={text[i].font}
+                  fontSize={text[i].fontSize}
+                  letterSpacing={0.1}
+                  textAlign='center'
+                  anchorX='center'
+                  position-x={boxWidth / 2}
+                  anchorY='middle'
+                  position-y={-boxHeight / 2}>
+                  {text[i].content}
+                  <meshStandardMaterial color='#403d39' />
+                </Text>
+              </Box>
+            </group>
           ))}
         </Box>
       </Box>