308 status code is a permanent redirect that, unlike 301, ensures the request method remains unchanged.
The user is permanently redirected to the new URL, and the request method remains the same.
200 status code is a standard successful HTTP server response. It means that the client’s request (e.g., from a browser) was successfully processed, and the server is delivering the requested data.
The user receives content without errors, and the page or application functions properly. If Code 200 is accompanied by data, the browser or program processes and displays it to the user.
GET / HTTP/1.1 Host: phase.com Accept: */* User-Agent: Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; ClaudeBot/1.0; [email protected])
<!DOCTYPE html><html lang="en-US"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><link rel="icon" href="/favicon.ico"/><meta name="robots" content="index, follow"/><link rel="alternate" hrefLang="en-US" href="https://phase.com/en-US/"/><link rel="alternate" hrefLang="ko-KR" href="https://phase.com/ko-KR/"/><link rel="alternate" hrefLang="ja-JP" href="https://phase.com/ja-JP/"/><link rel="alternate" hrefLang="pt-PT" href="https://phase.com/pt-PT/"/><link rel="alternate" hrefLang="es-ES" href="https://phase.com/es-ES/"/><link rel="alternate" hrefLang="zh-TW" href="https://phase.com/zh-TW/"/><link rel="alternate" hrefLang="x-default" href="https://phase.com/"/><title>Phase - Animation for Product Designers</title><meta name="description" content="Phase is bringing easy and collaborative animation to product designers."/><meta property="og:type" content="website"/><meta property="og:url"/><meta property="og:title" content="Phase - Animation for Product Designers"/><meta property="og:description" content="Phase is bringing easy and collaborative animation to product designers."/><meta property="og:image" content="/images/phase_banner.jpg"/><meta property="twitter:card" content="summary_large_image"/><meta property="twitter:url"/><meta property="twitter:title" content="Phase - Animation for Product Designers"/><meta property="twitter:description" content="Phase is bringing easy and collaborative animation to product designers."/><meta property="twitter:image" content="/images/phase_banner.jpg"/><link rel="preload" href="https://res.cloudinary.com/dfa4rxtnc/image/upload/v1722410462/Landing%20Page/Hero/real_ui_en-US.svg" as="image" fetchpriority="high"/><meta name="next-head-count" content="25"/><link data-next-font="" rel="preconnect" href="/" crossorigin="anonymous"/><link rel="preload" href="/_next/static/css/ccd1b9bab15e5198.css" as="style" crossorigin=""/><link rel="stylesheet" href="/_next/static/css/ccd1b9bab15e5198.css" crossorigin="" data-n-g=""/><link rel="preload" href="/_next/static/css/cadc8263c86b8065.css" as="style" crossorigin=""/><link rel="stylesheet" href="/_next/static/css/cadc8263c86b8065.css" crossorigin="" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" crossorigin="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-d9eb620b27981cc3.js" defer="" crossorigin=""></script><script src="/_next/static/chunks/framework-66d32731bdd20e83.js" defer="" crossorigin=""></script><script src="/_next/static/chunks/main-4ba97bd548f5a846.js" defer="" crossorigin=""></script><script src="/_next/static/chunks/pages/_app-06727f1cea3934f1.js" defer="" crossorigin=""></script><script src="/_next/static/chunks/494-cd3963afe3cf4f5a.js" defer="" crossorigin=""></script><script src="/_next/static/chunks/642-66b5bc2dbd5b694b.js" defer="" crossorigin=""></script><script src="/_next/static/chunks/pages/index-8cdd6dac0dbf82d1.js" defer="" crossorigin=""></script><script src="/_next/static/RIyStUt3OOyBLoR_4HdNT/_buildManifest.js" defer="" crossorigin=""></script><script src="/_next/static/RIyStUt3OOyBLoR_4HdNT/_ssgManifest.js" defer="" crossorigin=""></script></head><body><div id="__next"><div data-visibility="false" data-scroll-direction="up" data-screen="default" class="fixed top-0 left-0 right-0 z-header false translate-y-0 opacity-100 data-[screen=mobile]:translate-y-0 data-[screen=mobile]:opacity-100 data-[screen=default]:data-[visibility=false]:-translate-y-full data-[screen=default]:data-[visibility=false]:opacity-0 data-[screen=default]:data-[visibility=true]:data-[scroll-direction=down]:-translate-y-full data-[screen=default]:data-[visibility=true]:data-[scroll-direction=down]:opacity-0 data-[screen=default]:data-[visibility=true]:data-[scroll-direction=up]:translate-y-0 data-[screen=default]:data-[visibility=true]:data-[scroll-direction=up]:opacity-100 transition-all duration-300 ease-out"><div class="bg-gray-3 dark:bg-dark-overlay-100"><div class="max-w-1240 mx-auto lg:max-w-full lg:px-100 h-header sm:h-header-mobile md:px-64 sm:px-32 flex items-center justify-between"><div class="flex gap-x-48 lg:gap-x-16 items-center"><div class="cursor-pointer"><img alt="phase logo" loading="lazy" width="112" height="24" decoding="async" data-nimg="1" class="w-112 h-24 md:h-full sm:w-[84px]" style="color:transparent" src="/logos/logo_black_name.svg"/></div><div class="flex justify-between gap-x-32 lg:gap-x-0 md:hidden"><div class="relative"><div class="h-40 relative group w-fit px-16 text-body-16 rounded-sm flex items-center justify-center outline-none focus-visible:outline-2 focus-visible:outline-blue focus-visible:outline-offset-[-2px] text-dark-overlay-60 dark:text-light-overlay-60"><div class="absolute inset-0 h-40 rounded-sm" style="opacity:0;transform:scale(0.5) translateZ(0)"></div><span>Product</span></div></div><div class="relative"><a class="h-40 relative group w-fit px-16 text-body-16 rounded-sm flex items-center justify-center outline-none focus-visible:outline-2 focus-visible:outline-blue focus-visible:outline-offset-[-2px] text-dark-overlay-60 dark:text-light-overlay-60" href="/learn"><div class="absolute inset-0 h-40 rounded-sm" style="opacity:0;transform:scale(0.5) translateZ(0)"></div><span>Learn</span></a></div><div class="relative"><a class="h-40 relative group w-fit px-16 text-body-16 rounded-sm flex items-center justify-center outline-none focus-visible:outline-2 focus-visible:outline-blue focus-visible:outline-offset-[-2px] text-dark-overlay-60 dark:text-light-overlay-60" target="_blank" href="https://community.phase.com/"><div class="absolute inset-0 h-40 rounded-sm" style="opacity:0;transform:scale(0.5) translateZ(0)"></div><span>Community</span><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 24 24" class="ml-4"><path fill="currentColor" d="M17.924 6.617a.997.997 0 0 0-.215-.322l-.004-.004A.997.997 0 0 0 17 6H7a1 1 0 0 0 0 2h7.586l-8.293 8.293a1 1 0 1 0 1.414 1.414L16 9.414V17a1 1 0 1 0 2 0V6.997a.996.996 0 0 0-.076-.38"></path></svg></a></div><div class="relative"><a class="h-40 relative group w-fit px-16 text-body-16 rounded-sm flex items-center justify-center outline-none focus-visible:outline-2 focus-visible:outline-blue focus-visible:outline-offset-[-2px] text-dark-overlay-60 dark:text-light-overlay-60" target="_blank" href="https://www.figma.com/community/plugin/1377418225065488721/phase-export"><div class="absolute inset-0 h-40 rounded-sm" style="opacity:0;transform:scale(0.5) translateZ(0)"></div><span>Figma Plugin</span><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 24 24" class="ml-4"><path fill="currentColor" d="M17.924 6.617a.997.997 0 0 0-.215-.322l-.004-.004A.997.997 0 0 0 17 6H7a1 1 0 0 0 0 2h7.586l-8.293 8.293a1 1 0 1 0 1.414 1.414L16 9.414V17a1 1 0 1 0 2 0V6.997a.996.996 0 0 0-.076-.38"></path></svg></a></div></div></div><div class="flex items-center md:gap-x-24"><div class="flex gap-x-16"><button id="app-cta" type="button" class="group relative disabled:opacity-40 disabled:cursor-not-allowed outline-none font-Poppins h-40 text-button py-0 flex items-center justify-between rounded-sm transition-all duration-100 w-fit bg-blue text-light-overlay-100 hover:bg-blue-600 active:bg-blue-700 focus-visible:outline-2 focus-visible:outline-blue-500 md:hidden "><div class="text-center flex items-center justify-center w-full pointer-events-none px-12 group-hover:pr-12 group-hover:px-16">Get Started<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 24 24" class="opacity-0 w-0 ml-0 transform translate-x-[-4px] sm:translate-x-0 group-hover:w-24 sm:group-hover:w-0 group-hover:ml-4 sm:group-hover:ml-0 group-hover:opacity-100 group-hover:translate-x-0 transition-all ease-out duration-200 h-24"><path fill="currentColor" d="M17.924 6.617a.997.997 0 0 0-.215-.322l-.004-.004A.997.997 0 0 0 17 6H7a1 1 0 0 0 0 2h7.586l-8.293 8.293a1 1 0 1 0 1.414 1.414L16 9.414V17a1 1 0 1 0 2 0V6.997a.996.996 0 0 0-.076-.38"></path></svg></div></button><div class="flex items-center justify-center md:hidden"><div class="relative"><button class="flex items-center gap-x-8 pl-10 pr-12 py-8 text-dark-overlay-60 dark:text-light-overlay-60"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 24 24" class=""><path fill="currentColor" fill-rule="evenodd" d="M9.832 5.342A7.008 7.008 0 0 0 5.071 11h2.983c.18-2.009.79-3.944 1.778-5.658M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18m2.168 2.342A13.803 13.803 0 0 1 15.946 11h2.983a7.008 7.008 0 0 0-4.761-5.658M13.937 11A11.73 11.73 0 0 0 12 5.646 11.73 11.73 0 0 0 10.063 11zm-3.874 2h3.874A11.73 11.73 0 0 1 12 18.354 11.73 11.73 0 0 1 10.063 13m-2.01 0H5.072a7.008 7.008 0 0 0 4.761 5.658A13.801 13.801 0 0 1 8.054 13m6.115 5.658A13.802 13.802 0 0 0 15.946 13h2.983a7.008 7.008 0 0 1-4.761 5.658" clip-rule="evenodd"></path></svg><p class="text-subtitle-16">EN</p></button></div></div></div><div class="w-32 h-32 sm:h-24 sm:w-24 hidden md:block p-2 cursor-pointer"><div class="h-full relative"><span class="block h-3 sm:h-2 bg-[#6e6e6e] w-auto absolute transition-opacity duration-100 ease-out rounded-sm top-3 left-3 right-3 sm:left-1 sm:right-1"></span><span class="block h-3 sm:h-2 bg-[#6e6e6e] w-auto absolute transition-transform duration-300 ease-out rounded-sm top-1/2 -translate-y-[1px] left-3 right-3 sm:left-1 sm:right-1"></span><span class="block h-3 sm:h-2 bg-[#6e6e6e] w-auto absolute transition-transform duration-300 ease-out rounded-sm top-1/2 -translate-y-[1px] left-3 right-3 sm:left-1 sm:right-1"></span><span class="block h-3 sm:h-2 bg-[#6e6e6e] w-auto absolute transition-opacity duration-100 ease-out rounded-sm bottom-3 left-3 right-3 sm:left-1 sm:right-1"></span></div></div></div></div></div></div><div class="dark"><div class="relative bg-gray-3"><div class="relative xl:h-[100vw] h-[110vw] lg:h-[125vw] md:h-[150vw] sm:h-full w-screen"><div class="sticky top-0"><div class="relative bg-dark-overlay-100 overflow-hidden md:portrait:flex md:portrait:items-center"><div class="absolute right-0 left-0 z-header dark md:portrait:top-0" style="opacity:0;transform:translateY(-80px) translateZ(0)"><div class="max-w-1240 mx-auto lg:max-w-full lg:px-32 h-header sm:h-header-mobile flex items-center justify-between"><div class="flex gap-x-48 lg:gap-x-16 items-center"><div class="cursor-pointer z-[10000000]"><img alt="phase logo" loading="lazy" width="112" height="24" decoding="async" data-nimg="1" class="w-112 h-24 md:h-full sm:w-3/4" style="color:transparent" src="/logos/logo_white_name.svg"/></div><div class="flex justify-between gap-x-32 lg:gap-x-0 md:hidden"><div class="relative"><div class="h-40 relative group w-fit px-16 text-body-16 rounded-sm flex items-center justify-center outline-none focus-visible:outline-2 focus-visible:outline-blue focus-visible:outline-offset-[-2px] text-dark-overlay-60 dark:text-light-overlay-60"><div class="absolute inset-0 h-40 rounded-sm" style="opacity:0;transform:scale(0.5) translateZ(0)"></div><span>Product</span></div></div><div class="relative"><a class="h-40 relative group w-fit px-16 text-body-16 rounded-sm flex items-center justify-center outline-none focus-visible:outline-2 focus-visible:outline-blue focus-visible:outline-offset-[-2px] text-dark-overlay-60 dark:text-light-overlay-60" href="/learn"><div class="absolute inset-0 h-40 rounded-sm" style="opacity:0;transform:scale(0.5) translateZ(0)"></div><span>Learn</span></a></div><div class="relative"><a class="h-40 relative group w-fit px-16 text-body-16 rounded-sm flex items-center justify-center outline-none focus-visible:outline-2 focus-visible:outline-blue focus-visible:outline-offset-[-2px] text-dark-overlay-60 dark:text-light-overlay-60" target="_blank" href="https://community.phase.com/"><div class="absolute inset-0 h-40 rounded-sm" style="opacity:0;transform:scale(0.5) translateZ(0)"></div><span>Community</span><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 24 24" class="ml-4"><path fill="currentColor" d="M17.924 6.617a.997.997 0 0 0-.215-.322l-.004-.004A.997.997 0 0 0 17 6H7a1 1 0 0 0 0 2h7.586l-8.293 8.293a1 1 0 1 0 1.414 1.414L16 9.414V17a1 1 0 1 0 2 0V6.997a.996.996 0 0 0-.076-.38"></path></svg></a></div><div class="relative"><a class="h-40 relative group w-fit px-16 text-body-16 rounded-sm flex items-center justify-center outline-none focus-visible:outline-2 focus-visible:outline-blue focus-visible:outline-offset-[-2px] text-dark-overlay-60 dark:text-light-overlay-60" target="_blank" href="https://www.figma.com/community/plugin/1377418225065488721/phase-export"><div class="absolute inset-0 h-40 rounded-sm" style="opacity:0;transform:scale(0.5) translateZ(0)"></div><span>Figma Plugin</span><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 24 24" class="ml-4"><path fill="currentColor" d="M17.924 6.617a.997.997 0 0 0-.215-.322l-.004-.004A.997.997 0 0 0 17 6H7a1 1 0 0 0 0 2h7.586l-8.293 8.293a1 1 0 1 0 1.414 1.414L16 9.414V17a1 1 0 1 0 2 0V6.997a.996.996 0 0 0-.076-.38"></path></svg></a></div></div></div><div class="flex items-center md:gap-x-24"><div class="flex gap-x-16"><button id="app-cta" type="button" class="group relative disabled:opacity-40 disabled:cursor-not-allowed outline-none font-Poppins h-40 text-button py-0 flex items-center justify-between rounded-sm transition-all duration-100 w-fit text-light-overlay-100 bg-light-overlay-10 hover:bg-light-overlay-5 active:bg-light-overlay-3 focus-visible:outline-2 focus-visible:outline-blue-500 focus-visible:outline-offset-[-2px] sm:hidden"><div class="text-center flex items-center justify-center w-full pointer-events-none px-12 group-hover:pr-12 group-hover:px-16">Get Started<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 24 24" class="opacity-0 w-0 ml-0 transform translate-x-[-4px] sm:translate-x-0 group-hover:w-24 sm:group-hover:w-0 group-hover:ml-4 sm:group-hover:ml-0 group-hover:opacity-100 group-hover:translate-x-0 transition-all ease-out duration-200 h-24"><path fill="currentColor" d="M17.924 6.617a.997.997 0 0 0-.215-.322l-.004-.004A.997.997 0 0 0 17 6H7a1 1 0 0 0 0 2h7.586l-8.293 8.293a1 1 0 1 0 1.414 1.414L16 9.414V17a1 1 0 1 0 2 0V6.997a.996.996 0 0 0-.076-.38"></path></svg></div></button><div class="flex items-center justify-center md:hidden"><div class="relative"><button class="flex items-center gap-x-8 pl-10 pr-12 py-8 text-dark-overlay-60 dark:text-light-overlay-60"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 24 24" class=""><path fill="currentColor" fill-rule="evenodd" d="M9.832 5.342A7.008 7.008 0 0 0 5.071 11h2.983c.18-2.009.79-3.944 1.778-5.658M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18m2.168 2.342A13.803 13.803 0 0 1 15.946 11h2.983a7.008 7.008 0 0 0-4.761-5.658M13.937 11A11.73 11.73 0 0 0 12 5.646 11.73 11.73 0 0 0 10.063 11zm-3.874 2h3.874A11.73 11.73 0 0 1 12 18.354 11.73 11.73 0 0 1 10.063 13m-2.01 0H5.072a7.008 7.008 0 0 0 4.761 5.658A13.801 13.801 0 0 1 8.054 13m6.115 5.658A13.802 13.802 0 0 0 15.946 13h2.983a7.008 7.008 0 0 1-4.761 5.658" clip-rule="evenodd"></path></svg><p class="text-subtitle-16">EN</p></button></div></div></div><div class="w-32 h-32 sm:h-24 sm:w-24 hidden md:block p-2 cursor-pointer"><div class="h-full relative"><span class="block h-3 sm:h-2 bg-[#9e9e9e] w-auto absolute transition-opacity duration-100 ease-out rounded-sm top-3 left-3 right-3 sm:left-1 sm:right-1"></span><span class="block h-3 sm:h-2 bg-[#9e9e9e] w-auto absolute transition-transform duration-300 ease-out rounded-sm top-1/2 -translate-y-[1px] left-3 right-3 sm:left-1 sm:right-1"></span><span class="block h-3 sm:h-2 bg-[#9e9e9e] w-auto absolute transition-transform duration-300 ease-out rounded-sm top-1/2 -translate-y-[1px] left-3 right-3 sm:left-1 sm:right-1"></span><span class="block h-3 sm:h-2 bg-[#9e9e9e] w-auto absolute transition-opacity duration-100 ease-out rounded-sm bottom-3 left-3 right-3 sm:left-1 sm:right-1"></span></div></div></div></div></div><div class=" sm:!px-0 relative lg:px-100 md:px-64 sm:px-32"><div class="relative w-full max-w-1024 mx-auto md:bg-none bg-center bg-repeat-y bg-[length:100%_auto] "><div class="grid grid-cols-12 gap-x-32 sm:gap-x-16 w-full gap-y-64"><div class="col-span-full sm:px-32 flex flex-col justify-center sm:text-left sm:pr-104 text-center mt-160 sm:mt-160"><div style="opacity:0;transform:translateX(-100px) translateZ(0)"><h1 class="text-h1 font-Poppins text-light-overlay-100 whitespace-pre-line !font-bold mb-16 lg:text-h1 md:text-h2">Simple Animation For Product Designers</h1><p class="text-body-24 md:text-body-20 text-light-overlay-60 whitespace-pre-line">Easy to Learn - Lottie Animation & Micro-Interactions.</p></div></div><div class="col-span-10 col-start-2 mb-32 sm:col-span-full sm:col-start-1 sm:px-32" style="opacity:0;transform:translateY(80px) translateZ(0)"><div class="relative top-0 sm:pb-24 mb-24 border origin-top cursor-none sm:w-[688px]"><div class="absolute top-[6%] sm:top-[5.8%] left-[18.5%] right-[24.2%] bottom-[27.5%] sm:bottom-[31.5%] overflow-hidden"><div class="dotlottie-container main " lang="en"><div data-name="undefined" role="figure" class="animation " style="position:relative;width:100%;height:100%"></div></div></div><img alt="Landing Hero" fetchpriority="high" width="1024" height="659" decoding="async" data-nimg="1" style="color:transparent" src="https://res.cloudinary.com/dfa4rxtnc/image/upload/v1722410462/Landing%20Page/Hero/real_ui_en-US.svg"/><div class="absolute top-1/3 left-[50px] z-[10] sm:hidden" style="opacity:0;transform:translateX(-50px) translateY(-50px) translateZ(0)"><img src="https://res.cloudinary.com/dfa4rxtnc/image/upload/v1723449146/Landing%20Page/Cursor/EN_-_Cursor_-_Sage_nr0wjk.png" alt="Sage's Cursor" class="h-[60px]"/></div><div class="absolute top-[12%] -right-[2%] z-[10] sm:hidden" style="opacity:0;transform:translateX(50px) translateY(-50px) translateZ(0)"><img src="https://res.cloudinary.com/dfa4rxtnc/image/upload/v1723449148/Landing%20Page/Cursor/EN_-_Cursor_-_Willow_hulwub.png" alt="Willow's Cursor" class="h-[60px]"/></div><img src="https://res.cloudinary.com/dfa4rxtnc/image/upload/v1723449146/Landing%20Page/Cursor/EN_-_Cursor_-_You_lchv53.png" alt="Custom Cursor" class="h-[60px] absolute pointer-events-none z-20 -translate-x-1/4 -translate-y-1/4 invisible"/></div></div></div></div></div></div></div></div></div><section class="bg-dark-overlay-100 relative flex flex-col items-center justify-center undefined"><div class=" h-full relative lg:px-100 md:px-64 sm:px-32"><div class="relative w-full max-w-1024 mx-auto md:bg-none bg-center bg-repeat-y bg-[length:100%_auto] relative h-full py-80 w-full"><div style="opacity:0"><div class="grid grid-cols-12 gap-x-32 sm:gap-x-16 relative z-[10] pb-64"><h2 class="col-span-7 md:col-span-full mb-8 font-Poppins text-h1 md:text-h3 text-dark-overlay-100 dark:text-light-overlay-100">From Design to Animation.</h2><p class="col-start-1 col-span-7 md:col-span-full text-body-20 text-dark-overlay-60 dark:text-light-overlay-80 whitespace-pre-line">Easy Workflows that Make Animation Less Intimidating.</p></div></div><div class="grid grid-cols-12 gap-x-32 sm:gap-x-16 gap-y-40"><div class="col-span-4 sm:col-span-full"><div style="opacity:0;transform:scale(0.7) translateZ(0)"><div class="rounded-sm group overflow-hidden"><div class="dotlottie-container main duration-400 group-hover:transform group-hover:scale-105 origin-center sm:transform-none" lang="en"><div data-name="undefined" role="figure" class="animation " style="position:relative;width:100%;height:100%"></div></div></div></div><div class="mt-24 px-8 text-center pb-24" style="opacity:0;transform:translateY(80px) translateZ(0)"><h3 class="text-h5 font-Poppins dark:text-light-overlay-100 mb-4 md:whitespace-pre-line sm:whitespace-normal">1. Import</h3><p class="text-body-18 sm:text-body-16 dark:text-light-overlay-60">Import Images, Lotties, or SVGs from Figma and other tools.</p></div></div><div class="col-span-4 sm:col-span-full"><div style="opacity:0;transform:scale(0.7) translateZ(0)"><div class="rounded-sm group overflow-hidden"><div class="dotlottie-container main duration-400 group-hover:transform group-hover:scale-105 origin-center sm:transform-none" lang="en"><div data-name="undefined" role="figure" class="animation " style="position:relative;width:100%;height:100%"></div></div></div></div><div class="mt-24 px-8 text-center pb-24" style="opacity:0;transform:translateY(80px) translateZ(0)"><h3 class="text-h5 font-Poppins dark:text-light-overlay-100 mb-4 md:whitespace-pre-line sm:whitespace-normal">2. Animate</h3><p class="text-body-18 sm:text-body-16 dark:text-light-overlay-60">Edit Animations with a tool UI Designers know and love.</p></div></div><div class="col-span-4 sm:col-span-full"><div style="opacity:0;transform:scale(0.7) translateZ(0)"><div class="rounded-sm group overflow-hidden"><div class="dotlottie-container main duration-400 group-hover:transform group-hover:scale-105 origin-center sm:transform-none" lang="en"><div data-name="undefined" role="figure" class="animation " style="position:relative;width:100%;height:100%"></div></div></div></div><div class="mt-24 px-8 text-center pb-24" style="opacity:0;transform:translateY(80px) translateZ(0)"><h3 class="text-h5 font-Poppins dark:text-light-overlay-100 mb-4 md:whitespace-pre-line sm:whitespace-normal">3. Export</h3><p class="text-body-18 sm:text-body-16 dark:text-light-overlay-60">Easily share designs with developers using Lottie, GIF, or MP4.</p></div></div></div></div></div></section><section class="bg-dark-overlay-100 relative flex flex-col items-center justify-center dark"><div class="relative py-80 overflow-hidden"><div class=" h-full relative lg:px-100 md:px-64 sm:px-32"><div class="relative w-full max-w-1024 mx-auto md:bg-none bg-center bg-repeat-y bg-[length:100%_auto] relative h-full z-[10]"><div style="opacity:0"><div class="grid grid-cols-12 gap-x-32 sm:gap-x-16 relative z-[10] pb-32"><h2 class="col-span-7 md:col-span-full mb-8 font-Poppins text-h1 md:text-h3 text-dark-overlay-100 dark:text-light-overlay-100">As Easy As It Looks.</h2><p class="col-start-1 col-span-7 md:col-span-full text-body-20 md:text-body-20 sm:text-body-18 text-dark-overlay-60 dark:text-light-overlay-80 whitespace-pre-line">Easy Animation with Automatic Keyframes in an Editor We're Familiar With.</p></div></div><div style="opacity:0;transform:translateY(80px) translateZ(0)"><a href="/editor"><button type="button" class="group relative disabled:opacity-40 disabled:cursor-not-allowed outline-none font-Poppins h-40 text-button py-0 flex items-center justify-between rounded-sm transition-all duration-100 w-fit text-light-overlay-100 bg-light-overlay-10 hover:bg-light-overlay-5 active:bg-light-overlay-3 focus-visible:outline-2 focus-visible:outline-blue-500 focus-visible:outline-offset-[-2px] mb-64 sm:mb-32"><div class="text-center flex items-center justify-center w-full pointer-events-none px-12">See More</div></button></a></div><div class="relative" style="opacity:0;transform:scale(0.7) translateZ(0)"><div class="relative overflow-hidden border border-light-overlay-20 rounded-sm bg-cover bg-center"><video loop="" class="rounded-sm w-full false " preload="none" poster="" autoplay="" muted="" controls="" playsinline="" controlsList="nodownload">Your browser does not support video playback<source src="https://res.cloudinary.com/dfa4rxtnc/video/upload/v1724126360/Landing%20Page/Easy%20Looks/EN_-_AEAIL_comxnw.mov#t=0.001"/></video></div></div></div></div><div class="absolute bottom-0 left-0 right-0 w-screen h-[35%] sm:h-[20vh] bg-dark-overlay-100 z-[9]"></div></div></section><div><div class="dark bg-dark-overlay-100 py-80 relative lg:px-100 md:px-64 sm:px-32"><div class="relative w-full max-w-1024 mx-auto md:bg-none bg-center bg-repeat-y bg-[length:100%_auto] "><div class="!h-auto max-w-[584px]" style="opacity:0"><h2 class="col-span-12 mb-8 font-Poppins text-h1 md:text-h3 sm:text-h4 whitespace-pre-line text-dark-overlay-100 dark:text-light-overlay-100">Collaborate In Real-time.</h2><p class="col-span-7 md:col-span-full capitalize text-body-20 text-dark-overlay-60 dark:text-light-overlay-80 whitespace-pre-line">Edit Animations Collaboratively Unlike Other Tools.</p></div><div class="col-span-full mt-32 mb-64" style="opacity:0;transform:translateY(80px) translateZ(0)"><button type="button" class="group relative disabled:opacity-40 disabled:cursor-not-allowed outline-none font-Poppins h-40 text-button py-0 flex items-center justify-between rounded-sm transition-all duration-100 w-fit text-light-overlay-100 bg-light-overlay-10 hover:bg-light-overlay-5 active:bg-light-overlay-3 focus-visible:outline-2 focus-visible:outline-blue-500 focus-visible:outline-offset-[-2px] "><div class="text-center flex items-center justify-center w-full pointer-events-none px-12">See More</div></button></div><div class="grid grid-cols-12 gap-x-32 sm:gap-x-16 sm:gap-y-40"><div class="col-span-4 sm:col-span-full"><div style="opacity:0;transform:scale(0.7) translateZ(0)"><div class="rounded-sm group overflow-hidden"><div class="dotlottie-container main duration-400 group-hover:transform group-hover:scale-105 origin-center sm:transform-none" lang="en"><div data-name="undefined" role="figure" class="animation " style="position:relative;width:100%;height:100%"></div></div></div></div><div class="mt-24 px-8 text-center pb-24" style="opacity:0;transform:translateY(80px) translateZ(0)"><h3 class="text-h5 font-Poppins dark:text-light-overlay-100 mb-4 md:whitespace-pre-line sm:whitespace-normal">Edit Together</h3><p class="text-body-18 sm:text-body-16 dark:text-light-overlay-60">Share and co-edit animations in real-time with multiplayer.</p></div></div><div class="col-span-4 sm:col-span-full"><div style="opacity:0;transform:scale(0.7) translateZ(0)"><div class="rounded-sm group overflow-hidden"><div class="dotlottie-container main duration-400 group-hover:transform group-hover:scale-105 origin-center sm:transform-none" lang="en"><div data-name="undefined" role="figure" class="animation " style="position:relative;width:100%;height:100%"></div></div></div></div><div class="mt-24 px-8 text-center pb-24" style="opacity:0;transform:translateY(80px) translateZ(0)"><h3 class="text-h5 font-Poppins dark:text-light-overlay-100 mb-4 md:whitespace-pre-line sm:whitespace-normal">Version History</h3><p class="text-body-18 sm:text-body-16 dark:text-light-overlay-60">Save versions, revert changes, and track progress.</p></div></div><div class="col-span-4 sm:col-span-full"><div style="opacity:0;transform:scale(0.7) translateZ(0)"><div class="rounded-sm group overflow-hidden"><div class="dotlottie-container main duration-400 group-hover:transform group-hover:scale-105 origin-center sm:transform-none" lang="en"><div data-name="undefined" role="figure" class="animation " style="position:relative;width:100%;height:100%"></div></div></div></div><div class="mt-24 px-8 text-center pb-24" style="opacity:0;transform:translateY(80px) translateZ(0)"><h3 class="text-h5 font-Poppins dark:text-light-overlay-100 mb-4 md:whitespace-pre-line sm:whitespace-normal">Share Feedback</h3><p class="text-body-18 sm:text-body-16 dark:text-light-overlay-60">Leave comments inside animations.</p></div></div></div></div></div></div><div class="pt-80 pb-160 md:py-64 sm:pt-80 sm:pb-160 bg-dark-overlay-100 px-100 md:px-64 sm:px-0"><div class="relative max-w-1024 mx-auto overflow-auto"><div class="grid grid-cols-12 gap-x-32 sm:gap-x-16 h-full overflow-auto w-full"><div class="col-span-8 col-start-3 h-full md:col-span-12 mb-64"><div class="flex flex-col items-center justify-center" style="opacity:0"><h2 class="mb-16 text-center text-h1 md:text-h4 sm:text-h4 font-Poppins text-light-overlay-100">Made with Phase</h2><p class="text-center whitespace-pre-line text-body-20 md:text-body-20 sm:text-body-18 text-light-overlay-60 ">Design Animations and Micro-interactions Effortlessly.</p></div></div><div class="col-span-4 sm:col-span-full flex flex-col gap-y-32 sm:mb-32"><div class="rounded-sm overflow-hidden h-[416px] object-cover" style="opacity:0"><div class=" relative h-full group overflow-hidden cursor-pointer"><div class="md:hidden absolute z-10 inset-0 bg-dark-overlay-40 opacity-0 group-hover:opacity-100 flex justify-center items-center transition-all duration-300 ease-out"><button type="button" class="group relative disabled:opacity-40 disabled:cursor-not-allowed outline-none font-Poppins h-48 text-large-button py-0 flex items-center justify-between rounded-sm transition-all duration-100 w-fit bg-blue text-light-overlay-100 hover:bg-blue-600 active:bg-blue-700 focus-visible:outline-2 focus-visible:outline-blue-500 "><div class="text-center flex items-center justify-center w-full pointer-events-none pr-14 pl-12"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 24 24" class="mr-8"><path d="M7.293 11.293a1 1 0 0 1 1.414 0L11 13.586V8a1 1 0 1 1 2 0v5.586l2.293-2.293a1 1 0 0 1 1.414 1.414l-4 4-.007.007a.997.997 0 0 1-.697.286h-.006a.996.996 0 0 1-.697-.286l-.008-.008-4-3.999a1 1 0 0 1 0-1.414"></path><path fill-rule="evenodd" d="M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12m10-8a8 8 0 1 0 0 16 8 8 0 0 0 0-16" clip-rule="evenodd"></path></svg><span>Download</span></div></button></div><div class="dotlottie-container main duration-400 group-hover:transform group-hover:scale-105 origin-center sm:transform-none" lang="en"><div data-name="undefined" role="figure" class="animation " style="position:relative;width:100%;height:100%"></div></div></div></div><div class="rounded-sm overflow-hidden h-[416px] object-cover" style="opacity:0"><div class=" relative h-full group overflow-hidden cursor-pointer"><div class="md:hidden absolute z-10 inset-0 bg-dark-overlay-40 opacity-0 group-hover:opacity-100 flex justify-center items-center transition-all duration-300 ease-out"><button type="button" class="group relative disabled:opacity-40 disabled:cursor-not-allowed outline-none font-Poppins h-48 text-large-button py-0 flex items-center justify-between rounded-sm transition-all duration-100 w-fit bg-blue text-light-overlay-100 hover:bg-blue-600 active:bg-blue-700 focus-visible:outline-2 focus-visible:outline-blue-500 "><div class="text-center flex items-center justify-center w-full pointer-events-none pr-14 pl-12"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 24 24" class="mr-8"><path d="M7.293 11.293a1 1 0 0 1 1.414 0L11 13.586V8a1 1 0 1 1 2 0v5.586l2.293-2.293a1 1 0 0 1 1.414 1.414l-4 4-.007.007a.997.997 0 0 1-.697.286h-.006a.996.996 0 0 1-.697-.286l-.008-.008-4-3.999a1 1 0 0 1 0-1.414"></path><path fill-rule="evenodd" d="M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12m10-8a8 8 0 1 0 0 16 8 8 0 0 0 0-16" clip-rule="evenodd"></path></svg><span>Download</span></div></button></div><div class="dotlottie-container main duration-400 group-hover:transform group-hover:scale-105 origin-center sm:transform-none" lang="en"><div data-name="undefined" role="figure" class="animation " style="position:relative;width:100%;height:100%"></div></div></div></div></div><div class="col-span-4 sm:col-span-full flex flex-col gap-y-[33px] sm:mb-32"><div class="rounded-sm overflow-hidden object-cover h-[266px]" style="opacity:0"><div class=" relative h-full group overflow-hidden cursor-pointer"><div class="md:hidden absolute z-10 inset-0 bg-dark-overlay-40 opacity-0 group-hover:opacity-100 flex justify-center items-center transition-all duration-300 ease-out"><button type="button" class="group relative disabled:opacity-40 disabled:cursor-not-allowed outline-none font-Poppins h-48 text-large-button py-0 flex items-center justify-between rounded-sm transition-all duration-100 w-fit bg-blue text-light-overlay-100 hover:bg-blue-600 active:bg-blue-700 focus-visible:outline-2 focus-visible:outline-blue-500 "><div class="text-center flex items-center justify-center w-full pointer-events-none pr-14 pl-12"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 24 24" class="mr-8"><path d="M7.293 11.293a1 1 0 0 1 1.414 0L11 13.586V8a1 1 0 1 1 2 0v5.586l2.293-2.293a1 1 0 0 1 1.414 1.414l-4 4-.007.007a.997.997 0 0 1-.697.286h-.006a.996.996 0 0 1-.697-.286l-.008-.008-4-3.999a1 1 0 0 1 0-1.414"></path><path fill-rule="evenodd" d="M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12m10-8a8 8 0 1 0 0 16 8 8 0 0 0 0-16" clip-rule="evenodd"></path></svg><span>Download</span></div></button></div><div class="dotlottie-container main duration-400 group-hover:transform group-hover:scale-105 origin-center sm:transform-none" lang="en"><div data-name="undefined" role="figure" class="animation " style="position:relative;width:100%;height:100%"></div></div></div></div><div class="rounded-sm overflow-hidden object-cover h-[266px]" style="opacity:0"><div class=" relative h-full group overflow-hidden cursor-pointer"><div class="md:hidden absolute z-10 inset-0 bg-dark-overlay-40 opacity-0 group-hover:opacity-100 flex justify-center items-center transition-all duration-300 ease-out"><button type="button" class="group relative disabled:opacity-40 disabled:cursor-not-allowed outline-none font-Poppins h-48 text-large-button py-0 flex items-center justify-between rounded-sm transition-all duration-100 w-fit bg-blue text-light-overlay-100 hover:bg-blue-600 active:bg-blue-700 focus-visible:outline-2 focus-visible:outline-blue-500 "><div class="text-center flex items-center justify-center w-full pointer-events-none pr-14 pl-12"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 24 24" class="mr-8"><path d="M7.293 11.293a1 1 0 0 1 1.414 0L11 13.586V8a1 1 0 1 1 2 0v5.586l2.293-2.293a1 1 0 0 1 1.414 1.414l-4 4-.007.007a.997.997 0 0 1-.697.286h-.006a.996.996 0 0 1-.697-.286l-.008-.008-4-3.999a1 1 0 0 1 0-1.414"></path><path fill-rule="evenodd" d="M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12m10-8a8 8 0 1 0 0 16 8 8 0 0 0 0-16" clip-rule="evenodd"></path></svg><span>Download</span></div></button></div><div class="dotlottie-container main duration-400 group-hover:transform group-hover:scale-105 origin-center sm:transform-none" lang="en"><div data-name="undefined" role="figure" class="animation " style="position:relative;width:100%;height:100%"></div></div></div></div><div class="rounded-sm overflow-hidden object-cover h-[266px]" style="opacity:0"><div class=" relative h-full group overflow-hidden cursor-pointer"><div class="md:hidden absolute z-10 inset-0 bg-dark-overlay-40 opacity-0 group-hover:opacity-100 flex justify-center items-center transition-all duration-300 ease-out"><button type="button" class="group relative disabled:opacity-40 disabled:cursor-not-allowed outline-none font-Poppins h-48 text-large-button py-0 flex items-center justify-between rounded-sm transition-all duration-100 w-fit bg-blue text-light-overlay-100 hover:bg-blue-600 active:bg-blue-700 focus-visible:outline-2 focus-visible:outline-blue-500 "><div class="text-center flex items-center justify-center w-full pointer-events-none pr-14 pl-12"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 24 24" class="mr-8"><path d="M7.293 11.293a1 1 0 0 1 1.414 0L11 13.586V8a1 1 0 1 1 2 0v5.586l2.293-2.293a1 1 0 0 1 1.414 1.414l-4 4-.007.007a.997.997 0 0 1-.697.286h-.006a.996.996 0 0 1-.697-.286l-.008-.008-4-3.999a1 1 0 0 1 0-1.414"></path><path fill-rule="evenodd" d="M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12m10-8a8 8 0 1 0 0 16 8 8 0 0 0 0-16" clip-rule="evenodd"></path></svg><span>Download</span></div></button></div><div class="dotlottie-container main duration-400 group-hover:transform group-hover:scale-105 origin-center sm:transform-none" lang="en"><div data-name="undefined" role="figure" class="animation " style="position:relative;width:100%;height:100%"></div></div></div></div></div><div class="col-span-4 sm:col-span-full flex flex-col gap-y-32"><div class="rounded-sm overflow-hidden h-[416px] object-cover" style="opacity:0"><div class=" relative h-full group overflow-hidden cursor-pointer"><div class="md:hidden absolute z-10 inset-0 bg-dark-overlay-40 opacity-0 group-hover:opacity-100 flex justify-center items-center transition-all duration-300 ease-out"><button type="button" class="group relative disabled:opacity-40 disabled:cursor-not-allowed outline-none font-Poppins h-48 text-large-button py-0 flex items-center justify-between rounded-sm transition-all duration-100 w-fit bg-blue text-light-overlay-100 hover:bg-blue-600 active:bg-blue-700 focus-visible:outline-2 focus-visible:outline-blue-500 "><div class="text-center flex items-center justify-center w-full pointer-events-none pr-14 pl-12"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 24 24" class="mr-8"><path d="M7.293 11.293a1 1 0 0 1 1.414 0L11 13.586V8a1 1 0 1 1 2 0v5.586l2.293-2.293a1 1 0 0 1 1.414 1.414l-4 4-.007.007a.997.997 0 0 1-.697.286h-.006a.996.996 0 0 1-.697-.286l-.008-.008-4-3.999a1 1 0 0 1 0-1.414"></path><path fill-rule="evenodd" d="M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12m10-8a8 8 0 1 0 0 16 8 8 0 0 0 0-16" clip-rule="evenodd"></path></svg><span>Download</span></div></button></div><div class="dotlottie-container main duration-400 group-hover:transform group-hover:scale-105 origin-center sm:transform-none" lang="en"><div data-name="undefined" role="figure" class="animation " style="position:relative;width:100%;height:100%"></div></div></div></div><div class="rounded-sm overflow-hidden h-[416px] object-cover" style="opacity:0"><div class=" relative h-full group overflow-hidden cursor-pointer"><div class="md:hidden absolute z-10 inset-0 bg-dark-overlay-40 opacity-0 group-hover:opacity-100 flex justify-center items-center transition-all duration-300 ease-out"><button type="button" class="group relative disabled:opacity-40 disabled:cursor-not-allowed outline-none font-Poppins h-48 text-large-button py-0 flex items-center justify-between rounded-sm transition-all duration-100 w-fit bg-blue text-light-overlay-100 hover:bg-blue-600 active:bg-blue-700 focus-visible:outline-2 focus-visible:outline-blue-500 "><div class="text-center flex items-center justify-center w-full pointer-events-none pr-14 pl-12"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 24 24" class="mr-8"><path d="M7.293 11.293a1 1 0 0 1 1.414 0L11 13.586V8a1 1 0 1 1 2 0v5.586l2.293-2.293a1 1 0 0 1 1.414 1.414l-4 4-.007.007a.997.997 0 0 1-.697.286h-.006a.996.996 0 0 1-.697-.286l-.008-.008-4-3.999a1 1 0 0 1 0-1.414"></path><path fill-rule="evenodd" d="M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12m10-8a8 8 0 1 0 0 16 8 8 0 0 0 0-16" clip-rule="evenodd"></path></svg><span>Download</span></div></button></div><div class="dotlottie-container main duration-400 group-hover:transform group-hover:scale-105 origin-center sm:transform-none" lang="en"><div data-name="undefined" role="figure" class="animation " style="position:relative;width:100%;height:100%"></div></div></div></div></div></div></div></div><div class="bg-light-overlay-100 relative bg-black-white-gradient relative lg:px-100 md:px-64 sm:px-32"><div class="absolute top-0 left-0 w-full h-2/3"></div><div class="relative w-full max-w-1024 mx-auto md:bg-none bg-center bg-repeat-y bg-[length:100%_auto] "><div class=" bg-[url('/images/cta_bg.svg')] bg-no-repeat bg-cover bg-center px-48 py-56 sm:px-32 sm:py-40 flex md:flex-col items-center justify-between bg-blue rounded-sm gap-x-48 md:gap-y-48 sm:gap-y-32 " style="opacity:0;transform:translateY(80px) translateZ(0)"><div><h2 class="font-Poppins md:text-center text-h4 text-light-overlay-100 mb-8 mb" style="opacity:0">Start Animating</h2><p class="text-body-18 md:text-center text-light-overlay-80 whitespace-pre-line" style="opacity:0">Get Started with Our Free, Web-Based Platform.</p></div><div style="opacity:0;transform:scale(0.7) translateZ(0)"><button id="app-cta" type="button" class="group relative disabled:opacity-40 disabled:cursor-not-allowed outline-none font-Poppins h-48 text-large-button py-0 flex items-center justify-between rounded-sm transition-all duration-100 w-fit bg-light-overlay-100 text-blue hover:bg-gray-10 active:bg-gray-20 focus-visible:outline-2 focus-visible:outline-light-overlay-100 flex-shrink-0 sm:w-full"><div class="text-center flex items-center justify-center w-full pointer-events-none px-14">Get Started</div></button></div></div></div></div></div><div class="bg-light-overlay-100 w-full"><div class="w-full max-w-1024 lg:px-100 md:px-64 sm:px-32 pt-64 pb-24 mx-auto flex flex-col gap-y-64 md:gap-y-64"><div style="opacity:0;transform:translateY(20px)"><div class="flex md:grid md:grid-cols-12 gap-x-32 sm:gap-x-16 gap-y-64"><div class="sm:my-1 w-full md:col-span-6 sm:col-span-full"><h3 class="text-subtitle-20 font-Poppins text-dark-overlay-100">Product</h3><div class="mt-24 flex flex-col gap-y-16"><a class="w-fit focus-visible:outline-blue focus-visible:outline-2 rounded-xs text-body-16 text-dark-overlay-60 hover:text-dark-overlay-80 transition-colors ease-out duration-300 cursor-pointer" href="/editor"><h4>Editor</h4></a><a class="w-fit focus-visible:outline-blue focus-visible:outline-2 rounded-xs text-body-16 text-dark-overlay-60 hover:text-dark-overlay-80 transition-colors ease-out duration-300 cursor-pointer" href="/collaboration"><h4>Collaboration</h4></a><a class="w-fit focus-visible:outline-blue focus-visible:outline-2 rounded-xs text-body-16 text-dark-overlay-60 hover:text-dark-overlay-80 transition-colors ease-out duration-300 cursor-pointer" href="/comparison/after-effects"><h4>Comparison</h4></a><a class="w-fit focus-visible:outline-blue focus-visible:outline-2 rounded-xs text-body-16 text-dark-overlay-60 hover:text-dark-overlay-80 transition-colors ease-out duration-300 cursor-pointer" href="/release"><h4>Release Notes</h4></a></div></div><div class="sm:my-1 w-full md:col-span-6 sm:col-span-full"><h3 class="text-subtitle-20 font-Poppins text-dark-overlay-100">Learn</h3><div class="mt-24 flex flex-col gap-y-16"><a class="w-fit focus-visible:outline-blue focus-visible:outline-2 rounded-xs text-body-16 text-dark-overlay-60 hover:text-dark-overlay-80 transition-colors ease-out duration-300 cursor-pointer" href="/learn"><h4>Tutorial</h4></a></div></div><div class="sm:my-1 w-full md:col-span-6 sm:col-span-full"><h3 class="text-subtitle-20 font-Poppins text-dark-overlay-100">Resources</h3><div class="mt-24 flex flex-col gap-y-16"><a class="w-fit focus-visible:outline-blue focus-visible:outline-2 rounded-xs text-body-16 text-dark-overlay-60 hover:text-dark-overlay-80 transition-colors ease-out duration-300 cursor-pointer" href="/about"><h4>About</h4></a><a class="w-fit focus-visible:outline-blue focus-visible:outline-2 rounded-xs text-body-16 text-dark-overlay-60 hover:text-dark-overlay-80 transition-colors ease-out duration-300 cursor-pointer" target="_blank" href="https://jobs.polymer.co/phase-open-positions"><h4>Careers</h4></a><a class="w-fit focus-visible:outline-blue focus-visible:outline-2 rounded-xs text-body-16 text-dark-overlay-60 hover:text-dark-overlay-80 transition-colors ease-out duration-300 cursor-pointer" target="_blank" href="https://community.phase.com/"><h4>Community</h4></a><a class="w-fit focus-visible:outline-blue focus-visible:outline-2 rounded-xs text-body-16 text-dark-overlay-60 hover:text-dark-overlay-80 transition-colors ease-out duration-300 cursor-pointer" target="_blank" href="https://phase-software.notion.site/b65c2c81e5b948528b4f11021dd275d7?v=00cbd3e77ea3460cb1ea5bf02fc98add"><h4>FAQ</h4></a></div></div><div class="sm:my-1 w-full md:col-span-6 sm:col-span-full"><h3 class="text-subtitle-20 font-Poppins text-dark-overlay-100">Legal</h3><div class="mt-24 flex flex-col gap-y-16"><a class="w-fit focus-visible:outline-blue focus-visible:outline-2 rounded-xs text-body-16 text-dark-overlay-60 hover:text-dark-overlay-80 transition-colors ease-out duration-300 cursor-pointer" href="/privacy"><h4>Privacy Policy</h4></a><a class="w-fit focus-visible:outline-blue focus-visible:outline-2 rounded-xs text-body-16 text-dark-overlay-60 hover:text-dark-overlay-80 transition-colors ease-out duration-300 cursor-pointer" href="/terms"><h4>Terms of Service</h4></a></div></div></div></div><div class="flex items-center justify-between md:flex-col md:gap-y-24" style="opacity:0;transform:translateY(20px)"><div class="align-middle md:order-last"><p class="text-body-16 text-dark-overlay-60">© Phase Software GmbH <!-- -->2025</p></div><div class="flex flex-row gap-x-16 sm:order-first"><button class="cursor-pointer dark:text-light-overlay-100 dark:hover:bg-light-overlay-10 hover:bg-dark-overlay-10 dark:active:bg-light-overlay-20 active:bg-dark-overlay-20 p-4 focus-visible:outline-blue focus-visible:outline-2 rounded-xs flex items-center justify-center transition-all ease-out duration-300" aria-label="ig"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 24 24" class="w-24 h-24"><path fill="currentColor" d="M8.249 3A5.256 5.256 0 0 0 3 8.251v7.5A5.256 5.256 0 0 0 8.251 21h7.5A5.256 5.256 0 0 0 21 15.749v-7.5A5.256 5.256 0 0 0 15.749 3zm9.001 3a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5M12 7.5c2.482 0 4.5 2.018 4.5 4.5s-2.018 4.5-4.5 4.5A4.504 4.504 0 0 1 7.5 12c0-2.482 2.018-4.5 4.5-4.5M12 9a3 3 0 1 0 0 6 3 3 0 0 0 0-6"></path></svg></button><button class="cursor-pointer dark:text-light-overlay-100 dark:hover:bg-light-overlay-10 hover:bg-dark-overlay-10 dark:active:bg-light-overlay-20 active:bg-dark-overlay-20 p-4 focus-visible:outline-blue focus-visible:outline-2 rounded-xs flex items-center justify-center transition-all ease-out duration-300" aria-label="fb"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 24 24" class="w-24 h-24"><path fill="currentColor" d="M10 20v-8H7.333V9.333H10V7.901C10 5.19 11.32 4 13.574 4c1.079 0 1.65.08 1.92.117v2.55h-1.537c-.957 0-1.29.504-1.29 1.527v1.14h2.803L15.089 12h-2.423v8z"></path></svg></button><button class="cursor-pointer dark:text-light-overlay-100 dark:hover:bg-light-overlay-10 hover:bg-dark-overlay-10 dark:active:bg-light-overlay-20 active:bg-dark-overlay-20 p-4 focus-visible:outline-blue focus-visible:outline-2 rounded-xs flex items-center justify-center transition-all ease-out duration-300" aria-label="twitter"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 24 24" class="w-24 h-24"><g clip-path="url(#twitter_svg__a)"><path fill="currentColor" d="M16.6 5h2.454l-5.36 5.93L20 19h-4.937l-3.867-4.894L6.77 19H4.316l5.733-6.343L4 5h5.062l3.496 4.473zm-.86 12.578h1.36L8.323 6.347H6.865z"></path></g><defs><clipPath id="twitter_svg__a"><path fill="#fff" d="M4 5h16v14H4z"></path></clipPath></defs></svg></button><button class="cursor-pointer dark:text-light-overlay-100 dark:hover:bg-light-overlay-10 hover:bg-dark-overlay-10 dark:active:bg-light-overlay-20 active:bg-dark-overlay-20 p-4 focus-visible:outline-blue focus-visible:outline-2 rounded-xs flex items-center justify-center transition-all ease-out duration-300" aria-label="linkedin"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 24 24" class="w-24 h-24"><path fill="currentColor" d="M4.125 5.954c0-.53.177-.967.532-1.312.355-.345.816-.517 1.384-.517.557 0 1.008.17 1.353.509.354.35.532.806.532 1.368 0 .51-.173.934-.517 1.273-.355.35-.821.525-1.399.525h-.015c-.558 0-1.009-.175-1.353-.525-.345-.35-.517-.79-.517-1.32m.198 13.92V9.249h3.375v10.627zm5.245 0h3.375v-5.933c0-.371.04-.658.121-.86.142-.36.357-.665.646-.914.29-.25.651-.374 1.087-.374 1.135 0 1.703.8 1.703 2.402v5.68h3.375v-6.093c0-1.57-.355-2.76-1.064-3.572-.71-.811-1.647-1.217-2.813-1.217-1.307 0-2.326.589-3.055 1.766v.032h-.016l.016-.032V9.248H9.568c.02.339.03 1.394.03 3.166 0 1.77-.01 4.258-.03 7.46"></path></svg></button><button class="cursor-pointer dark:text-light-overlay-100 dark:hover:bg-light-overlay-10 hover:bg-dark-overlay-10 dark:active:bg-light-overlay-20 active:bg-dark-overlay-20 p-4 focus-visible:outline-blue focus-visible:outline-2 rounded-xs flex items-center justify-center transition-all ease-out duration-300" aria-label="slack"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 24 24" class="w-24 h-24"><g fill="currentColor" fill-rule="evenodd" clip-path="url(#slack_svg__a)" clip-rule="evenodd"><path d="M9.866 4a1.6 1.6 0 1 0 0 3.2h1.601V5.6c0-.882-.716-1.599-1.6-1.6m0 4.267H5.6a1.6 1.6 0 0 0 0 3.2h4.266a1.6 1.6 0 1 0 0-3.2M20 9.866a1.6 1.6 0 0 0-3.2 0v1.6h1.6a1.6 1.6 0 0 0 1.6-1.6m-4.266 0V5.6a1.6 1.6 0 0 0-3.2 0v4.266a1.6 1.6 0 1 0 3.2 0M14.134 20a1.6 1.6 0 1 0 0-3.2h-1.6v1.6a1.6 1.6 0 0 0 1.6 1.6m0-4.267H18.4a1.6 1.6 0 0 0 0-3.2h-4.266a1.6 1.6 0 0 0 0 3.2M4 14.133a1.6 1.6 0 0 0 3.2 0v-1.6H5.6a1.6 1.6 0 0 0-1.6 1.6m4.267 0v4.266a1.6 1.6 0 0 0 3.2.001v-4.266a1.6 1.6 0 0 0-3.2-.001"></path></g><defs><clipPath id="slack_svg__a"><path fill="#fff" d="M4 4h16v16H4z"></path></clipPath></defs></svg></button><button class="cursor-pointer dark:text-light-overlay-100 dark:hover:bg-light-overlay-10 hover:bg-dark-overlay-10 dark:active:bg-light-overlay-20 active:bg-dark-overlay-20 p-4 focus-visible:outline-blue focus-visible:outline-2 rounded-xs flex items-center justify-center transition-all ease-out duration-300" aria-label="email"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 24 24" class="w-24 h-24"><path fill="currentColor" fill-rule="evenodd" d="M14.047 3.236a9.002 9.002 0 1 0 3.427 15.912 1 1 0 1 0-1.215-1.588 7.002 7.002 0 1 1 2.744-5.559v.8a1.4 1.4 0 1 1-2.8 0v-.759a5.495 5.495 0 0 0 0-.08V8.8a1 1 0 0 0-1.941-.34 4.2 4.2 0 1 0 .718 6.505 3.403 3.403 0 0 0 2.623 1.237 3.4 3.4 0 0 0 3.4-3.4V12a9.001 9.001 0 0 0-6.956-8.765m.155 8.736v.06a2.2 2.2 0 1 1 0-.06" clip-rule="evenodd"></path></svg></button></div></div></div></div><div class="Toastify"></div></div><script id="__NEXT_DATA__" type="application/json" crossorigin="">{"props":{"pageProps":{"data":[{"id":1,"title":"moving_elements","source_link":"https://lottie.host/c3b58212-585c-414f-a9dc-e45552f8b1fa/p1EfNGkHBB.lottie","order_number":1,"locale":"en","phase_file":[{"id":2085,"name":"moving_elements.phase","alternativeText":null,"caption":null,"width":null,"height":null,"formats":null,"hash":"animation_1_fb98256f18","ext":".phase","mime":"application/octet-stream","size":168.28,"url":"https://cdn-ws-stage-uswest2.phase.com/animation_1_fb98256f18.phase","previewUrl":null,"provider":"aws-s3","provider_metadata":null}]},{"id":2,"title":"dancing_blobs","source_link":"https://lottie.host/7d448029-fff9-4f09-98ec-244d3a04c812/O9nYBVhQZT.lottie","order_number":2,"locale":"en","phase_file":[{"id":2082,"name":"dancing_blobs.phase","alternativeText":null,"caption":null,"width":null,"height":null,"formats":null,"hash":"animation_4_3039371859","ext":".phase","mime":"application/octet-stream","size":97.73,"url":"https://cdn-ws-stage-uswest2.phase.com/animation_4_3039371859.phase","previewUrl":null,"provider":"aws-s3","provider_metadata":null}]},{"id":3,"title":"orange_phase","source_link":"https://lottie.host/466b8d04-30db-49b4-bc25-c2d69c2f6d7f/FV5BScLwj7.lottie","order_number":3,"locale":"en","phase_file":[{"id":2083,"name":"organge_phase.phase","alternativeText":null,"caption":null,"width":null,"height":null,"formats":null,"hash":"animation_2_7aac04f2a8","ext":".phase","mime":"application/octet-stream","size":160.22,"url":"https://cdn-ws-stage-uswest2.phase.com/animation_2_7aac04f2a8.phase","previewUrl":null,"provider":"aws-s3","provider_metadata":null}]},{"id":4,"title":"sun_moon_toggle","source_link":"https://lottie.host/bc77b37f-e71f-49c9-92d7-392155e68d78/AhvGhJsmGt.lottie","order_number":4,"locale":"en","phase_file":[{"id":2086,"name":"sun_moon_toggle.phase","alternativeText":null,"caption":null,"width":null,"height":null,"formats":null,"hash":"animation_5_39b0ed6a9c","ext":".phase","mime":"application/octet-stream","size":177.78,"url":"https://cdn-ws-stage-uswest2.phase.com/animation_5_39b0ed6a9c.phase","previewUrl":null,"provider":"aws-s3","provider_metadata":null}]},{"id":5,"title":"flip_it","source_link":"https://lottie.host/190d59fd-5e65-45ec-ac4d-75aab0b9a470/9Je5LS5y5J.lottie","order_number":5,"locale":"en","phase_file":[{"id":2090,"name":"flip_it.phase","alternativeText":null,"caption":null,"width":null,"height":null,"formats":null,"hash":"flip_it_c56d340217","ext":".phase","mime":"application/octet-stream","size":287.88,"url":"https://cdn-ws-stage-uswest2.phase.com/flip_it_c56d340217.phase","previewUrl":null,"provider":"aws-s3","provider_metadata":null}]},{"id":6,"title":"let_chat","source_link":"https://lottie.host/268dac34-6322-426d-9654-6b11907324b0/siIBBjwD4V.lottie","order_number":6,"locale":"en","phase_file":[{"id":2084,"name":"let_chat.phase","alternativeText":null,"caption":null,"width":null,"height":null,"formats":null,"hash":"animation_3_7816bc37fd","ext":".phase","mime":"application/octet-stream","size":247.96,"url":"https://cdn-ws-stage-uswest2.phase.com/animation_3_7816bc37fd.phase","previewUrl":null,"provider":"aws-s3","provider_metadata":null}]},{"id":7,"title":"rolling_balls","source_link":"https://lottie.host/d1950611-8bcd-4ada-b306-00c03da38957/ZMUtlx4rff.lottie","order_number":7,"locale":"en","phase_file":[{"id":2089,"name":"rolling_balls.phase","alternativeText":null,"caption":null,"width":null,"height":null,"formats":null,"hash":"rolling_balls_38fca0914c","ext":".phase","mime":"application/octet-stream","size":111.68,"url":"https://cdn-ws-stage-uswest2.phase.com/rolling_balls_38fca0914c.phase","previewUrl":null,"provider":"aws-s3","provider_metadata":null}]}],"_nextI18Next":{"initialI18nStore":{"en-US":{"common":{"feature":"Feature","download":"Download","support":"Support","contact":"Contact","faq":"FAQ","whats_new":"What's New","release_notes_title":"Release Notes","release_notes_subtitle":"Explore New Features and Updates in Phase.","motion_course_link":"https://phase-motion.teachable.com/p/phase-motion-course","faq_link":"https://phase-software.notion.site/b65c2c81e5b948528b4f11021dd275d7?v=00cbd3e77ea3460cb1ea5bf02fc98add","contact_link":"mailto:[email protected]","instagram_link":"https://www.instagram.com/phasesoftware/","tutorial":"Tutorial","motion_course":"Motion Course","guide":"Guide","name_required":"Name required. Enter your name.","name_exceeds_limit":"Name exceeds limit. Keep name under 256 characters.","email_required":"Email required. Provide your email address.","invalid_email":"Invalid email. Enter a valid email address.","not_found":"Not Found","not_found_description":"This page might have been removed, or it doesn’t exist. Check if the URL is spelled correctly, or head back to our homepage.","page_not_found_title":"Page Not Found","page_not_found_subtitle":"The page you are looking for is not available","go_back_home":"Go Back Home","submit":"Submit","name":"Name","email":"Email","see_more":"See More","see_all":"See All","start_animating":"Start Animating","start_animating_subtitle":"Get Started with Our Free, Web-Based Platform.","check_out_collaboration":"Check out Collaboration","product":"Product","editor":"Editor","collaboration":"Collaboration","learn":"Learn","about":"About","privacy_policy":"Privacy Policy","terms_of_service":"Terms of Service","legal_notice":"Legal Notice","resources":"Resources","legal":"Legal","community":"Community","animate_now":"Animate Now","careers":"Careers","get_started":"Get Started","join_the_waitlist":"Join the Waitlist","join_us":"Join Us","join_us_subtitle":"Want to help others who Enjoy Being Creative? Check our open roles.","where_ideas_collide":"Where Ideas Collide","where_ideas_collide_subtitle":"Discover how we help teams Enjoy Being Creative","but_wait_theres_more":"But Wait, There's More","but_wait_theres_more_subtitle":"Explore what makes our editor ideal for UI/UX Designers","how_our_editor_works":"Check It Out","see_open_roles":"See Roles","last_updated":"Last Updated","our_editor":"Our Editor","our_editor_subtitle":"Find Out Why UI/UX Designers Love Phase.","our_collaboration":"Collaboration","our_subtitle":"Discover How Teams Work Together in Phase.","check_it_out":"Check It Out","explore_phase":"Explore Phase.","get_started_learn":"Enter the App","get_started_with_phase":"Get Started with Phase","get_started_with_phase_subtitle":"Start Animating With Phase and Feel The Difference.","comparison":"Comparison","shortcut":"Shortcut","function":"Function","blog":"Blog","load_more":"Load More","figma_plugin":"Figma Plugin"},"home":{"meta":{"title":"Phase - Animation for Product Designers","description":"Phase is bringing easy and collaborative animation to product designers."},"hero":{"title":"Simple Animation For Product Designers","title_mobile":"Simple Animation\nFor Product Designers","subtitle":"Easy to Learn - Lottie Animation \u0026 Micro-Interactions.","subtitle_mobile":"Easy to Learn - Lottie Animation \u0026 Micro-Interactions.","real_ui":"https://res.cloudinary.com/dfa4rxtnc/image/upload/v1722410462/Landing%20Page/Hero/real_ui_en-US.svg","title_mobile_white":"Simple Animation","title_mobile_blue":"For Product Designers","real_ui_you":"https://res.cloudinary.com/dfa4rxtnc/image/upload/v1723449146/Landing%20Page/Cursor/EN_-_Cursor_-_You_lchv53.png","real_ui_sage":"https://res.cloudinary.com/dfa4rxtnc/image/upload/v1723449146/Landing%20Page/Cursor/EN_-_Cursor_-_Sage_nr0wjk.png","real_ui_willow":"https://res.cloudinary.com/dfa4rxtnc/image/upload/v1723449148/Landing%20Page/Cursor/EN_-_Cursor_-_Willow_hulwub.png"},"design_animation":{"title":"From Design to Animation.","subtitle":"Easy Workflows that Make Animation Less Intimidating.","import":"1. Import","import_subtitle":"Import Images, Lotties, or SVGs from Figma and other tools.","animate":"2. Animate","animate_subtitle":"Edit Animations with a tool UI Designers know and love.","export":"3. Export","export_subtitle":"Easily share designs with developers using Lottie, GIF, or MP4."},"easy_looks":{"title":"As Easy As It Looks.","subtitle":"Easy Animation with Automatic Keyframes in an Editor We're Familiar With.","intuitive_ui":"Intuitive UI","intuitive_ui_subtitle":"Add designs from the Lottie Library or image assets. Figma files work too, as long as they’re in SVG format.","automatic_keyframes":"Automatic Keyframes","automatic_keyframes_subtitle":"Animation tailored just for UI/UX Designers. More time in Creative Flow.","video_url":"https://res.cloudinary.com/dfa4rxtnc/video/upload/v1724126360/Landing%20Page/Easy%20Looks/EN_-_AEAIL_comxnw.mov"},"virtual_workspace":{"title":"Collaborate In Real-time.","subtitle":"Edit Animations Collaboratively Unlike Other Tools.","collaborative_editing":"Edit Together","collaborative_editing_tablet":"Edit Together","collaborative_editing_subtitle":"Share and co-edit animations in real-time with multiplayer.","version_history":"Version History","version_history_tablet":"Version History","version_history_subtitle":"Save versions, revert changes, and track progress.","timeline_commenting":"Share Feedback","timeline_commenting_tablet":"Share Feedback","timeline_commenting_subtitle":"Leave comments inside animations."},"gallery":{"title":"Made with Phase","subtitle":"Design Animations and Micro-interactions Effortlessly."}}}},"initialLocale":"en-US","ns":["common","home"],"userConfig":null}},"__N_SSG":true},"page":"/","query":{},"buildId":"RIyStUt3OOyBLoR_4HdNT","isFallback":false,"gsp":true,"locale":"en-US","locales":["en-US","ko-KR","ja-JP","pt-PT","es-ES","zh-TW"],"defaultLocale":"en-US","scriptLoader":[]}</script></body></html>