diff --git a/packages/app/src/App.vue b/packages/app/src/App.vue
index 0ded0ae..983d8be 100644
--- a/packages/app/src/App.vue
+++ b/packages/app/src/App.vue
@@ -11,9 +11,9 @@ import Widgets from "./components/Widgets.vue";
     <TopMenubar />
     <div class="flex-grow flex flex-col overflow-hidden">
       <Preview :width="1600" :height="900" />
-      <Tools class="flex-shrink-0" />
-      <div class="flex-grow flex flex-row overflow-hidden">
-        <div class="w-1/4 overflow-y-auto">
+      <Tools class="flex-shrink-0 border-t" />
+      <div class="h-[300px] flex flex-row overflow-hidden border-t">
+        <div class="w-1/4 border-r overflow-y-auto">
           <Widgets
             :widgets="[{ type: 'Arc' }, { type: 'Arc' }, { type: 'Arc' }]"
           />
diff --git a/packages/app/src/components/Preview.vue b/packages/app/src/components/Preview.vue
index 511acec..7b0c4f3 100644
--- a/packages/app/src/components/Preview.vue
+++ b/packages/app/src/components/Preview.vue
@@ -1,28 +1,53 @@
 <script setup lang="ts">
 import { Motion } from "@vue-motion/lib";
 /** @ts-expect-error virtual-import */
-import Animation from "virtual:user-main";
-import { ref, watch } from "vue";
-// import TestAnimation from './__test__/TestAnimation.vue'
+// import Animation from "virtual:user-main";
+import { ref, watch, onMounted, onUnmounted } from "vue";
+import TestAnimation from "./__test__/TestAnimation.vue";
 
 const { width, height } = defineProps<{
   width: number;
   height: number;
 }>();
 
-const zoom = ref(((window.innerHeight - 40) * 0.6) / height);
+const zoom = ref(1);
+const container = ref<HTMLDivElement | null>(null);
 
 function updateZoom() {
-  zoom.value =
-    ((window.innerWidth - 40) * 0.6) / width <
-    ((window.innerHeight - 40) * 0.6) / height
-      ? ((window.innerHeight - 40) * 0.6) / height
-      : ((window.innerWidth - 40) * 0.6) / width;
+  if (!container.value) return;
+
+  const rect = container.value.getBoundingClientRect();
+  const containerWidth = rect.width;
+  const containerHeight = rect.height;
+
+  // Calculate aspect ratios
+  const videoRatio = width / height;
+  const containerRatio = containerWidth / containerHeight;
+
+  // Determine scaling based on aspect ratio comparison
+  if (containerRatio > videoRatio) {
+    // Container is wider than video - use height as constraint
+    zoom.value = Math.min(containerHeight / height, 1);
+  } else {
+    // Container is taller than video - use width as constraint
+    zoom.value = Math.min(containerWidth / width, 1);
+  }
 }
 
-window.addEventListener("resize", updateZoom);
+// Update zoom when container is resized
+const resizeObserver = new ResizeObserver(() => {
+  updateZoom();
+});
+
+onMounted(() => {
+  if (container.value) {
+    resizeObserver.observe(container.value);
+  }
+});
 
-watch(() => window.innerHeight, updateZoom);
+onUnmounted(() => {
+  resizeObserver.disconnect();
+});
 
 let dev: boolean;
 if (__D__) dev = true;
@@ -30,19 +55,29 @@ else dev = false;
 </script>
 
 <template>
-  <div class="w-full h-[60%] flex overflow-hidden">
-    <div class="w-full h-full flex items-center justify-center">
-      <Motion
-        id="motion"
-        :width="width"
-        :height="height"
-        :scale="dev ? zoom : (null as any)"
-        :min-width="dev ? width * zoom : (null as any)"
-        :min-height="dev ? height * zoom : (null as any)"
+  <div class="flex-grow flex overflow-hidden">
+    <div
+      ref="container"
+      class="w-full h-full flex items-center justify-center p-4"
+    >
+      <div
+        :style="{
+          width: `${width}px`,
+          height: `${height}px`,
+          transform: `scale(${zoom})`,
+          transformOrigin: 'center',
+        }"
+        class="relative"
       >
-        <Animation />
-        <!-- <TestAnimation /> -->
-      </Motion>
+        <Motion
+          id="motion"
+          :width="width"
+          :height="height"
+          class="max-w-full max-h-full"
+        >
+          <TestAnimation />
+        </Motion>
+      </div>
     </div>
   </div>
 </template>
