react-instagram-stories 1.0.4 → 1.1.0

package/dist/styles.css

@@ -4,99 +4,6 @@
   -webkit-tap-highlight-color: transparent;
 }
 
-/* Demo container styles */
-.demo-container {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
-  max-width: 100%;
-  margin: 0 auto;
-  padding: 20px;
-}
-
-.demo-header {
-  text-align: center;
-  margin-bottom: 40px;
-}
-
-.demo-header h1 {
-  font-size: 2.5rem;
-  margin-bottom: 10px;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-}
-
-.demo-header p {
-  color: #666;
-  font-size: 1.1rem;
-}
-
-.demo-controls {
-  display: flex;
-  gap: 10px;
-  justify-content: center;
-  margin: 20px 0;
-}
-
-.demo-btn {
-  padding: 10px 20px;
-  border: 2px solid #667eea;
-  border-radius: 25px;
-  background: white;
-  color: #667eea;
-  font-weight: 600;
-  cursor: pointer;
-  transition: all 0.3s ease;
-}
-
-.demo-btn:hover {
-  background: #667eea;
-  color: white;
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
-}
-
-.demo-btn.active {
-  background: #667eea;
-  color: white;
-}
-
-.demo-features {
-  max-width: 600px;
-  margin: 30px auto;
-  text-align: left;
-  padding: 20px;
-  background: #f8f9fa;
-  border-radius: 12px;
-}
-
-.demo-features h3 {
-  margin-top: 0;
-}
-
-.demo-features ul {
-  list-style: none;
-  padding: 0;
-}
-
-.demo-features li {
-  padding: 8px 0;
-  font-size: 0.95rem;
-}
-
-.demo-main {
-  margin: 40px 0;
-}
-
-.demo-footer {
-  text-align: center;
-  color: #666;
-  font-size: 0.9rem;
-  margin-top: 60px;
-  padding-top: 20px;
-  border-top: 1px solid #eee;
-}
-
 /* ========================================
    AVATAR LIST STYLES
    ======================================== */
@@ -152,7 +59,14 @@
   position: relative;
   padding: 3px;
   border-radius: 50%;
-  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
+  background: linear-gradient(
+    45deg,
+    #f09433 0%,
+    #e6683c 25%,
+    #dc2743 50%,
+    #cc2366 75%,
+    #bc1888 100%
+  );
 }
 
 .story-avatar-read .story-avatar-ring {
@@ -215,6 +129,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  background: #000;
   animation: fadeIn 0.3s ease;
 }
 
@@ -243,7 +158,6 @@
   width: 100%;
   max-width: 500px;
   height: 100dvh;
-  max-height: 900px;
   z-index: 2;
   display: flex;
   flex-direction: column;
@@ -251,17 +165,27 @@
   will-change: transform;
 }
 
-/* User transitions with native CSS animations */
-.story-viewer-transitioning {
-  transition: transform 0.15s ease-out;
-}
+/* ========================================
+   3D CUBE TRANSITION (user-to-user)
+   Three faces (left / front / right) form a cube.
+   The wrapper rotates around Y; translateZ pulls
+   the cube back so it rotates in-place.
+   Geometry mirrors the proven CodePen approach.
+   ======================================== */
 
-.story-viewer-transition-left {
-  transform: translateX(-100%);
+.story-viewer-cube-viewport {
+  position: relative;
+  width: 100%;
+  max-width: 500px;
+  height: 100dvh;
+  z-index: 2;
 }
 
-.story-viewer-transition-right {
-  transform: translateX(100%);
+.story-viewer-cube-wrapper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  /* transform-style and transform set inline via JS only when cube is active */
 }
 
 /* Header */
@@ -272,7 +196,11 @@
   right: 0;
   z-index: 10;
   padding: 16px;
-  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);
+  background: linear-gradient(
+    to bottom,
+    rgba(0, 0, 0, 0.6) 0%,
+    rgba(0, 0, 0, 0) 100%
+  );
 }
 
 .story-viewer-user-info {
@@ -353,16 +281,6 @@
   background: #000;
 }
 
