diff --git a/package-lock.json b/package-lock.json
index 506164bb..50c60a74 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@wethegit/react-marquee",
-  "version": "2.1.3",
+  "version": "2.2.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@wethegit/react-marquee",
-      "version": "2.1.3",
+      "version": "2.2.0",
       "license": "MIT",
       "dependencies": {
         "@changesets/changelog-github": "^0.5.0",
diff --git a/package.json b/package.json
index 01a969fc..e4c326aa 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wethegit/react-marquee",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "description": "",
   "files": [
     "dist"
diff --git a/src/lib/marquee.scss b/src/lib/marquee.scss
index fa6a5b0a..d6c10334 100644
--- a/src/lib/marquee.scss
+++ b/src/lib/marquee.scss
@@ -4,11 +4,11 @@
 
   @keyframes scroll {
     0% {
-      transform: translateX(0%);
+      transform: translateX(calc(var(--padding) * -1px));
     }
 
     100% {
-      transform: translateX(calc(var(--marquee-width) * -1px));
+      transform: translateX(calc((var(--padding) + var(--marquee-width)) * -1px));
     }
   }
 }
diff --git a/src/lib/marquee.tsx b/src/lib/marquee.tsx
index 659fccda..d801d840 100644
--- a/src/lib/marquee.tsx
+++ b/src/lib/marquee.tsx
@@ -31,6 +31,12 @@ export interface MarqueeProps extends React.ComponentPropsWithoutRef<"div"> {
    * Whether to animate from left to right
    */
   reverse?: boolean
+  /**
+   * Extra spacing in pixels that the slide should travel beyond its width.
+   * This ensures the slide is completely offscreen before the loop restarts.
+   * Default value is 10.
+   */
+  padding?: number
 }
 
 type Timer = ReturnType<typeof setTimeout>
@@ -40,11 +46,13 @@ export function Marquee({
   reducedMotionSpeed = 20,
   prefersReducedMotion = false,
   playing = true,
+  padding = 10,
   reverse,
   children,
   className,
   ...props
 }: MarqueeProps) {
+  // const [containerWidth, setContainerWidth] = useState(0)
   const [marqueeWidth, setMarqueeWidth] = useState(0)
   const [duration, setDuration] = useState(0)
   const [neededAmount, setNeededAmount] = useState(1)
@@ -77,12 +85,9 @@ export function Marquee({
     setMarqueeWidth(marqueeWidth)
 
     // Set duration speed, which is used below in the --duration inline style.
-    if (marqueeWidth < containerWidth) {
-      setDuration(containerWidth / speedAmount)
-    } else {
-      setDuration(marqueeWidth / speedAmount)
-    }
-  }, [prefersReducedMotion, reducedMotionSpeed, speed])
+    // Include padding in the total distance
+    setDuration((marqueeWidth + padding) / speedAmount)
+  }, [prefersReducedMotion, reducedMotionSpeed, speed, padding])
 
   useEffect(() => {
     updateState()
@@ -113,9 +118,10 @@ export function Marquee({
       ])}
       style={
         {
-          "--marquee-width": marqueeWidth,
+          "--marquee-width": `${Math.floor(marqueeWidth)}`,
           "--duration": duration + `s`,
           "--animation-state": playing ? "running" : "paused",
+          "--padding": padding,
         } as React.CSSProperties
       }
     >