@imgly/codesign-mcp 0.1.5 → 0.1.6

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

@@ -1,161 +1,75 @@
-> 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) > [Base Animations](./animation/create/base.md)
 
 ---
 
-Add motion to design blocks with entrance, exit, and loop animations using
-CE.SDK's animation system.
-
-![Base animations demonstrating slide, fade, zoom, and loop effects on image blocks](https://img.ly/docs/cesdk/./assets/browser.hero.webp)
+Add motion to design blocks with entrance, exit, and loop animations using CE.SDK's animation system.
 
 > **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-base-browser)
-> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-animation-create-base-browser)
-> - [Live demo](https://img.ly/docs/cesdk/examples/guides-animation-create-base-browser/)
+>
+> - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-animation-create-base-server-js)
+>
+> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-animation-create-base-server-js)
 
 Base animations in CE.SDK add motion to design blocks through entrance (In), exit (Out), and loop animations. Animations are created as separate objects and attached to blocks, enabling reusable configurations across multiple elements.
 
-```typescript file=@cesdk_web_examples/guides-animation-create-base-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';
-import { calculateGridLayout } from './utils';
-
-/**
- * CE.SDK Plugin: Base Animations Guide
- *
- * Demonstrates animation features for design blocks in CE.SDK:
- * - Creating and applying entrance (In) animations
- * - Creating and applying exit (Out) animations
- * - Creating and applying loop animations
- * - Configuring duration and easing
- * - Managing animation lifecycle
- */
-class Example implements EditorPlugin {
-  name = packageJson.name;
-
-  version = packageJson.version;
-
-  async initialize({ cesdk }: EditorPluginContext): Promise<void> {
-    if (!cesdk) {
-      throw new Error('CE.SDK instance is required for this plugin');
-    }
+<NodejsVideoExportNotice {...props} />
 
-    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 scene = engine.scene.get();
-    const pages = engine.block.findByType('page');
-    const page = pages.length > 0 ? pages[0] : scene;
-
-    // Set white background color
-    if (!engine.block.supportsFill(page) || !engine.block.getFill(page)) {
-      const fill = engine.block.createFill('color');
-      engine.block.setFill(page, fill);
-    }
-    engine.block.setColor(engine.block.getFill(page), 'fill/color/value', {
-      r: 1.0,
-      g: 1.0,
-      b: 1.0,
-      a: 1.0
-    });
-
-    // Calculate grid layout for 6 demonstration blocks
-    const pageWidth = engine.block.getWidth(page);
-    const pageHeight = engine.block.getHeight(page);
-    const layout = calculateGridLayout(pageWidth, pageHeight, 6);
-    const { blockWidth, blockHeight, getPosition } = layout;
+```typescript file=@cesdk_web_examples/guides-animation-create-base-server-js/server-js.ts reference-only
+import CreativeEngine from '@cesdk/node';
+import { writeFileSync, mkdirSync, existsSync } from 'fs';
+import { config } from 'dotenv';
+
+// Load environment variables
+config();
+
+async function main() {
+  const engine = await CreativeEngine.init({
+    baseURL: process.env.IMGLY_LOCAL_ASSETS_URL
+    // license: process.env.CESDK_LICENSE
+  });
+
+  try {
+    // Create a scene with a page
+    const scene = engine.scene.create('DepthStack');
+    const page = engine.block.create('page');
+    engine.block.setWidth(page, 1920);
+    engine.block.setHeight(page, 1080);
+    engine.block.appendChild(scene, page);
 
     // Helper to create an image block
-    const createImageBlock = async (index: number, imageUrl: string) => {
+    const createImageBlock = (
+      x: number,
+      y: number,
+      width: number,
+      height: number,
+      imageUrl: string
+    ) => {
       const graphic = engine.block.create('graphic');
       const imageFill = engine.block.createFill('image');
       engine.block.setString(imageFill, 'fill/image/imageFileURI', imageUrl);
       engine.block.setFill(graphic, imageFill);
       engine.block.setShape(graphic, engine.block.createShape('rect'));
-      engine.block.setWidth(graphic, blockWidth);
-      engine.block.setHeight(graphic, blockHeight);
-      const pos = getPosition(index);
-      engine.block.setPositionX(graphic, pos.x);
-      engine.block.setPositionY(graphic, pos.y);
+      engine.block.setWidth(graphic, width);
+      engine.block.setHeight(graphic, height);
+      engine.block.setPositionX(graphic, x);
+      engine.block.setPositionY(graphic, y);
       engine.block.appendChild(page, graphic);
       return graphic;
     };
 
-    // Sample images for demonstration
+    // Layout configuration
+    const margin = 100;
+    const spacing = 50;
+    const blockWidth = 500;
+    const blockHeight = 350;
+
+    // Sample images
     const imageUrls = [
       'https://img.ly/static/ubq_samples/sample_1.jpg',
       'https://img.ly/static/ubq_samples/sample_2.jpg',
@@ -166,7 +80,13 @@ class Example implements EditorPlugin {
     ];
 
     // Block 1: Check animation support and create entrance animation
-    const block1 = await createImageBlock(0, imageUrls[0]);
+    const block1 = createImageBlock(
+      margin,
+      margin,
+      blockWidth,
+      blockHeight,
+      imageUrls[0]
+    );
 
     // Check if block supports animations before applying
     if (engine.block.supportsAnimation(block1)) {
@@ -177,7 +97,13 @@ class Example implements EditorPlugin {
     }
 
     // Block 2: Entrance animation with easing configuration
-    const block2 = await createImageBlock(1, imageUrls[1]);
+    const block2 = createImageBlock(
+      margin + blockWidth + spacing,
+      margin,
+      blockWidth,
+      blockHeight,
+      imageUrls[1]
+    );
 
     // Create a fade entrance animation with easing
     const fadeInAnimation = engine.block.createAnimation('fade');
@@ -186,9 +112,15 @@ class Example implements EditorPlugin {
     engine.block.setEnum(fadeInAnimation, 'animationEasing', 'EaseOut');
 
     // Block 3: Exit animation
-    const block3 = await createImageBlock(2, imageUrls[2]);
+    const block3 = createImageBlock(
+      margin + 2 * (blockWidth + spacing),
+      margin,
+      blockWidth,
+      blockHeight,
+      imageUrls[2]
+    );
 
-    // Create an exit animation
+    // Create both entrance and exit animations
     const zoomInAnimation = engine.block.createAnimation('zoom');
     engine.block.setInAnimation(block3, zoomInAnimation);
     engine.block.setDuration(zoomInAnimation, 1.0);
@@ -199,7 +131,13 @@ class Example implements EditorPlugin {
     engine.block.setEnum(fadeOutAnimation, 'animationEasing', 'EaseIn');
 
     // Block 4: Loop animation
-    const block4 = await createImageBlock(3, imageUrls[3]);
+    const block4 = createImageBlock(
+      margin,
+      margin + blockHeight + spacing,
+      blockWidth,
+      blockHeight,
+      imageUrls[3]
+    );
 
     // Create a breathing loop animation
     const breathingLoop = engine.block.createAnimation('breathing_loop');
@@ -207,14 +145,23 @@ class Example implements EditorPlugin {
     engine.block.setDuration(breathingLoop, 1.0);
 
     // Block 5: Animation properties and slide direction
-    const block5 = await createImageBlock(4, imageUrls[4]);
+    const block5 = createImageBlock(
+      margin + blockWidth + spacing,
+      margin + blockHeight + spacing,
+      blockWidth,
+      blockHeight,
+      imageUrls[4]
+    );
 
     // Create slide animation and configure direction
     const slideFromTop = engine.block.createAnimation('slide');
     engine.block.setInAnimation(block5, slideFromTop);
     engine.block.setDuration(slideFromTop, 1.0);
 
-    // Set slide direction (in radians: 0=right, PI/2=bottom, PI=left, 3*PI/2=top)
+    // Set slide direction (radians describe the motion direction the block
+    // travels along; the block enters from the opposite side):
+    //   0=slides right (enters from left), PI/2=slides down (enters from top),
+    //   PI=slides left (enters from right), 3*PI/2=slides up (enters from bottom)
     engine.block.setFloat(
       slideFromTop,
       'animation/slide/direction',
@@ -224,11 +171,16 @@ class Example implements EditorPlugin {
 
     // Discover all available properties for this animation
     const properties = engine.block.findAllProperties(slideFromTop);
-    // eslint-disable-next-line no-console
     console.log('Slide animation properties:', properties);
 
     // Block 6: Get animations and replace them
-    const block6 = await createImageBlock(5, imageUrls[5]);
+    const block6 = createImageBlock(
+      margin + 2 * (blockWidth + spacing),
+      margin + blockHeight + spacing,
+      blockWidth,
+      blockHeight,
+      imageUrls[5]
+    );
 
     // Set initial animations
     const initialIn = engine.block.createAnimation('pan');
@@ -244,7 +196,6 @@ class Example implements EditorPlugin {
     const currentLoop = engine.block.getLoopAnimation(block6);
     const currentOut = engine.block.getOutAnimation(block6);
 
-    // eslint-disable-next-line no-console
     console.log(
       'Animation IDs - In:',
       currentIn,
@@ -264,24 +215,45 @@ class Example implements EditorPlugin {
 
     // Query available easing options
     const easingOptions = engine.block.getEnumValues('animationEasing');
-    // eslint-disable-next-line no-console
     console.log('Available easing options:', easingOptions);
 
-    // Set initial playback time to 1 second (after entrance animations)
-    engine.block.setPlaybackTime(page, 1.0);
+    // Save the scene with all animations to a file
+    const outputDir = './output';
+    if (!existsSync(outputDir)) {
+      mkdirSync(outputDir, { recursive: true });
+    }
+
+    const sceneString = await engine.scene.saveToString();
+    writeFileSync(`${outputDir}/base-animations.scene`, sceneString);
+    console.log('Saved scene to output/base-animations.scene');
+
+    console.log('Base Animations example completed successfully');
+  } finally {
+    engine.dispose();
   }
 }
 
-export default Example;
+main().catch(console.error);
 ```
 
 This guide covers creating animations, attaching them to blocks, configuring properties like duration and easing, and managing animation lifecycle.
 
+## Initialize the Engine
+
+Set up the headless Creative Engine for server-side animation operations.
+
+```typescript highlight=highlight-setup
+const engine = await CreativeEngine.init({
+  baseURL: process.env.IMGLY_LOCAL_ASSETS_URL
+  // license: process.env.CESDK_LICENSE
+});
+```
+
 ## Animation Fundamentals
 
 Before applying animations to a block, we verify it supports them using `supportsAnimation()`. Once confirmed, we create an animation instance and attach it to the block.
 
-```typescript highlight-supports-animation
+```typescript highlight=highlight-supports-animation
 // Check if block supports animations before applying
 if (engine.block.supportsAnimation(block1)) {
   // Create an entrance animation
@@ -302,7 +274,7 @@ CE.SDK provides several animation types:
 
 Entrance animations (In animations) define how a block appears on screen. We create the animation, attach it with `setInAnimation()`, and configure its properties.
 
-```typescript highlight-entrance-animation
+```typescript highlight=highlight-entrance-animation
 // Create a fade entrance animation with easing
 const fadeInAnimation = engine.block.createAnimation('fade');
 engine.block.setInAnimation(block2, fadeInAnimation);
@@ -316,16 +288,16 @@ We use `setEnum()` to configure the easing function. Available easing options in
 
 Exit animations (Out animations) define how a block leaves the screen. We use `setOutAnimation()` to attach them.
 
-```typescript highlight-exit-animation
-// Create an exit animation
-const zoomInAnimation = engine.block.createAnimation('zoom');
-engine.block.setInAnimation(block3, zoomInAnimation);
-engine.block.setDuration(zoomInAnimation, 1.0);
+```typescript highlight=highlight-exit-animation
+    // Create both entrance and exit animations
+    const zoomInAnimation = engine.block.createAnimation('zoom');
+    engine.block.setInAnimation(block3, zoomInAnimation);
+    engine.block.setDuration(zoomInAnimation, 1.0);
 
-const fadeOutAnimation = engine.block.createAnimation('fade');
-engine.block.setOutAnimation(block3, fadeOutAnimation);
-engine.block.setDuration(fadeOutAnimation, 1.0);
-engine.block.setEnum(fadeOutAnimation, 'animationEasing', 'EaseIn');
+    const fadeOutAnimation = engine.block.createAnimation('fade');
+    engine.block.setOutAnimation(block3, fadeOutAnimation);
+    engine.block.setDuration(fadeOutAnimation, 1.0);
+    engine.block.setEnum(fadeOutAnimation, 'animationEasing', 'EaseIn');
 ```
 
 When using both entrance and exit animations, CE.SDK automatically manages their timing to prevent overlap. Changing the duration of an In animation may adjust the Out animation's duration to maintain valid timing.
@@ -334,78 +306,83 @@ When using both entrance and exit animations, CE.SDK automatically manages their
 
 Loop animations run continuously while the block is visible. We use `setLoopAnimation()` to attach them.
 
-```typescript highlight-loop-animation
+```typescript highlight=highlight-loop-animation
 // Create a breathing loop animation
 const breathingLoop = engine.block.createAnimation('breathing_loop');
 engine.block.setLoopAnimation(block4, breathingLoop);
 engine.block.setDuration(breathingLoop, 1.0);
 ```
 
-The duration for loop animations defines the length of each cycle. A 2-second breathing loop will complete one full pulse every 2 seconds.
+The duration for loop animations defines the length of each cycle. A 1-second breathing loop will complete one full pulse every second.
 
 ## Animation Properties
 
 Each animation type has specific configurable properties. We use `findAllProperties()` to discover available properties for an animation.
 
-```typescript highlight-animation-properties
-// Create slide animation and configure direction
-const slideFromTop = engine.block.createAnimation('slide');
-engine.block.setInAnimation(block5, slideFromTop);
-engine.block.setDuration(slideFromTop, 1.0);
+```typescript highlight=highlight-animation-properties
+    // Create slide animation and configure direction
+    const slideFromTop = engine.block.createAnimation('slide');
+    engine.block.setInAnimation(block5, slideFromTop);
+    engine.block.setDuration(slideFromTop, 1.0);
 
-// Set slide direction (in radians: 0=right, PI/2=bottom, PI=left, 3*PI/2=top)
-engine.block.setFloat(slideFromTop, 'animation/slide/direction', Math.PI / 2);
-engine.block.setEnum(slideFromTop, 'animationEasing', 'EaseInOut');
+    // Set slide direction (radians describe the motion direction the block
+    // travels along; the block enters from the opposite side):
+    //   0=slides right (enters from left), PI/2=slides down (enters from top),
+    //   PI=slides left (enters from right), 3*PI/2=slides up (enters from bottom)
+    engine.block.setFloat(
+      slideFromTop,
+      'animation/slide/direction',
+      Math.PI / 2
+    );
+    engine.block.setEnum(slideFromTop, 'animationEasing', 'EaseInOut');
 
-// Discover all available properties for this animation
-const properties = engine.block.findAllProperties(slideFromTop);
-// eslint-disable-next-line no-console
-console.log('Slide animation properties:', properties);
+    // Discover all available properties for this animation
+    const properties = engine.block.findAllProperties(slideFromTop);
+    console.log('Slide animation properties:', properties);
 ```
 
-For slide animations, the `animation/slide/direction` property controls the entry direction in radians:
+For slide animations, the `animation/slide/direction` property is the angle in radians that the block travels along during entrance — the block starts off-screen on the opposite side and slides in:
 
-- `0` — From the right
-- `Math.PI / 2` — From the bottom
-- `Math.PI` — From the left
-- `3 * Math.PI / 2` — From the top
+- `0` — Slides right (enters from the left)
+- `Math.PI / 2` — Slides down (enters from the top)
+- `Math.PI` — Slides left (enters from the right)
+- `3 * Math.PI / 2` — Slides up (enters from the bottom)
 
 ## Managing Animation Lifecycle
 
 Animation objects must be properly managed to avoid memory leaks. When replacing an animation, we destroy the old one before setting the new one. We can retrieve current animations using `getInAnimation()`, `getOutAnimation()`, and `getLoopAnimation()`.
 
-```typescript highlight-manage-animations
-// Set initial animations
-const initialIn = engine.block.createAnimation('pan');
-engine.block.setInAnimation(block6, initialIn);
-engine.block.setDuration(initialIn, 1.0);
-
-const spinLoop = engine.block.createAnimation('spin_loop');
-engine.block.setLoopAnimation(block6, spinLoop);
-engine.block.setDuration(spinLoop, 1.0);
-
-// Get current animations
-const currentIn = engine.block.getInAnimation(block6);
-const currentLoop = engine.block.getLoopAnimation(block6);
-const currentOut = engine.block.getOutAnimation(block6);
-
-// eslint-disable-next-line no-console
-console.log(
-  'Animation IDs - In:',
-  currentIn,
-  'Loop:',
-  currentLoop,
-  'Out:',
-  currentOut
-);
-
-// Replace in animation (destroy old one first to avoid memory leaks)
-if (currentIn !== 0) {
-  engine.block.destroy(currentIn);
-}
-const newInAnimation = engine.block.createAnimation('wipe');
-engine.block.setInAnimation(block6, newInAnimation);
-engine.block.setDuration(newInAnimation, 1.0);
+```typescript highlight=highlight-manage-animations
+    // Set initial animations
+    const initialIn = engine.block.createAnimation('pan');
+    engine.block.setInAnimation(block6, initialIn);
+    engine.block.setDuration(initialIn, 1.0);
+
+    const spinLoop = engine.block.createAnimation('spin_loop');
+    engine.block.setLoopAnimation(block6, spinLoop);
+    engine.block.setDuration(spinLoop, 1.0);
+
+    // Get current animations
+    const currentIn = engine.block.getInAnimation(block6);
+    const currentLoop = engine.block.getLoopAnimation(block6);
+    const currentOut = engine.block.getOutAnimation(block6);
+
+    console.log(
+      'Animation IDs - In:',
+      currentIn,
+      'Loop:',
+      currentLoop,
+      'Out:',
+      currentOut
+    );
+
+    // Replace in animation (destroy old one first to avoid memory leaks)
+    if (currentIn !== 0) {
+      engine.block.destroy(currentIn);
+    }
+    const newInAnimation = engine.block.createAnimation('wipe');
+    engine.block.setInAnimation(block6, newInAnimation);
+    engine.block.setDuration(newInAnimation, 1.0);
 ```
 
 A return value of `0` indicates no animation is attached. Destroying a design block also destroys all its attached animations, but detached animations must be destroyed manually.
@@ -414,54 +391,68 @@ A return value of `0` indicates no animation is attached. Destroying a design bl
 
 We can query available easing options using `getEnumValues()`.
 
-```typescript highlight-easing-options
+```typescript highlight=highlight-easing-options
 // Query available easing options
 const easingOptions = engine.block.getEnumValues('animationEasing');
-// eslint-disable-next-line no-console
 console.log('Available easing options:', easingOptions);
 ```
 
 Easing functions control animation acceleration:
 
-| Easing      | Description                                   |
-| ----------- | --------------------------------------------- |
-| `Linear`    | Constant speed throughout                     |
-| `EaseIn`    | Starts slow, accelerates toward the end       |
-| `EaseOut`   | Starts fast, decelerates toward the end       |
-| `EaseInOut` | Starts slow, speeds up, then slows down again |
+| Easing      | Description                                     |
+| ----------- | ----------------------------------------------- |
+| `Linear`    | Constant speed throughout                       |
+| `EaseIn`    | Starts slow, accelerates toward the end         |
+| `EaseOut`   | Starts fast, decelerates toward the end         |
+| `EaseInOut` | Starts slow, speeds up, then slows down again   |
+
+## Save and Cleanup
+
+After applying animations, we save the scene to preserve all animation configurations. The scene file can be loaded later for further editing or rendering. Always dispose of the engine when done to release resources.
+
+```typescript highlight=highlight-export
+    // Save the scene with all animations to a file
+    const outputDir = './output';
+    if (!existsSync(outputDir)) {
+      mkdirSync(outputDir, { recursive: true });
+    }
+
+    const sceneString = await engine.scene.saveToString();
+    writeFileSync(`${outputDir}/base-animations.scene`, sceneString);
+    console.log('Saved scene to output/base-animations.scene');
+```
+
+```typescript highlight=highlight-cleanup
+engine.dispose();
+```
 
 ## API Reference
 
-| Method                          | Description                                |
-| ------------------------------- | ------------------------------------------ |
-| `createAnimation(type)`         | Create a new animation instance            |
-| `supportsAnimation(block)`      | Check if block supports animations         |
-| `setInAnimation(block, anim)`   | Apply entrance animation to block          |
-| `setOutAnimation(block, anim)`  | Apply exit animation to block              |
-| `setLoopAnimation(block, anim)` | Apply loop animation to block              |
-| `getInAnimation(block)`         | Get entrance animation (returns 0 if none) |
-| `getOutAnimation(block)`        | Get exit animation (returns 0 if none)     |
-| `getLoopAnimation(block)`       | Get loop animation (returns 0 if none)     |
-| `setDuration(anim, seconds)`    | Set animation duration                     |
-| `getDuration(anim)`             | Get animation duration                     |
-| `setEnum(anim, prop, value)`    | Set enum property (easing, etc.)           |
-| `setFloat(anim, prop, value)`   | Set float property (direction, etc.)       |
-| `findAllProperties(anim)`       | Get all available properties for animation |
-| `getEnumValues(prop)`           | Get available values for enum property     |
-| `destroy(anim)`                 | Destroy animation instance                 |
-
-## Next Steps
-
-- [Text Animations](./animation/create/text.md) — Animate text with writing styles
-  and character control
-- [Animation Overview](./animation/overview.md) — Understand animation concepts
-  and capabilities
+| Method                       | Description                                        |
+| ---------------------------- | -------------------------------------------------- |
+| `createAnimation(type)`      | Create a new animation instance                    |
+| `supportsAnimation(block)`   | Check if block supports animations                 |
+| `setInAnimation(block, anim)`| Apply entrance animation to block                  |
+| `setOutAnimation(block, anim)` | Apply exit animation to block                    |
+| `setLoopAnimation(block, anim)` | Apply loop animation to block                   |
+| `getInAnimation(block)`      | Get entrance animation (returns 0 if none)         |
+| `getOutAnimation(block)`     | Get exit animation (returns 0 if none)             |
+| `getLoopAnimation(block)`    | Get loop animation (returns 0 if none)             |
+| `setDuration(anim, seconds)` | Set animation duration                             |
+| `getDuration(anim)`          | Get animation duration                             |
+| `setEnum(anim, prop, value)` | Set enum property (easing, etc.)                   |
+| `setFloat(anim, prop, value)`| Set float property (direction, etc.)               |
+| `findAllProperties(anim)`    | Get all available properties for animation         |
+| `getEnumValues(prop)`        | Get available values for enum property             |
+| `destroy(anim)`              | Destroy animation instance                         |
+
+
 
 ---
 
 ## 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