@imgly/codesign-mcp 0.1.5 → 0.1.7

package/assets/docs/guide/animation/create.md

@@ -1,4 +1,4 @@
-> This is one page of the CE.SDK Vanilla JS/TS documentation. For a complete overview, see the [Vanilla JS/TS Documentation Index](https://img.ly/docs/cesdk/js.md). For all docs in one file, see [llms-full.txt](./llms-full.txt.md).
+> This is one page of the CE.SDK Node.js documentation. For a complete overview, see the [Node.js Documentation Index](https://img.ly/docs/cesdk/node.md). For all docs in one file, see [llms-full.txt](./llms-full.txt.md).
 
 **Navigation:** [Guides](./guides.md) > [Animation](./animation.md) > [Create Animations](./animation/create.md)
 
@@ -6,43 +6,23 @@
 
 Add motion to design elements by creating entrance, exit, and loop animations using CE.SDK's animation system.
 
-![Create Animations example showing animated blocks with various animation types](https://img.ly/docs/cesdk/./assets/browser.hero.webp)
-
 > **Reading time:** 10 minutes
 >
 > **Resources:**
 >
 > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip)
-> - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-animation-create-browser)
-> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-animation-create-browser)
-> - [Live demo](https://img.ly/docs/cesdk/examples/guides-animation-create-browser/)
+>
+> - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-animation-create-server-js)
+>
+> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-animation-create-server-js)
 
-CE.SDK provides a unified animation system for adding motion to design elements. Animations are created as separate block instances and attached to target blocks using type-specific methods. You can apply entrance animations (how blocks appear), exit animations (how blocks leave), and loop animations (continuous motion while visible). Text blocks support additional properties for word-by-word or character-by-character reveals.
+<NodejsVideoExportNotice {...props} />
 
-```typescript file=@cesdk_web_examples/guides-animation-create-browser/browser.ts reference-only
-import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js';
-
-import {
-  BlurAssetSource,
-  CaptionPresetsAssetSource,
-  ColorPaletteAssetSource,
-  CropPresetsAssetSource,
-  DemoAssetSources,
-  EffectsAssetSource,
-  FiltersAssetSource,
-  PagePresetsAssetSource,
-  StickerAssetSource,
-  TextAssetSource,
-  TextComponentAssetSource,
-  TypefaceAssetSource,
-  UploadAssetSources,
-  VectorShapeAssetSource
-} from '@cesdk/cesdk-js/plugins';
-import { VideoEditorConfig } from './video-editor/plugin';
-import packageJson from './package.json';
+CE.SDK provides a unified animation system for adding motion to design elements. Animations are created as separate block instances and attached to target blocks using type-specific methods. You can apply entrance animations (how blocks appear), exit animations (how blocks leave), and loop animations (continuous motion while visible). Text blocks support additional properties for word-by-word or character-by-character reveals.
 
+```typescript file=@cesdk_web_examples/guides-animation-create-server-js/server-js.ts reference-only
 /**
- * CE.SDK Plugin: Create Animations Guide
+ * CE.SDK Server Guide: Create Animations
  *
  * Demonstrates animation features in CE.SDK:
  * - Creating entrance (In) animations
@@ -51,77 +31,32 @@ import packageJson from './package.json';
  * - Configuring duration and easing
  * - Text animations with writing styles
  * - Managing animation lifecycle
+ * - Saving the scene to a .scene file
  */
