diff --git a/package.json b/package.json
index c86b7f9..8b294ff 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
   "license": "MIT",
   "devDependencies": {
     "@iconify-json/mdi": "^1.1.66",
+    "@types/canvas-confetti": "^1.6.4",
     "solid-devtools": "^0.29.3",
     "typescript": "^5.4.5",
     "unocss": "^0.59.2",
@@ -23,14 +24,16 @@
   "dependencies": {
     "@ffmpeg/ffmpeg": "^0.12.10",
     "@ffmpeg/util": "^0.12.1",
+    "canvas-confetti": "^1.9.2",
     "modern-gif": "^2.0.3",
+    "mp4box": "^0.5.2",
     "sass": "^1.75.0",
     "solid-js": "^1.8.16",
     "yon-utils": "^0.1.20"
   },
   "pnpm": {
-    "patchedDependencies111": {
-      "NOTE": "will make cached frames un-reusable",
+    "patchedDependencies": {
+      "@ffmpeg/ffmpeg@0.12.10": "patches/@ffmpeg__ffmpeg@0.12.10.patch",
       "modern-gif@2.0.3": "patches/modern-gif@2.0.3.patch"
     }
   }
diff --git a/patches/@ffmpeg__ffmpeg@0.12.10.patch b/patches/@ffmpeg__ffmpeg@0.12.10.patch
new file mode 100644
index 0000000..def8d52
--- /dev/null
+++ b/patches/@ffmpeg__ffmpeg@0.12.10.patch
@@ -0,0 +1,14 @@
+diff --git a/package.json b/package.json
+index 8dbc8c0debb38f7031d03aadca1ce6429d51e207..65e5958d19311a998b0978578e9eaf28eb390718 100644
+--- a/package.json
++++ b/package.json
+@@ -12,6 +12,9 @@
+         "import": "./dist/esm/index.js",
+         "require": "./dist/umd/ffmpeg.js"
+       }
++    },
++    "./worker": {
++      "import": "./dist/esm/worker.js"
+     }
+   },
+   "scripts": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 78eadc4..17c6d61 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -4,16 +4,30 @@ settings:
   autoInstallPeers: true
   excludeLinksFromLockfile: false
 
+patchedDependencies:
+  '@ffmpeg/ffmpeg@0.12.10':
+    hash: rp32kszgnosraou7uzgtdqueci
+    path: patches/@ffmpeg__ffmpeg@0.12.10.patch
+  modern-gif@2.0.3:
+    hash: d3yjxwz7lxdlwgs7jan4epfyyy
+    path: patches/modern-gif@2.0.3.patch
+
 dependencies:
   '@ffmpeg/ffmpeg':
     specifier: ^0.12.10
-    version: 0.12.10
+    version: 0.12.10(patch_hash=rp32kszgnosraou7uzgtdqueci)
   '@ffmpeg/util':
     specifier: ^0.12.1
     version: 0.12.1
+  canvas-confetti:
+    specifier: ^1.9.2
+    version: 1.9.2
   modern-gif:
     specifier: ^2.0.3
-    version: 2.0.3
+    version: 2.0.3(patch_hash=d3yjxwz7lxdlwgs7jan4epfyyy)
+  mp4box:
+    specifier: ^0.5.2
+    version: 0.5.2
   sass:
     specifier: ^1.75.0
     version: 1.75.0
@@ -28,6 +42,9 @@ devDependencies:
   '@iconify-json/mdi':
     specifier: ^1.1.66
     version: 1.1.66
+  '@types/canvas-confetti':
+    specifier: ^1.6.4
+    version: 1.6.4
   solid-devtools:
     specifier: ^0.29.3
     version: 0.29.3(solid-js@1.8.16)(vite@5.2.8)
@@ -593,12 +610,13 @@ packages:
     dev: true
     optional: true
 
-  /@ffmpeg/ffmpeg@0.12.10:
+  /@ffmpeg/ffmpeg@0.12.10(patch_hash=rp32kszgnosraou7uzgtdqueci):
     resolution: {integrity: sha512-lVtk8PW8e+NUzGZhPTWj2P1J4/NyuCrbDD3O9IGpSeLYtUZKBqZO8CNj1WYGghep/MXoM8e1qVY1GztTkf8YYQ==}
     engines: {node: '>=18.x'}
     dependencies:
       '@ffmpeg/types': 0.12.2
     dev: false
+    patched: true
 
   /@ffmpeg/types@0.12.2:
     resolution: {integrity: sha512-NJtxwPoLb60/z1Klv0ueshguWQ/7mNm106qdHkB4HL49LXszjhjCCiL+ldHJGQ9ai2Igx0s4F24ghigy//ERdA==}
@@ -1037,6 +1055,10 @@ packages:
       '@babel/types': 7.24.0
     dev: true
 
+  /@types/canvas-confetti@1.6.4:
+    resolution: {integrity: sha512-fNyZ/Fdw/Y92X0vv7B+BD6ysHL4xVU5dJcgzgxLdGbn8O3PezZNIJpml44lKM0nsGur+o/6+NZbZeNTt00U1uA==}
+    dev: true
+
   /@types/estree@1.0.5:
     resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==}
     dev: true
