diff --git a/packages/cli/package.json b/packages/cli/package.json
index 8c2a879..ce3f73b 100644
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@open-motion/cli",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "bin": {
     "open-motion": "dist/bin.js"
   },
diff --git a/packages/cli/src/index.ts b/packages/cli/src/index.ts
index d2bf99a..a4206ab 100644
--- a/packages/cli/src/index.ts
+++ b/packages/cli/src/index.ts
@@ -75,23 +75,43 @@ export default defineConfig({
     'src/main.tsx': `import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { App } from './App.tsx';
+import { CompositionProvider, Composition, Player } from '@open-motion/core';
+
+const Root = () => {
+  const config = { width: 1280, height: 720, fps: 30, durationInFrames: 60 };
+  const isRendering = typeof (window as any).__OPEN_MOTION_FRAME__ === 'number';
+
+  if (isRendering) {
+    return (
+      <CompositionProvider config={config} frame={(window as any).__OPEN_MOTION_FRAME__}>
+        <App />
+      </CompositionProvider>
+    );
+  }
+
+  return (
+    <div style={{ padding: '20px' }}>
+      <Player component={App} config={config} />
+      <div style={{ display: 'none' }}>
+        <Composition id="main" component={App} {...config} />
+      </div>
+    </div>
+  );
+};
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <App />
+    <Root />
   </React.StrictMode>
 );`,
     'src/App.tsx': `import React from 'react';
 import {
-  CompositionProvider,
   useCurrentFrame,
   useVideoConfig,
-  interpolate,
-  Composition,
-  Player
+  interpolate
 } from '@open-motion/core';
 
-const MyVideo = () => {
+export const App = () => {
   const frame = useCurrentFrame();
   const { width, height } = useVideoConfig();
   const opacity = interpolate(frame, [0, 30], [0, 1]);
@@ -111,28 +131,6 @@ const MyVideo = () => {
       Hello OpenMotion
     </div>
   );
-};
-
-export const App = () => {
-  const config = { width: 1280, height: 720, fps: 30, durationInFrames: 60 };
-  const isRendering = typeof (window as any).__OPEN_MOTION_FRAME__ === 'number';
-
-  if (isRendering) {
-    return (
-      <CompositionProvider config={config} frame={(window as any).__OPEN_MOTION_FRAME__}>
-        <MyVideo />
-      </CompositionProvider>
-    );
-  }
-
-  return (
-    <div style={{ padding: '20px' }}>
-      <Player component={MyVideo} config={config} />
-      <div style={{ display: 'none' }}>
-        <Composition id="main" component={MyVideo} {...config} />
-      </div>
-    </div>
-  );
 };`
   };
 
diff --git a/packages/core/package.json b/packages/core/package.json
index 6cd7375..29ec857 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@open-motion/core",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "license": "MIT",
diff --git a/packages/encoder/package.json b/packages/encoder/package.json
index 3c6ce4e..78a42da 100644
--- a/packages/encoder/package.json
+++ b/packages/encoder/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@open-motion/encoder",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "license": "MIT",
diff --git a/packages/renderer/package.json b/packages/renderer/package.json
index 1ab2da2..14fa24d 100644
--- a/packages/renderer/package.json
+++ b/packages/renderer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@open-motion/renderer",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "license": "MIT",