Add interactive animations to cube in hero section

apps/timsexperiments/src/components/home/Hero.astro

@@ -1,7 +1,9 @@
 ---
+import ButtonLink from '@/components/ButtonLink.astro';
+import PointerControl from '@/components/home/hero/PointerControl.astro';
+import RubiksCubeControl from '@/components/home/hero/RubiksCubeControl.astro';
+import { Skeleton } from '@/components/ui/skeleton';
 import { Brain, Hammer, Microscope } from 'lucide-react';
-import ButtonLink from '../ButtonLink.astro';
-import RubiksCubeControl from './hero/RubiksCubeControl.astro';
 ---
 
 <div
@@ -44,9 +46,27 @@ import RubiksCubeControl from './hero/RubiksCubeControl.astro';
   </div>
 </div>
 <div class="relative hidden h-full w-full lg:block">
-  <div class="absolute flex h-full items-center">
+  <div
+    id="cube-placeholder"
+    class="absolute left-0 top-0 flex h-full w-full items-center justify-center">
+    <div class="grid aspect-square w-3/5 grid-cols-3 grid-rows-3 gap-4">
+      <Skeleton className="h-full w-full" />
+      <Skeleton className="h-full w-full" />
+      <Skeleton className="h-full w-full" />
+      <Skeleton className="h-full w-full" />
+      <Skeleton className="h-full w-full" />
+      <Skeleton className="h-full w-full" />
+      <Skeleton className="h-full w-full" />
+      <Skeleton className="h-full w-full" />
+      <Skeleton className="h-full w-full" />
+    </div>
+  </div>
+  <div class="absolute left-0 right-0 top-0 flex h-full items-center">
     <RubiksCubeControl />
   </div>
+  <div class="flex h-full w-full items-center justify-center">
+    <PointerControl />
+  </div>
   <canvas
     id="cube"
     class="absolute left-0 top-0 -z-10 h-full w-full -translate-x-[20%]"

apps/timsexperiments/src/components/home/hero/PointerControl.astro

@@ -0,0 +1,12 @@
+---
+import { Pointer } from 'lucide-react';
+---
+
+<div
+  id="cube-pointer-controls"
+  class="flex h-full w-full translate-x-2 translate-y-12 items-center justify-center opacity-0 transition-opacity duration-700 ease-in-out">
+  <Pointer
+    className="opacity-0 repeat-1 [--animate-slide-end:_400] [--animate-slide-start:_300]"
+    data-animation="animate-slide-reverse"
+  />
+</div>

apps/timsexperiments/src/components/home/hero/RubiksCubeControl.astro

@@ -2,7 +2,9 @@
 import Key from '@/components/home/hero/Key.astro';
 ---
 
-<div id="cube-controls" class="hidden w-fit -translate-x-4 flex-col gap-1">
+<div
+  id="cube-controls"
+  class="flex w-fit -translate-x-4 flex-col gap-1 opacity-0 transition-opacity duration-500 ease-in-out">
   <div class="flex items-center justify-center">
     <Key id="cube-w-control">W</Key>
   </div>

apps/timsexperiments/src/components/ui/skeleton.tsx

@@ -0,0 +1,18 @@
+import { cn } from '@/lib/utils';
+
+function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn(
+        'animate-pulse rounded-md bg-rhino-100 dark:bg-rhino-800',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Skeleton };