♻️ : reuse the sticky container

apps/docs/components/grouped/TrackedSection.tsx

@@ -15,7 +15,7 @@ export const TrackedSection = ({ className, sectionID }: TrackedSectionProps) =>
   return (
     <section
       ref={sectionRef}
-      className={`relative border-2 bg-opacity-10 p-10 pb-[50vh] drop-shadow-2xl dark:bg-opacity-10 ${className}`}
+      className={`border-2 bg-opacity-10 p-10 pb-[50vh] drop-shadow-2xl dark:bg-opacity-10 ${className}`}
     >
       <div className="absolute left-2 top-3.5">
         <span className="rounded-lg bg-white bg-opacity-60 p-2 text-slate-500 dark:bg-gray-950">

apps/docs/components/video/StickyVideo.tsx

@@ -2,10 +2,9 @@ import { useRef } from 'react';
 
 import { useSectionScrollState } from '@react-scrollytelling/core';
 import { useResizeObserver } from '@react-scrollytelling/layout';
+import { StickyContainerTailwind } from '@react-scrollytelling/layout';
 import { Video } from '@react-scrollytelling/video';
 
-import { StickyContainer } from '../grouped/StickyContainer';
-
 export interface StickyVideoProps {
   src: string;
 }
@@ -18,36 +17,35 @@ export const StickyVideo = ({ src }: StickyVideoProps) => {
   const { scrolledRatio } = useSectionScrollState(sectionRef);
 
   return (
-    <StickyContainer
+    <StickyContainerTailwind
       overlay={
         <>
-          <section className="relative border-green-400" ref={sectionRef} style={{ height }}>
+          <section className="border-green-400" ref={sectionRef} style={{ height }}>
             {/* One video height of the empty space */}
           </section>
           <section
-            className="relative border-green-400 dark:border-green-700"
+            className="border-green-400 dark:border-green-700"
             ref={sectionRef}
             style={{ height }}
           >
             <div
-              className="rounded-full bg-emerald-200 bg-opacity-80 px-5 py-1 text-slate-800 backdrop-blur-sm dark:bg-emerald-950 dark:bg-opacity-80 dark:text-slate-200"
+              className="min-w-20 rounded-full bg-emerald-200 bg-opacity-80 px-5 py-1 text-slate-800 backdrop-blur-sm dark:bg-emerald-950 dark:bg-opacity-80 dark:text-slate-200"
               style={{ width: `${scrolledRatio * 100}%` }}
             >
               {Math.round(scrolledRatio * 100)}%
             </div>
           </section>
         </>
       }
+      backgroundRef={videoContainerRef}
     >
-      <div ref={videoContainerRef} className="absolute left-0 right-0 top-14 h-screen">
-        <Video
-          className="h-full w-full object-cover"
-          width={width}
-          height={height}
-          src={src}
-          ratio={scrolledRatio}
-        />
-      </div>
-    </StickyContainer>
+      <Video
+        className="h-full w-full object-cover"
+        width={width}
+        height={height}
+        src={src}
+        ratio={scrolledRatio}
+      />
+    </StickyContainerTailwind>
   );
 };

apps/docs/pages/track_grouped_sections.mdx

@@ -1,8 +1,8 @@
 import { TrackedSection } from '../components/grouped/TrackedSection';
-import { StickyContainer } from '../components/grouped/StickyContainer';
 import { ActiveSectionInfo } from '../components/grouped/ActiveSectionInfo';
 
 import { ScrollytellingProvider } from '@react-scrollytelling/grouped';
+import { StickyContainer } from '@react-scrollytelling/layout';
 
 To tell a story that spans multiple sections, for example, changing the background based on the section in view,
 multiple sections tracking tools of `react-scrollytelling` can help you achieve this.
@@ -145,9 +145,8 @@ You can replace the states with motion values from animation libraries like [rea
         </>
       }
     >
-      <div className="absolute left-0 right-0 top-0 h-screen">
+        {/* Background */}
         <ActiveSectionInfo />
-      </div>
     </StickyContainer>
   </ScrollytellingProvider>
 </div>

packages/layout/src/components/index.ts

@@ -0,0 +1 @@
+export * from './sticky';

packages/layout/src/components/sticky/StickyContainer.tsx

@@ -0,0 +1,48 @@
+export interface StickyContainerProps {
+  /** Background sticky container */
+  children: React.ReactNode;
+
+  /** Overlaying content */
+  overlay?: React.ReactNode;
+
+  /** Ref to the background container */
+  backgroundRef?: React.RefObject<HTMLDivElement>;
+}
+
+export const StickyContainer = ({ overlay, children, backgroundRef }: StickyContainerProps) => {
+  return (
+    <div style={{ position: 'relative' }}>
+      {/* Background */}
+      <div
+        style={{
+          position: 'sticky',
+          top: 0,
+          paddingBottom: '100vh',
+        }}
+      >
+        <div
+          style={{
+            position: 'absolute',
+            left: 0,
+            right: 0,
+            top: 0,
+            height: '100vh',
+          }}
+          ref={backgroundRef}
+        >
+          {children}
+        </div>
+      </div>
+
+      {/* Overlay foreground content */}
+      <div
+        style={{
+          position: 'relative',
+          marginTop: '-100vh',
+        }}
+      >
+        {overlay}
+      </div>
+    </div>
+  );
+};

packages/layout/src/components/sticky/StickyContainerTailwind.tsx

@@ -0,0 +1,30 @@
+export interface StickyContainerTailwindProps {
+  /** Background sticky container */
+  children: React.ReactNode;
+
+  /** Overlaying content */
+  overlay?: React.ReactNode;
+
+  /** Ref to the background container */
+  backgroundRef?: React.RefObject<HTMLDivElement>;
+}
+
+export const StickyContainerTailwind = ({
+  overlay,
+  children,
+  backgroundRef,
+}: StickyContainerTailwindProps) => {
+  return (
+    <div className="relative">
+      {/* Background */}
+      <div className="sticky top-0 pb-[100vh]">
+        <div className="absolute left-0 right-0 top-0 h-screen" ref={backgroundRef}>
+          {children}
+        </div>
+      </div>
+
+      {/* Overlay foreground content */}
+      <div className="relative -mt-[100vh]">{overlay}</div>
+    </div>
+  );
+};

packages/layout/src/components/sticky/index.ts

@@ -0,0 +1,2 @@
+export * from './StickyContainerTailwind';
+export * from './StickyContainer';

packages/layout/src/index.ts

@@ -1 +1,2 @@
 export * from './hooks';
+export * from './components';