From 2e0b69fc35194d95366fe53979e64a0aa60ddfe8 Mon Sep 17 00:00:00 2001
From: Colin Tinney <colintinney@scott.local>
Date: Tue, 28 Apr 2026 03:55:22 -0700
Subject: [PATCH] feat: modernize playground, fix wide-screen scroll, add dev
 server

Playground (Phase 5):
- Rewrite from JSX/react-jss/react-json-pretty/prop-types to TypeScript
- Add example cards for pauseOnHover and loop props
- Inline styles into docs/index.html (no rollup CSS plugin needed)
- Switch entry to React 18 createRoot
- Import Marquee from src/ instead of pre-built lib output
- Add npm install link in header (closes #9)
- Add playground/tsconfig.json for type-checking

Component (closes #19):
- Render N copies of children to fill the container so wide-screen
  short content still scrolls in 'always' mode
- Replace fixed 2-tile math with tileCount-driven measurement
- Use ResizeObserver to re-measure on container resize
- Replace disableScroll state with tileCount === 1 (preserves #44 fix)

Dev workflow:
- Add rollup-plugin-serve so npm run dev serves docs/ on port 8001
---
 config/rollup.config.dev.mjs                  |   7 +-
 config/rollup.config.docs.mjs                 |   2 +-
 docs/index.html                               |  71 +++++++++
 package.json                                  |   1 +
 playground/src/components/ExampleCard.jsx     |  80 ----------
 playground/src/components/ExampleCard.tsx     |  23 +++
 playground/src/components/Header.jsx          |  33 -----
 playground/src/components/Header.tsx          |  15 ++
 ...LeftMarquee.jsx => DefaultLeftMarquee.tsx} |   7 +-
 ...ghtMarquee.jsx => DefaultRightMarquee.tsx} |   7 +-
 playground/src/examples/LoopMarquee.tsx       |  15 ++
 .../src/examples/PauseOnHoverMarquee.tsx      |  15 ++
 .../{ShortMarquee.jsx => ShortMarquee.tsx}    |   7 +-
 ...gMarquee.jsx => ShortScrollingMarquee.tsx} |   7 +-
 playground/src/index.jsx                      |  65 --------
 playground/src/index.tsx                      |  29 ++++
 playground/src/styles.css                     |   4 -
 playground/tsconfig.json                      |   9 ++
 src/__tests__/index.test.tsx                  |   6 +
 src/index.tsx                                 | 139 +++++++++---------
 20 files changed, 266 insertions(+), 276 deletions(-)
 delete mode 100644 playground/src/components/ExampleCard.jsx
 create mode 100644 playground/src/components/ExampleCard.tsx
 delete mode 100644 playground/src/components/Header.jsx
 create mode 100644 playground/src/components/Header.tsx
 rename playground/src/examples/{DefaultLeftMarquee.jsx => DefaultLeftMarquee.tsx} (67%)
 rename playground/src/examples/{DefaultRightMarquee.jsx => DefaultRightMarquee.tsx} (65%)
 create mode 100644 playground/src/examples/LoopMarquee.tsx
 create mode 100644 playground/src/examples/PauseOnHoverMarquee.tsx
 rename playground/src/examples/{ShortMarquee.jsx => ShortMarquee.tsx} (67%)
 rename playground/src/examples/{ShortScrollingMarquee.jsx => ShortScrollingMarquee.tsx} (63%)
 delete mode 100644 playground/src/index.jsx
 create mode 100644 playground/src/index.tsx
 delete mode 100644 playground/src/styles.css
 create mode 100644 playground/tsconfig.json

