create-anima 0.1.0 → 0.1.2

package/dist/index.js

@@ -115,7 +115,7 @@ export default function App() {
       </div>
 
       <div className="flex-1 overflow-hidden">
-        <AnimaPlayer animation={animation} controls autoPlay />
+        <AnimaPlayer animation={animation} controls autoPlay style={{ height: '100%' }} />
       </div>
 
       <RenderDialog
@@ -127,7 +127,7 @@ export default function App() {
   );
 }
 `,
-    'src/animation.ts': () => `import { defineAnimation, easeOut, easeBack, Screen } from '@it-compiles/anima';
+    'src/animation.ts': () => `import { defineAnimation, easeOut, overShoot, Screen } from '@it-compiles/anima';
 
 export default defineAnimation((scene) => {
   // Set background
@@ -137,37 +137,46 @@ export default defineAnimation((scene) => {
   const title = scene.text('Hello, Anima!', {
     size: 72,
     color: '#ffffff',
-    font: 'system-ui',
+    font: '72px system-ui',
   });
 
   const subtitle = scene.text('Edit src/animation.ts to get started', {
     size: 24,
     color: '#888888',
-    font: 'system-ui',
+    font: '24px system-ui',
   });
 
   // Build timeline
   return (t) => {
-    // Animate title
-    t.tween(800, easeBack, (ctx, u) => {
-      ctx.pin(title, 'center').to(Screen.at(0.5, 0.4), u);
-      ctx.scale(title).from(0).to(1, u);
-      ctx.opacity(title).from(0).to(1, u);
-    });
+    t.seq(() => {
+      // Set initial state - everything invisible and scaled down
+      t.instant((ctx) => {
+        ctx.opacity(title).to(0, 1);
+        ctx.opacity(subtitle).to(0, 1);
+        ctx.scale(title).to(0.5, 1);
+      });
 
-    // Animate subtitle after title
-    t.tween(600, easeOut, (ctx, u) => {
-      ctx.pin(subtitle, 'center').to(Screen.at(0.5, 0.55), u);
-      ctx.opacity(subtitle).from(0).to(1, u);
-    });
+      // Animate title - fade in and scale up
+      t.tween(800, overShoot, (ctx, u) => {
+        ctx.pin(title, 'center').to([Screen.centerX(), 300], u);
+        ctx.scale(title).to(1, u);
+        ctx.opacity(title).to(1, u);
+      });
+
+      // Animate subtitle - fade in below title
+      t.tween(600, easeOut, (ctx, u) => {
+        ctx.pin(subtitle, 'center').to([Screen.centerX(), 400], u);
+        ctx.opacity(subtitle).to(1, u);
+      });
 
-    // Hold for a moment
-    t.wait(1000);
+      // Hold for a moment
+      t.wait(1000);
 
-    // Fade out
-    t.tween(500, easeOut, (ctx, u) => {
-      ctx.opacity(title).to(0, u);
-      ctx.opacity(subtitle).to(0, u);
+      // Fade out both
+      t.tween(500, easeOut, (ctx, u) => {
+        ctx.opacity(title).to(0, u);
+        ctx.opacity(subtitle).to(0, u);
+      });
     });
   };
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-anima",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "type": "module",
   "bin": {
     "create-anima": "./dist/index.js"