diff --git a/assets/template.html b/assets/template.html
index 19c2ecdd..575d92c5 100644
--- a/assets/template.html
+++ b/assets/template.html
@@ -10,7 +10,7 @@
 <body>
 
     <script type="module">
-        import { replay } from './replay.js'
+        import { replay } from './replay.esm.js'
         replay()
     </script>
 
diff --git a/examples/test.html b/examples/test.html
index 8370db58..67c58277 100644
--- a/examples/test.html
+++ b/examples/test.html
@@ -83,7 +83,7 @@ <h2>Form:</h2>
         }
     </script>
     <script type="module">
-        import { record, DB } from './replay.js'
+        import { record, DB } from './replay.esm.js'
         DB.then(db => {
             db.clear()
             const ctr = record({
diff --git a/examples/todo.html b/examples/todo.html
index ef40c3eb..479018f3 100644
--- a/examples/todo.html
+++ b/examples/todo.html
@@ -257,7 +257,7 @@ <h1>todos</h1>
     </script>
 
     <script type="module">
-        import { record, DB } from './replay.js'
+        import { record, DB } from './replay.esm.js'
         DB.then(db => {
             db.clear()
             const ctr = record({
diff --git a/packages/player/src/container.ts b/packages/player/src/container.ts
index 106adee9..b526ec78 100644
--- a/packages/player/src/container.ts
+++ b/packages/player/src/container.ts
@@ -1,12 +1,10 @@
 import { VNode, convertVNode } from '@WebReplay/virtual-dom'
 import HTML from './ui.html'
 import STYLE from './ui.css'
-import { Pointer } from './pointer'
 
 export class Container {
     container: HTMLElement
     sandBox: HTMLIFrameElement
-    pointer: Pointer
 
     vNode: VNode
     width: number
@@ -42,6 +40,7 @@ export class Container {
         const element = parser.parseFromString(HTML, 'text/html').body.firstChild as HTMLElement
         element.style.width = this.width + 'px'
         element.style.height = this.height + 'px'
+        element.style.position = 'relative'
         element.style.margin = '0 auto'
         return (this.container = element)
     }
diff --git a/packages/player/src/dom.ts b/packages/player/src/dom.ts
index bfaddfd1..40129f28 100644
--- a/packages/player/src/dom.ts
+++ b/packages/player/src/dom.ts
@@ -12,11 +12,11 @@ import {
     FormElementEvent,
     ChildListUpdateDataType
 } from '@WebReplay/snapshot'
-import { Player } from './player'
+import { PlayerComponent } from './player'
 import { nodeStore } from '@WebReplay/utils'
-import { convertVNode } from '@WebReplay/virtual-dom';
+import { convertVNode } from '@WebReplay/virtual-dom'
 
-export function execFrame(this: Player, snapshot: SnapshotData) {
+export function updateDom(this: PlayerComponent, snapshot: SnapshotData) {
     const { type, data } = snapshot
     switch (type) {
         case SnapshotType.MOUSE:
@@ -49,7 +49,7 @@ export function execFrame(this: Player, snapshot: SnapshotData) {
                         break
                     case 'childList':
                         const parentNode = nodeStore.getNode(parentId) as HTMLElement
-                        const targetNode = nodeStore.getNode(nodeId) as Element || convertVNode(vNode, null)
+                        const targetNode = (nodeStore.getNode(nodeId) as Element) || convertVNode(vNode, null)
                         if (type === ChildListUpdateDataType.DELETE) {
                             if (targetNode) {
                                 parentNode!.removeChild(targetNode)
diff --git a/packages/player/src/index.ts b/packages/player/src/index.ts
index acde87aa..9d733041 100644
--- a/packages/player/src/index.ts
+++ b/packages/player/src/index.ts
@@ -1,4 +1,4 @@
-import { DBPromise, Redux } from '@WebReplay/utils'
+import { DBPromise, ProgressTypes, PlayerTypes, reduxStore } from '@WebReplay/utils'
 import { Container } from './container'
 import { Panel } from './panel'
 
@@ -6,13 +6,22 @@ export async function replay() {
     const indexDB = await DBPromise
     const { width, height, vNode, data } = await indexDB.getData()
 
-    const box = new Container({ vNode, width, height })
-    new Panel(box.container, data)
+    const c = new Container({ vNode, width, height })
+    new Panel(c.container, data)
 
-    Redux.dispatch({
-        type: 'PLAY',
+    reduxStore.dispatch({
+        type: ProgressTypes.INFO,
         data: {
-            speed: 1
+            frame: 0,
+            curTime: data[0].time,
+            startTime: data[0].time,
+            endTime: data[data.length - 1].time,
+            length: data.length
         }
     })
+
+    reduxStore.dispatch({
+        type: PlayerTypes.SPEED,
+        data: { speed: 1 }
+    })
 }
diff --git a/packages/player/src/keyboard.ts b/packages/player/src/keyboard.ts
index 57069c86..e2809f2c 100644
--- a/packages/player/src/keyboard.ts
+++ b/packages/player/src/keyboard.ts
@@ -1,26 +1,32 @@
-import { Redux } from '@WebReplay/utils'
+// import { Redux } from '@WebReplay/utils'
 
-export class Keyboard {
+import { reduxStore } from '@WebReplay/utils'
+import { PlayerTypes } from '@WebReplay/utils'
+
+export class KeyboardComponent {
     container: HTMLElement
     controller: HTMLElement
 
     pauseBtn: HTMLElement
     playBtn: HTMLElement
 
+    speed: number
+
     constructor(container: HTMLElement) {
         this.container = container
-        this.initCtrlKeyboard()
+        this.init()
     }
 
-    initCtrlKeyboard() {
+    init() {
         this.controller = this.container.querySelector('.wr-keyboard') as HTMLElement
         this.pauseBtn = this.controller.querySelector('.pause') as HTMLButtonElement
         this.playBtn = this.controller.querySelector('.play') as HTMLButtonElement
-        this.controller.addEventListener('click', (e: MouseEvent) => {
-            if (e.target) {
-                const speed = (e.target as HTMLElement).getAttribute('speed')
-                Redux.dispatch({
-                    type: 'PLAY',
+        this.controller.addEventListener('click', (e: MouseEvent & { target: HTMLElement & { type: string } }) => {
+            if (e.target && e.target.type === 'button') {
+                const speed = Number((e.target as HTMLElement).getAttribute('speed'))
+                this.speed = speed
+                reduxStore.dispatch({
+                    type: PlayerTypes.SPEED,
                     data: {
                         speed
                     }
@@ -28,16 +34,14 @@ export class Keyboard {
             }
         })
 
-        Redux.subscribe(state => {
-            if (!isNaN(state.speed)) {
-                this.paly(state.speed)
-                this.setSpeed(state.speed)
-            }
+        reduxStore.subscribe('player', state => {
+            this.paly(state.speed)
+            this.setSpeed(state.speed)
         })
     }
 
     paly(speed: number) {
-        if (speed != 0) {
+        if (speed !== 0) {
             this.pauseBtn.removeAttribute('disabled')
             this.playBtn.setAttribute('disabled', '')
         } else {
@@ -51,7 +55,7 @@ export class Keyboard {
         ;[...speedNodes].forEach(node => {
             node.removeAttribute('disabled')
         })
-        const index = speed == 1 ? 0 : speed == 4 ? 1 : speed == 8 ? 2 : -1
+        const index = speed === 1 ? 0 : speed === 2 ? 1 : speed === 4 ? 2 : -1
         if (index > -1) {
             speedNodes[index].setAttribute('disabled', '')
         }
diff --git a/packages/player/src/panel.ts b/packages/player/src/panel.ts
index a3451602..55cc2454 100644
--- a/packages/player/src/panel.ts
+++ b/packages/player/src/panel.ts
@@ -1,14 +1,17 @@
-import { Keyboard } from './keyboard'
-import { Player } from './player'
-import { Pointer } from './pointer'
+import { KeyboardComponent } from './keyboard'
+import { PlayerComponent } from './player'
+import { PointerComponent } from './pointer'
 import { SnapshotData } from '@WebReplay/snapshot'
+import { ProgressComponent } from './progress'
 
 export class Panel {
     container: HTMLElement
     data: SnapshotData[]
 
-    keyboard: Keyboard
-    player: Player
+    keyboard: KeyboardComponent
+    progress: ProgressComponent
+    pointer: PointerComponent
+    player: PlayerComponent
 
     constructor(container: HTMLElement, data: SnapshotData[]) {
         this.container = container
@@ -17,7 +20,9 @@ export class Panel {
     }
 
     initComponent() {
-        this.keyboard = new Keyboard(this.container)
-        this.player = new Player(this.data, new Pointer())
+        this.keyboard = new KeyboardComponent(this.container)
+        this.progress = new ProgressComponent(this.container)
+        this.pointer = new PointerComponent()
+        this.player = new PlayerComponent(this.data, this.pointer, this.progress)
     }
 }
diff --git a/packages/player/src/player.ts b/packages/player/src/player.ts
index 2d993b14..06b3f3b4 100644
--- a/packages/player/src/player.ts
+++ b/packages/player/src/player.ts
@@ -1,22 +1,33 @@
-import { Pointer } from './pointer'
+import { PointerComponent } from './pointer'
 import { SnapshotData } from '@WebReplay/snapshot'
-import { execFrame } from './dom'
-import { Redux } from '@WebReplay/utils'
+import { updateDom } from './dom'
+import { reduxStore, PlayerTypes, ProgressState } from '@WebReplay/utils'
+import { ProgressComponent } from './progress'
 
-export class Player {
+export class PlayerComponent {
     data: SnapshotData[]
-    isPause = false
+    isPause = true
     index = 0
+    speed: number
     requestID: number
     startTime: number
-    pointer: Pointer
+    pointer: PointerComponent
+    progress: ProgressComponent
+    progressState: ProgressState
 
-    constructor(data: SnapshotData[], pointer: Pointer) {
+    progressPercentage = 0
+    progressNextTime = 0
+
+    constructor(data: SnapshotData[], pointer: PointerComponent, progress: ProgressComponent) {
         this.data = data
         this.pointer = pointer
+        this.progress = progress
 
-        Redux.subscribe(state => {
+        reduxStore.subscribe('player', state => {
+            this.progressState = reduxStore.getState()['progress']
             const speed = state.speed
+            this.speed = speed
+
             if (speed > 0) {
                 this.play(speed)
             } else {
@@ -25,34 +36,59 @@ export class Player {
         })
     }
 
-    play(speed: number = 1) {
-        function loop(this: Player, timeStamp: DOMHighResTimeStamp) {
-            if (!this.data[this.index]) {
+    play(speed: number) {
+        this.isPause = false
+
+        const { startTime, endTime } = this.progressState
+        const duration = endTime - startTime
+
+        const stepTime = duration / 100
+
+        cancelAnimationFrame(this.requestID)
+        this.requestID = requestAnimationFrame(loop.bind(this))
+
+        const initTime = Date.now()
+        this.startTime = 0
+
+        function loop(this: PlayerComponent) {
+            const timeStamp = Date.now() - initTime
+            if (this.index > 0 && !this.data[this.index + 1]) {
+                this.stop()
                 return
             }
             if (!this.startTime) {
-                this.startTime = Number(this.data[this.index].time) - timeStamp
+                this.startTime = Number(this.data[this.index].time)
             }
+
             const currTime = this.startTime + timeStamp * speed
-            const nextTime = Number(this.data[this.index].time)
-            if (this.index >= this.data.length - 1) {
-                return this.stop()
-            } else if (currTime >= nextTime) {
-                execFrame.call(this, this.data[this.index])
+            const nextTime = Number(this.data[this.index + 1].time)
+
+            if (!this.progressNextTime) {
+                this.progressNextTime = currTime
+            }
+
+            // for progress
+            if (currTime > this.progressNextTime) {
+                this.progressNextTime = this.progressNextTime + stepTime
+                this.progress.updateProgress(this.progressPercentage)
+                this.progressPercentage = this.progressPercentage + 1
+            }
+
+            if (currTime >= nextTime) {
+                this.execFrame.call(this, this.data[this.index])
                 this.index++
             }
 
             this.requestID = requestAnimationFrame(loop.bind(this))
         }
-
-        this.requestID = requestAnimationFrame(loop.bind(this))
     }
 
     pause() {
         cancelAnimationFrame(this.requestID)
-        this.startTime = 0
-        Redux.dispatch({
-            type: 'PLAY',
+        this.isPause = true
+
+        reduxStore.dispatch({
+            type: PlayerTypes.SPEED,
             data: {
                 speed: 0
             }
@@ -60,7 +96,13 @@ export class Player {
     }
 
     stop() {
-        this.pause()
         this.index = 0
+        this.progressPercentage = 0
+        this.progressNextTime = 0
+        this.pause()
+    }
+
+    execFrame(this: PlayerComponent, snapshot: SnapshotData) {
+        updateDom.call(this, snapshot)
     }
 }
diff --git a/packages/player/src/pointer.ts b/packages/player/src/pointer.ts
index 7b844eb7..671a95f0 100644
--- a/packages/player/src/pointer.ts
+++ b/packages/player/src/pointer.ts
@@ -1,4 +1,4 @@
-export class Pointer {
+export class PointerComponent {
     x = 0
     y = 0
 
diff --git a/packages/player/src/progress.ts b/packages/player/src/progress.ts
new file mode 100644
index 00000000..59090c03
--- /dev/null
+++ b/packages/player/src/progress.ts
@@ -0,0 +1,22 @@
+import { ProgressState } from '@WebReplay/utils'
+
+export class ProgressComponent {
+    progress: HTMLElement
+    thumb: HTMLElement
+    slider: HTMLElement
+    speed: number
+    rafId: number
+
+    progressState: ProgressState
+
+    totalDistance = 0
+    constructor(c: HTMLElement) {
+        this.progress = c.querySelector('.wr-progress')! as HTMLElement
+        this.thumb = this.progress.querySelector('.wr-thumb') as HTMLElement
+        this.slider = this.progress.querySelector('.wr-slider-bar') as HTMLElement
+    }
+
+    updateProgress(percentage: number) {
+        this.thumb.style.left = percentage - 0.5 + '%'
+    }
+}
diff --git a/packages/player/src/ui.css b/packages/player/src/ui.css
index 3c6c07ec..e589801f 100644
--- a/packages/player/src/ui.css
+++ b/packages/player/src/ui.css
@@ -10,6 +10,7 @@ body {
 
 #wr-player {
     position: relative;
+    pointer-events: none;
 }
 
 #wr-pointer {
@@ -29,7 +30,7 @@ body {
 }
 
 .wr-panel {
-    width: 100vw;
+    width: 100%;
     box-sizing: border-box;
     padding: 10px;
     height: 40px;
@@ -73,4 +74,5 @@ body {
     left: 0%;
     transform: translateY(-3px);
     z-index: 10;
+    /* transition: left .1s linear; */
 }
diff --git a/packages/player/src/ui.html b/packages/player/src/ui.html
index 3abfe427..8dc90d9d 100644
--- a/packages/player/src/ui.html
+++ b/packages/player/src/ui.html
@@ -8,8 +8,8 @@
                 <button type="button" class="pause" speed="0">Pause</button>
                 <button type="button" class="play" speed="1" disabled>Play</button>
                 <button type="button" class="speed" disabled speed="1">1x</button>
+                <button type="button" class="speed" speed="2">2x</button>
                 <button type="button" class="speed" speed="4">4x</button>
-                <button type="button" class="speed" speed="8">8x</button>
             </div>
             <div class="wr-progress">
                 <div class="wr-slider-bar">
diff --git a/packages/snapshot/src/snapshot.ts b/packages/snapshot/src/snapshot.ts
index 9c48edd6..cabe7421 100644
--- a/packages/snapshot/src/snapshot.ts
+++ b/packages/snapshot/src/snapshot.ts
@@ -287,6 +287,12 @@ function kidnapInputs(emit: SnapshotEvent<FormElementObserve>) {
                     }
                 }
             })
+
+            listenerStore.add(() => {
+                if (original) {
+                    Object.defineProperty(target, key, original)
+                }
+            })
         }
     })
 
diff --git a/packages/utils/src/redux/combine-reducers.ts b/packages/utils/src/redux/combine-reducers.ts
new file mode 100644
index 00000000..8c07b6ec
--- /dev/null
+++ b/packages/utils/src/redux/combine-reducers.ts
@@ -0,0 +1,24 @@
+import { State } from './create-store'
+
+export type Action = { type: string; state: State }
+export type Reducer = (state: State, action?: Action) => State
+
+export function combineReducers(reducers: { [key: string]: Reducer }) {
+    const reducerKeys = Object.keys(reducers)
+    return function combination(state: State, action?: Action) {
+        const nextState = {} as State
+
+        for (let i = 0; i < reducerKeys.length; i++) {
+            const key = reducerKeys[i] // reducer name
+
+            const reducer = reducers[key]
+
+            const previousStateForKey = state[key]
+
+            const nextStateForKey = reducer(previousStateForKey, action)
+
+            nextState[key] = nextStateForKey
+        }
+        return nextState
+    }
+}
diff --git a/packages/utils/src/redux/create-store.ts b/packages/utils/src/redux/create-store.ts
new file mode 100644
index 00000000..4cb30a36
--- /dev/null
+++ b/packages/utils/src/redux/create-store.ts
@@ -0,0 +1,77 @@
+import { PlayerTypes } from './reducers/player'
+import { ProgressTypes } from './reducers/progress'
+import { isEqual } from 'lodash-es'
+
+export type State = { [key: string]: any }
+
+export function createStore(reducer: (state: State, action: any) => State, initState: State = {}) {
+    let state = initState
+
+    const topics = {
+        all: []
+    } as { [key: string]: Function[] }
+
+    function subscribe(type: string, listener: (state: State) => void): void
+    function subscribe(listener: (state: State) => void): void
+
+    function subscribe(...args: any): void {
+        let type = 'all'
+        let listener
+        if (typeof args[0] === 'string') {
+            type = args[0]
+            listener = args[1]
+        } else {
+            listener = args[0]
+        }
+        if (!topics[type]) {
+            topics[type] = []
+        }
+        topics[type].push(listener)
+    }
+
+    function dispatch(action?: { type: string; data?: any }) {
+        const oldState = state
+        state = reducer(state, action)
+
+        if (!action) {
+            // dispatch all
+            if (topics['all']) {
+                topics['all'].forEach(listener => listener(state))
+            }
+            return
+        }
+
+        const topicName = getTypeInTopics(action.type)
+        if (topicName && topics[topicName]) {
+            return topics[topicName].forEach(listener => {
+                if (!isEqual(state[topicName], oldState[topicName])) {
+                    listener(state[topicName])
+                }
+            })
+        }
+    }
+
+    function getState() {
+        return state
+    }
+
+    function getTypeInTopics(type: string) {
+        const topics = {
+            player: Object.keys(PlayerTypes),
+            progress: Object.keys(ProgressTypes)
+        } as { [key: string]: string[] }
+
+        for (let [key, enums] of Object.entries(topics)) {
+            if (enums.includes(type)) {
+                return key
+            }
+        }
+        return null
+    }
+
+    return {
+        subscribe,
+        dispatch,
+        getState
+    }
+}
diff --git a/packages/utils/src/redux/index.ts b/packages/utils/src/redux/index.ts
index 2663d383..594e9274 100644
--- a/packages/utils/src/redux/index.ts
+++ b/packages/utils/src/redux/index.ts
@@ -1,38 +1,15 @@
-import { isEqual } from 'lodash-es'
+import { createStore } from './create-store'
+import { combineReducers } from './combine-reducers'
 
-type State = { [key: string]: any }
+import progressReducer from './reducers/progress'
+import playerReducer from './reducers/player'
 
-function createStore(reducer: (state: State, action: { type: string; data: State }) => State) {
-    let state: State
-    const listeners: Array<(state: State, oldState?: State) => void> = []
+const reducer = combineReducers({
+    player: playerReducer,
+    progress: progressReducer
+})
 
-    const subscribe = (listener: (state: State, oldState?: State) => void) => listeners.push(listener)
-    const getState = () => state
+export { PlayerTypes, PlayerState } from './reducers/player'
+export { ProgressTypes, ProgressState } from './reducers/progress'
 
-    const dispatch = (action: { type: string; data: State }) => {
-        const oldState = state
-        state = reducer(state, action)
-        if (!isEqual(state, oldState)) {
-            listeners.forEach(listener => listener(state, oldState))
-        }
-    }
-
-    dispatch({ type: 'INIT', data: {} })
-    return { getState, dispatch, subscribe }
-}
-
-function reducer(state: State, action: { type: string; data: State }) {
-    const { type, data } = action
-
-    switch (type) {
-        case 'PLAY':
-            return {
-                ...state,
-                speed: Number(data.speed) || 0
-            }
-        default:
-            return state
-    }
-}
-
-export const Redux = createStore(reducer)
+export const reduxStore = createStore(reducer)
diff --git a/packages/utils/src/redux/reducers/player.ts b/packages/utils/src/redux/reducers/player.ts
new file mode 100644
index 00000000..67864bd8
--- /dev/null
+++ b/packages/utils/src/redux/reducers/player.ts
@@ -0,0 +1,31 @@
+import { State } from '../create-store'
+
+let initState = {
+    speed: null
+}
+
+export enum PlayerTypes {
+    SPEED = 'SPEED'
+}
+
+export type PlayerState = typeof PlayerTypes
+
+export default function playerReducer(state: State, action: any) {
+    if (!state) {
+        state = initState
+    }
+    if (!action) {
+        return state
+    }
+    const { type, data } = action
+
+    switch (type) {
+        case PlayerTypes.SPEED:
+            return {
+                ...state,
+                ...data
+            }
+        default:
+            return state
+    }
+}
diff --git a/packages/utils/src/redux/reducers/progress.ts b/packages/utils/src/redux/reducers/progress.ts
new file mode 100644
index 00000000..34c5eca0
--- /dev/null
+++ b/packages/utils/src/redux/reducers/progress.ts
@@ -0,0 +1,50 @@
+import { State } from '../create-store'
+
+const initState = {
+    frame: 0,
+    length: 0,
+    curTime: 0,
+    startTime: 0,
+    endTime: 0
+}
+
+export type ProgressState = typeof initState
+
+export enum ProgressTypes {
+    FORWARD = 'FORWARD',
+    BACKWARD = 'BACKWARD',
+    INFO = 'INFO'
+}
+
+export default function progressReducer(state: State, action?: any) {
+    if (!state) {
+        state = initState
+    }
+
+    if (!action) {
+        return state
+    }
+
+    const { type, data } = action
+
+    switch (type) {
+        case ProgressTypes.FORWARD:
+            return {
+                ...state,
+                frame: data.frame,
+                curTime: data.curTime
+            }
+        case ProgressTypes.BACKWARD:
+            return {
+                ...state,
+                frame: data.frame
+            }
+        case ProgressTypes.INFO:
+            return {
+                ...state,
+                ...data
+            }
+        default:
+            return state
+    }
+}
diff --git a/rollup.config.dev.js b/rollup.config.dev.js
index 91c3c5a3..5aac43d9 100644
--- a/rollup.config.dev.js
+++ b/rollup.config.dev.js
@@ -12,7 +12,7 @@ export default {
     output: {
         name: 'wr',
         format: 'esm',
-        file: 'dist/web-replay.js',
+        file: 'dist/replay.esm.js',
         sourcemap: true
     },
     plugins: [
@@ -30,6 +30,6 @@ export default {
             include: ['**/*.html', '**/*.css'],
             exclude: ['**/index.html', '**/index.css']
         }),
-        browsersync({ server: 'dist', port: 4321, notify: false, open: false })
+        browsersync({ codeSync: false, server: 'dist', port: 4321, notify: false, open: false })
     ]
 }
