cdtinney · cdtinney · Apr 28, 2026
diff --git a/config/rollup.config.dev.mjs b/config/rollup.config.dev.mjs
@@ -2,6 +2,7 @@ import resolve from '@rollup/plugin-node-resolve';
 import commonjs from '@rollup/plugin-commonjs';
 import babel from '@rollup/plugin-babel';
 import replace from '@rollup/plugin-replace';
+import serve from 'rollup-plugin-serve';
 import externals from './externals.mjs';
 
 const paths = {
@@ -10,7 +11,7 @@ const paths = {
     outputFile: 'docs/static/lib/index.js',
   },
   playground: {
-    input: 'playground/src/index.jsx',
+    input: 'playground/src/index.tsx',
     outputFile: 'docs/static/index.js',
   },
 };
@@ -62,5 +63,9 @@ export default [{
       preventAssignment: true,
       'process.env.NODE_ENV': JSON.stringify('development'),
     }),
+    serve({
+      contentBase: 'docs',
+      port: 8001,
+    }),
   ],
 }];
diff --git a/config/rollup.config.docs.mjs b/config/rollup.config.docs.mjs
@@ -11,7 +11,7 @@ const paths = {
     outputFile: 'docs/static/lib/index.js',
   },
   playground: {
-    input: 'playground/src/index.jsx',
+    input: 'playground/src/index.tsx',
     outputFile: 'docs/static/index.js',
   },
 };

diff --git a/docs/index.html b/docs/index.html
@@ -7,6 +7,77 @@
     <link rel="icon" href="static/favicon.ico"/>
     <title>react-double-marquee</title>
     <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
