# :icon-lucide-list-start: Tutorial Overview

Follow along these tutorials to learn how to achieve a variety of effects just
using Curves.

<div class="card-container">
    <a href="/tutorials/bouncing_icon" class="group card no-link">
        <div class="relative shrink-0 overflow-hidden bg-card-image-bg md:w-5/12 pb-9/16 md:pb-0 border-b md:border-b-0 md:border-r border-card-image-inner-border">
            <video class="absolute object-cover w-full h-full transition-transform duration-300 ease-out group-hover:scale-105" src="/static/examples/bouncing_icon.mp4" autoplay loop muted playsinline>
        </div>
        <div class="p-card-padding">
            <span class="inline-block w-12 h-12 text-card-kicker-text"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="icon icon-tabler icons-tabler-filled icon-tabler-bounce-right"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M14.143 11.486a1 1 0 0 1 1.714 1.028c-1.502 2.505 -2.41 4.89 -2.87 7.65c-.16 .956 -1.448 1.15 -1.881 .283c-2.06 -4.12 -3.858 -4.976 -6.79 -3.998a1 1 0 1 1 -.632 -1.898c3.2 -1.067 5.656 -.373 7.803 2.623l.091 .13l.011 -.04c.522 -1.828 1.267 -3.55 2.273 -5.3l.28 -.478z" /><path d="M18 4a3 3 0 1 0 0 6a3 3 0 0 0 0 -6" /></svg>
</span>
            <div class="mt-2 text-card-title font-card-title leading-card-title text-card-title-text md:text-card-title-md">Bouncing Icon</div>
            <div class="line-clamp-4"><p class="mt-card-description-margin-top text-card-description-text">Learn how to make your first Curves animation by moving an image around the screen.</p></div>
        </div>
    </a>
</div>

<div class="card-container">
    <a href="/tutorials/highlighter" class="group card no-link">
        <div class="relative shrink-0 overflow-hidden bg-card-image-bg md:w-5/12 pb-9/16 md:pb-0 border-b md:border-b-0 md:border-r border-card-image-inner-border">
            <video class="absolute object-cover w-full h-full transition-transform duration-300 ease-out group-hover:scale-105" src="/static/examples/highlighter.mp4" autoplay loop muted playsinline>
        </div>
        <div class="p-card-padding">
            <span class="inline-block w-12 h-12 text-card-kicker-text"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-highlighter-icon lucide-highlighter"><path d="m9 11-6 6v3h9l3-3"/><path d="m22 12-4.6 4.6a2 2 0 0 1-2.8 0l-5.2-5.2a2 2 0 0 1 0-2.8L14 4"/></svg>

</span>
            <div class="mt-2 text-card-title font-card-title leading-card-title text-card-title-text md:text-card-title-md">Highlighter</div>
            <div class="line-clamp-4"><p class="mt-card-description-margin-top text-card-description-text">Draw an animated highlighter to emphasize parts of your composition.</p></div>
        </div>
    </a>
</div>

<div class="card-container">
    <a href="/tutorials/zoom" class="group card no-link">
        <div class="relative shrink-0 overflow-hidden bg-card-image-bg md:w-5/12 pb-9/16 md:pb-0 border-b md:border-b-0 md:border-r border-card-image-inner-border">
            <video class="absolute object-cover w-full h-full transition-transform duration-300 ease-out group-hover:scale-105" src="/static/examples/zoompan.mp4" autoplay loop muted playsinline>
        </div>
        <div class="p-card-padding">
            <span class="inline-block w-12 h-12 text-card-kicker-text"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-fullscreen-icon lucide-fullscreen"><path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/><rect width="10" height="8" x="7" y="8" rx="1"/></svg>
</span>
            <div class="mt-2 text-card-title font-card-title leading-card-title text-card-title-text md:text-card-title-md">Zoom and Pan</div>
            <div class="line-clamp-4"><p class="mt-card-description-margin-top text-card-description-text">Zoom and pan around your clip with customized easing curves and motion blur.</p></div>
        </div>
    </a>
</div>

<div class="card-container">
    <a href="/tutorials/3dcam" class="group card no-link">
        <div class="relative shrink-0 overflow-hidden bg-card-image-bg md:w-5/12 pb-9/16 md:pb-0 border-b md:border-b-0 md:border-r border-card-image-inner-border">
            <video class="absolute object-cover w-full h-full transition-transform duration-300 ease-out group-hover:scale-105" src="/static/examples/3dcam.mp4" autoplay loop muted playsinline>
        </div>
        <div class="p-card-padding">
            <span class="inline-block w-12 h-12 text-card-kicker-text"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-rotate3d-icon lucide-rotate-3d"><path d="M16.466 7.5C15.643 4.237 13.952 2 12 2 9.239 2 7 6.477 7 12s2.239 10 5 10c.342 0 .677-.069 1-.2"/><path d="m15.194 13.707 3.814 1.86-1.86 3.814"/><path d="M19 15.57c-1.804.885-4.274 1.43-7 1.43-5.523 0-10-2.239-10-5s4.477-5 10-5c4.838 0 8.873 1.718 9.8 4"/></svg>
</span>
            <div class="mt-2 text-card-title font-card-title leading-card-title text-card-title-text md:text-card-title-md">3D Camera</div>
            <div class="line-clamp-4"><p class="mt-card-description-margin-top text-card-description-text">Tilt and rotate your scene in 3D to simulate a 3D camera.</p></div>
        </div>
    </a>
</div>