finish hotbar (i think)

src/StarterPlayer/StarterPlayerScripts/ui/hotbar/slot.tsx

@@ -4,6 +4,8 @@ import { useWorldContext } from "../contexts/worldContext"
 import { ContextActionService, HttpService } from "@rbxts/services"
 import Padding from "ReplicatedStorage/ui/components/padding"
 import Acrylic from "ReplicatedStorage/ui/components/acrylic"
+import { Spring } from "@rbxts/flipper"
+import { useGroupMotor } from "@rbxts/roact-hooked-plus"
 
 interface SlotProps extends Roact.JsxInstanceProperties<Frame> {
     index: number
@@ -14,6 +16,9 @@ interface SlotProps extends Roact.JsxInstanceProperties<Frame> {
 	Change?: Roact.JsxInstanceChangeEvents<Frame>
 }
 
+const SLOT_DEFAULT = [new Spring(.7, { frequency: 6 }), new Spring(6, { frequency: 6 })]
+const SLOT_ACTIVE = [new Spring(.5, { frequency: 6 }), new Spring(5, { frequency: 6 })]
+
 function slot(props: SlotProps): Roact.Element {
     const { index, keycode, tool } = props
 
@@ -22,13 +27,19 @@ function slot(props: SlotProps): Roact.Element {
     delete spreadableProps.keycode
     delete spreadableProps.tool
 
+    const [slotBgTransparencyAndSlotRatio, setSlotGoal] = useGroupMotor([.7, 6])
+    const slotBgTransparency = slotBgTransparencyAndSlotRatio.map((t) => t[0])
+    const slotRatio = slotBgTransparencyAndSlotRatio.map((t) => t[1])
+
     const { clientState } = useWorldContext()
 
     const handleActivated = (): void => {
         if (tool.Parent !== clientState.character) {
             clientState.character.Humanoid.EquipTool(tool)
+            setSlotGoal(SLOT_ACTIVE)
         } else {
             clientState.character.Humanoid.UnequipTools()
+            setSlotGoal(SLOT_DEFAULT)
         }
     }
 
@@ -43,25 +54,27 @@ function slot(props: SlotProps): Roact.Element {
             false,
             keycode
         )
+
+        tool.Unequipped.Connect(() => {
+            setSlotGoal(SLOT_DEFAULT)
+        })
     })
 
     return (
         <frame
             BackgroundColor3={Color3.fromHex("#11111b")}
-            BackgroundTransparency={
-                .75
-            }
+            BackgroundTransparency={slotBgTransparency}
             Size={new UDim2(1, 0, 1, 0)}
         >
             <Acrylic
-                radius={8}
-                distance={0.0001}
+                radius={2}
+                distance={0.001}
             />
             <uiaspectratioconstraint
-                AspectRatio={6}
+                AspectRatio={slotRatio}
             />
             <uicorner
-                CornerRadius={new UDim(0, 8)}
+                CornerRadius={new UDim(0, 2)}
             />
             <frame BackgroundTransparency={1} Size={new UDim2(1, 0, 1, 0)}>
                 <Padding