-class Example implements EditorPlugin {
-  name = packageJson.name;
+import CreativeEngine from '@cesdk/node';
+import { config } from 'dotenv';
+import { mkdirSync, writeFileSync } from 'fs';
 
-  version = packageJson.version;
+// Load environment variables from .env file
+config();
 
-  async initialize({ cesdk }: EditorPluginContext): Promise<void> {
-    if (!cesdk) {
-      throw new Error('CE.SDK instance is required for this plugin');
-    }
+async function main(): Promise<void> {
+  const engine = await CreativeEngine.init({
+    baseURL: process.env.IMGLY_LOCAL_ASSETS_URL
+    // license: process.env.CESDK_LICENSE
+  });
 
-    await cesdk.addPlugin(new VideoEditorConfig());
-
-    // Add asset source plugins
-    await cesdk.addPlugin(new BlurAssetSource());
-    await cesdk.addPlugin(new CaptionPresetsAssetSource());
-    await cesdk.addPlugin(new ColorPaletteAssetSource());
-    await cesdk.addPlugin(new CropPresetsAssetSource());
-    await cesdk.addPlugin(
-      new UploadAssetSources({
-        include: [
-          'ly.img.image.upload',
-          'ly.img.video.upload',
-          'ly.img.audio.upload'
-        ]
-      })
-    );
-    await cesdk.addPlugin(
-      new DemoAssetSources({
-        include: [
-          'ly.img.templates.video.*',
-          'ly.img.image.*',
-          'ly.img.audio.*',
-          'ly.img.video.*'
-        ]
-      })
-    );
-    await cesdk.addPlugin(new EffectsAssetSource());
-    await cesdk.addPlugin(new FiltersAssetSource());
-    await cesdk.addPlugin(
-      new PagePresetsAssetSource({
-        include: [
-          'ly.img.page.presets.instagram.*',
-          'ly.img.page.presets.facebook.*',
-          'ly.img.page.presets.x.*',
-          'ly.img.page.presets.linkedin.*',
-          'ly.img.page.presets.pinterest.*',
-          'ly.img.page.presets.tiktok.*',
-          'ly.img.page.presets.youtube.*',
-          'ly.img.page.presets.video.*'
-        ]
-      })
-    );
-    await cesdk.addPlugin(new StickerAssetSource());
-    await cesdk.addPlugin(new TextAssetSource());
-    await cesdk.addPlugin(new TextComponentAssetSource());
-    await cesdk.addPlugin(new TypefaceAssetSource());
-    await cesdk.addPlugin(new VectorShapeAssetSource());
-
-    await cesdk.actions.run('scene.create', {
-      layout: 'DepthStack',
-      page: { width: 1920, height: 1080, unit: 'Pixel' }
-    });
-
-    const engine = cesdk.engine;
-    const pages = engine.block.findByType('page');
-    const page = pages[0];
+  try {
+    // Create a scene with a page
+    const scene = engine.scene.create('DepthStack');
+    const page = engine.block.create('page');
+    engine.block.appendChild(scene, page);
 
     // Set page dimensions and duration
-    const pageWidth = engine.block.getWidth(page);
-    const pageHeight = engine.block.getHeight(page);
+    const pageWidth = 1920;
+    const pageHeight = 1080;
+    engine.block.setWidth(page, pageWidth);
+    engine.block.setHeight(page, pageHeight);
     engine.block.setDuration(page, 5.0);
 
     // Create gradient background
@@ -132,7 +67,6 @@ class Example implements EditorPlugin {
         { color: { r: 0.1, g: 0.3, b: 0.6, a: 1.0 }, stop: 0.5 },
         { color: { r: 0.2, g: 0.1, b: 0.4, a: 1.0 }, stop: 1 }
       ]);
-      // Diagonal gradient from top-left to bottom-right
       engine.block.setFloat(
         gradientFill,
         'fill/gradient/linear/startPointX',
@@ -180,10 +114,17 @@ class Example implements EditorPlugin {
     engine.block.setPositionY(titleBlock, pageHeight * 0.25);
 
     // ===== IMG.LY Logo with pulsating loop animation =====
-    const logoBlock = await engine.block.addImage(
-      'https://img.ly/static/ubq_samples/imgly_logo.jpg',
-      { size: { width: 200, height: 200 } }
+    const logoBlock = engine.block.create('graphic');
+    engine.block.setShape(logoBlock, engine.block.createShape('rect'));
+    const logoFill = engine.block.createFill('image');
+    engine.block.setString(
+      logoFill,
+      'fill/image/imageFileURI',
+      'https://img.ly/static/ubq_samples/imgly_logo.jpg'
     );
+    engine.block.setFill(logoBlock, logoFill);
+    engine.block.setWidth(logoBlock, 200);
+    engine.block.setHeight(logoBlock, 200);
     engine.block.appendChild(page, logoBlock);
     engine.block.setDuration(logoBlock, 5.0);
     // Contain the image within the block frame
@@ -289,44 +230,51 @@ class Example implements EditorPlugin {
     const easingOptions = engine.block.getEnumValues('animationEasing');
     console.log('Available easing options:', easingOptions);
 
-    // Set initial playback time to show the scene after animations start
-    engine.block.setPlaybackTime(page, 2.0);
+    // Save the scene to a .scene file
+    mkdirSync('output', { recursive: true });
+    const sceneString = await engine.scene.saveToString();
+    writeFileSync('output/animated-scene.scene', sceneString);
+    console.log('Scene saved to output/animated-scene.scene');
+
+  } finally {
+    // Always dispose of the engine to free resources
+    engine.dispose();
   }
 }
 
-export default Example;
+main().catch(console.error);
 ```
 
 This guide covers how to create and configure animations programmatically, including entrance, exit, loop, and text animations with customizable timing and easing.
 
 ## Animation Fundamentals
 
-We first verify that a block supports animations before creating and attaching them. The basic pattern involves creating an animation instance with `createAnimation()`, then attaching it using the appropriate setter method.
+We first verify that a block supports animations before creating and attaching them. The basic pattern involves creating an animation instance with `engine.block.createAnimation()`, then attaching it using the appropriate setter method.
 
 ```typescript highlight-check-support
-const titleBlock = engine.block.create('text');
-engine.block.replaceText(titleBlock, 'Create Animations');
-engine.block.setTextFontSize(titleBlock, 120);
-engine.block.setTextColor(titleBlock, { r: 1.0, g: 1.0, b: 1.0, a: 1.0 });
-engine.block.setEnum(titleBlock, 'text/horizontalAlignment', 'Center');
-engine.block.setWidthMode(titleBlock, 'Auto');
-engine.block.setHeightMode(titleBlock, 'Auto');
-engine.block.appendChild(page, titleBlock);
-engine.block.setDuration(titleBlock, 5.0);
-
-// Check if block supports animations before applying
-if (engine.block.supportsAnimation(titleBlock)) {
-  // Create an entrance animation
-  const slideIn = engine.block.createAnimation('slide');
-  engine.block.setInAnimation(titleBlock, slideIn);
-  engine.block.setDuration(slideIn, 1.2);
-  engine.block.setFloat(
-    slideIn,
-    'animation/slide/direction',
-    (3 * Math.PI) / 2
-  );
-  engine.block.setEnum(slideIn, 'animationEasing', 'EaseOut');
-}
+    const titleBlock = engine.block.create('text');
+    engine.block.replaceText(titleBlock, 'Create Animations');
+    engine.block.setTextFontSize(titleBlock, 120);
+    engine.block.setTextColor(titleBlock, { r: 1.0, g: 1.0, b: 1.0, a: 1.0 });
+    engine.block.setEnum(titleBlock, 'text/horizontalAlignment', 'Center');
+    engine.block.setWidthMode(titleBlock, 'Auto');
+    engine.block.setHeightMode(titleBlock, 'Auto');
+    engine.block.appendChild(page, titleBlock);
+    engine.block.setDuration(titleBlock, 5.0);
+
+    // Check if block supports animations before applying
+    if (engine.block.supportsAnimation(titleBlock)) {
+      // Create an entrance animation
+      const slideIn = engine.block.createAnimation('slide');
+      engine.block.setInAnimation(titleBlock, slideIn);
+      engine.block.setDuration(slideIn, 1.2);
+      engine.block.setFloat(
+        slideIn,
+        'animation/slide/direction',
+        (3 * Math.PI) / 2
+      );
+      engine.block.setEnum(slideIn, 'animationEasing', 'EaseOut');
+    }
 ```
 
 Animation support is available for:
@@ -339,11 +287,11 @@ CE.SDK provides several animation presets:
 
 - **Entrance animations**: slide, fade, blur, zoom, pop, wipe, pan
 - **Exit animations**: same types as entrance
-- **Loop animations**: breathing_loop, spin_loop, fade_loop, pulsating_loop, jump_loop, squeeze_loop, sway_loop
+- **Loop animations**: breathing\_loop, spin\_loop, fade\_loop, pulsating\_loop, jump\_loop, squeeze\_loop, sway\_loop
 
 ## Entrance Animations
 
-Entrance animations define how blocks appear on screen. We create the animation with `createAnimation()`, attach it with `setInAnimation()`, and configure the duration with `setDuration()`.
+Entrance animations define how blocks appear on screen. We create the animation with `engine.block.createAnimation()`, attach it with `engine.block.setInAnimation()`, and configure the duration with `engine.block.setDuration()`.
 
 ```typescript highlight-entrance-animation
 // Add fade entrance for the logo
@@ -357,56 +305,63 @@ The `animationEasing` property controls the animation curve. Available options i
 
 ## Exit Animations
 
-Exit animations define how blocks leave the screen. We attach them with `setOutAnimation()`. CE.SDK manages timing automatically to prevent overlap between entrance and exit animations.
+Exit animations define how blocks leave the screen. We attach them with `engine.block.setOutAnimation()`. CE.SDK manages timing automatically to prevent overlap between entrance and exit animations.
 
 ```typescript highlight-exit-animation
-const footerBlock = engine.block.create('text');
-engine.block.replaceText(footerBlock, 'Powered by CE.SDK');
-engine.block.setTextFontSize(footerBlock, 32);
-engine.block.setTextColor(footerBlock, { r: 1.0, g: 1.0, b: 1.0, a: 0.7 });
-engine.block.setEnum(footerBlock, 'text/horizontalAlignment', 'Right');
-engine.block.setWidthMode(footerBlock, 'Auto');
-engine.block.setHeightMode(footerBlock, 'Auto');
-engine.block.appendChild(page, footerBlock);
-
-// Footer appears at start and fades out at the end
-engine.block.setTimeOffset(footerBlock, 0);
-engine.block.setDuration(footerBlock, 5.0);
-
-// Create exit animation that plays at the end of the block's duration
-const fadeOut = engine.block.createAnimation('fade');
-engine.block.setOutAnimation(footerBlock, fadeOut);
-engine.block.setDuration(fadeOut, 1.0);
-engine.block.setEnum(fadeOut, 'animationEasing', 'EaseIn');
+    const footerBlock = engine.block.create('text');
+    engine.block.replaceText(footerBlock, 'Powered by CE.SDK');
+    engine.block.setTextFontSize(footerBlock, 32);
+    engine.block.setTextColor(footerBlock, { r: 1.0, g: 1.0, b: 1.0, a: 0.7 });
+    engine.block.setEnum(footerBlock, 'text/horizontalAlignment', 'Right');
+    engine.block.setWidthMode(footerBlock, 'Auto');
+    engine.block.setHeightMode(footerBlock, 'Auto');
+    engine.block.appendChild(page, footerBlock);
+
+    // Footer appears at start and fades out at the end
+    engine.block.setTimeOffset(footerBlock, 0);
+    engine.block.setDuration(footerBlock, 5.0);
+
+    // Create exit animation that plays at the end of the block's duration
+    const fadeOut = engine.block.createAnimation('fade');
+    engine.block.setOutAnimation(footerBlock, fadeOut);
+    engine.block.setDuration(fadeOut, 1.0);
+    engine.block.setEnum(fadeOut, 'animationEasing', 'EaseIn');
 ```
 
 When a block has both entrance and exit animations, CE.SDK adjusts their timing based on the block's duration in the composition.
 
 ## Loop Animations
 
-Loop animations run continuously while the block is visible. We use animation types ending in `_loop` and attach them with `setLoopAnimation()`.
+Loop animations run continuously while the block is visible. We use animation types ending in `_loop` and attach them with `engine.block.setLoopAnimation()`.
 
 ```typescript highlight-loop-animation
-const logoBlock = await engine.block.addImage(
-  'https://img.ly/static/ubq_samples/imgly_logo.jpg',
-  { size: { width: 200, height: 200 } }
-);
-engine.block.appendChild(page, logoBlock);
-engine.block.setDuration(logoBlock, 5.0);
-// Contain the image within the block frame
-engine.block.setEnum(logoBlock, 'contentFill/mode', 'Contain');
-
-// Create a pulsating loop animation
-const pulsating = engine.block.createAnimation('pulsating_loop');
-engine.block.setLoopAnimation(logoBlock, pulsating);
-engine.block.setDuration(pulsating, 1.5);
+    const logoBlock = engine.block.create('graphic');
+    engine.block.setShape(logoBlock, engine.block.createShape('rect'));
+    const logoFill = engine.block.createFill('image');
+    engine.block.setString(
+      logoFill,
+      'fill/image/imageFileURI',
+      'https://img.ly/static/ubq_samples/imgly_logo.jpg'
+    );
+    engine.block.setFill(logoBlock, logoFill);
+    engine.block.setWidth(logoBlock, 200);
+    engine.block.setHeight(logoBlock, 200);
+    engine.block.appendChild(page, logoBlock);
+    engine.block.setDuration(logoBlock, 5.0);
+    // Contain the image within the block frame
+    engine.block.setEnum(logoBlock, 'contentFill/mode', 'Contain');
+
+    // Create a pulsating loop animation
+    const pulsating = engine.block.createAnimation('pulsating_loop');
+    engine.block.setLoopAnimation(logoBlock, pulsating);
+    engine.block.setDuration(pulsating, 1.5);
 ```
 
 Loop animations continue throughout the block's visible duration, creating continuous motion effects like breathing, spinning, or pulsating.
 
 ## Animation Properties
 
-Each animation type exposes configurable properties. We use `setFloat()` and `setEnum()` to adjust these properties, and `findAllProperties()` to discover available options.
+Each animation type exposes configurable properties. We use `engine.block.setFloat()` and `engine.block.setEnum()` to adjust these properties, and `engine.block.findAllProperties()` to discover available options.
 
 ```typescript highlight-animation-properties
 // Create slide animation and configure direction for title
@@ -428,30 +383,30 @@ Common configurable properties include:
 Text blocks support additional animation properties for granular control over how text appears. The `textAnimationWritingStyle` property controls whether the animation applies to the entire text, line by line, word by word, or character by character.
 
 ```typescript highlight-text-animation
-const subtitleBlock = engine.block.create('text');
-engine.block.replaceText(subtitleBlock, 'Entrance • Exit • Loop');
-engine.block.setTextFontSize(subtitleBlock, 48);
-engine.block.setTextColor(subtitleBlock, {
-  r: 0.9,
-  g: 0.9,
-  b: 1.0,
-  a: 0.9
-});
-engine.block.setEnum(subtitleBlock, 'text/horizontalAlignment', 'Center');
-engine.block.setWidthMode(subtitleBlock, 'Auto');
-engine.block.setHeightMode(subtitleBlock, 'Auto');
-engine.block.appendChild(page, subtitleBlock);
-engine.block.setDuration(subtitleBlock, 5.0);
-
-// Create text animation with word-by-word reveal
-const textAnim = engine.block.createAnimation('fade');
-engine.block.setInAnimation(subtitleBlock, textAnim);
-engine.block.setDuration(textAnim, 1.5);
-
-// Configure text animation writing style (Line, Word, or Character)
-engine.block.setEnum(textAnim, 'textAnimationWritingStyle', 'Word');
-// Set overlap for cascading effect (0 = sequential, 0-1 = cascading)
-engine.block.setFloat(textAnim, 'textAnimationOverlap', 0.3);
+    const subtitleBlock = engine.block.create('text');
+    engine.block.replaceText(subtitleBlock, 'Entrance • Exit • Loop');
+    engine.block.setTextFontSize(subtitleBlock, 48);
+    engine.block.setTextColor(subtitleBlock, {
+      r: 0.9,
+      g: 0.9,
+      b: 1.0,
+      a: 0.9
+    });
+    engine.block.setEnum(subtitleBlock, 'text/horizontalAlignment', 'Center');
+    engine.block.setWidthMode(subtitleBlock, 'Auto');
+    engine.block.setHeightMode(subtitleBlock, 'Auto');
+    engine.block.appendChild(page, subtitleBlock);
+    engine.block.setDuration(subtitleBlock, 5.0);
+
+    // Create text animation with word-by-word reveal
+    const textAnim = engine.block.createAnimation('fade');
+    engine.block.setInAnimation(subtitleBlock, textAnim);
+    engine.block.setDuration(textAnim, 1.5);
+
+    // Configure text animation writing style (Line, Word, or Character)
+    engine.block.setEnum(textAnim, 'textAnimationWritingStyle', 'Word');
+    // Set overlap for cascading effect (0 = sequential, 0-1 = cascading)
+    engine.block.setFloat(textAnim, 'textAnimationOverlap', 0.3);
 ```
 
 Writing style options:
@@ -464,35 +419,49 @@ The `textAnimationOverlap` property (0 to 1) controls the cascading effect. A va
 
 ## Managing Animation Lifecycle
 
-We can retrieve current animations using `getInAnimation()`, `getOutAnimation()`, and `getLoopAnimation()`. A return value of 0 indicates no animation is attached.
+We can retrieve current animations using `engine.block.getInAnimation()`, `engine.block.getOutAnimation()`, and `engine.block.getLoopAnimation()`. A return value of 0 indicates no animation is attached.
 
 ```typescript highlight-manage-lifecycle
-// Example: Retrieve animations to verify they're attached
-const currentTitleIn = engine.block.getInAnimation(titleBlock);
-const currentLogoLoop = engine.block.getLoopAnimation(logoBlock);
-const currentFooterOut = engine.block.getOutAnimation(footerBlock);
-
-console.log(
-  'Animation IDs - Title In:',
-  currentTitleIn,
-  'Logo Loop:',
-  currentLogoLoop,
-  'Footer Out:',
-  currentFooterOut
-);
-
-// Get available easing options
-const easingOptions = engine.block.getEnumValues('animationEasing');
-console.log('Available easing options:', easingOptions);
+    // Example: Retrieve animations to verify they're attached
+    const currentTitleIn = engine.block.getInAnimation(titleBlock);
+    const currentLogoLoop = engine.block.getLoopAnimation(logoBlock);
+    const currentFooterOut = engine.block.getOutAnimation(footerBlock);
+
+    console.log(
+      'Animation IDs - Title In:',
+      currentTitleIn,
+      'Logo Loop:',
+      currentLogoLoop,
+      'Footer Out:',
+      currentFooterOut
+    );
+
+    // Get available easing options
+    const easingOptions = engine.block.getEnumValues('animationEasing');
+    console.log('Available easing options:', easingOptions);
+```
+
+When replacing animations, destroy the old instance with `engine.block.destroy()` to prevent memory leaks.
+
+## Saving the Scene
+
+After creating animations, we save the scene to a `.scene` file for later use or distribution. The `engine.scene.saveToString()` method serializes the scene to a string that can be written to a file.
+
+```typescript highlight-export
+// Save the scene to a .scene file
+mkdirSync('output', { recursive: true });
+const sceneString = await engine.scene.saveToString();
+writeFileSync('output/animated-scene.scene', sceneString);
+console.log('Scene saved to output/animated-scene.scene');
 ```
 
-When replacing animations, destroy the old instance with `destroy()` to prevent memory leaks.
+The saved `.scene` file can be loaded later using `engine.scene.loadFromString()` or `engine.scene.loadFromURL()`.
 
 ## Troubleshooting
 
 ### Animation Not Playing
 
-Verify the block supports animations with `supportsAnimation()`. Check that playback is active on the page.
+Verify the block supports animations with `engine.block.supportsAnimation()`. Ensure playback is active on the page.
 
 ### Duration Issues
 
@@ -517,29 +486,25 @@ If entrance and exit animations seem to overlap incorrectly, CE.SDK automaticall
 
 ## API Reference
 
-| Method                                       | Description                               |
-| -------------------------------------------- | ----------------------------------------- |
-| `engine.block.createAnimation(type)`         | Create animation instance                 |
-| `engine.block.supportsAnimation(block)`      | Check if block supports animations        |
-| `engine.block.setInAnimation(block, anim)`   | Attach entrance animation                 |
-| `engine.block.setOutAnimation(block, anim)`  | Attach exit animation                     |
-| `engine.block.setLoopAnimation(block, anim)` | Attach loop animation                     |
-| `engine.block.getInAnimation(block)`         | Get entrance animation (0 if none)        |
-| `engine.block.getOutAnimation(block)`        | Get exit animation (0 if none)            |
-| `engine.block.getLoopAnimation(block)`       | Get loop animation (0 if none)            |
-| `engine.block.setDuration(anim, seconds)`    | Set animation duration                    |
-| `engine.block.setEnum(anim, prop, value)`    | Set enum property (easing, writing style) |
-| `engine.block.setFloat(anim, prop, value)`   | Set float property (direction, overlap)   |
-| `engine.block.findAllProperties(anim)`       | List available properties                 |
-| `engine.block.getEnumValues(prop)`           | Get enum options                          |
-| `engine.block.destroy(anim)`                 | Destroy animation instance                |
-
-## Next Steps
-
-- [Base Animations](./animation/create/base.md) — Detailed non-text block animations
-- [Text Animations](./animation/create/text.md) — Text-specific animation control
-- [Edit Animations](./animation/edit.md) — Modify existing animations
-- [Animation Overview](./animation/overview.md) — Animation concepts
+| Method                                        | Description                                |
+| --------------------------------------------- | ------------------------------------------ |
+| `engine.block.createAnimation(type)`          | Create animation instance                  |
+| `engine.block.supportsAnimation(block)`       | Check if block supports animations         |
+| `engine.block.setInAnimation(block, anim)`    | Attach entrance animation                  |
+| `engine.block.setOutAnimation(block, anim)`   | Attach exit animation                      |
+| `engine.block.setLoopAnimation(block, anim)`  | Attach loop animation                      |
+| `engine.block.getInAnimation(block)`          | Get entrance animation (0 if none)         |
+| `engine.block.getOutAnimation(block)`         | Get exit animation (0 if none)             |
+| `engine.block.getLoopAnimation(block)`        | Get loop animation (0 if none)             |
+| `engine.block.setDuration(anim, seconds)`     | Set animation duration                     |
+| `engine.block.setEnum(anim, prop, value)`     | Set enum property (easing, writing style)  |
+| `engine.block.setFloat(anim, prop, value)`    | Set float property (direction, overlap)    |
+| `engine.block.findAllProperties(anim)`        | List available properties                  |
+| `engine.block.getEnumValues(prop)`            | Get enum options                           |
+| `engine.block.destroy(anim)`                  | Destroy animation instance                 |
+| `engine.scene.saveToString()`                 | Save scene to string                       |
+
+
 
 ---
 
@@ -548,11 +513,12 @@ If entrance and exit animations seem to overlap incorrectly, CE.SDK automaticall
 - [Base Animations](./animation/create/base.md) - Apply movement, scaling, rotation, or opacity changes to elements using time-based keyframes.
 - [Text Animations](./animation/create/text.md) - Animate text elements with effects like fade, typewriter, and bounce for dynamic visual presentation.
 
+
 ---
 
 ## More Resources
 
-- **[Vanilla JS/TS Documentation Index](https://img.ly/docs/cesdk/js.md)** - Browse all Vanilla JS/TS documentation
+- **[Node.js Documentation Index](https://img.ly/docs/cesdk/node.md)** - Browse all Node.js documentation
 - **[Complete Documentation](./llms-full.txt.md)** - Full documentation in one file (for LLMs)
-- **[Web Documentation](./js.md)** - Interactive documentation with examples
-- **[Support](mailto:support@img.ly)** - Contact IMG.LY support
+- **[Web Documentation](./node.md)** - Interactive documentation with examples
+- **[Support](mailto:support@img.ly)** - Contact IMG.LY support