@@ -1327,6 +1349,10 @@ packages:
     resolution: {integrity: sha512-JFPQs34lHKx1B5t1EpQpWH4c+29zIyn/haGsbpfq3suuV9v56enjFt23zqijxGTMwy1p/4H2tjnQMY+p1WoAyA==}
     dev: true
 
+  /canvas-confetti@1.9.2:
+    resolution: {integrity: sha512-6Xi7aHHzKwxZsem4mCKoqP6YwUG3HamaHHAlz1hTNQPCqXhARFpSXnkC9TWlahHY5CG6hSL5XexNjxK8irVErg==}
+    dev: false
+
   /chalk@2.4.2:
     resolution: {integrity: sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==}
     engines: {node: '>=4'}
@@ -1697,16 +1723,21 @@ packages:
       ufo: 1.5.3
     dev: true
 
-  /modern-gif@2.0.3:
+  /modern-gif@2.0.3(patch_hash=d3yjxwz7lxdlwgs7jan4epfyyy):
     resolution: {integrity: sha512-3QXbWnVkrD1UgNqpaKopSDWlIvVyRC3m8yQdGFsi+xNk0ndnSTwj95MqhXcXv0FltJHq/BcwglTak42pfUf4IQ==}
     dependencies:
       modern-palette: 2.0.0
     dev: false
+    patched: true
 
   /modern-palette@2.0.0:
     resolution: {integrity: sha512-wKZcom2QzK6sS6h5RLYHEkd3V3maQLzgkI+ekDCimlk7dfXa63aekZcy+7KS+8JEqIDeY/yV1CAvA7l+7u6QHA==}
     dev: false
 
+  /mp4box@0.5.2:
+    resolution: {integrity: sha512-zRmGlvxy+YdW3Dmt+TR4xPHynbxwXtAQDTN/Fo9N3LMxaUlB2C5KmZpzYyGKy4c7k4Jf3RCR0A2pm9SZELOLXw==}
+    dev: false
+
   /mrmime@2.0.0:
     resolution: {integrity: sha512-eu38+hdgojoyq63s+yTpN4XMBdt5l8HhMhc4VKLO9KM5caLIBvUm4thi7fFaxyTmCKeNnXZ5pAlBwCUnhA09uw==}
     engines: {node: '>=10'}
diff --git a/src/App.tsx b/src/App.tsx
index ccbe3e9..1aa551a 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,5 +1,5 @@
 import { Show, createEffect, createMemo, createRoot, type Component } from 'solid-js';
-import { store } from './store';
+import { store, updateStore } from './store';
 import { FileSelector } from './components/FileSelector';
 import { OptionEditor } from './components/OptionEditor';
 import { ProcessingBar } from './components/Processing';