diff --git a/config/rollup.config.dev.mjs b/config/rollup.config.dev.mjs
index 15b8514..c9857f5 100644
--- 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
index 61c3045..2cb8722 100644
--- 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
index e5d8ebb..3deb24a 100644
--- 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
index b5ec999..7a76470 100644
--- 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
deleted file mode 100644
index 0aa37c4..0000000
--- a/playground/src/components/ExampleCard.jsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import JSONPretty from 'react-json-pretty';
-import JSONPrettyAcai from 'react-json-pretty/dist/acai';
-import injectSheet from 'react-jss';
-
-const styles = {
-  root: {
-    display: 'flex',
-    flexWrap: 'wrap',
-    alignItems: 'center',
-  },
-  description: {
-    width: '250px',
-    padding: '10px 15px',
-    color: '#DDDDDD',
-    backgroundColor: '#4A5A6A',
-    boxShadow: '3px 3px 6px rgba(45, 45, 90, 0.35)',
-  },
-  marqueeOuter: {
-    width: '250px',
-    margin: '15px',
-    flexGrow: 1,
-    backgroundColor: '#CCCCCC',
-    borderRadius: '2px',
-    boxShadow: '3px 3px 6px rgba(45, 45, 90, 0.35)',
-  },
-  marqueeInner: {
-    width: '200px',
-    margin: '20px',
-    whiteSpace: 'nowrap',
-  },
-};
-
-function ExampleCard({
-  classes,
-  description,
-  marqueeComponent,
-}) {
-  return (
-    <div className={classes.root}>
-      <div className={classes.description}>
-        <div>
-          {description}
-        </div>
-        <div className={classes.props}>
-          <JSONPretty
-            data={{
-              // Wrap it so that it's obvious to readers that
-              // they are props.
-              props: marqueeComponent.props,
-            }}
-            theme={{
-              ...JSONPrettyAcai,
-              main: `padding: 8px; ${JSONPrettyAcai.main}`,
-              // Ensures that words are broken and wrapped as necessary
-              // to fit the parent element.
-              string: 'word-break: break-all; white-space: normal',
-            }}
-          />
-        </div>
-      </div>
-      <div className={classes.marqueeOuter}>
-        <div className={classes.marqueeInner}>
-          {marqueeComponent}
-        </div>
-      </div>
-    </div>
-  );
-}
-
-ExampleCard.propTypes = {
-  classes: PropTypes.shape({
-    root: PropTypes.string.isRequired,
-  }).isRequired,
-  description: PropTypes.string.isRequired,
-  marqueeComponent: PropTypes.node.isRequired,
-};
-
-export default injectSheet(styles)(ExampleCard);
diff --git a/playground/src/components/ExampleCard.tsx b/playground/src/components/ExampleCard.tsx
new file mode 100644
index 0000000..5d57884
--- /dev/null
+++ 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
deleted file mode 100644
index 4758af9..0000000
--- a/playground/src/components/Header.jsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import injectSheet from 'react-jss';
-import Logo from '../../../docs/static/logo.png';
-
-const styles = {
-  header: {
-    margin: '20px',
-  },
-  logo: {
-    width: '400px',
-    maxWidth: '100%',
-  },
-};
-
-function Header({
-  classes,
-}) {
-  return (
-    <header className={classes.header}>
-      <img className={classes.logo} src={Logo.src} alt="logo" />
-    </header>
-  );
-}
-
-Header.propTypes = {
-  classes: PropTypes.shape({
-    header: PropTypes.string.isRequired,
-    logo: PropTypes.string.isRequired,
-  }).isRequired,
-};
-
-export default injectSheet(styles)(Header);
diff --git a/playground/src/components/Header.tsx b/playground/src/components/Header.tsx
new file mode 100644
index 0000000..627e68a
--- /dev/null
+++ 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/playground/src/examples/DefaultLeftMarquee.jsx b/playground/src/examples/DefaultLeftMarquee.tsx
similarity index 67%
rename from playground/src/examples/DefaultLeftMarquee.jsx
rename to playground/src/examples/DefaultLeftMarquee.tsx
index e5a22a6..ea28897 100644
--- a/playground/src/examples/DefaultLeftMarquee.jsx
+++ b/playground/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/playground/src/examples/DefaultRightMarquee.jsx b/playground/src/examples/DefaultRightMarquee.tsx
similarity index 65%
rename from playground/src/examples/DefaultRightMarquee.jsx
rename to playground/src/examples/DefaultRightMarquee.tsx
index 59fa6d4..f00d6a5 100644
--- a/playground/src/examples/DefaultRightMarquee.jsx
+++ b/playground/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
new file mode 100644
index 0000000..a89cd28
--- /dev/null
+++ 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
new file mode 100644
index 0000000..f25ba17
--- /dev/null
+++ 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 b/playground/src/examples/ShortMarquee.tsx
similarity index 67%
rename from playground/src/examples/ShortMarquee.jsx
rename to playground/src/examples/ShortMarquee.tsx
index 8ae9ac7..ea451c7 100644
--- a/playground/src/examples/ShortMarquee.jsx
+++ b/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/playground/src/examples/ShortScrollingMarquee.jsx b/playground/src/examples/ShortScrollingMarquee.tsx
similarity index 63%
rename from playground/src/examples/ShortScrollingMarquee.jsx
rename to playground/src/examples/ShortScrollingMarquee.tsx
index f0d9c25..4a57e7a 100644
--- a/playground/src/examples/ShortScrollingMarquee.jsx
+++ b/playground/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;
diff --git a/playground/src/index.jsx b/playground/src/index.jsx
deleted file mode 100644
index 6638204..0000000
--- a/playground/src/index.jsx
+++ /dev/null
@@ -1,65 +0,0 @@
-///////////////////////////
-// External dependencies //
-///////////////////////////
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import ReactDOM from 'react-dom';
-import injectSheet from 'react-jss';
-
-///////////////////////////
-// Internal dependencies //
-///////////////////////////
-
-import Header from './components/Header';
-import DefaultRightMarquee from './examples/DefaultRightMarquee';
-import DefaultLeftMarquee from './examples/DefaultLeftMarquee';
-import ShortMarquee from './examples/ShortMarquee';
-import ShortScrollingMarquee from './examples/ShortScrollingMarquee';
-
-import './styles.css';
-
-const styles = {
-  root: {
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    height: '100%',
-    fontFamily: 'roboto, sans-serif',
-    boxSizing: 'border-box',
-    backgroundColor: '#EFEFEF',
-  },
-  examples: {
-    padding: '20px 15px',
-    borderTop: '1px solid rgba(221, 221, 221)',
-  },
-};
-
-function Index({
-  classes,
-}) {
-  return (
-    <div className={classes.root}>
-      <Header />
-      <div className={classes.examples}>
-        <DefaultRightMarquee />
-        <DefaultLeftMarquee />
-        <ShortScrollingMarquee />
-        <ShortMarquee />
-      </div>
-    </div>
-  );
-}
-
-Index.propTypes = {
-  classes: PropTypes.shape({
-    root: PropTypes.string.isRequired,
-  }).isRequired,
-};
-
-const ComponentWithStyles = injectSheet(styles)(Index);
-
-ReactDOM.render(
-  <ComponentWithStyles />,
-  document.getElementById('root'),
-);
diff --git a/playground/src/index.tsx b/playground/src/index.tsx
new file mode 100644
index 0000000..9dc7a1a
--- /dev/null
+++ b/playground/src/index.tsx
@@ -0,0 +1,29 @@
+import { createRoot } from 'react-dom/client';
+import Header from './components/Header';
+import DefaultRightMarquee from './examples/DefaultRightMarquee';
+import DefaultLeftMarquee from './examples/DefaultLeftMarquee';
+import ShortMarquee from './examples/ShortMarquee';
+import ShortScrollingMarquee from './examples/ShortScrollingMarquee';
+import PauseOnHoverMarquee from './examples/PauseOnHoverMarquee';
+import LoopMarquee from './examples/LoopMarquee';
+
+function Index() {
+  return (
+    <div className="page">
+      <Header />
+      <div className="examples">
+        <DefaultRightMarquee />
+        <DefaultLeftMarquee />
+        <ShortScrollingMarquee />
+        <ShortMarquee />
+        <PauseOnHoverMarquee />
+        <LoopMarquee />
+      </div>
+    </div>
+  );
+}
+
+const container = document.getElementById('root');
+if (container) {
+  createRoot(container).render(<Index />);
+}
diff --git a/playground/src/styles.css b/playground/src/styles.css
deleted file mode 100644
index 750f9f2..0000000
--- a/playground/src/styles.css
+++ /dev/null
@@ -1,4 +0,0 @@
-html, body, #root {
-  margin: 0;
-  height: 100%;
-}
diff --git a/playground/tsconfig.json b/playground/tsconfig.json
new file mode 100644
index 0000000..b130498
--- /dev/null
+++ b/playground/tsconfig.json
@@ -0,0 +1,9 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "noEmit": true,
+    "emitDeclarationOnly": false
+  },
+  "include": ["src"],
+  "exclude": ["node_modules"]
+}
diff --git a/src/__tests__/index.test.tsx b/src/__tests__/index.test.tsx
index 8b83a97..83b91b5 100644
--- a/src/__tests__/index.test.tsx
+++ b/src/__tests__/index.test.tsx
@@ -64,4 +64,10 @@ describe('Marquee', () => {
     rerender(<Marquee>Second</Marquee>);
     expect(screen.getByText('Second')).toBeInTheDocument();
   });
