> ## Documentation Index
> Fetch the complete documentation index at: https://cloudinary.com/documentation/llms.txt
> Use this file to discover all available pages before exploring further.

# Transformation tutorials

This page offers a library of short video tutorials introducing you to image and video transformations.

## Get started with transformations

  
  
  
    Transformation Basics
    Learn the basics of a transformation URL 
  

  
  
  
    Transformation Builder
    A quick overview of the Transformation Builder 
  

  
  
  
    Gravity Crops for Images
    Indicate which areas to keep when cropping 
  

  
  
  
    Enhance and Restore Images
    Use enhance, restore, upscale and improve effects to make your images shine 
  

  
  
  
    Transformation Overlays
    Add transformation overlays to assets on the fly using the Node.js SDK 
  

  
  
  
    Content-aware Image Cropping
    Smartly crop an image using content-aware AI 
  

  
  
  
    Content-aware Video Cropping
    Smartly crop a video using content-aware AI 
  

  
  
  
    Videos to Animated Images
    Convert videos to animated image formats on the fly 
  

## Advanced transformation features

  
  
  
    Text Overlays
    Place text on top of your images using the transformation editor 
  

  
  
  
    Add Watermarks in JavaScript
    Protect your images with image and text watermarks 
  

  
  
  
    Complex Transformations
    Combine transformations to generate a 3D canvas 
  

  
  
  
    Named Transformations
    Simplify & standardize complex delivery URLs 
  

  
  
  
    Named Transformations using TX Builder
    Create re-usable transformations with the Transformation Builder UI 
  

  
  
  
    Advanced Image Components
    SDK components to improve your user's experience 
  

  
  
  
    Trim Videos in Node.js
    Trim videos using the Node.js SDK 
  

  
  
  
    Splice Videos in Node.js
    Splice two videos together using the Node.js SDK 
  

  
  
  
    Zoompan Effect
    Apply the Ken Burns effect to zoom and pan on an image 
  

  
  
  
    Video Transformations
    Build an e-commerce video showcasing products, in Node.js 
  

  
  
  
      Crop and Resize Images in React
      Crop and resize images using React with Cloudinary 
  

  
  
  
    Crop and Resize Videos in React
    Crop and resize videos using React with Cloudinary
  

  
  
  
      Crop and Resize Images in Python
      Crop and resize images using Python with Cloudinary 
  

  
  
  
    Remove Backgrounds and Add Drop Shadows
    Remove image backgrounds and add drop shadows in a React app 
  

  
  
  
    AI Generative Fill using Next.js
    Extend images using generative AI in a Next.js app 
  

  
  
  
    Color Accessibility in JavaScript
    Make your images accessible to color blind people 
  

## Transformations for social media

  
  
  
    Create Social Media Cards in Next.js
    Dynamically create social media image cards using Next.js 
  

  
  
  
    Create Social Media Cards in Svelte
    Dynamically create social media image cards using Svelte