feat: add SplineRobotGreeter component with cursor tracking and integrate into Bento Grid layout

Author: sumansaurabh

.claude/skills/3d-components.md

@@ -52,13 +52,14 @@ export default function Features() {
 **Dependencies**: Requires `cobe` package
 
 **Bento Grid Layout**:
-The component also includes a complete features section with a Bento Grid layout (6-column grid) featuring six skeleton components:
+The component also includes a complete features section with a Bento Grid layout (6-column grid) featuring seven skeleton components:
 - **SkeletonOne**: Image showcase with gradient overlays
 - **SkeletonTwo**: Interactive image gallery with hover animations
 - **SkeletonThree**: YouTube video link with play button overlay
 - **SkeletonFour**: 3D Globe component
 - **SkeletonFive**: Spline Hover Cubes - Interactive 3D cubes with hover effects
 - **SkeletonSix**: Spline Hover Sphere - Reactive sphere made of smaller spheres
+- **SkeletonSeven**: Spline Robot Greeter - Friendly robot that tracks cursor
 
 **Use Cases**:
 - Global reach sections
@@ -323,7 +324,128 @@ See `SkeletonSix` in `~/components/blocks/feature-section-with-bento-grid.tsx` f
 - **Size Changes**: Smaller spheres scale on hover
 - **Tech Aesthetic**: Perfect for SaaS, AI, tech products
 
-### 5. SplineSceneBasic Component
+### 5. SplineRobotGreeter Component
+**Location**: `~/components/ui/spline-robot-greeter.tsx`
+
+**Purpose**: Friendly interactive robot greeter that tracks your cursor, creating eye contact and a welcoming presence. Perfect for adding personality and engagement to your website.
+
+**Scene URL**: `https://prod.spline.design/Zrzvhl0glLnIKAeZ/scene.splinecode`
+
+**Tags**: `#robot` `#character` `#bot` `#mascot` `#smile` `#assistant` `#greeting` `#welcome` `#salute` `#friendly`
+
+**Color Scheme**:
+- Primary: Black/Dark Gray (#1a1a1a, #2a2a2a)
+- Accent: Coral/Pink (#FFB5B5, #FF9B9B - peachy-pink)
+- Face: Dark with white smile
+- Theme: Dark with warm pink/coral accents
+- Style: Friendly, modern, playful, welcoming
+
+**Features**:
+- Cursor tracking with smooth head movement
+- Creates eye contact effect with visitors
+- Friendly smiling character design
+- Constantly follows mouse movement
+- Cheerful and welcoming presence
+- Perfect for greetings and introductions
+- Adds personality to your website
+- Lazy loaded with React Suspense
+
+**Basic Usage**:
+```tsx
+import { SplineRobotGreeter } from "~/components/ui/spline-robot-greeter";
+
+export function WelcomeSection() {
+  return (
+    <div className="relative h-[500px] w-full bg-gray-950">
+      <div className="container mx-auto grid md:grid-cols-2 gap-8 h-full items-center">
+        <div>
+          <h1 className="text-4xl font-bold text-white mb-4">
+            Welcome! 👋
+          </h1>
+          <p className="text-gray-300">
+            Meet our friendly assistant ready to help you.
+          </p>
+        </div>
+
+        <div className="h-[400px]">
+          <SplineRobotGreeter className="w-full h-full" />
+        </div>
+      </div>
+    </div>
+  );
+}
+```
+
+**Perfect For**:
+- Website greeters (hero sections)
+- About page introductions
+- Customer support sections
+- Landing page mascots
+- Portfolio character introductions
+- Chatbot representations
+- Help/Support pages
+- Team/Contact pages
+
+**Not Recommended For**:
+- Light-themed pages (colors don't match)
+- Very small spaces (< 400px)
+- Mobile-only experiences (cursor tracking limited)
+- Pages without cursor interaction
+
+**KEY FEATURE: Cursor Tracking**
+
+⚠️ **The robot's head follows your cursor smoothly!**
+
+**How it Works**:
+- Robot head rotates to track mouse position
+- Creates eye contact effect with users
+- Enhances engagement and personality
+- Most effective in open spaces
+- Works best when cursor naturally moves nearby
+
+**CRITICAL PLACEMENT GUIDELINES**:
+
+**DO's** ✅:
+1. Place in hero sections as a welcoming character
+2. Use as side companion (left or right corner)
+3. Position where cursor tracking is visible
+4. Give 400px-600px height for full character visibility
+5. Use on dark backgrounds to match color scheme
+6. Pair with greeting text nearby
+7. Center in greeting sections
+
+**DON'Ts** ❌:
+1. Don't hide the robot's face (cursor tracking is key)
+2. Don't use in cramped spaces (< 400px)
+3. Don't place where cursor won't naturally move
+4. Don't use on light backgrounds
+5. Don't overlap with other interactive elements
+6. Don't use multiple instances on same page
+
+**Best Practices**:
+- **Side Companion**: Place robot on left/right with content opposite
+- **Greeting Section**: Center robot with welcome message
+- **Dark Background**: Essential for color visibility
+- **Open Space**: Allow room for cursor to move around
+- **Single Instance**: One robot per page
+- **Mobile Consideration**: Robot is static on touch devices
+
+**Bento Grid Implementation Example**:
+See `SkeletonSeven` in `~/components/blocks/feature-section-with-bento-grid.tsx` for proper integration:
+- Min-height of 450px for character visibility
+- Small instruction text in top-right corner
+- Tag indicators in bottom-left
+- Dark gray gradient background matching robot theme
+- Pink/coral accent colors in borders
+
+**Character Personality**:
+- **Friendly**: Smiling face creates warm welcome
+- **Attentive**: Eye tracking shows engagement
+- **Helpful**: Perfect for support/assistant contexts
+- **Modern**: Clean, tech-forward design
+- **Memorable**: Unique character adds brand personality
+
+### 6. SplineSceneBasic Component
 **Location**: `~/components/ui/spline-scene-basic.tsx`
 
 **Purpose**: Pre-built showcase section featuring a 3D robot model with text content and spotlight effects.

app/components/blocks/feature-section-with-bento-grid.tsx

@@ -7,6 +7,7 @@ import { IconBrandYoutubeFilled } from "@tabler/icons-react";
 import { Link } from "@remix-run/react";
 import { SplineHoverCubes } from "~/components/ui/spline-hover-cubes";
 import { SplineHoverSphere } from "~/components/ui/spline-hover-sphere";
+import { SplineRobotGreeter } from "~/components/ui/spline-robot-greeter";
 
 export function FeaturesSectionWithBentoGrid() {
   const features = [
@@ -26,6 +27,13 @@ export function FeaturesSectionWithBentoGrid() {
       className:
         "col-span-1 md:col-span-3 lg:col-span-3 border-b dark:border-neutral-800",
     },
+    {
+      title: "Friendly Robot Greeter",
+      description:
+        "Meet your cheerful website mascot! This interactive robot tracks your cursor, creating eye contact and a welcoming presence.",
+      skeleton: <SkeletonSeven />,
+      className: "col-span-1 md:col-span-2 lg:col-span-2 border-b md:border-r dark:border-neutral-800",
+    },
     {
       title: "Capture pictures with AI",
       description:
@@ -39,14 +47,7 @@ export function FeaturesSectionWithBentoGrid() {
         "Whether its you or Tyler Durden, you can get to know about our product on YouTube",
       skeleton: <SkeletonThree />,
       className:
-        "col-span-1 md:col-span-2 lg:col-span-2 border-b md:border-r dark:border-neutral-800",
-    },
-    {
-      title: "Track issues effectively",
-      description:
-        "Track and manage your project issues with ease using our intuitive interface.",
-      skeleton: <SkeletonOne />,
-      className: "col-span-1 md:col-span-2 lg:col-span-2 border-b md:border-none",
+        "col-span-1 md:col-span-2 lg:col-span-2 border-b dark:border-neutral-800",
     },
   ];
   return (
@@ -318,6 +319,49 @@ export const SkeletonSix = () => {
   );
 };
 
+/**
+ * SkeletonSeven: Friendly Robot Greeter
+ *
+ * Key Features:
+ * - Cursor tracking with smooth head movement
+ * - Creates eye contact effect
+ * - Friendly smiling character
+ * - Perfect for welcoming visitors
+ *
+ * Tags: #robot #character #bot #mascot #friendly #greeting #welcome
+ * Colors: Black/Dark with Coral/Pink accents (#FFB5B5, #FF9B9B)
+ */
+export const SkeletonSeven = () => {
+  return (
+    <div className="relative flex h-full min-h-[450px] w-full overflow-hidden rounded-lg bg-gradient-to-br from-gray-950 via-gray-900 to-slate-950">
+      {/* 3D Spline Robot - Layer 0 (Background) */}
+      <SplineRobotGreeter className="absolute inset-0 z-0" />
+
+      {/* Content positioned in top-right corner - Layer 20 */}
+      <div className="absolute top-6 right-6 z-20 max-w-[200px]">
+        <div className="rounded-lg bg-black/40 backdrop-blur-sm p-3 border border-pink-500/20">
+          <h3 className="text-xs font-semibold text-white mb-1">
+            👋 Hello!
+          </h3>
+          <p className="text-[10px] text-pink-200/80 leading-snug">
+            Move your cursor around - I'll follow with my eyes!
+          </p>
+        </div>
+      </div>
+
+      {/* Bottom gradient overlay - Layer 10 */}
+      <div className="absolute bottom-0 left-0 right-0 z-10 h-20 bg-gradient-to-t from-black/50 via-black/10 to-transparent pointer-events-none" />
+
+      {/* Corner accent indicator */}
+      <div className="absolute bottom-4 left-4 z-20">
+        <div className="px-2.5 py-1 rounded-full bg-pink-500/10 border border-pink-400/30 backdrop-blur-sm">
+          <span className="text-[10px] font-medium text-pink-300">#robot #greeter</span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
 export const Globe = ({ className }: { className?: string }) => {
   const canvasRef = useRef<HTMLCanvasElement>(null);
 

app/components/ui/spline-robot-greeter.tsx

@@ -0,0 +1,129 @@
+import { Suspense, lazy } from 'react'
+const Spline = lazy(() => import('@splinetool/react-spline'))
+
+interface SplineRobotGreeterProps {
+  className?: string
+}
+
+/**
+ * ===============================================
+ * Spline 3D Scene: Interactive Robot Greeter
+ * ===============================================
+ *
+ * @description
+ * Meet the friendly interactive robot - your cheerful greeter! This 3D animated
+ * character constantly tracks your cursor by smoothly turning its head, creating
+ * a sense of eye contact and connection with visitors. Perfect for creating a
+ * welcoming, engaging, and memorable first impression.
+ *
+ * @features
+ * - Cursor tracking with smooth head movement
+ * - Creates eye contact effect with visitors
+ * - Friendly smiling character design
+ * - Constantly follows mouse movement
+ * - Cheerful and welcoming presence
+ * - Perfect for greetings and introductions
+ * - Adds personality to your website
+ *
+ * @colorScheme
+ * Primary: Black/Dark Gray (#1a1a1a, #2a2a2a)
+ * Accent: Coral/Pink (#FFB5B5, #FF9B9B, peachy-pink)
+ * Face: Dark with white smile
+ * Theme: Dark with warm pink/coral accents
+ * Style: Friendly, modern, playful, welcoming
+ *
+ * @tags
+ * #robot #character #bot #mascot #smile #assistant #greeting #welcome #salute #friendly
+ *
+ * @useCases
+ * ✓ Website greeters (hero sections)
+ * ✓ About page introductions
+ * ✓ Customer support sections
+ * ✓ Landing page mascots
+ * ✓ Portfolio character introductions
+ * ✓ Chatbot representations
+ * ✓ Help/Support pages
+ * ✓ Team/Contact pages
+ *
+ * ⚠️ IMPORTANT PLACEMENT GUIDELINES ⚠️
+ *
+ * DO:
+ * ✓ Place in hero sections as a welcoming character
+ * ✓ Use as side companion (left or right corner)
+ * ✓ Position where cursor tracking is visible
+ * ✓ Give 400px-600px height for full character visibility
+ * ✓ Use on dark backgrounds to match color scheme
+ * ✓ Pair with greeting text nearby
+ * ✓ Center in greeting sections
+ *
+ * DON'T:
+ * ✗ Hide the robot's face (cursor tracking is the key feature)
+ * ✗ Use in cramped spaces (< 400px)
+ * ✗ Place where cursor won't naturally move
+ * ✗ Use on light backgrounds (colors won't match)
+ * ✗ Overlap with other interactive elements
+ * ✗ Use multiple instances on same page
+ *
+ * @layoutExample
+ * GOOD: Robot as side companion with greeting text
+ * - Container: Section with adequate height (500px+)
+ * - Robot: Positioned left or right side
+ * - Text: Opposite side with greeting message
+ * - Cursor space: Plenty of area for tracking effect
+ *
+ * BAD: Robot hidden or cramped
+ * - Small container that cuts off character
+ * - Overlapping content blocking the face
+ * - Light background that doesn't match theme
+ *
+ * @interactivity
+ * KEY FEATURE: Cursor Tracking
+ * - Robot head follows mouse cursor smoothly
+ * - Creates eye contact effect
+ * - Enhances user engagement
+ * - Works best with open space around robot
+ * - Most effective when users naturally move cursor nearby
+ *
+ * @responsive
+ * - Desktop: Full tracking experience, optimal
+ * - Tablet: Reduced size, touch tracking may vary
+ * - Mobile: Static or reduced tracking (touch doesn't have cursor)
+ * - Consider: Mobile users won't get full cursor tracking effect
+ *
+ * @performance
+ * - Lazy loaded for optimal initial page load
+ * - Uses Suspense for graceful loading state
+ * - Recommended: Single instance per page
+ * - Tracking animation is GPU-accelerated
+ *
+ * @accessibility
+ * - Provide text alternative describing the robot
+ * - Don't rely on robot for critical information
+ * - Ensure all actions have keyboard alternatives
+ * - Consider motion sensitivity preferences
+ * - Robot is decorative/engagement enhancement
+ */
+export function SplineRobotGreeter({ className }: SplineRobotGreeterProps) {
+  return (
+    <Suspense
+      fallback={
+        <div className="w-full h-full flex items-center justify-center bg-gradient-to-br from-gray-900/20 to-gray-950/20">
+          <div className="flex flex-col items-center gap-3">
+            <div className="relative">
+              <div className="animate-bounce rounded-full h-16 w-16 bg-gradient-to-br from-pink-400/20 to-coral-400/20 border-2 border-pink-300/50"></div>
+              <div className="absolute inset-0 flex items-center justify-center">
+                <div className="text-2xl">🤖</div>
+              </div>
+            </div>
+            <span className="text-pink-300/70 text-sm">Loading Robot...</span>
+          </div>
+        </div>
+      }
+    >
+      <Spline
+        scene="https://prod.spline.design/Zrzvhl0glLnIKAeZ/scene.splinecode"
+        className={className}
+      />
+    </Suspense>
+  )
+}