+
+  it('renders multiple copies of children to enable scrolling', () => {
+    render(<Marquee>Repeat me</Marquee>);
+    // Default behavior renders at least two tiles so the marquee can loop.
+    expect(screen.getAllByText('Repeat me').length).toBeGreaterThanOrEqual(2);
+  });
 });
diff --git a/src/index.tsx b/src/index.tsx
index ffe6686..6bb5d5e 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,4 +1,4 @@
-import { useRef, useState, useEffect, useCallback } from 'react';
+import { useRef, useState, useEffect, useLayoutEffect, useCallback } from 'react';
 
 export interface MarqueeProps {
   /** Animation speed, in pixels per millisecond. Defaults to 0.04. */
@@ -19,11 +19,6 @@ export interface MarqueeProps {
   loop?: number;
 }
 
-const SCROLL_WHEN_THRESHOLD: Record<'always' | 'overflow', number> = {
-  always: 0,
-  overflow: 100,
-};
-
 function translateXCSS(numPx: number): string {
   return `translateX(${numPx}px)`;
 }
@@ -46,62 +41,40 @@ export default function Marquee({
   const loopCountRef = useRef<number>(0);
   const pausedRef = useRef<boolean>(false);
 
-  // Store current props in a ref so callbacks stay stable
   const propsRef = useRef({ speed, direction, delay, childMargin, scrollWhen, loop, pauseOnHover });
   propsRef.current = { speed, direction, delay, childMargin, scrollWhen, loop, pauseOnHover };
 
-  const [disableScroll, setDisableScroll] = useState<boolean | undefined>(undefined);
+  // tileCount is the number of copies of `children` actually rendered.
+  // For 'always' mode it grows to fill the container; for 'overflow' mode
+  // it is 1 (no overflow) or 2 (overflow).
+  const [tileCount, setTileCount] = useState(2);
+  const tileCountRef = useRef(2);
+  tileCountRef.current = tileCount;
 
   const hasRefs = useCallback((): boolean => {
     return !!(containerRef.current && innerRef.current);
   }, []);
 
-  const getMarqueeFillPercent = useCallback((): number => {
-    if (hasRefs() && containerRef.current!.clientWidth > 0) {
-      const singleChildSize = innerRef.current!.scrollWidth / 2;
-      return (singleChildSize * 100) / containerRef.current!.clientWidth;
-    }
-    return 0;
-  }, [hasRefs]);
+  const getTileWidth = useCallback((): number => {
+    if (!innerRef.current || tileCountRef.current === 0) return 0;
+    return innerRef.current.scrollWidth / tileCountRef.current;
+  }, []);
 
   const shouldAnimate = useCallback((): boolean => {
-    const { scrollWhen: sw } = propsRef.current;
-    return (
-      hasRefs() &&
-      innerRef.current!.scrollWidth > containerRef.current!.clientWidth &&
-      getMarqueeFillPercent() > SCROLL_WHEN_THRESHOLD[sw]
-    );
-  }, [hasRefs, getMarqueeFillPercent]);
-
-  const getWidthSafely = useCallback((): number => {
-    return innerRef.current ? innerRef.current.clientWidth : 0;
-  }, []);
+    if (!hasRefs()) return false;
+    return innerRef.current!.scrollWidth > containerRef.current!.clientWidth;
+  }, [hasRefs]);
 
   const getInitialPosition = useCallback((): number => {
     const { direction: dir, childMargin: cm } = propsRef.current;
-    return dir === 'right'
-      ? -(getWidthSafely() / 2) - cm
-      : -cm;
-  }, [getWidthSafely]);
-
-  const updateScrollState = useCallback(() => {
-    if (hasRefs()) {
-      const shouldDisable = !shouldAnimate();
-      setDisableScroll((prev) => {
-        if (prev !== shouldDisable) {
-          if (shouldDisable && innerRef.current) {
-            innerRef.current.style.transform = translateXCSS(0);
-          }
-          return shouldDisable;
-        }
-        return prev;
-      });
-    }
-  }, [hasRefs, shouldAnimate]);
+    const tileWidth = getTileWidth();
+    return dir === 'right' ? -tileWidth - cm : -cm;
+  }, [getTileWidth]);
 
   const updateInnerPosition = useCallback(
     (timeDelta: number) => {
       const { direction: dir, speed: spd, childMargin: cm } = propsRef.current;
+      const tileWidth = getTileWidth();
 
       const nextPosX = (() => {
         if (dir === 'right') {
@@ -114,7 +87,7 @@ export default function Marquee({
         }
         if (dir === 'left') {
           const nextPos = posRef.current - timeDelta * spd;
-          if (nextPos < -(getWidthSafely() / 2) - cm) {
+          if (nextPos < -tileWidth - cm) {
             loopCountRef.current += 1;
             return getInitialPosition();
           }
@@ -129,9 +102,48 @@ export default function Marquee({
         innerRef.current.style.transform = translateXCSS(posRef.current);
       }
     },
-    [getWidthSafely, getInitialPosition, shouldAnimate],
+    [getTileWidth, getInitialPosition, shouldAnimate],
   );
 
+  // Resets transform when content stops needing to scroll.
+  const syncScrollState = useCallback(() => {
+    if (!hasRefs()) return;
+    if (!shouldAnimate() && innerRef.current) {
+      innerRef.current.style.transform = translateXCSS(0);
+    }
+  }, [hasRefs, shouldAnimate]);
+
+  // Measure container/content and choose how many tiles to render.
+  // Re-runs when content changes or the container is resized.
+  useLayoutEffect(() => {
+    if (!hasRefs()) return;
+
+    const adjust = () => {
+      if (!hasRefs()) return;
+      const { scrollWhen: sw } = propsRef.current;
+      const containerWidth = containerRef.current!.clientWidth;
+      const tileWidth = getTileWidth();
+      if (tileWidth <= 0 || containerWidth <= 0) return;
+
+      const needed = sw === 'overflow'
+        ? (tileWidth > containerWidth ? 2 : 1)
+        : Math.max(2, Math.ceil(containerWidth / tileWidth) + 1);
+
+      if (needed !== tileCountRef.current) {
+        setTileCount(needed);
+      }
+      syncScrollState();
+    };
+
+    adjust();
+
+    if (typeof ResizeObserver === 'undefined') return;
+    const obs = new ResizeObserver(adjust);
+    obs.observe(containerRef.current!);
+    obs.observe(innerRef.current!);
+    return () => obs.disconnect();
+  }, [children, scrollWhen, hasRefs, getTileWidth, syncScrollState]);
+
   // Stable tick function — reads props from ref, never recreated
   const tickRef = useRef<FrameRequestCallback | null>(null);
   tickRef.current = (time: number) => {
@@ -148,16 +160,14 @@ export default function Marquee({
 
     lastTickTimeRef.current = time;
     requestIdRef.current = window.requestAnimationFrame(tickRef.current!);
-    updateScrollState();
   };
 
-  // Start animation — only restarts on children or delay change
   useEffect(() => {
     posRef.current = getInitialPosition();
     if (shouldAnimate() && innerRef.current) {
       innerRef.current.style.transform = translateXCSS(posRef.current);
     }
-    updateScrollState();
+    syncScrollState();
     loopCountRef.current = 0;
     lastTickTimeRef.current = null;
 
@@ -171,9 +181,6 @@ export default function Marquee({
         window.cancelAnimationFrame(requestIdRef.current);
       }
     };
-    // Only restart the animation loop when children change (new content)
-    // or delay changes. Other prop changes (speed, direction, etc.) are
-    // picked up on the next tick via propsRef.
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [children, delay]);
 
@@ -190,7 +197,9 @@ export default function Marquee({
     }
   }, []);
 
-  const showDuplicate = disableScroll !== true;
+  // When only one tile is rendered (no overflow in 'overflow' mode), drop
+  // margins so the single copy can be centered by parent layout.
+  const tileMargin = tileCount === 1 ? '0' : `0 ${childMargin}px`;
 
   return (
     <div
@@ -199,26 +208,12 @@ export default function Marquee({
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
     >
-      <div
-        ref={innerRef}
-        style={{ display: 'inline-block' }}
-      >
-        <span
-          style={{
-            margin: disableScroll ? '0' : `0 ${childMargin}px`,
-          }}
-        >
-          {children}
-        </span>
-        {showDuplicate && (
-          <span
-            style={{
-              margin: disableScroll ? '0' : `0 ${childMargin}px`,
-            }}
-          >
+      <div ref={innerRef} style={{ display: 'inline-block' }}>
+        {Array.from({ length: tileCount }).map((_, i) => (
+          <span key={i} style={{ margin: tileMargin }}>
             {children}
           </span>
-        )}
+        ))}
       </div>
     </div>
   );