-.story-viewer-item-wrapper {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  transition: opacity 0.3s ease, visibility 0.3s ease;
-  will-change: opacity;
-}
-
 /* Story item types */
 .story-item {
   width: 100%;
@@ -473,7 +391,12 @@
 
   .story-viewer-content {
     max-width: 100%;
-    max-height: 100dvh; 
+    max-height: 100dvh;
+  }
+
+  .story-viewer-cube-viewport {
+    max-width: 100%;
+    max-height: 100dvh;
   }
 
   .story-avatar-image-wrapper {
@@ -507,6 +430,10 @@
     max-height: 100dvh;
   }
 
+  .story-viewer-cube-viewport {
+    max-height: 100dvh;
+  }
+
   .story-viewer-header {
     padding: 12px;
   }
@@ -522,9 +449,14 @@
 
 @media (min-width: 769px) {
   .story-viewer-content {
+    max-height: 900px;
     border-radius: 12px;
     overflow: hidden;
   }
+
+  .story-viewer-cube-viewport {
+    max-height: 900px;
+  }
 }
 
 /* ========================================
@@ -562,14 +494,14 @@
 
 /* GPU acceleration for animations */
 .story-avatar,
-.story-progress-bar-fill,
-.story-viewer-content,
-.story-viewer-item-wrapper {
+.story-progress-bar-fill {
   transform: translate3d(0, 0, 0);
   backface-visibility: hidden;
-  perspective: 1000px;
 }
 
+/* story-viewer-content uses will-change:transform for GPU acceleration.
+   Do NOT set transform or perspective here — it breaks the 3D cube faces. */
+
 /* Reduce motion for accessibility */
 @media (prefers-reduced-motion: reduce) {
   * {
@@ -580,13 +512,17 @@
 }
 
 /* Touch action optimization */
-.story-viewer,
 .story-avatar-list {
   touch-action: pan-x pan-y;
 }
 
+/* Prevent browser gestures from conflicting with cube drag */
+.story-viewer {
+  touch-action: none;
+}
+
 .story-viewer-content {
-  touch-action: manipulation;
+  touch-action: none;
 }
 
 /* ========================================
@@ -594,7 +530,8 @@
    ======================================== */
 
 @keyframes pulse {
-  0%, 100% {
+  0%,
+  100% {
     opacity: 1;
   }
   50% {
@@ -629,8 +566,6 @@
   animation: spin 0.8s linear infinite;
 }
 
-
-
 @keyframes spin {
   to {
     transform: rotate(360deg);
@@ -641,267 +576,3 @@
 .story-item-video video {
   transition: opacity 0.3s ease;
 }
-
-/* ========================================
-    SMOOTH SLIDE TRANSITIONS
-    ======================================== */
-
-.story-viewer-slide {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 10;
-  will-change: transform, opacity;
-}
-
-.story-viewer-content {
-  will-change: transform;
-}
-
-/* Slide animations are now handled by native CSS transitions in StoryViewer.tsx */
-
-/* ========================================
-    PDP STORY STYLES
-    ======================================== */
-
-.pdp-story {
-  width: 100%;
-  height: 100%;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  background: #000;
-}
-
-.pdp-story-image-container {
-  position: relative;
-  flex: 1;
-  width: 100%;
-  overflow: hidden;
-  background: #000;
-}
-
-.pdp-story-loader {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: #000;
-  z-index: 10;
-}
-
-.pdp-story-spinner {
-  width: 40px;
-  height: 40px;
-  border: 3px solid rgba(255, 255, 255, 0.3);
-  border-top-color: white;
-  border-radius: 50%;
-  animation: spin 0.8s linear infinite;
-}
-
-.pdp-story-image {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  transition: opacity 0.3s ease;
-  user-select: none;
-  -webkit-user-select: none;
-}
-
-.pdp-story-nav {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 44px;
-  height: 44px;
-  border-radius: 50%;
-  border: none;
-  background: rgba(0, 0, 0, 0.5);
-  color: white;
-  font-size: 24px;
-  font-weight: bold;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: background 0.2s ease;
-  z-index: 15;
-}
-
-.pdp-story-nav:hover {
-  background: rgba(0, 0, 0, 0.7);
-}
-
-.pdp-story-nav-prev {
-  left: 16px;
-}
-
-.pdp-story-nav-next {
-  right: 16px;
-}
-
-.pdp-story-indicators {
-  position: absolute;
-  bottom: 120px;
-  left: 50%;
-  transform: translateX(-50%);
-  display: flex;
-  gap: 8px;
-  z-index: 15;
-}
-
-.pdp-story-indicator {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background: rgba(255, 255, 255, 0.5);
-  transition: background 0.2s ease;
-}
-
-.pdp-story-indicator.active {
-  background: white;
-}
-
-.pdp-story-content {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.6) 50%, transparent 100%);
-  padding: 20px;
-  color: white;
-  z-index: 15;
-}
-
-.pdp-story-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  margin-bottom: 16px;
-}
-
-.pdp-story-title {
-  font-size: 20px;
-  font-weight: 600;
-  margin: 0;
-  flex: 1;
-  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
-}
-
-.pdp-story-price {
-  font-size: 18px;
-  font-weight: 700;
-  color: #4ade80;
-  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
-}
-
-.pdp-story-details {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 12px 16px;
-  margin-bottom: 16px;
-}
-
-.pdp-story-detail {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.pdp-story-label {
-  font-size: 12px;
-  color: rgba(255, 255, 255, 0.7);
-  font-weight: 500;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-.pdp-story-value {
-  font-size: 14px;
-  font-weight: 600;
-  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
-}
-
-.pdp-story-highlights {
-  display: flex;
-  gap: 16px;
-}
-
-.pdp-story-highlight {
-  flex: 1;
-  text-align: center;
-  padding: 12px;
-  background: rgba(255, 255, 255, 0.1);
-  border-radius: 8px;
-  backdrop-filter: blur(10px);
-}
-
-.pdp-story-highlight-value {
-  display: block;
-  font-size: 16px;
-  font-weight: 700;
-  margin-bottom: 4px;
-  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
-}
-
-.pdp-story-highlight-label {
-  font-size: 12px;
-  color: rgba(255, 255, 255, 0.8);
-  font-weight: 500;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-/* Responsive adjustments for PDP story */
-@media (max-width: 768px) {
-  .pdp-story-content {
-    padding: 16px;
-  }
-
-  .pdp-story-title {
-    font-size: 18px;
-  }
-
-  .pdp-story-price {
-    font-size: 16px;
-  }
-
-  .pdp-story-details {
-    grid-template-columns: 1fr;
-    gap: 8px;
-  }
-
-  .pdp-story-highlights {
-    gap: 12px;
-  }
-
-  .pdp-story-highlight {
-    padding: 10px;
-  }
-
-  .pdp-story-highlight-value {
-    font-size: 14px;
-  }
-
-  .pdp-story-nav {
-    width: 40px;
-    height: 40px;
-    font-size: 20px;
-  }
-
-  .pdp-story-indicators {
-    bottom: 100px;
-  }
-}
-

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-instagram-stories",
-  "version": "1.0.4",
+  "version": "1.1.0",
   "description": "High-performance, fully customizable Instagram-style Stories component for React with TypeScript support",
   "author": "Ankit Jangir",
   "license": "MIT",
@@ -46,8 +46,7 @@
   },
   "peerDependencies": {
     "react": ">=18.0.0",
-    "react-dom": ">=18.0.0",
-    "react-router-dom": ">=6.0.0"
+    "react-dom": ">=18.0.0"
   },
   "devDependencies": {
     "@types/node": "^25.0.9",
@@ -55,17 +54,15 @@
     "@types/react-dom": "^18.2.0",
     "@vitejs/plugin-react": "^4.0.0",
     "autoprefixer": "^10.4.23",
+    "framer-motion": "^12.26.2",
     "lucide-react": "^0.562.0",
     "postcss": "^8.5.6",
     "tailwindcss": "^3.4.19",
+    "tailwindcss-animate": "^1.0.7",
     "tsup": "^8.5.1",
     "typescript": "^5.0.0",
     "vite": "^4.3.0"
   },
-  "dependencies": {
-    "framer-motion": "^12.26.2",
-    "tailwindcss-animate": "^1.0.7"
-  },
   "sideEffects": [
     "*.css"
   ]