diff --git a/apps/web/app/page.tsx b/apps/web/app/page.tsx
index eed0347..4dd25e4 100644
--- a/apps/web/app/page.tsx
+++ b/apps/web/app/page.tsx
@@ -13,8 +13,7 @@ const OrbitItemFreezeOnMouseOver = ({ children, radius }: Props.ForceChildren &
       config={{
         direction: 'clockwise',
         startAngle: 120,
-        anglePerStep: isFreeze ? 0 : 0.2,
-        timeBetweenSteps: 0.1,
+        speed: isFreeze ? 0 : 0.01
       }}
       style={{
         transition: 'transform 0.1s ease-in-out',
@@ -46,7 +45,7 @@ export default function Page(): JSX.Element {
             config={{
               direction: 'clockwise',
               startAngle: 120,
-              anglePerStep: 0.2,
+              speed: 0.01,
             }}
             className={SHARED_CLASSNAME}
           >
@@ -57,7 +56,7 @@ export default function Page(): JSX.Element {
             config={{
               direction: 'clockwise',
               startAngle: 240,
-              anglePerStep: 0.2,
+              speed: 0.01,
             }}
             className={SHARED_CLASSNAME}
           >
@@ -68,7 +67,7 @@ export default function Page(): JSX.Element {
             config={{
               direction: 'clockwise',
               startAngle: 0,
-              anglePerStep: 0.2,
+              speed: 0.01,
             }}
             className={SHARED_CLASSNAME}
           >
@@ -84,7 +83,7 @@ export default function Page(): JSX.Element {
             config={{
               direction: 'clockwise',
               startAngle: 240,
-              anglePerStep: 0.3,
+              speed: 0.02,
             }}
             className={SHARED_CLASSNAME}
           >
diff --git a/packages/react-orbit/src/components/orbit.item.tsx b/packages/react-orbit/src/components/orbit.item.tsx
index dd4f806..55cc6b7 100644
--- a/packages/react-orbit/src/components/orbit.item.tsx
+++ b/packages/react-orbit/src/components/orbit.item.tsx
@@ -17,8 +17,7 @@ type OrbitItemDirection = 'clockwise' | 'counter-clockwise';
 type OrbitItemProps = {
   radius?: number;
   config?: {
-    anglePerStep?: number;
-    timeBetweenSteps?: number;
+    speed?: number
     startAngle?: number;
     direction?: OrbitItemDirection;
     angle?: number;
@@ -51,7 +50,7 @@ export const OrbitItem = forwardRef<HTMLDivElement, OrbitItemProps & Props.HasCh
       className,
       children,
       radius = 0,
-      config: { anglePerStep = 0.1, timeBetweenSteps = 0.1, startAngle = 0, direction = 'clockwise', angle },
+      config: { speed = 0.01, startAngle = 0, direction = 'clockwise', angle },
       style,
       ...rest
     },
@@ -63,12 +62,26 @@ export const OrbitItem = forwardRef<HTMLDivElement, OrbitItemProps & Props.HasCh
     const actualRef = (ref ?? internalRef) as React.MutableRefObject<HTMLDivElement>;
 
     useEffect(() => {
-      const interval = setInterval(() => {
-        setAngle((prevAngle) => (direction === 'clockwise' ? prevAngle + (anglePerStep % 360) : prevAngle - (anglePerStep % 360)));
-      }, timeBetweenSteps);
-
-      return () => clearInterval(interval);
-    }, [anglePerStep, timeBetweenSteps]);
+      let animationFrameId: number
+      let lastTime = performance.now()
+  
+      const updateAngle = (time: number) => {
+          const deltaTime = time - lastTime
+  
+          setAngle((prevAngle) => 
+              direction === 'clockwise' 
+                  ? (prevAngle + speed*deltaTime) % 360 
+                  : (prevAngle - speed*deltaTime) % 360
+          )
+          lastTime = time
+  
+          animationFrameId = requestAnimationFrame(updateAngle)
+      }
+  
+      animationFrameId = requestAnimationFrame(updateAngle)
+  
+      return () => cancelAnimationFrame(animationFrameId)
+    }, [speed, direction])
 
     const { x, y } = calculateCoordinatesOnCircle(radius, effectiveAngle, actualRef.current?.getBoundingClientRect() ?? new DOMRect());