@@ -25,13 +25,17 @@ const App: Component = () => {
         <div class='flex gap-4 mx-auto max-w-7xl flex-col lg:flex-row'>
           <div class="flex-1">
             <OptionEditor />
+
+            <a
+              href="#" class='mt-2 block text-slate-8 text-center hover:text-blue'
+              onClick={() => updateStore({ file: null, fileInfo: { ...store.fileInfo, url: '' } })}
+            >Choose another file...</a>
           </div>
           <div class="flex-1">
             <ProcessingBar />
             {out()}
           </div>
         </div>
-
       </Show>
 
       <footer class="text-center my-20">
diff --git a/src/components/FileSelector.tsx b/src/components/FileSelector.tsx
index fdfe7c9..7dbc85c 100644
--- a/src/components/FileSelector.tsx
+++ b/src/components/FileSelector.tsx
@@ -36,6 +36,7 @@ export const FileSelector: Component = () => {
       <div class='font-500 text-center'>
         Choose Video ...
         <div class='text-4 op-60'> or drop your file here</div>
+        <div class='mt-4 text-4 mb--8 op-30'> file will NOT be uploaded</div>
       </div>
     </div>
   );
diff --git a/src/components/OptionEditor.tsx b/src/components/OptionEditor.tsx
index 9e1fdfe..ae4ccd5 100644
--- a/src/components/OptionEditor.tsx
+++ b/src/components/OptionEditor.tsx
@@ -1,5 +1,5 @@
 import { createComputed, createMemo, createSignal } from "solid-js";
-import { outputSize, store, updateStore } from "../store";
+import { outputSize, outputTimeRange, store, updateStore } from "../store";
 import { startMouseMove } from 'yon-utils'
 
 export function OptionEditor() {
@@ -91,7 +91,6 @@ export function OptionEditor() {
         break;
     }
   }
-  const computedDuration = createMemo(() => ((store.options.end - store.options.start) / store.options.speed));
 
   function OptionGroupHeader(props: { children: any }) {
     return <h3 class="font-normal p-2 px-4 rounded leading-none text-cyan-1 mt-12">{props.children}</h3>
@@ -151,7 +150,7 @@ export function OptionEditor() {
 
         <div>
           <OptionLabel>Duration</OptionLabel>
-          ≈ {computedDuration().toFixed(2)}s ({(computedDuration() * store.options.framerate).toFixed(0)} frames)
+          ≈ {outputTimeRange().duration.toFixed(2)}s ({outputTimeRange().frameCount} frames)
         </div>
 
         <OptionGroupHeader>
diff --git a/src/components/OutputDisplay.tsx b/src/components/OutputDisplay.tsx
index 3451f7a..99fb5ee 100644
--- a/src/components/OutputDisplay.tsx
+++ b/src/components/OutputDisplay.tsx
@@ -1,5 +1,6 @@
 import { Show } from "solid-js";
 import { store } from "../store";
+import confetti from 'canvas-confetti';
 
 function readableFileSize(size: number) {
   const units = ['B', 'KB', 'MB', 'GB', 'TB'];
@@ -7,15 +8,30 @@ function readableFileSize(size: number) {
   return (size / Math.pow(1024, unitIndex)).toFixed(2) + ' ' + units[unitIndex];
 }
 
+function playConfetti(el: HTMLElement) {
+  const rect = el.getBoundingClientRect();
+  const x = (rect.left + rect.width / 2) / window.innerWidth;
+  const y = (rect.top + rect.height / 2) / window.innerHeight;
+  confetti({
+    particleCount: 100,
+    spread: 70,
+    ticks: 60,
+    origin: { x, y },
+  })
+}
+
 export function OutputDisplay() {
   return <Show when={store.outputFileURL}>
-    <section class="bg-slate-2 rounded-xl p-4 mt-4 animate-zoom-in animate-duration-300 animate-ease-out">
+    <section
+      class="bg-slate-2 rounded-xl p-4 mt-4 animate-zoom-in animate-duration-300 animate-ease-out"
+      ref={e => setTimeout(() => playConfetti(e!), 50)}
+    >
       <h2>Output</h2>
       <p>File size: {readableFileSize(store.outputFileContent?.length || 0)}</p>
       <p>
         <a
           class="decoration-none text-blue-500 hover:underline"
-          download={store.file!.name + ".gif"} href={store.outputFileURL}
+          download={store.file?.name + ".gif"} href={store.outputFileURL}
         >
           <i class="i-mdi-download mr-1"></i>
           Download GIF
diff --git a/src/components/Processing.tsx b/src/components/Processing.tsx
index f195b63..659c6c6 100644
--- a/src/components/Processing.tsx
+++ b/src/components/Processing.tsx
@@ -1,104 +1,42 @@
-import { Show, createEffect, createSignal } from "solid-js";
+import { Show, createMemo, createSignal } from "solid-js";
 import { encode as GIFEncode } from 'modern-gif'
 import GIFWorkerJS from 'modern-gif/worker?url'
-import { outputSize, store, updateStore } from "../store";
+import { outputSize, outputTimeRange, store, updateStore } from "../store";
+import { grabFramesWithMP4Box } from "../convertor/frameGrabber";
+import { delay } from "yon-utils";
 
 export function ProcessingBar() {
-  let prevMediumHash = '';
-  let prevMediumData: any
-  createEffect(() => {
-    store.file; // when file changes
-    prevMediumHash = ''; // reset hash
-    prevMediumData = null
-  })
-  const computeMediumHash = () => {
-    const { file, options } = store;
-    if (!file) return ''
-
-    return [options.framerate, options.width, options.height, options.start, options.end, options.speed].join('/')
-  }
-
   let [isRunning, setIsRunning] = createSignal(false)
   let [progress, setProgress] = createSignal('');
   let [percentage, setPercentage] = createSignal(0);
+  let [errorMessage, setErrorMessage] = createSignal('');
+
+  let [isUseFFMpeg, setIsUseFFMpeg] = createSignal(true);
 
   async function processWithGIFjs() {
-    const frames = [] as { data: Uint8ClampedArray, t: number }[]
-
-    let mediumHash = computeMediumHash()
-    if (prevMediumData && prevMediumHash === mediumHash) {
-      // use cached data
-      frames.push(...prevMediumData)
-    } else {
-      // recompute 
-      prevMediumData = null
-      prevMediumHash = ''
-
-      setPercentage(0)
-      setProgress('Loading video file')
-
-      const video = document.createElement('video')
-      const videoReady = new Promise(r => video.onloadedmetadata = r)
-      video.muted = true
-      video.src = store.fileInfo.url
-
-      const canvas = document.createElement('canvas')
-      canvas.width = outputSize().width
-      canvas.height = outputSize().height
-
-      const ctx = canvas.getContext('2d', { willReadFrequently: true })!
-
-      await videoReady
-      const videoPlaying = new Promise(r => video.onplaying = r)
-      video.currentTime = store.options.start
-      video.play()
-      await videoPlaying
-      video.pause()
-      video.currentTime = store.options.start
-      video.onplaying = null
-
-      // const captureStream = (video as any).captureStream()
-      // const videoTrack = captureStream.getVideoTracks()[0]
-      // const imageCapture = new ImageCapture(videoTrack)
-
-      setProgress('Grabbing frames')
-      const frameCount = Math.max(1, Math.floor((store.options.end - store.options.start) / store.options.speed * store.options.framerate))
-      for (let i = 0; i < frameCount; i++) {
-        if (!isRunning()) return;
-
-        const frameTime = store.options.start + i * (store.options.end - store.options.start) / frameCount
-        const seekEnd = new Promise(r => video.onseeked = r)
-        video.currentTime = frameTime
-        await seekEnd
-
-        ctx.drawImage(video, 0, 0, canvas.width, canvas.height)
-        const data = ctx.getImageData(0, 0, canvas.width, canvas.height).data
-        frames.push({ data, t: Math.round((frameTime - store.options.start) / store.options.speed * 1000) })
-
-        setPercentage(i / frameCount * 100)
+    const fetched = await grabFramesAndCombine()
+    const { outputFrameDurationMS } = outputTimeRange()
+
+    const frames: { data: Uint8Array, delay: number }[] = Array.from({ length: fetched.frameCount }, (_, i) => {
+      const data = fetched.combined.slice(i * fetched.frameDataSize, (i + 1) * fetched.frameDataSize)
+      return {
+        data,
+        delay: outputFrameDurationMS[i]
       }
-
-      prevMediumHash = mediumHash
-      prevMediumData = frames
-    }
+    })
 
     setPercentage(-1)
     setProgress('Encoding to GIF')
+    console.time('encoding to gif')
     const output = await GIFEncode({
       workerUrl: GIFWorkerJS as unknown as string,
       width: outputSize().width,
       height: outputSize().height,
       maxColors: store.options.maxColors,
       format: "arrayBuffer",
-
-      frames: frames.map((f, i) => {
-        const delay = i < frames.length - 1 ? frames[i + 1].t - f.t : Math.round(1000 / store.options.framerate)
-        return {
-          data: f.data,
-          delay
-        }
-      }),
+      frames,
     })
+    console.timeEnd('encoding to gif')
 
     setPercentage(100)
     setProgress('Finished')
@@ -124,54 +62,75 @@ export function ProcessingBar() {
       console.log('FF', type, message)
     })
     ffmpeg.on('progress', ({ progress, time }) => {
+      setPercentage((progress > 1 || progress < 0) ? -1 : (progress * 100))
       console.log('FFProgress', progress, time)
     })
 
-    const inputFilename = 'input' + /\.\w+$/.exec(file.name || '.mp4')![0]
+    // const inputFilename = 'input' + /\.\w+$/.exec(file.name || '.mp4')![0]
     const outputFilename = 'output.gif'
 
     // read file content to data
-    const inputData = await file.arrayBuffer()
-    await ffmpeg.writeFile(inputFilename, new Uint8Array(inputData))
+    // const inputData = await file.arrayBuffer()
+    // await ffmpeg.writeFile(inputFilename, new Uint8Array(inputData))
 
-    let vf: string[] = []
-    vf.push(`fps=${options.framerate || 12}`)
-    if (options.width !== -1 || options.height !== -1) {
-      vf.push(`scale=${options.width}:${options.height}`)
-    }
-    if (options.speed !== 1) {
-      vf.push(`setpts=PTS/${options.speed}`)
-      vf.push(`fps=${options.framerate || 12}`)
-    }
+    // let vf: string[] = []
+    // vf.push(`fps=${options.framerate || 12}`)
+    // if (options.width !== -1 || options.height !== -1) {
+    //   vf.push(`scale=${options.width}:${options.height}`)
+    // }
+    // if (options.speed !== 1) {
+    //   vf.push(`setpts=PTS/${options.speed}`)
+    //   vf.push(`fps=${options.framerate || 12}`)
+    // }
 
 
     // --------------------------------------------------
     // stage1
-    const stage1Filename = 'medium.mov'
-    const stage1Args = [
-      options.start > 0 && ['-ss', options.start.toString()],
-      options.end < store.fileInfo.duration && ['-to', options.end.toString()],
-      ['-an'],
-      ['-vf', `${vf.join(',')}`],
-      ['-vcodec', 'ffv1'],
-      ['-y', stage1Filename]
-    ].filter(Boolean) as string[][]
-
-    let currentStage1Hash = stage1Args.map(a => a.join('/')).join('/')
-    if (currentStage1Hash === prevMediumHash) {
-      console.log('skip stage1')
-    } else {
-      prevMediumHash = currentStage1Hash
-      console.log('stage1 args = ', stage1Args)
-      const stage1Out = await ffmpeg.exec(['-i', inputFilename].concat(...stage1Args))
-      console.log('stage1 exit code = ' + stage1Out)
+    // const stage1Filename = 'medium.mov'
+    // const stage1Args = [
+    //   options.start > 0 && ['-ss', options.start.toString()],
+    //   options.end < store.fileInfo.duration && ['-to', options.end.toString()],
+    //   ['-an'],
+    //   ['-vf', `${vf.join(',')}`],
+    //   ['-vcodec', 'ffv1'],
+    //   ['-y', stage1Filename]
+    // ].filter(Boolean) as string[][]
+
+    // let currentStage1Hash = stage1Args.map(a => a.join('/')).join('/')
+    // if (currentStage1Hash === prevMediumHash) {
+    //   console.log('skip stage1')
+    // } else {
+    //   prevMediumHash = currentStage1Hash
+    //   console.log('stage1 args = ', stage1Args)
+    //   const stage1Out = await ffmpeg.exec(['-i', inputFilename].concat(...stage1Args))
+    //   console.log('stage1 exit code = ' + stage1Out)
+    // }
+
+    // use WebCodec to decode file, which is much faster!
+    const stage1Filename = 'medium.raw'
+    const stage1DecodeArgs: string[] = []
+    {
+      const { width, height, frameCount, combined } = await grabFramesAndCombine()
+
+      setProgress('Sending to FFMpeg')
+      setPercentage(-1)
+      await ffmpeg.writeFile(stage1Filename, combined)
+      stage1DecodeArgs.push(
+        '-f', 'rawvideo',
+        '-pix_fmt', 'rgba',
+        '-video_size', `${width}x${height}`,
+        '-framerate', String(Math.round(frameCount / outputTimeRange().duration)),
+      )
     }
 
     //----------------------------------------------
     // stage2
+    setProgress('Encoding GIF with FFMpeg')
+    setPercentage(-1)
     const stage2Out = await ffmpeg.exec([
+      ...stage1DecodeArgs,
       '-i', stage1Filename,
-      '-vf', `fps=${options.framerate || 12},split[a][b];[a]palettegen=max_colors=${options.maxColors}[pal];[b][pal]paletteuse=dither=bayer`,
+      '-vf', `split[a][b];[a]palettegen=max_colors=${options.maxColors}[pal];[b][pal]paletteuse=dither=bayer`,
       '-y', outputFilename
     ])
     console.log('stage2 exit code = ' + stage2Out)
@@ -194,36 +153,154 @@ export function ProcessingBar() {
     updateStore('outputFileContent', outputData)
   }
 
+  async function grabFramesAndCombine() {
+    const frames = await grabFrames()
+
+    setProgress('Packing frames');
+    setPercentage(-1);
+    await delay(0);
+
+    const { width, height } = frames[0].bitmap;
+
+    const offCanvas = new OffscreenCanvas(width, height);
+    const ctx = offCanvas.getContext('2d', { willReadFrequently: true })!;
+
+    const frameDataSize = width * height * 4;
+    const buffer = new ArrayBuffer(frameDataSize * frames.length);
+    const combined = new Uint8Array(buffer);
+
+    for (let i = 0; i < frames.length; i++) {
+      const frame = frames[i];
+      ctx.clearRect(0, 0, width, height);
+      ctx.drawImage(frame.bitmap, 0, 0);
+      combined.set(ctx.getImageData(0, 0, width, height).data, i * frameDataSize);
+      frame.bitmap.close();
+    }
+
+    return { combined, width, height, frameCount: frames.length, frameDataSize };
+  }
+
+  async function grabFrames() {
+    const { sourceStart, sourceEnd, frameCount } = outputTimeRange()
+    const { file } = store
+    if (!file) throw new Error('no file')
+
+    setProgress('Grabbing Frames')
+    setPercentage(0)
+
+    const frames = await grabFramesWithMP4Box({
+      file,
+      resizeWidth: outputSize().width,
+      resizeHeight: outputSize().height,
+      frameTimestamps: Array.from({ length: frameCount }, (_, i) => sourceStart + i * (sourceEnd - sourceStart) / frameCount),
+      reportProgress(grabbedCount, frame) {
+        setPercentage(grabbedCount / frameCount * 100)
+
+        // debugging
+        // const can = document.createElement('canvas')
+        // can.width = frame.bitmap.width
+        // can.height = frame.bitmap.height
+        // document.body.appendChild(can)
+        // const ctx = can.getContext('2d')!
+        // ctx.drawImage(frame.bitmap, 0, 0)
+
+        return isRunning()
+      },
+    })
+
+    if (!isRunning()) throw new Error('Progress aborted')
+    return frames
+  }
+
   function startProcess() {
     setIsRunning(true)
-    processWithGIFjs().catch(error => {
+    setErrorMessage('')
+    console.time('process')
+
+    const run = isUseFFMpeg() ? processWithFFMpeg : processWithGIFjs;
+    run().catch(error => {
       console.error(error)
+      setErrorMessage(String(error))
     }).then(() => {
+      console.timeEnd('process')
       setIsRunning(false)
     })
   }
 
   return <div class="relative my-10 bg-white">
-    {/* <Show when={!store.ffmpeg}>
-      <i class="i-mdi-loading animate-spin"></i> ffmpeg is loading...
-    </Show> */}
-
     {
       !isRunning()
-        ? <button class="startButton" onClick={startProcess}> <i class="i-mdi-play"></i> Convert to GIF</button>
+        ? <button class="startButton" disabled={!store.ffmpeg && isUseFFMpeg()} onClick={startProcess}> <i class="i-mdi-play"></i> Convert to GIF</button>
         : <button class="stopButton" onClick={() => setIsRunning(false)}>Stop</button>
     }
 
+    {/* engine */}
+    <div class="text-center my-2 mb-4 text-gray text-xs flex flex-col gap-2">
+      <div>
+        {
+          isUseFFMpeg()
+            ? <><i class="i-mdi-application-cog"></i> encode with ffmpeg</>
+            : <><i class="i-mdi-google-chrome"></i> encode with JavaScript</>
+        }
+
+        <a
+          class="ml-2 text-inherit"
+          classList={{ 'pointer-events-none op-60': isRunning() }}
+          href="#"
+          onClick={(e) => { e.preventDefault(); setIsUseFFMpeg(!isUseFFMpeg()) }}
+        >
+          (Change)
+        </a>
+      </div>
+
+      <Show when={!store.ffmpeg && isUseFFMpeg()}>
+        <div class="text-blue">
+          <i class="i-mdi-loading animate-spin"></i> ffmpeg is loading...
+          <a class="ml-2 text-inherit" href="#" onClick={(e) => { e.preventDefault(); setIsUseFFMpeg(false) }}>Use other encoder</a>
+        </div>
+      </Show>
+    </div>
+
+    <WarningMsg
+      when={outputSize().width > 600}
+      message={`width ${outputSize().width} is kinda large.`}
+      fix={() => updateStore('options', 'width', 600)}
+    />
+    <WarningMsg
+      when={outputSize().height > 600}
+      message={`height ${outputSize().height} is kinda large.`}
+      fix={() => updateStore('options', 'height', 600)}
+    />
+    <WarningMsg
+      when={outputTimeRange().frameCount > 200}
+      message="too many frames yield large GIF. please trim the video, or lowing framerate."
+    />
+
+    <Show when={errorMessage()}>
+      <div class="text-center my-4 text-red-7">
+        <i class="i-mdi-alert-circle"></i> {errorMessage()}
+      </div>
+    </Show>
+
     <Show when={isRunning()}>
-      <div class="text-center my-2">
+      <div class="text-center my-4">
         <i class="i-mdi-loading animate-spin mr-1"></i>
         {progress()}
       </div>
       <Show when={percentage() >= 0}>
         <div class="relative max-w-lg h-2 bg-gray-3 mx-auto rounded overflow-hidden">
-          <div class="h-full bg-blue-500 transition" style={{ width: `${percentage()}%` }}></div>
+          <div class="h-full bg-blue-5 transition" style={{ width: `${percentage()}%` }}></div>
         </div>
       </Show>
     </Show>
   </div>
+}
+
+function WarningMsg(props: { message: string, when: any, fix?: () => void }) {
+  return <Show when={props.when}>
+    <div class="text-left text-gray text-sm">
+      <i class="i-mdi-info-circle"></i> {props.message}
+      {props.fix && <a class="ml-2 text-blue" href="#" onClick={e => { e.preventDefault(); props.fix!() }}>(Fix It)</a>}
+    </div>
+  </Show>
 }
\ No newline at end of file
diff --git a/src/convertor/frameGrabber.ts b/src/convertor/frameGrabber.ts
new file mode 100644
index 0000000..123c332
--- /dev/null
+++ b/src/convertor/frameGrabber.ts
@@ -0,0 +1,168 @@
+import { MP4ArrayBuffer } from 'mp4box';
+import { makePromise } from 'yon-utils';
+
+interface GrabFrameOptions {
+  file: File;
+  resizeWidth: number;
+  resizeHeight: number;
+  frameTimestamps: number[]; // in sec
+
+  reportProgress: (grabbedCount: number, newestFrame: GrabbedFrame) => boolean; // return false to stop grabbing
+}
+
+interface GrabbedFrame {
+  bitmap: ImageBitmap;
+  time: number;
+}
+
+export async function grabFramesWithMP4Box({ file, resizeWidth, resizeHeight, frameTimestamps, reportProgress }: GrabFrameOptions) {
+  const endTS = frameTimestamps[frameTimestamps.length - 1] * 1000000
+  const outputFrames = [] as GrabbedFrame[]
+  const finishedPromise = makePromise<void>()
+  let stopped = false
+
+  const MP4Box = await import('mp4box')
+  const DataStream = MP4Box.DataStream;
+  const mp4boxInputFile = MP4Box.createFile();
+
+  mp4boxInputFile.onError = error => {
+    console.error('MP4Box Error', error)
+    finishedPromise.reject(error)
+  };
+
+  const mp4InfoPromise = new Promise<any>((resolve, reject) => {
+    mp4boxInputFile.onReady = resolve
+    file.arrayBuffer().then((b) => {
+      const buffer = b as MP4ArrayBuffer
+      buffer.fileStart = 0
+      mp4boxInputFile.appendBuffer(buffer)
+    }).catch(reject)
+  });
+
+  // reference: https://github.com/vjeux/mp4-h264-re-encode/tree/main
+  const decoder = new VideoDecoder({
+    async output(inputFrame) {
+      // use "while" to duplicate frame, if necessary
+      while (
+        !stopped &&
+        outputFrames.length < frameTimestamps.length &&
+        inputFrame.timestamp >= frameTimestamps[outputFrames.length] * 1e6
+      ) {
+        const bitmap = await createImageBitmap(inputFrame, { resizeWidth, resizeHeight });
+        outputFrames.push({ bitmap, time: inputFrame.timestamp / 1e6 });
+
+        if (!reportProgress(outputFrames.length, outputFrames.at(-1)!)) {
+          stopped = true;
+          finishedPromise.resolve();
+        }
+      }
+
+      if (outputFrames.length >= frameTimestamps.length) {
+        finishedPromise.resolve();
+      }
+
+      inputFrame.close();
+    },
+    error(error) {
+      console.error('Decoder Error', error);
+      finishedPromise.reject(error)
+    },
+  });
+
+  // get video stream descriptor and give to decoder
+  const info = await mp4InfoPromise;
+  const track = info.videoTracks[0];
+  {
+    let description: Uint8Array | undefined;
+    const trak = mp4boxInputFile.getTrackById(track.id);
+    for (const entry of trak.mdia.minf.stbl.stsd.entries) {
+      if (entry.avcC || entry.hvcC) {
+        const stream = new DataStream(undefined, 0, DataStream.BIG_ENDIAN);
+        if (entry.avcC) entry.avcC.write(stream);
+        else entry.hvcC.write(stream);
+
+        description = new Uint8Array(stream.buffer, 8); // Remove the box header.
+        break;
+      }
+    }
+
+    if (!description) throw new Error('no video description')
+
+    decoder.configure({
+      codec: track.codec,
+      codedWidth: track.track_width,
+      codedHeight: track.track_height,
+      hardwareAcceleration: 'prefer-hardware',
+      description,
+    });
+  }
+
+  // start extracting packages and decoding
+  mp4boxInputFile.onSamples = async (track_id: any, ref: any, samples: any[]) => {
+    for (const sample of samples) {
+      const timestamp = sample.cts * 1000000 / sample.timescale;
+      if (timestamp > endTS) break;
+      if (stopped) break;
+
+      // sampleDurations.push(sample.duration * 1_000_000 / sample.timescale);
+      decoder.decode(new EncodedVideoChunk({
+        type: sample.is_sync ? "key" : "delta",
+        timestamp: timestamp,
+        duration: sample.duration * 1_000_000 / sample.timescale,
+        data: sample.data
+      }));
+    }
+
+    await decoder.flush();
+    decoder.close();
+
+    finishedPromise.resolve(); // TODO: somehow not all frame are grabbed, but the progress not exit in Decoder
+  };
+  mp4boxInputFile.setExtractionOptions(track.id, null, { nbSamples: Infinity });
+  mp4boxInputFile.start();
+
+  await finishedPromise
+  return outputFrames
+}
+
+export async function grabFramesWithVideoTag({ file, resizeWidth, resizeHeight, frameTimestamps, reportProgress }: GrabFrameOptions) {
+  const fileURL = URL.createObjectURL(file)
+  const start = frameTimestamps[0]
+  const outputFrames = [] as GrabbedFrame[]
+
+  try {
+    const video = document.createElement('video')
+    const videoReady = new Promise(r => video.onloadedmetadata = r)
+    video.muted = true
+    video.src = fileURL
+
+    await videoReady
+    const videoPlaying = new Promise(r => video.onplaying = r)
+    video.currentTime = start
+    video.play()
+    await videoPlaying
+    video.pause()
+    video.currentTime = start
+    video.onplaying = null
+
+    // grab frames
+
+    const waitForFrameReady = () => new Promise(r => video.onseeked = r)
+    for (let i = 0; i < frameTimestamps.length; i++) {
+      const frameTime = frameTimestamps[i]
+      const seekEnd = waitForFrameReady()
+      video.currentTime = frameTime
+      await seekEnd
+
+      outputFrames.push({
+        bitmap: await createImageBitmap(video, { resizeWidth, resizeHeight }),
+        time: frameTime
+      })
+      if (!reportProgress(i + 1, outputFrames.at(-1)!)) break
+    }
+
+    return outputFrames
+  } finally {
+    URL.revokeObjectURL(fileURL)
+  }
+}
diff --git a/src/ffmpeg.ts b/src/ffmpeg.ts
index 3dedc13..6bb54f9 100644
--- a/src/ffmpeg.ts
+++ b/src/ffmpeg.ts
@@ -9,7 +9,7 @@ export async function initFFmpeg() {
   const baseURL = 'https://unpkg.com/@ffmpeg/core@' + CORE_VERSION + '/dist/esm'
 
   // Load the WASM file and coreURL
-  const [coreURL, wasmURL,classWorkerURL] = await Promise.all([
+  const [coreURL, wasmURL, classWorkerURL] = await Promise.all([
     toBlobURL(`${baseURL}/ffmpeg-core.js`, 'text/javascript'),
     toBlobURL(`${baseURL}/ffmpeg-core.wasm`, 'application/wasm'),
     workerURL
diff --git a/src/index.scss b/src/index.scss
index 82ca693..916f11b 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -42,6 +42,8 @@ textarea {
 .startButton {
   @apply block cursor-pointer mx-auto px-6 py-3;
   @apply bg-blue b-0 rounded-xl text-xl text-white;
+
+  @apply disabled:bg-gray disabled:cursor-default;
 }
 
 .stopButton {
diff --git a/src/index.tsx b/src/index.tsx
index 44ef751..72fad4e 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -4,7 +4,7 @@ import { render } from 'solid-js/web';
 import 'virtual:uno.css'
 import './index.scss';
 import App from './App';
-// import { initFFmpeg } from './ffmpeg';
+import { initFFmpeg } from './ffmpeg';
 
 const root = document.getElementById('root');
 
@@ -14,5 +14,5 @@ if (import.meta.env.DEV && !(root instanceof HTMLElement)) {
   );
 }
 
-// initFFmpeg()
+initFFmpeg()
 render(() => <App />, root!);
diff --git a/src/store.tsx b/src/store.tsx
index 17072c6..63153e7 100644
--- a/src/store.tsx
+++ b/src/store.tsx
@@ -42,6 +42,28 @@ export const outputSize = createRoot(() => {
   })
 })
 
+export const outputTimeRange = createRoot(() => {
+  return createMemo(() => {
+    const { start: sourceStart, end: sourceEnd, speed, framerate } = store.options;
+
+    const duration = (sourceEnd - sourceStart) / speed
+    const frameCount = Math.ceil(duration * framerate);
+
+    const outputFramePresentTimeMS = Array.from({ length: frameCount }, (_, i) => Math.round(i / frameCount * duration * 1e3))
+    const outputFrameDurationMS = outputFramePresentTimeMS.map((t, i) => (i === frameCount - 1 ? duration : outputFramePresentTimeMS[i + 1]) - t)
+
+    return {
+      sourceStart,
+      sourceEnd,
+
+      duration,
+      frameCount,
+      outputFramePresentTimeMS,
+      outputFrameDurationMS,
+    }
+  })
+})
+
 createRoot(() => {
   createEffect(() => {
     updateStore('fileInfo', { url: '' })
diff --git a/src/types/mp4box.d.ts b/src/types/mp4box.d.ts
new file mode 100644
index 0000000..cb39ae7
--- /dev/null
+++ b/src/types/mp4box.d.ts
@@ -0,0 +1,88 @@
+declare module "mp4box" {
+
+  interface MP4MediaTrack {
+    id: number;
+    created: Date;
+    modified: Date;
+    movie_duration: number;
+    layer: number;
+    alternate_group: number;
+    volume: number;
+    track_width: number;
+    track_height: number;
+    timescale: number;
+    duration: number;
+    bitrate: number;
+    codec: string;
+    language: string;
+    nb_samples: number;
+  }
+
+  interface MP4VideoData {
+    width: number;
+    height: number;
+  }
+
+  interface MP4VideoTrack extends MP4MediaTrack {
+    video: MP4VideoData;
+  }
+
+  interface MP4AudioData {
+    sample_rate: number;
+    channel_count: number;
+    sample_size: number;
+  }
+
+  interface MP4AudioTrack extends MP4MediaTrack {
+    audio: MP4AudioData;
+  }
+
+  type MP4Track = MP4VideoTrack | MP4AudioTrack;
+
+  interface MP4Info {
+    duration: number;
+    timescale: number;
+    fragment_duration: number;
+    isFragmented: boolean;
+    isProgressive: boolean;
+    hasIOD: boolean;
+    brands: string[];
+    created: Date;
+    modified: Date;
+    tracks: MP4Track[];
+  }
+
+  export type MP4ArrayBuffer = ArrayBuffer & { fileStart: number };
+
+  export interface MP4File {
+    [x: string]: any;
+
+    onMoovStart?: () => void;
+    onReady?: (info: MP4Info) => void;
+    onError?: (e: string) => void;
+
+    appendBuffer(data: MP4ArrayBuffer): number;
+    start(): void;
+    stop(): void;
+    flush(): void;
+
+  }
+
+  export function createFile(): MP4File;
+  export class DataStream {
+    static BIG_ENDIAN: false
+    static LITTLE_ENDIAN: true
+    constructor(
+      arrayBuffer?:
+        | ArrayBuffer
+        | { buffer: ArrayBuffer; byteOffset: number; byteLength: number },
+      byteOffset?: number,
+      endian?: boolean
+    )
+
+    endianness: boolean
+    buffer: ArrayBuffer
+  }
+
+  export { };
+}
\ No newline at end of file