feat: add interactive 3D components with hover effects for enhanced user engagement

Author: sumansaurabh

.claude/skills/3d-components.md

@@ -52,11 +52,13 @@ 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 four skeleton components:
+The component also includes a complete features section with a Bento Grid layout (6-column grid) featuring six 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
 
 **Use Cases**:
 - Global reach sections
@@ -135,7 +137,193 @@ export function HeroSection() {
 - Timing: ease function
 - Defined in `tailwind.config.ts` as `animate-spotlight`
 
-### 3. SplineSceneBasic Component
+### 3. SplineHoverCubes Component
+**Location**: `~/components/ui/spline-hover-cubes.tsx`
+
+**Purpose**: Interactive 3D scene featuring dynamically appearing cubes with hover effects, textured transitions, and immersive motion.
+
+**Scene URL**: `https://prod.spline.design/2brKVxQg9zPVuc-s/scene.splinecode`
+
+**Tags**: `#hero` `#landing` `#hover` `#interaction` `#cubes` `#boxes` `#cursor` `#dark` `#neon`
+
+**Color Scheme**:
+- Primary: `#3F2B6D` (Deep Purple)
+- Theme: Dark with neon highlights
+- Style: Dark, mysterious, futuristic
+
+**Features**:
+- Dynamic cube appearance on cursor hover
+- Textured transitions for visual depth
+- Interactive motion responsive to user interaction
+- Smooth animations with neon glow effects
+- Dark theme optimized with purple/neon accents
+- Lazy loaded with React Suspense
+
+**Basic Usage**:
+```tsx
+import { SplineHoverCubes } from "~/components/ui/spline-hover-cubes";
+
+export function HeroSection() {
+  return (
+    <div className="relative h-[600px] w-full">
+      <SplineHoverCubes className="absolute inset-0" />
+
+      <div className="absolute top-8 left-8 z-10">
+        <h1 className="text-white text-4xl">Your Content</h1>
+      </div>
+    </div>
+  );
+}
+```
+
+**Perfect For**:
+- Hero sections (full viewport background)
+- Feature showcases (bento grid cards)
+- Landing page centerpieces
+- Interactive portfolio sections
+- Product demonstration areas
+
+**Not Recommended For**:
+- Form-heavy pages
+- Text-dense content areas
+- Small containers (< 400px height)
+- Mobile-first experiences (consider fallback)
+
+**CRITICAL PLACEMENT GUIDELINES**:
+
+⚠️ **The 3D effect requires unobstructed space!**
+
+**DO's** ✅:
+1. Use as full-screen background with content overlaid using z-index
+2. Give it dedicated space without overlapping interactive elements
+3. Place text/CTAs OUTSIDE the interactive area or in corners
+4. Use transparent gradients at edges for smooth content transitions
+5. Ensure min-height of 400px-600px for full effect visibility
+6. Position content in safe zones (top-left, top-right, bottom-left, bottom-right corners)
+
+**DON'Ts** ❌:
+1. Don't place clickable elements directly over the 3D scene
+2. Don't overlay dense text that blocks interaction
+3. Don't use in small containers (< 400px height)
+4. Don't stack multiple interactive layers on top
+5. Don't place forms or input fields over the scene
+
+**Z-Index Layering Strategy**:
+```
+Layer 0 (z-0):   3D Spline Scene
+Layer 5 (z-5):   Gradient overlays (pointer-events-none)
+Layer 10 (z-10): Content elements (text, buttons)
+Layer 20 (z-20): Interactive tooltips or modals
+```
+
+**Bento Grid Implementation Example**:
+See `SkeletonFive` in `~/components/blocks/feature-section-with-bento-grid.tsx` for proper integration:
+- Min-height of 500px for visibility
+- Content positioned in top-left safe zone
+- Bottom gradient overlay for smooth transition
+- Tag indicators in bottom-right corner
+- Proper z-index layering
+
+**Complete Documentation**: See `~/components/ui/SPLINE_HOVER_CUBES_GUIDE.md` for comprehensive usage guide.
+
+### 4. SplineHoverSphere Component
+**Location**: `~/components/ui/spline-hover-sphere.tsx`
+
+**Purpose**: Hero section interaction concept featuring a large sphere composed of smaller spheres that react on hover by changing size and color. Perfect for techy landing pages.
+
+**Scene URL**: `https://prod.spline.design/48VBTd2o7FCZRCte/scene.splinecode`
+
+**Tags**: `#hero` `#interactive` `#hover` `#animation` `#landing` `#tech` `#sphere` `#green` `#blue` `#wave`
+
+**Color Scheme**:
+- Primary: Green, Blue, Teal (cyan)
+- Theme: Dark with vibrant green/blue accents
+- Style: Tech, futuristic, innovative, modern
+- Accent: Wave effects with color transitions
+
+**Features**:
+- Large sphere made of smaller reactive spheres
+- Hover-triggered size and color changes
+- Smooth wave-like animations
+- Green/blue/teal color palette
+- Perfect for tech-focused landing pages
+- Mesmerizing interactive visual effect
+- Lazy loaded with React Suspense
+
+**Basic Usage**:
+```tsx
+import { SplineHoverSphere } from "~/components/ui/spline-hover-sphere";
+
+export function TechHero() {
+  return (
+    <div className="relative h-screen w-full">
+      <SplineHoverSphere className="absolute inset-0" />
+
+      <div className="absolute top-12 left-12 z-10">
+        <h1 className="text-white text-5xl">Innovation Starts Here</h1>
+      </div>
+    </div>
+  );
+}
+```
+
+**Perfect For**:
+- Hero sections (techy landing pages)
+- Technology showcases
+- Innovation-focused pages
+- Product launches (tech products)
+- Interactive portfolio headers
+- SaaS landing pages
+- AI/ML product pages
+
+**Not Recommended For**:
+- Light-themed pages (colors won't show well)
+- Small containers (< 500px)
+- Content-heavy pages
+- Multiple instances per page (performance)
+
+**CRITICAL PLACEMENT GUIDELINES**:
+
+⚠️ **The sphere needs space to breathe!**
+
+**DO's** ✅:
+1. Use as hero section centerpiece with minimal text overlay
+2. Give the sphere space to breathe (min 500px height)
+3. Place text in corners or sides, not covering the sphere
+4. Use dark backgrounds to make colors pop
+5. Position CTAs below or to the side of the sphere
+6. Allow full viewport width for maximum impact
+
+**DON'Ts** ❌:
+1. Don't cover the sphere with dense content
+2. Don't use on light backgrounds (colors won't show well)
+3. Don't place in small containers (< 500px)
+4. Don't overlay forms or complex UI elements
+5. Don't use multiple instances on the same page
+
+**Best Practices**:
+- **Centered Hero**: Use as full-viewport centerpiece
+- **Minimal Overlay**: Keep text minimal and in corners
+- **Dark Background**: Essential for color visibility
+- **Single Instance**: One per page for performance
+- **Mobile Fallback**: Consider static version for mobile
+
+**Bento Grid Implementation Example**:
+See `SkeletonSix` in `~/components/blocks/feature-section-with-bento-grid.tsx` for proper integration:
+- Min-height of 500px for visibility
+- Content positioned in top-left safe zone
+- Bottom gradient overlay for smooth transition
+- Tag indicators in bottom-right corner
+- Teal/blue color scheme with dark background
+
+**Visual Characteristics**:
+- **Center Focus**: Sphere naturally draws eye to center
+- **Wave Motion**: Organic, flowing animations
+- **Color Shift**: Green to blue transitions on interaction
+- **Size Changes**: Smaller spheres scale on hover
+- **Tech Aesthetic**: Perfect for SaaS, AI, tech products
+
+### 5. 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

@@ -5,38 +5,48 @@ import { useEffect, useRef } from "react";
 import { motion } from "framer-motion";
 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";
 
 export function FeaturesSectionWithBentoGrid() {
   const features = [
     {
-      title: "Track issues effectively",
+      title: "Interactive 3D Hover Effects",
       description:
-        "Track and manage your project issues with ease using our intuitive interface.",
-      skeleton: <SkeletonOne />,
+        "Immersive hover-activated cubes with textured transitions. Perfect for hero sections and interactive showcases.",
+      skeleton: <SkeletonFive />,
       className:
-        "col-span-1 md:col-span-4 lg:col-span-4 border-b md:border-r dark:border-neutral-800",
+        "col-span-1 md:col-span-3 lg:col-span-3 border-b md:border-r dark:border-neutral-800",
+    },
+    {
+      title: "Reactive Sphere Animation",
+      description:
+        "A mesmerizing sphere made of smaller spheres that react on hover with color and size changes. Ideal for techy landing pages.",
+      skeleton: <SkeletonSix />,
+      className:
+        "col-span-1 md:col-span-3 lg:col-span-3 border-b dark:border-neutral-800",
     },
     {
       title: "Capture pictures with AI",
       description:
         "Capture stunning photos effortlessly using our advanced AI technology.",
       skeleton: <SkeletonTwo />,
-      className: "col-span-1 md:col-span-2 lg:col-span-2 border-b dark:border-neutral-800",
+      className: "col-span-1 md:col-span-2 lg:col-span-2 border-b md:border-r dark:border-neutral-800",
     },
     {
       title: "Watch our AI on YouTube",
       description:
         "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-3 lg:col-span-3 border-b md:border-r dark:border-neutral-800",
+        "col-span-1 md:col-span-2 lg:col-span-2 border-b md:border-r dark:border-neutral-800",
     },
     {
-      title: "Deploy in seconds",
+      title: "Track issues effectively",
       description:
-        "With our blazing fast, state of the art, cutting edge, we are so back cloud servies (read AWS) - you can deploy your model in seconds.",
-      skeleton: <SkeletonFour />,
-      className: "col-span-1 md:col-span-3 lg:col-span-3 border-b md:border-none",
+        "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",
     },
   ];
   return (
@@ -222,6 +232,92 @@ export const SkeletonFour = () => {
   );
 };
 
+/**
+ * SkeletonFive: Demonstrates proper placement of 3D Spline hover cubes
+ *
+ * Key Features:
+ * - Content positioned in top-left corner (safe zone)
+ * - 3D scene takes full space without obstruction
+ * - Gradient overlay at bottom for smooth transitions
+ * - Proper z-index layering (scene: 0, overlay: 10, content: 20)
+ *
+ * Tags: #hero #landing #hover #interaction #cubes #cursor #dark #neon
+ * Color: #3F2B6D (Deep Purple with neon accents)
+ */
+export const SkeletonFive = () => {
+  return (
+    <div className="relative flex h-full min-h-[500px] w-full overflow-hidden rounded-lg bg-gradient-to-br from-slate-950 via-[#3F2B6D]/20 to-slate-900">
+      {/* 3D Spline Scene - Layer 0 (Background) */}
+      <SplineHoverCubes className="absolute inset-0 z-0" />
+
+      {/* Content positioned in safe zone (top-left) - Layer 20 */}
+      <div className="absolute top-6 left-6 z-20 max-w-xs">
+        <div className="rounded-lg bg-black/40 backdrop-blur-sm p-4 border border-purple-500/20">
+          <h3 className="text-sm font-semibold text-white mb-1">
+            Hover to Interact
+          </h3>
+          <p className="text-xs text-purple-200/80">
+            Move your cursor over the scene to reveal animated cubes with textured transitions
+          </p>
+        </div>
+      </div>
+
+      {/* Bottom gradient overlay - Layer 10 */}
+      <div className="absolute bottom-0 left-0 right-0 z-10 h-24 bg-gradient-to-t from-black/60 via-black/20 to-transparent pointer-events-none" />
+
+      {/* Corner accent indicator (shows safe zone) */}
+      <div className="absolute bottom-4 right-4 z-20">
+        <div className="px-3 py-1.5 rounded-full bg-purple-500/10 border border-purple-400/30 backdrop-blur-sm">
+          <span className="text-xs font-medium text-purple-300">#hover #cubes #dark</span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+/**
+ * SkeletonSix: Interactive Hover Sphere
+ *
+ * Key Features:
+ * - Large sphere made of smaller reactive spheres
+ * - Hover-triggered size and color changes
+ * - Wave-like animations with green/blue color palette
+ * - Best as centerpiece with minimal overlay
+ *
+ * Tags: #hero #interactive #hover #animation #sphere #green #blue #wave #tech
+ * Colors: Green, Blue, Teal (cyan)
+ */
+export const SkeletonSix = () => {
+  return (
+    <div className="relative flex h-full min-h-[500px] w-full overflow-hidden rounded-lg bg-gradient-to-br from-slate-950 via-teal-900/20 to-blue-950">
+      {/* 3D Spline Scene - Layer 0 (Background) */}
+      <SplineHoverSphere className="absolute inset-0 z-0" />
+
+      {/* Content positioned in safe zone (top-left) - Layer 20 */}
+      <div className="absolute top-6 left-6 z-20 max-w-xs">
+        <div className="rounded-lg bg-black/40 backdrop-blur-sm p-4 border border-teal-500/20">
+          <h3 className="text-sm font-semibold text-white mb-1">
+            Interactive Sphere
+          </h3>
+          <p className="text-xs text-teal-200/80">
+            Hover over the sphere to see the smaller spheres react with size and color changes
+          </p>
+        </div>
+      </div>
+
+      {/* Bottom gradient overlay - Layer 10 */}
+      <div className="absolute bottom-0 left-0 right-0 z-10 h-24 bg-gradient-to-t from-black/60 via-black/20 to-transparent pointer-events-none" />
+
+      {/* Corner accent indicator */}
+      <div className="absolute bottom-4 right-4 z-20">
+        <div className="px-3 py-1.5 rounded-full bg-teal-500/10 border border-teal-400/30 backdrop-blur-sm">
+          <span className="text-xs font-medium text-teal-300">#sphere #hover #wave</span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
 export const Globe = ({ className }: { className?: string }) => {
   const canvasRef = useRef<HTMLCanvasElement>(null);