diff --git a/packages/app/src/components/Timeline.vue b/packages/app/src/components/Timeline.vue
index aaf616d..19f12ff 100644
--- a/packages/app/src/components/Timeline.vue
+++ b/packages/app/src/components/Timeline.vue
@@ -1,23 +1,118 @@
 <script setup lang="ts">
+import { ref, onMounted, onUnmounted } from "vue";
+import { usePlayer } from "@vue-motion/core";
+
+const player = usePlayer();
+const isDragging = ref(false);
+const currentTime = ref(0);
+
 const { widget } = defineProps<{
   widget: {
     duration: number;
   };
 }>();
+
+function handleMouseDown(e: MouseEvent) {
+  isDragging.value = true;
+  updateTimeFromMouseEvent(e);
+
+  // Prevent text selection while dragging
+  e.preventDefault();
+}
+
+function handleMouseMove(e: MouseEvent) {
+  if (!isDragging.value) return;
+
+  // Find the SVG element and its container
+  const svg = document.querySelector("svg");
+  const container = document.querySelector(".overflow-auto");
+  if (!svg || !container) return;
+
+  const containerRect = container.getBoundingClientRect();
+  const scrollLeft = container.scrollLeft;
+
+  // Calculate x position considering scroll and container offset
+  // Allow negative values for smooth dragging experience
+  const rawX = e.clientX - containerRect.left - 40 + scrollLeft;
+  const x = Math.max(0, Math.min(widget.duration * 100, rawX)); // Clamp to timeline width
+  const totalWidth = widget.duration * 100; // 100px per second
+
+  // Auto scroll when dragging near edges or outside
+  const scrollSpeed = 10;
+
+  if (e.clientX <= containerRect.left) {
+    // Mouse is left of the container - scroll left faster based on distance
+    const distance = containerRect.left - e.clientX;
+    container.scrollLeft = Math.max(
+      0,
+      scrollLeft - scrollSpeed * (1 + distance / 50),
+    );
+  } else if (e.clientX >= containerRect.right) {
+    // Mouse is right of the container - scroll right faster based on distance
+    const distance = e.clientX - containerRect.right;
+    container.scrollLeft = scrollLeft + scrollSpeed * (1 + distance / 50);
+  }
+
+  // Calculate time in seconds (clamp between 0 and duration)
+  const newTime = Math.max(
+    0,
+    Math.min(widget.duration, (x / totalWidth) * widget.duration),
+  );
+  currentTime.value = newTime;
+  player.seek(newTime);
+}
+
+function handleMouseUp() {
+  isDragging.value = false;
+}
+
+function updateTimeFromMouseEvent(e: MouseEvent) {
+  const svg = e.currentTarget as SVGElement;
+  const container = svg.closest(".overflow-auto");
+  if (!container) return;
+
+  const containerRect = container.getBoundingClientRect();
+  const scrollLeft = container.scrollLeft;
+
+  const rawX = e.clientX - containerRect.left - 40 + scrollLeft;
+  const x = Math.max(0, Math.min(widget.duration * 100, rawX));
+  const totalWidth = widget.duration * 100;
+
+  const newTime = Math.max(
+    0,
+    Math.min(widget.duration, (x / totalWidth) * widget.duration),
+  );
+  currentTime.value = newTime;
+  player.seek(newTime);
+}
+
+// Add global mouse event listeners
+onMounted(() => {
+  window.addEventListener("mousemove", handleMouseMove);
+  window.addEventListener("mouseup", handleMouseUp);
+});
+
+onUnmounted(() => {
+  window.removeEventListener("mousemove", handleMouseMove);
+  window.removeEventListener("mouseup", handleMouseUp);
+});
 </script>
 
 <template>
-  <div class="w-full h-full overflow-scroll">
-    <div class="mx-10">
+  <div class="w-full h-full overflow-auto">
+    <div class="mx-10 relative">
       <svg
+        @mousedown="handleMouseDown"
         :style="{
-          width: `${widget.duration * 10}px`,
-          textAlign: 'center',
+          width: `${widget.duration * 100}px`,
+          height: '60px',
         }"
+        class="cursor-col-resize"
       >
+        <!-- Timeline marks - 10 marks per second -->
         <line :x1="0" :y1="0" :x2="0" :y2="35" stroke="grey" stroke-width="1" />
         <line