+    <style>
+      html, body, #root { margin: 0; height: 100%; }
+      body { font-family: 'Roboto', sans-serif; }
+      .page {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        min-height: 100%;
+        box-sizing: border-box;
+        background-color: #efefef;
+      }
+      .examples {
+        width: 100%;
+        max-width: 900px;
+        padding: 20px 15px;
+        border-top: 1px solid rgba(221, 221, 221, 1);
+        box-sizing: border-box;
+      }
+      .header {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        margin: 20px;
+      }
+      .header__logo { width: 400px; max-width: 100%; }
+      .header__npm {
+        margin-top: 12px;
+        font-size: 14px;
+        color: #4a5a6a;
+        text-decoration: none;
+        border-bottom: 1px dashed #4a5a6a;
+      }
+      .header__npm:hover { color: #2a3a4a; }
+      .card {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        margin-bottom: 20px;
+      }
+      .card__description {
+        width: 250px;
+        padding: 10px 15px;
+        color: #dddddd;
+        background-color: #4a5a6a;
+        box-shadow: 3px 3px 6px rgba(45, 45, 90, 0.35);
+        box-sizing: border-box;
+      }
+      .card__props {
+        margin: 8px 0 0;
+        padding: 8px;
+        background-color: #2a3a4a;
+        color: #c8e4ff;
+        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+        font-size: 12px;
+        white-space: pre-wrap;
+        word-break: break-all;
+      }
+      .card__marquee-outer {
+        width: 250px;
+        margin: 15px;
+        flex-grow: 1;
+        background-color: #cccccc;
+        border-radius: 2px;
+        box-shadow: 3px 3px 6px rgba(45, 45, 90, 0.35);
+      }
+      .card__marquee-inner {
+        width: 200px;
+        margin: 20px;
+        white-space: nowrap;
+      }
+    </style>
   </head>
   <body>
     <noscript>

diff --git a/package.json b/package.json
@@ -62,6 +62,7 @@
     "react": "^18.3.0",
     "react-dom": "^18.3.0",
     "rollup": "^4.0.0",
+    "rollup-plugin-serve": "^3.0.0",
     "semantic-release": "^24.0.0",
     "ts-jest": "^29.1.0",
     "tslib": "^2.6.0",

diff --git a/playground/src/components/ExampleCard.jsx b/playground/src/components/ExampleCard.jsx
diff --git a/playground/src/components/ExampleCard.tsx b/playground/src/components/ExampleCard.tsx
@@ -0,0 +1,23 @@
+import { ReactElement } from 'react';
+import type { MarqueeProps } from '../../../src';
+
+interface ExampleCardProps {
+  description: string;
+  marqueeComponent: ReactElement<MarqueeProps>;
+}
+
+export default function ExampleCard({ description, marqueeComponent }: ExampleCardProps) {
+  return (
+    <div className="card">
+      <div className="card__description">
+        <div>{description}</div>
+        <pre className="card__props">
+          {JSON.stringify({ props: marqueeComponent.props }, null, 2)}
+        </pre>
+      </div>
+      <div className="card__marquee-outer">
+        <div className="card__marquee-inner">{marqueeComponent}</div>
+      </div>
+    </div>
+  );
+}
diff --git a/playground/src/components/Header.jsx b/playground/src/components/Header.jsx
diff --git a/playground/src/components/Header.tsx b/playground/src/components/Header.tsx
@@ -0,0 +1,15 @@
+export default function Header() {
+  return (
+    <header className="header">
+      <img className="header__logo" src="static/logo.png" alt="react-double-marquee logo" />
+      <a
+        className="header__npm"
+        href="https://www.npmjs.com/package/react-double-marquee"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        npm install react-double-marquee
+      </a>
+    </header>
+  );
+}
diff --git a/...round/src/examples/DefaultLeftMarquee.jsx → ...round/src/examples/DefaultLeftMarquee.tsx b/...round/src/examples/DefaultLeftMarquee.jsx → ...round/src/examples/DefaultLeftMarquee.tsx
@@ -1,8 +1,7 @@
-import React from 'react';
-import Marquee from '../../../docs/static/lib';
+import Marquee from '../../../src';
 import ExampleCard from '../components/ExampleCard';
 
-function DefaultLeftMarquee() {
+export default function DefaultLeftMarquee() {
   return (
     <ExampleCard
       description="Default - Left"
@@ -14,5 +13,3 @@ function DefaultLeftMarquee() {
     />
   );
 }
-
-export default DefaultLeftMarquee;
diff --git a/...ound/src/examples/DefaultRightMarquee.jsx → ...ound/src/examples/DefaultRightMarquee.tsx b/...ound/src/examples/DefaultRightMarquee.jsx → ...ound/src/examples/DefaultRightMarquee.tsx
@@ -1,8 +1,7 @@
-import React from 'react';
-import Marquee from '../../../docs/static/lib';
+import Marquee from '../../../src';
 import ExampleCard from '../components/ExampleCard';
 
-function DefaultRightMarquee() {
+export default function DefaultRightMarquee() {
   return (
     <ExampleCard
       description="Default - Right"
@@ -14,5 +13,3 @@ function DefaultRightMarquee() {
     />
   );
 }
-
-export default DefaultRightMarquee;
diff --git a/playground/src/examples/LoopMarquee.tsx b/playground/src/examples/LoopMarquee.tsx
@@ -0,0 +1,15 @@
+import Marquee from '../../../src';
+import ExampleCard from '../components/ExampleCard';
+
+export default function LoopMarquee() {
+  return (
+    <ExampleCard
+      description="Stop after a fixed number of loops"
+      marqueeComponent={(
+        <Marquee loop={3} delay={0}>
+          This stops after 3 loops
+        </Marquee>
+      )}
+    />
+  );
+}
diff --git a/playground/src/examples/PauseOnHoverMarquee.tsx b/playground/src/examples/PauseOnHoverMarquee.tsx
@@ -0,0 +1,15 @@
+import Marquee from '../../../src';
+import ExampleCard from '../components/ExampleCard';
+
+export default function PauseOnHoverMarquee() {
+  return (
+    <ExampleCard
+      description="Pause on hover"
+      marqueeComponent={(
+        <Marquee pauseOnHover delay={0}>
+          Hover me to pause the scroll
+        </Marquee>
+      )}
+    />
+  );
+}
diff --git a/playground/src/examples/ShortMarquee.jsx → playground/src/examples/ShortMarquee.tsx b/playground/src/examples/ShortMarquee.jsx → playground/src/examples/ShortMarquee.tsx
@@ -1,8 +1,7 @@
-import React from 'react';
-import Marquee from '../../../docs/static/lib';
+import Marquee from '../../../src';
 import ExampleCard from '../components/ExampleCard';
 
-function ShortMarquee() {
+export default function ShortMarquee() {
   return (
     <ExampleCard
       description="Scroll only on overflow"
@@ -14,5 +13,3 @@ function ShortMarquee() {
     />
   );
 }
-
-export default ShortMarquee;
diff --git a/...nd/src/examples/ShortScrollingMarquee.jsx → ...nd/src/examples/ShortScrollingMarquee.tsx b/...nd/src/examples/ShortScrollingMarquee.jsx → ...nd/src/examples/ShortScrollingMarquee.tsx
@@ -1,8 +1,7 @@
-import React from 'react';
-import Marquee from '../../../docs/static/lib';
+import Marquee from '../../../src';
 import ExampleCard from '../components/ExampleCard';
 
-function ShortScrollingMarquee() {
+export default function ShortScrollingMarquee() {
   return (
     <ExampleCard
       description="Default - Short text scrolls"
@@ -14,5 +13,3 @@ function ShortScrollingMarquee() {
     />
   );
 }
-
-export default ShortScrollingMarquee;