-          v-for="i in widget.duration * 10 - 10"
+          v-for="i in widget.duration * 10"
           :key="i"
           :x1="i * 10"
           :y1="0"
@@ -26,11 +121,30 @@ const { widget } = defineProps<{
           stroke="grey"
           stroke-width="1"
         />
+
+        <!-- Time labels - one per second -->
         <text :x="0" :y="50">0</text>
-        <text v-for="i in widget.duration - 1" :key="i" :x="i * 100" :y="50">
+        <text v-for="i in widget.duration" :key="i" :x="i * 100 - 10" :y="50">
           {{ i }}
         </text>
+
+        <!-- Current time indicator -->
+        <line
+          :x1="currentTime * 100"
+          :y1="0"
+          :x2="currentTime * 100"
+          :y2="50"
+          stroke="#2196f3"
+          stroke-width="2"
+        />
+        <circle :cx="currentTime * 100" :cy="0" r="4" fill="#2196f3" />
       </svg>
     </div>
   </div>
 </template>
+
+<style scoped>
+.cursor-col-resize {
+  cursor: col-resize;
+}
+</style>
diff --git a/packages/app/src/components/__test__/TestAnimation.vue b/packages/app/src/components/__test__/TestAnimation.vue
index 8db92d8..4bb8ce8 100644
--- a/packages/app/src/components/__test__/TestAnimation.vue
+++ b/packages/app/src/components/__test__/TestAnimation.vue
@@ -1,12 +1,24 @@
 <script setup lang="ts">
-import { Arc } from "@vue-motion/lib";
-import { useMotion } from "@vue-motion/core";
+import { Arc, Circle } from "@vue-motion/lib";
+import { useMotion, usePlayer, useWidget } from "@vue-motion/core";
+import { onMounted } from "vue";
+import { CircleIns } from "@vue-motion/lib";
 
 const motion = useMotion();
 motion.width.value = 1600;
 motion.height.value = 900;
+const { play } = usePlayer();
+
+const arc = useWidget<CircleIns>();
+
+onMounted(() => {
+  arc.move(200, 300, {
+    duration: 10,
+  });
+  play();
+});
 </script>
 
 <template>
-  <Arc :radius="100" />
+  <Circle :radius="100" :widget="arc" />
 </template>
diff --git a/packages/app/src/main.ts b/packages/app/src/main.ts
index 742fcc2..9b552b1 100644
--- a/packages/app/src/main.ts
+++ b/packages/app/src/main.ts
@@ -3,13 +3,20 @@ import "./output.css";
 import App from "./App.vue";
 import Preview from "./components/Preview.vue";
 import "font-awesome/css/font-awesome.css";
+import { createPlayer } from "@vue-motion/core";
 // /**@ts-ignore */
 // import router from 'virtual:router'
 // /**@ts-ignore */
 // import player from 'virtual:player'
 
 if (__D__) {
-  createApp(App).mount("#app");
+  createApp(App)
+    .use(
+      createPlayer({
+        studio: true,
+      }),
+    )
+    .mount("#app");
 } else {
   createApp(Preview).mount("#app");
 }
diff --git a/packages/app/src/output.css b/packages/app/src/output.css
index 375fe82..f67a177 100644
--- a/packages/app/src/output.css
+++ b/packages/app/src/output.css
@@ -554,6 +554,64 @@ video {
   display: none;
 }
 
+.\!container {
+  width: 100% !important;
+}
+
+.container {
+  width: 100%;
+}
+
+@media (min-width: 640px) {
+  .\!container {
+    max-width: 640px !important;
+  }
+
+  .container {
+    max-width: 640px;
+  }
+}
+
+@media (min-width: 768px) {
+  .\!container {
+    max-width: 768px !important;
+  }
+
+  .container {
+    max-width: 768px;
+  }
+}
+
+@media (min-width: 1024px) {
+  .\!container {
+    max-width: 1024px !important;
+  }
+
+  .container {
+    max-width: 1024px;
+  }
+}
+
+@media (min-width: 1280px) {
+  .\!container {
+    max-width: 1280px !important;
+  }
+
+  .container {
+    max-width: 1280px;
+  }
+}
+
+@media (min-width: 1536px) {
+  .\!container {
+    max-width: 1536px !important;
+  }
+
+  .container {
+    max-width: 1536px;
+  }
+}
+
 .absolute {
   position: absolute;
 }
@@ -595,8 +653,28 @@ video {
   height: 2rem;
 }
 
-.h-\[60\%\] {
-  height: 60%;
+.h-\[100px\] {
+  height: 100px;
+}
+
+.h-\[40\%\] {
+  height: 40%;
+}
+
+.h-\[5\%\] {
+  height: 5%;
+}
+
+.h-\[55\%\] {
+  height: 55%;
+}
+
+.h-\[60vh\] {
+  height: 60vh;
+}
+
+.h-\[80px\] {
+  height: 80px;
 }
 
 .h-full {
@@ -607,6 +685,18 @@ video {
   height: 100vh;
 }
 
+.h-\[300px\] {
+  height: 300px;
+}
+
+.max-h-full {
+  max-height: 100%;
+}
+
+.min-h-0 {
+  min-height: 0px;
+}
+
 .w-1\/4 {
   width: 25%;
 }
@@ -635,6 +725,14 @@ video {
   width: 100vw;
 }
 
+.max-w-full {
+  max-width: 100%;
+}
+
+.flex-1 {
+  flex: 1 1 0%;
+}
+
 .flex-shrink-0 {
   flex-shrink: 0;
 }
@@ -643,10 +741,18 @@ video {
   flex-grow: 1;
 }
 
+.transform {
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .cursor-pointer {
   cursor: pointer;
 }
 
+.cursor-col-resize {
+  cursor: col-resize;
+}
+
 .select-none {
   -webkit-user-select: none;
      -moz-user-select: none;
@@ -685,10 +791,18 @@ video {
   overflow: scroll;
 }
 
+.overflow-x-auto {
+  overflow-x: auto;
+}
+
 .overflow-y-auto {
   overflow-y: auto;
 }
 
+.overflow-y-hidden {
+  overflow-y: hidden;
+}
+
 .overflow-y-visible {
   overflow-y: visible;
 }
@@ -705,15 +819,37 @@ video {
   border-bottom-width: 1px;
 }
 
+.border-r {
+  border-right-width: 1px;
+}
+
+.border-t {
+  border-top-width: 1px;
+}
+
+.border-black {
+  --tw-border-opacity: 1;
+  border-color: rgb(0 0 0 / var(--tw-border-opacity, 1));
+}
+
 .bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
 }
 
+.bg-\[\#1f2428\] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(31 36 40 / var(--tw-bg-opacity, 1));
+}
+
 .p-1 {
   padding: 0.25rem;
 }
 
+.p-10 {
+  padding: 2.5rem;
+}
+
 .p-2 {
   padding: 0.5rem;
 }
@@ -722,6 +858,10 @@ video {
   padding: 0.75rem;
 }
 
+.p-4 {
+  padding: 1rem;
+}
+
 .pl-4 {
   padding-left: 1rem;
 }
@@ -740,6 +880,11 @@ video {
   color: rgb(53 73 94 / var(--tw-text-opacity, 1));
 }
 
+.text-white {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
+}
+
 .transition-all {
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
diff --git a/packages/core/src/animation.ts b/packages/core/src/animation.ts
index 019a8f1..1479ef8 100644
--- a/packages/core/src/animation.ts
+++ b/packages/core/src/animation.ts
@@ -21,6 +21,12 @@ export interface AnimationInstance<T, A> {
 
 export class AnimationManager<T> {
   animations: AnimationInstance<T, any>[] = [];
+  repeatStatus: [
+    boolean,
+    number | "loop",
+    number,
+    AnimationInstance<T, any>[],
+  ] = [false, 0, 0, []];
   private target: T;
 
   constructor(target: T, elapsed: WatchSource<number>) {
@@ -62,8 +68,12 @@ export class AnimationManager<T> {
     context ??= {} as any;
     const duration = context.duration ?? 1;
     const by = context.by ?? linear;
-    this.animations.push({ context, animation, duration, by });
 
+    if (this.repeatStatus[0]) {
+      // 在重复模式中，将动画保存到重复区间
+      this.repeatStatus[3].push({ context, animation, duration, by });
+    }
+    this.animations.push({ context, animation, duration, by });
     return this;
   }
 
@@ -74,14 +84,12 @@ export class AnimationManager<T> {
   }
 
   delay(duration: number) {
-    this.animate(
+    return this.animate(
       () => {
         /* empty animation */
       },
       { duration },
     );
-
-    return this;
   }
 
   parallel<A>(
@@ -135,13 +143,42 @@ export class AnimationManager<T> {
   }
 
   exec(fn: () => void) {
-    this.animate(
+    return this.animate(
       defineAnimation(() => (progress) => {
         if (progress === 0) fn();
       }),
       { duration: 0 },
     );
   }
+
+  repeat(times?: number) {
+    this.repeatStatus = [true, times ?? "loop", 0, []];
+    return this;
+  }
+
+  repeatEnd(fn?: () => void) {
+    // 当前重复次数加1
+    this.repeatStatus[2] += 1;
+
+    if (
+      this.repeatStatus[1] === "loop" ||
+      this.repeatStatus[2] < this.repeatStatus[1]
+    ) {
+      // 如果是无限循环或者还没达到总重复次数，将重复区间的动画再次添加到队列
+      this.animations.push(...this.repeatStatus[3]);
+
+      if (this.repeatStatus[1] === "loop") {
+        // 如果是无限循环，重置当前重复次数
+        this.repeatStatus[2] = 0;
+      }
+    } else {
+      // 重复完成
+      this.repeatStatus[0] = false;
+      this.repeatStatus[3] = [];
+      fn?.();
+    }
+    return this;
+  }
 }
 
 export type AnimationSetup<T, A> = (
diff --git a/packages/lib/src/widgets/widget.ts b/packages/lib/src/widgets/widget.ts
index 2990fee..1999790 100644
--- a/packages/lib/src/widgets/widget.ts
+++ b/packages/lib/src/widgets/widget.ts
@@ -83,6 +83,8 @@ export type WidgetIns = WidgetOptions &
     once: (animation: (target: Widget) => void) => void;
     delay: (duration: number) => void;
     exec: (fn: () => void) => void;
+    repeat: (times?: number) => void;
+    repeatEnd: (fn?: () => void) => void;
   };
 export interface Animatable {
   animate: <A>(
@@ -462,6 +464,24 @@ export function widget(options: WidgetOptions) {
     },
     options,
   );
+  registerAnimation<WidgetIns>(
+    "repeat",
+    (times: number) => {
+      return (manager: AnimationManager<WidgetIns>) => {
+        return manager.repeat(times);
+      };
+    },
+    options,
+  );
+  registerAnimation<WidgetIns>(
+    "repeatEnd",
+    (fn: () => void) => {
+      return (manager: AnimationManager<WidgetIns>) => {
+        return manager.repeatEnd(fn);
+      };
+    },
+    options,
+  );
   const animations = inject<(() => Animation<Widget, any>)[]>(
     "ADDITION_ANIMATIONS",
   );
diff --git a/test/src/App.vue b/test/src/App.vue
index f369ea2..d588a15 100644
--- a/test/src/App.vue
+++ b/test/src/App.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { usePlayer, useWidget } from "@vue-motion/core";
-import { Motion, Rect, RectIns } from "@vue-motion/lib";
+import { easeInBack, Motion, Rect, RectIns } from "@vue-motion/lib";
 import { onMounted } from "vue";
 
 const { play, useTimeline } = usePlayer();
@@ -9,35 +9,22 @@ const timeline1 = useTimeline(2);
 
 const rect = useWidget<RectIns>();
 
-// whenRender((elapsed) => {
-//   console.log(elapsed)
-// })
+function rotate() {
+  rect.repeat();
+  rect.rotate(360, {
+    duration: 0.5,
+    by: easeInBack,
+  });
+  rect.repeatEnd(() => console.log("repeat end"));
+}
 
 onMounted(() => {
-  // timeline1.useAnimation(rect)
-  //   .animate(move, {
-  //     offsetX: 200,
-  //     offsetY: 300,
-  //     duration: 1,
-  //   })
-  rect.move(200, 300);
-  rect.delay(1);
-  rect.exec(() => {
-    rect.borderColor = "yellow";
-    console.log(rect.elapsed);
-  });
-  rect.delay(1);
-  rect.exec(() => {
-    rect.borderColor = "blue";
-    console.log(rect.elapsed);
-  });
-  timeline1.play();
   play();
 });
 </script>
 
 <template>
   <Motion :width="1600" :height="1000">
-    <Rect :widget="rect" :width="100" :height="100" />
+    <Rect :widget="rect" :width="100" :height="100" @click="rotate()" />
   </Motion>
 </template>