Inboxes

Create an inbox to save and track emails. It's free!

+New inbox
Back
Back
Back 
<!DOCTYPE html>
<html lang="en" style="background-color: #fff;" xmlns="//www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:v="urn:schemas-microsoft-com:vml">
 <head>
  <title>
   Framer Monthly
  </title>
  <!--[if !mso]><!-->
  <meta content="IE=edge" http-equiv="X-UA-Compatible"/>
  <!--<![endif]-->
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
  <meta content="width=device-width, initial-scale=1" name="viewport"/>
  <style type="text/css">
   #outlook a { padding:0; }
      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }
      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }
      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }
      p { display:block;margin:13px 0; }
  </style>
  <!--[if mso]>
    <noscript>
    <xml>
    <o:OfficeDocumentSettings>
      <o:AllowPNG/>
      <o:PixelsPerInch>96</o:PixelsPerInch>
    </o:OfficeDocumentSettings>
    </xml>
    </noscript>
    <![endif]-->
  <!--[if lte mso 11]>
    <style type="text/css">
      .mj-outlook-group-fix { width:100% !important; }
    </style>
    <![endif]-->
  <style type="text/css">
   @media only screen and (min-width:480px) {
        .mj-column-per-100 { width:100% !important; max-width: 100%; }
      }
  </style>
  <style media="screen and (min-width:480px)">
   .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }
  </style>
  <style type="text/css">
   @media only screen and (max-width:479px) {
      table.mj-full-width-mobile { width: 100% !important; }
      td.mj-full-width-mobile { width: auto !important; }
    }
  </style>
  <style type="text/css">
   .wfix {
          max-width: 2400px !important;
        }
        @media(max-width: 599px) {
          .social-icon-mobile-spacer {
            display: inline-block !important;
          }
        }
  </style>
  <style>
   .wrapper {
            padding: 0 12px;
          }

          /* Superhuman selector */
          .ShadowHTML .wrapper {
            padding: 0 !important;
          }

         
         
         
      .ShadowHTML.isMarketing { background-color: #fff !important; }
      .ShadowHTML.isMarketing .styled-primary-column { background-color: #ffffff !important; border-radius: 0px; }
    
         

          /* Gmail selectors */
          u + .body .wrapper {
            padding: 0 !important;
          }
          div > u + .body .wrapper {
            padding: 0 !important;
          }
          
    u + .body a {
      text-decoration: underline !important;
      color: #000000 !important;
    }
    u + .body .button a {
      text-decoration: none !important;
    }
  
          
    a:not(.link-nostyle) {
      text-decoration: underline;
      color: #000000 !important;
    }
  </style>
  <meta content="light" name="color-scheme"/>
  <meta content="light" name="supported-color-schemes"/>
 </head>
 <body class="body" style="word-spacing:normal;background-color:#ffffff;">
  <div style="display:none;font-size:1px;color:#ffffff;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">
   Faster Sites, Contra Component, AVIF Images, and much more
  </div>
  <div class="email-body" lang="en" style="background-color:#ffffff;">
   <img alt="" src="https://inboxflows.com/_/image/http%253A%252F%252Fc.vialoops.com%252FCI0%252F0100018fca406809-0193790a-e1cf-4f98-ae7b-1fc833aa4963-000000%252FbCVzvhE6yes78IuJ7F0UmMckSw-RjwVP4BAvzhRHo3A%253D355/?inbox_flows_img_sig=eyJwYXRoIjoiaHR0cCUzQSUyRiUyRmMudmlhbG9vcHMuYyIsInRpbWUiOjE3MTcwODUxNzEuNzg4ODIxfQ:1sCiI7:U6blENqp3EhYGVEH-qjUOXQFtxbsvPtxGQOQOXlWn_s" style="display: none; width: 1px; height: 1px;"/>
   <div style="display: none; max-height: 0px; overflow: hidden;">
    ͏ ​     ­ ͏ ​     ­
͏ ​     ­ ͏ ​     ­
͏ ​     ­ ͏ ​     ­
͏ ​     ­ ͏ ​     ­
͏ ​     ­ ͏ ​     ­
͏ ​     ­ ͏ ​     ­
͏ ​     ­ ͏ ​     ­
͏ ​     ­ ͏ ​     ­
͏ ​     ­ ͏ ​     ­
͏ ​     ­ ͏ ​     ­
͏ ​     ­ ͏ ​     ­
͏ ​     ­ ͏ ​     ­
͏ ​     ­ ͏ ​     ­
͏ ​     ­ ͏ ​     ­
͏ ​     ­ ͏ ​     ­
͏ ​     ­ ͏ ​     ­
͏ ​     ­ ͏ ​     ­
͏ ​     ­ ͏ ​     ­
͏ ​     ­ ͏ ​     ­
͏ ​     ­ ͏ ​     ­
͏ ​     ­ ͏ ​     ­
͏ ​     ­ ͏ ​     ­
͏ ​     ­ ͏ ​     ­
͏ ​     ­ ͏ ​     ­
   </div>
   <!--[if mso]><style type="text/css"> .outlook-list-fix { margin-left:4px !important; } .outlook-break-full-link { word-break: break-all !important; } .outlook-hide-social-icon { display: none !important; mso-hide:all; width: 0px !important; padding: 0px !important; } .outlook-hide-social-icon * { display: none !important; mso-hide:all; width: 0px !important; padding: 0px !important; } .outlook-hide-social-icon table { display: none !important; mso-hide:all; width: 0px !important; padding: 0px !important; } .outlook-hide-social-icon tbody { display: none !important; mso-hide:all; width: 0px !important; padding: 0px !important; } .outlook-hide-social-icon tr { display: none !important; mso-hide:all; width: 0px !important; padding: 0px !important; } .outlook-hide-social-icon td { display: none !important; mso-hide:all; width: 0px !important; padding: 0px !important; } .outlook-hide-social-icon img { display: none !important; mso-hide:all; width: 0px !important; padding: 0px !important; } .outlook-hide-social-icon a { display: none !important; mso-hide:all; width: 0px !important; padding: 0px !important; }
</style><table align="center" border="0" cellpadding="0" cellspacing="0" class="ml-outlook wfix-outlook gmail-no-padding-outlook wrapper-outlook" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
   <div class="ml wfix gmail-no-padding wrapper" style="margin: 0px auto; max-width: 600px; margin-left: 0px !important;">
    <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
     <tbody>
      <tr>
       <td style="direction:ltr;font-size:0px;padding:20px 0;padding-top:0;text-align:center;">
        <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="wfix-outlook" width="600px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="wfix-outlook" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
        <div class="wfix" style="margin:0px auto;max-width:600px;">
         <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
          <tbody>
           <tr>
            <td style="direction:ltr;font-size:0px;padding:20px 0;padding-bottom:24px;padding-left:0px;padding-right:0px;padding-top:24px;text-align:center;">
             <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td align="center" class="wfix-outlook rounded-corners-outlook styled-primary-column-outlook" style="vertical-align:top;width:600px;" ><![endif]-->
             <div class="mj-column-per-100 mj-outlook-group-fix wfix rounded-corners styled-primary-column" style="font-size: 0px; text-align: left; direction: ltr; display: inline-block; vertical-align: top; width: 100%; max-width: 600px !important;">
              <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse: separate;" width="100%">
               <tbody>
                <tr>
                 <td style="background-color:#ffffff;border-radius:0px;vertical-align:top;padding-top:0px;padding-right:20px;padding-bottom:0px;padding-left:20px;">
                  <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%">
                   <tbody>
                    <tr>
                     <td align="left" style="font-size:0px;padding:10px 25px;padding-top:4px;padding-right:0px;padding-bottom:4px;padding-left:0px;word-break:break-word;">
                      <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;">
                       <tbody>
                        <tr>
                         <td style="width:40px;">
                          <img height="auto" src="https://inboxflows.com/_/image/https%253A%252F%252Fd3b9kr64nievew.cloudfront.net%252Fclwszoaim009bhg094ayv7mym%252Fclwszoan8009chg09jpm8gv0m.png/?inbox_flows_img_sig=eyJwYXRoIjoiaHR0cHMlM0ElMkYlMkZkM2I5a3I2NG5pZSIsInRpbWUiOjE3MTcwODUxNzEuNzg5NjM0N30:1sCiI7:Nk9BX3yav0GmxE8bM5pLjg4EivkuAOMeHhk98mbNhdI" style="border:0;border-radius:0px;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="40"/>
                         </td>
                        </tr>
                       </tbody>
                      </table>
                     </td>
                    </tr>
                    <tr>
                     <td align="left" class="dark-force" style="font-size:0px;padding:10px 25px;padding-top:4px;padding-right:0px;padding-bottom:4px;padding-left:0px;word-break:break-word;">
                      <div style="font-family:sans-serif;font-size:14px;line-height:22px !important;text-align:left;color:#444444;">
                       <span>
                       </span>
                      </div>
                     </td>
                    </tr>
                    <tr>
                     <td align="left" class="dark-force" style="font-size:0px;padding:10px 25px;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;word-break:break-word;">
                      <div style="font-family:sans-serif;font-size:14px;line-height:22px !important;text-align:left;color:#444444;">
                       <span style="line-height: 22px !important; font-size: 14px; font-size: 14px !important; white-space: pre-wrap;">
                        May has been full of exciting updates to help make your sites better, faster, and more beautiful than ever before. Check out this breakdown of all the updates this month.
                       </span>
                      </div>
                     </td>
                    </tr>
                    <tr>
                     <td align="left" class="dark-force" style="font-size:0px;padding:10px 25px;padding-top:4px;padding-right:0px;padding-bottom:4px;padding-left:0px;word-break:break-word;">
                      <div style="font-family:sans-serif;font-size:14px;line-height:22px !important;text-align:left;color:#444444;">
                       <span>
                       </span>
                      </div>
                     </td>
                    </tr>
                    <tr>
                     <td align="left" class="dark-force" style="font-size:0px;padding:10px 25px;padding-top:12px;padding-right:0px;padding-bottom:4px;padding-left:0px;word-break:break-word;">
                      <div style="font-family:sans-serif;font-size:16px;line-height:26px !important;text-align:left;color:#000000;">
                       <h3 class="dark-force" style="padding: 0; margin: 0; font-weight: 500; font-size: 16px; color: #000000 !important; line-height: 26px !important; font-size: 16px !important;">
                        <span class="bold" style="font-weight: 600; font-size: 16px; white-space: pre-wrap; line-height: 26px !important; font-size: 16px !important;">
                         AVIF Images
                        </span>
                       </h3>
                      </div>
                     </td>
                    </tr>
                    <tr>
                     <td align="left" class="dark-force" style="font-size:0px;padding:10px 25px;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;word-break:break-word;">
                      <div style="font-family:sans-serif;font-size:14px;line-height:22px !important;text-align:left;color:#444444;">
                       <span style="line-height: 22px !important; font-size: 14px; font-size: 14px !important; white-space: pre-wrap;">
                        Framer automatically optimizes images, resizing them to make them smaller when needed and converting them with better compression. Today, we’re introducing support for
                       </span>
                       <span class="code" style="font-family: monospace; background-color: rgb(243, 244, 246, 0.75); padding: 1px 4px; font-size: 14px; white-space: pre-wrap; line-height: 22px !important; font-size: 14px !important;">
                        AVIF
                       </span>
                       <span style="line-height: 22px !important; font-size: 14px; font-size: 14px !important; white-space: pre-wrap;">
                        , a new image format known for its superior quality and efficiency. The
                       </span>
                       <span class="code" style="font-family: monospace; background-color: rgb(243, 244, 246, 0.75); padding: 1px 4px; font-size: 14px; white-space: pre-wrap; line-height: 22px !important; font-size: 14px !important;">
                        AVIF
                       </span>
                       <span style="line-height: 22px !important; font-size: 14px; font-size: 14px !important; white-space: pre-wrap;">
                        format is widely supported by modern browsers and offers smaller file sizes while maintaining high image quality, often up to 50% smaller than
                       </span>
                       <span class="code" style="font-family: monospace; background-color: rgb(243, 244, 246, 0.75); padding: 1px 4px; font-size: 14px; white-space: pre-wrap; line-height: 22px !important; font-size: 14px !important;">
                        JPEG
                       </span>
                       <span style="line-height: 22px !important; font-size: 14px; font-size: 14px !important; white-space: pre-wrap;">
                        and even
                       </span>
                       <span class="code" style="font-family: monospace; background-color: rgb(243, 244, 246, 0.75); padding: 1px 4px; font-size: 14px; white-space: pre-wrap; line-height: 22px !important; font-size: 14px !important;">
                        WEBP
                       </span>
                       <span style="line-height: 22px !important; font-size: 14px; font-size: 14px !important; white-space: pre-wrap;">
                        , the previous format we’ve been using. Starting today, every Framer site will benefit from
                       </span>
                       <span class="code" style="font-family: monospace; background-color: rgb(243, 244, 246, 0.75); padding: 1px 4px; font-size: 14px; white-space: pre-wrap; line-height: 22px !important; font-size: 14px !important;">
                        AVIF
                       </span>
                       <span style="line-height: 22px !important; font-size: 14px; font-size: 14px !important; white-space: pre-wrap;">
                        support. No need to republish your site, as the transition is seamless and will roll out gradually.
                       </span>
                      </div>
                     </td>
                    </tr>
                    <tr>
                     <td align="left" class="dark-force" style="font-size:0px;padding:10px 25px;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;word-break:break-word;">
                      <div style="font-family:sans-serif;font-size:14px;line-height:22px !important;text-align:left;color:#444444;">
                       <span>
                       </span>
                      </div>
                     </td>
                    </tr>
                    <tr>
                     <td align="left" style="font-size:0px;padding:10px 25px;padding-top:4px;padding-right:0px;padding-bottom:4px;padding-left:0px;word-break:break-word;">
                      <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;">
                       <tbody>
                        <tr>
                         <td style="width:560px;">
                          <a style="text-decoration: underline; color: #000000 !important;" target="_blank">
                           <img height="auto" src="https://inboxflows.com/_/image/https%253A%252F%252Fd3b9kr64nievew.cloudfront.net%252Fclwszoaim009bhg094ayv7mym%252Fclwt3fpm900cyi4p2y5258rmn.png/?inbox_flows_img_sig=eyJwYXRoIjoiaHR0cHMlM0ElMkYlMkZkM2I5a3I2NG5pZSIsInRpbWUiOjE3MTcwODUxNzEuNzg5ODUxMn0:1sCiI7:WjJjqwYeXXkRI1AxBWEvpVxtumImAY93FLskg208Ilg" style="border:0;border-radius:10px;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="560"/>
                          </a>
                         </td>
                        </tr>
                       </tbody>
                      </table>
                     </td>
                    </tr>
                    <tr>
                     <td align="left" class="dark-force" style="font-size:0px;padding:10px 25px;padding-top:4px;padding-right:0px;padding-bottom:4px;padding-left:0px;word-break:break-word;">
                      <div style="font-family:sans-serif;font-size:14px;line-height:22px !important;text-align:left;color:#444444;">
                       <span>
                       </span>
                      </div>
                     </td>
                    </tr>
                    <tr>
                     <td align="left" class="dark-force" style="font-size:0px;padding:10px 25px;padding-top:12px;padding-right:0px;padding-bottom:4px;padding-left:0px;word-break:break-word;">
                      <div style="font-family:sans-serif;font-size:16px;line-height:26px !important;text-align:left;color:#000000;">
                       <h3 class="dark-force" style="padding: 0; margin: 0; font-weight: 500; font-size: 16px; color: #000000 !important; line-height: 26px !important; font-size: 16px !important;">
                        <span class="bold" style="font-weight: 600; font-size: 16px; white-space: pre-wrap; line-height: 26px !important; font-size: 16px !important;">
                         CMS Upgrade
                        </span>
                       </h3>
                      </div>
                     </td>
                    </tr>
                    <tr>
                     <td align="left" class="dark-force" style="font-size:0px;padding:10px 25px;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;word-break:break-word;">
                      <div style="font-family:sans-serif;font-size:14px;line-height:22px !important;text-align:left;color:#444444;">
                       <a class="body-link dark-force" rel="noopener noreferrer" style="text-decoration: underline; color: #000000 !important;" target="_blank">
                        <span class="underline" style="font-size: 14px; white-space: pre-wrap; text-decoration: underline !important; line-height: 22px !important; font-size: 14px !important;">
                         This update
                        </span>
                       </a>
                       <span style="line-height: 22px !important; font-size: 14px; font-size: 14px !important; white-space: pre-wrap;">
                        significantly improves the
                       </span>
                       <a class="body-link dark-force" rel="noopener noreferrer" style="text-decoration: underline; color: #000000 !important;" target="_blank">
                        <span class="underline" style="font-size: 14px; white-space: pre-wrap; text-decoration: underline !important; line-height: 22px !important; font-size: 14px !important;">
                         Framer CMS
                        </span>
                       </a>
                       <span style="line-height: 22px !important; font-size: 14px; font-size: 14px !important; white-space: pre-wrap;">
                        , making it more robust and better equipped to handle larger sites and support collections of up to
                       </span>
                       <span class="bold" style="font-weight: 600; font-size: 14px; white-space: pre-wrap; line-height: 22px !important; font-size: 14px !important;">
                        100,000 items
                       </span>
                       <span style="line-height: 22px !important; font-size: 14px; font-size: 14px !important; white-space: pre-wrap;">
                        . It also reduces the data needed to open a site, boosting overall performance for larger sites. Lastly, this upgrade paves the way for many new features that are currently in the works.
                       </span>
                       <br/>
                      </div>
                     </td>
                    </tr>
                    <tr>
                     <td align="left" class="dark-force" style="font-size:0px;padding:10px 25px;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;word-break:break-word;">
                      <div style="font-family:sans-serif;font-size:14px;line-height:22px !important;text-align:left;color:#444444;">
                       <span>
                       </span>
                      </div>
                     </td>
                    </tr>
                    <tr>
                     <td align="left" style="font-size:0px;padding:10px 25px;padding-top:4px;padding-right:0px;padding-bottom:4px;padding-left:0px;word-break:break-word;">
                      <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;">
                       <tbody>
                        <tr>
                         <td style="width:560px;">
                          <a style="text-decoration: underline; color: #000000 !important;" target="_blank">
                           <img height="auto" src="https://inboxflows.com/_/image/https%253A%252F%252Fd3b9kr64nievew.cloudfront.net%252Fclwszoaim009bhg094ayv7mym%252Fclwt3fx4g02hh3yv3wff21a34.png/?inbox_flows_img_sig=eyJwYXRoIjoiaHR0cHMlM0ElMkYlMkZkM2I5a3I2NG5pZSIsInRpbWUiOjE3MTcwODUxNzEuNzkwMDI0NX0:1sCiI7:RAJVMHPHfzLxC3jkKtrPgsSwO80vZ2obyT2fv40YjEk" style="border:0;border-radius:10px;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="560"/>
                          </a>
                         </td>
                        </tr>
                       </tbody>
                      </table>
                     </td>
                    </tr>
                    <tr>
                     <td align="left" class="dark-force" style="font-size:0px;padding:10px 25px;padding-top:12px;padding-right:0px;padding-bottom:4px;padding-left:0px;word-break:break-word;">
                      <div style="font-family:sans-serif;font-size:16px;line-height:26px !important;text-align:left;color:#000000;">
                       <h3 class="dark-force" style="padding: 0; margin: 0; font-weight: 500; font-size: 16px; color: #000000 !important; line-height: 26px !important; font-size: 16px !important;">
                        <span>
                        </span>
                       </h3>
                      </div>
                     </td>
                    </tr>
                    <tr>
                     <td align="left" class="dark-force" style="font-size:0px;padding:10px 25px;padding-top:12px;padding-right:0px;padding-bottom:4px;padding-left:0px;word-break:break-word;">
                      <div style="font-family:sans-serif;font-size:16px;line-height:26px !important;text-align:left;color:#000000;">
                       <h3 class="dark-force" style="padding: 0; margin: 0; font-weight: 500; font-size: 16px; color: #000000 !important; line-height: 26px !important; font-size: 16px !important;">
                        <span class="bold" style="font-weight: 600; font-size: 16px; white-space: pre-wrap; line-height: 26px !important; font-size: 16px !important;">
                         Animation Update
                        </span>
                       </h3>
                      </div>
                     </td>
                    </tr>
                    <tr>
                     <td align="left" class="dark-force" style="font-size:0px;padding:10px 25px;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;word-break:break-word;">
                      <div style="font-family:sans-serif;font-size:14px;line-height:22px !important;text-align:left;color:#444444;">
                       <span style="line-height: 22px !important; font-size: 14px; font-size: 14px !important; white-space: pre-wrap;">
                        All the animations on Framer sites are powered by our open-source animation library,
                       </span>
                       <a class="body-link dark-force" rel="noopener noreferrer" style="text-decoration: underline; color: #000000 !important;" target="_blank">
                        <span class="underline" style="font-size: 14px; white-space: pre-wrap; text-decoration: underline !important; line-height: 22px !important; font-size: 14px !important;">
                         Framer Motion
                        </span>
                       </a>
                       <span style="line-height: 22px !important; font-size: 14px; font-size: 14px !important; white-space: pre-wrap;">
                        . With the
                       </span>
                       <a class="body-link dark-force" rel="noopener noreferrer" style="text-decoration: underline; color: #000000 !important;" target="_blank">
                        <span class="underline" style="font-size: 14px; white-space: pre-wrap; text-decoration: underline !important; line-height: 22px !important; font-size: 14px !important;">
                         latest update
                        </span>
                       </a>
                       <span style="line-height: 22px !important; font-size: 14px; font-size: 14px !important; white-space: pre-wrap;">
                        , we are significantly increasing the performance of these animations. Framer Motion is now
                       </span>
                       <span class="code" style="font-family: monospace; background-color: rgb(243, 244, 246, 0.75); padding: 1px 4px; font-size: 14px; white-space: pre-wrap; line-height: 22px !important; font-size: 14px !important;">
                        2.5⨉
                       </span>
                       <span style="line-height: 22px !important; font-size: 14px; font-size: 14px !important; white-space: pre-wrap;">
                        faster at reading animation values from the
                       </span>
                       <span class="underline" style="font-size: 14px; white-space: pre-wrap; text-decoration: underline !important; line-height: 22px !important; font-size: 14px !important;">
                        DOM
                       </span>
                       <span style="line-height: 22px !important; font-size: 14px; font-size: 14px !important; white-space: pre-wrap;">
                        and a whopping
                       </span>
                       <span class="code" style="font-family: monospace; background-color: rgb(243, 244, 246, 0.75); padding: 1px 4px; font-size: 14px; white-space: pre-wrap; line-height: 22px !important; font-size: 14px !important;">
                        6⨉
                       </span>
                       <span style="line-height: 22px !important; font-size: 14px; font-size: 14px !important; white-space: pre-wrap;">
                        faster at converting between value types. Additionally, we moved all other features onto the Motion render loop like Relative Overlays and Custom Cursors. All this contributes to butter-smooth animations on effect-heavy sites. Simply republish your website to enjoy these performance improvements—that’s all it takes.
                       </span>
                      </div>
                     </td>
                    </tr>
                    <tr>
                     <td align="left" class="dark-force" style="font-size:0px;padding:10px 25px;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;word-break:break-word;">
                      <div style="font-family:sans-serif;font-size:14px;line-height:22px !important;text-align:left;color:#444444;">
                       <br/>
                      </div>
                     </td>
                    </tr>
                    <tr>
                     <td align="left" style="font-size:0px;padding:10px 25px;padding-top:4px;padding-right:0px;padding-bottom:4px;padding-left:0px;word-break:break-word;">
                      <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;">
                       <tbody>
                        <tr>
                         <td style="width:560px;">
                          <a style="text-decoration: underline; color: #000000 !important;" target="_blank">
                           <img height="auto" src="https://inboxflows.com/_/image/https%253A%252F%252Fd3b9kr64nievew.cloudfront.net%252Fclwszoaim009bhg094ayv7mym%252Fclwt3ggoi01rre0kwp9cep8id.png/?inbox_flows_img_sig=eyJwYXRoIjoiaHR0cHMlM0ElMkYlMkZkM2I5a3I2NG5pZSIsInRpbWUiOjE3MTcwODUxNzEuNzkwMjUwOH0:1sCiI7:R3U5vWULDRmnFtRCpWuaeyEZzzAgDyufp_t_jdR7XO0" style="border:0;border-radius:10px;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="560"/>
                          </a>
                         </td>
                        </tr>
                       </tbody>
                      </table>
                     </td>
                    </tr>
                    <tr>
                     <td align="left" class="dark-force" style="font-size:0px;padding:10px 25px;padding-top:4px;padding-right:0px;padding-bottom:4px;padding-left:0px;word-break:break-word;">
                      <div style="font-family:sans-serif;font-size:14px;line-height:22px !important;text-align:left;color:#444444;">
                       <span>
                       </span>
                      </div>
                     </td>
                    </tr>
                    <tr>
                     <td align="left" class="dark-force" style="font-size:0px;padding:10px 25px;padding-top:12px;padding-right:0px;padding-bottom:4px;padding-left:0px;word-break:break-word;">
                      <div style="font-family:sans-serif;font-size:16px;line-height:26px !important;text-align:left;color:#000000;">
                       <h3 class="dark-force" style="padding: 0; margin: 0; font-weight: 500; font-size: 16px; color: #000000 !important; line-height: 26px !important; font-size: 16px !important;">
                        <span class="bold" style="font-weight: 600; font-size: 16px; white-space: pre-wrap; line-height: 26px !important; font-size: 16px !important;">
                         May Update
                        </span>
                       </h3>
                      </div>
                     </td>
                    </tr>
                    <tr>
                     <td align="left" class="dark-force" style="font-size:0px;padding:10px 25px;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;word-break:break-word;">
                      <div style="font-family:sans-serif;font-size:14px;line-height:22px !important;text-align:left;color:#444444;">
                       <span style="line-height: 22px !important; font-size: 14px; font-size: 14px !important; white-space: pre-wrap;">
                        The
                       </span>
                       <a class="body-link dark-force" rel="noopener noreferrer" style="text-decoration: underline; color: #000000 !important;" target="_blank">
                        <span class="underline" style="font-size: 14px; white-space: pre-wrap; text-decoration: underline !important; line-height: 22px !important; font-size: 14px !important;">
                         May Update
                        </span>
                       </a>
                       <span style="line-height: 22px !important; font-size: 14px; font-size: 14px !important; white-space: pre-wrap;">
                        brings tons of quality-of-life improvements. When wrapping Stacks around layers, they will now have width set to
                       </span>
                       <span class="code" style="font-family: monospace; background-color: rgb(243, 244, 246, 0.75); padding: 1px 4px; font-size: 14px; white-space: pre-wrap; line-height: 22px !important; font-size: 14px !important;">
                        1FR
                       </span>
                       <span style="line-height: 22px !important; font-size: 14px; font-size: 14px !important; white-space: pre-wrap;">
                        or
                       </span>
                       <span class="code" style="font-family: monospace; background-color: rgb(243, 244, 246, 0.75); padding: 1px 4px; font-size: 14px; white-space: pre-wrap; line-height: 22px !important; font-size: 14px !important;">
                        100%
                       </span>
                       <span style="line-height: 22px !important; font-size: 14px; font-size: 14px !important; white-space: pre-wrap;">
                        and height set to
                       </span>
                       <span class="code" style="font-family: monospace; background-color: rgb(243, 244, 246, 0.75); padding: 1px 4px; font-size: 14px; white-space: pre-wrap; line-height: 22px !important; font-size: 14px !important;">
                        auto
                       </span>
                       <span style="line-height: 22px !important; font-size: 14px; font-size: 14px !important; white-space: pre-wrap;">
                        by default. Within the Preview, we’ve added a Breakpoint Switcher, as well as shortcuts to cycle between all of your Breakpoints. We’ve added new Variables for Radius, supporting Radius per corner, and Padding, supporting Padding per side. For Text layers, we’re introducing Text Stroke, a new property, and have added complete Masking support.
                       </span>
                      </div>
                     </td>
                    </tr>
                    <tr>
                     <td align="left" class="dark-force" style="font-size:0px;padding:10px 25px;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;word-break:break-word;">
                      <div style="font-family:sans-serif;font-size:14px;line-height:22px !important;text-align:left;color:#444444;">
                       <span style="line-height: 22px !important; font-size: 14px; font-size: 14px !important; white-space: pre-wrap;">
                        And that’s not all... If you want to learn more,
                       </span>
                       <a class="body-link dark-force" rel="noopener noreferrer" style="text-decoration: underline; color: #000000 !important;" target="_blank">
                        <span class="underline" style="font-size: 14px; white-space: pre-wrap; text-decoration: underline !important; line-height: 22px !important; font-size: 14px !important;">
                         watch the video
                        </span>
                       </a>
                       <span style="line-height: 22px !important; font-size: 14px; font-size: 14px !important; white-space: pre-wrap;">
                        or view the
                       </span>
                       <a class="body-link dark-force" rel="noopener noreferrer" style="text-decoration: underline; color: #000000 !important;" target="_blank">
                        <span class="underline" style="font-size: 14px; white-space: pre-wrap; text-decoration: underline !important; line-height: 22px !important; font-size: 14px !important;">
                         full changelog
                        </span>
                       </a>
                       <span style="line-height: 22px !important; font-size: 14px; font-size: 14px !important; white-space: pre-wrap;">
                        .
                       </span>
                      </div>
                     </td>
                    </tr>
                    <tr>
                     <td align="left" class="dark-force" style="font-size:0px;padding:10px 25px;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;word-break:break-word;">
                      <div style="font-family:sans-serif;font-size:14px;line-height:22px !important;text-align:left;color:#444444;">
                       <span>
                       </span>
                      </div>
                     </td>
                    </tr>
                    <tr>
                     <td align="left" style="font-size:0px;padding:10px 25px;padding-top:4px;padding-right:0px;padding-bottom:4px;padding-left:0px;word-break:break-word;">
                      <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;">
                       <tbody>
                        <tr>
                         <td style="width:560px;">
                          <a style="text-decoration: underline; color: #000000 !important;" target="_blank">
                           <img height="auto" src="https://inboxflows.com/_/image/https%253A%252F%252Fd3b9kr64nievew.cloudfront.net%252Fclwszoaim009bhg094ayv7mym%252Fclwt1njox03anr2thjiekls2v.png/?inbox_flows_img_sig=eyJwYXRoIjoiaHR0cHMlM0ElMkYlMkZkM2I5a3I2NG5pZSIsInRpbWUiOjE3MTcwODUxNzEuNzkwNDM3fQ:1sCiI7:IJ7ekxfU9Z5f3v6VF3grrAzH43OibbU6Bu4x21P5usE" style="border:0;border-radius:10px;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="560"/>
                          </a>
                         </td>
                        </tr>
                       </tbody>
                      </table>
                     </td>
                    </tr>
                    <tr>
                     <td align="left" class="dark-force" style="font-size:0px;padding:10px 25px;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;word-break:break-word;">
                      <div style="font-family:sans-serif;font-size:14px;line-height:22px !important;text-align:left;color:#444444;">
                       <span>
                       </span>
                      </div>
                     </td>
                    </tr>
                    <tr>
                     <td align="left" class="dark-force" style="font-size:0px;padding:10px 25px;padding-top:12px;padding-right:0px;padding-bottom:4px;padding-left:0px;word-break:break-word;">
                      <div style="font-family:sans-serif;font-size:16px;line-height:26px !important;text-align:left;color:#000000;">
                       <h3 class="dark-force" style="padding: 0; margin: 0; font-weight: 500; font-size: 16px; color: #000000 !important; line-height: 26px !important; font-size: 16px !important;">
                        <span class="bold" style="font-weight: 600; font-size: 16px; white-space: pre-wrap; line-height: 26px !important; font-size: 16px !important;">
                         Contra Component
                        </span>
                       </h3>
                      </div>
                     </td>
                    </tr>
                    <tr>
                     <td align="left" class="dark-force" style="font-size:0px;padding:10px 25px;padding-top:4px;padding-right:0px;padding-bottom:4px;padding-left:0px;word-break:break-word;">
                      <div style="font-family:sans-serif;font-size:14px;line-height:22px !important;text-align:left;color:#444444;">
                       <span class="dark-force" style="color: #444; line-height: 22px !important; font-size: 14px; font-size: 14px !important; white-space: pre-wrap;">
                        We’ve partnered with the team at
                       </span>
                       <a class="body-link dark-force" rel="noopener noreferrer" style="text-decoration: underline; color: #000000 !important;" target="_blank">
                        <span class="underline dark-force" style="color: #444; font-size: 14px; white-space: pre-wrap; text-decoration: underline !important; line-height: 22px !important; font-size: 14px !important;">
                         Contra
                        </span>
                       </a>
                       <span style="line-height: 22px !important; font-size: 14px; font-size: 14px !important; white-space: pre-wrap;">
                        to create a new component that links your Contra profile with your Framer site. This allows you to easily showcase your services and skills on your portfolio while ensuring it always stays up-to-date.
                       </span>
                       <a class="body-link dark-force" rel="noopener noreferrer" style="text-decoration: underline; color: #000000 !important;" target="_blank">
                        <span class="underline" style="font-size: 14px; white-space: pre-wrap; text-decoration: underline !important; line-height: 22px !important; font-size: 14px !important;">
                         Watch the video
                        </span>
                       </a>
                       <span style="line-height: 22px !important; font-size: 14px; font-size: 14px !important; white-space: pre-wrap;">
                        to learn how to add the component to your Framer portfolio site and style it to your liking.
                       </span>
                      </div>
                     </td>
                    </tr>
                    <tr>
                     <td align="left" class="dark-force" style="font-size:0px;padding:10px 25px;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;word-break:break-word;">
                      <div style="font-family:sans-serif;font-size:14px;line-height:22px !important;text-align:left;color:#444444;">
                       <span>
                       </span>
                      </div>
                     </td>
                    </tr>
                    <tr>
                     <td align="left" style="font-size:0px;padding:10px 25px;padding-top:4px;padding-right:0px;padding-bottom:4px;padding-left:0px;word-break:break-word;">
                      <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;">
                       <tbody>
                        <tr>
                         <td style="width:560px;">
                          <a style="text-decoration: underline; color: #000000 !important;" target="_blank">
                           <img height="auto" src="https://inboxflows.com/_/image/https%253A%252F%252Fd3b9kr64nievew.cloudfront.net%252Fclwszoaim009bhg094ayv7mym%252Fclwt3g25c01442o32io6f8il2.png/?inbox_flows_img_sig=eyJwYXRoIjoiaHR0cHMlM0ElMkYlMkZkM2I5a3I2NG5pZSIsInRpbWUiOjE3MTcwODUxNzEuNzkwNjMxNX0:1sCiI7:9RCQybYjojWqFtxsRjt8m2Y4GBeuG-7HswkMMXsgsoI" style="border:0;border-radius:10px;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="560"/>
                          </a>
                         </td>
                        </tr>
                       </tbody>
                      </table>
                     </td>
                    </tr>
                    <tr>
                     <td align="left" class="dark-force" style="font-size:0px;padding:10px 25px;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;word-break:break-word;">
                      <div style="font-family:sans-serif;font-size:14px;line-height:22px !important;text-align:left;color:#444444;">
                       <span>
                       </span>
                      </div>
                     </td>
                    </tr>
                    <tr>
                     <td align="left" class="dark-force" style="font-size:0px;padding:10px 25px;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;word-break:break-word;">
                      <div style="font-family:sans-serif;font-size:14px;line-height:22px !important;text-align:left;color:#444444;">
                       <span>
                       </span>
                      </div>
                     </td>
                    </tr>
                    <tr>
                     <td align="left" class="dark-force" style="font-size:0px;padding:10px 25px;padding-top:4px;padding-right:0px;padding-bottom:4px;padding-left:0px;word-break:break-word;">
                      <div style="font-family:sans-serif;font-size:14px;line-height:22px !important;text-align:left;color:#444444;">
                       <span class="dark-force" style="color: #444; line-height: 22px !important; font-size: 14px; font-size: 14px !important; white-space: pre-wrap;">
                        That’s it for now! We really hope you’ve enjoyed these updates. Let us know what you think in the
                       </span>
                       <a class="body-link dark-force" rel="noopener noreferrer" style="text-decoration: underline; color: #000000 !important;" target="_blank">
                        <span class="underline dark-force" style="color: #000000; font-size: 14px; white-space: pre-wrap; text-decoration: underline !important; line-height: 22px !important; font-size: 14px !important;">
                         Community
                        </span>
                       </a>
                       <span class="dark-force" style="color: #444; line-height: 22px !important; font-size: 14px; font-size: 14px !important; white-space: pre-wrap;">
                        . See you soon!
                       </span>
                      </div>
                     </td>
                    </tr>
                    <tr>
                     <td align="left" class="dark-force" style="font-size:0px;padding:10px 25px;padding-top:4px;padding-right:0px;padding-bottom:4px;padding-left:0px;word-break:break-word;">
                      <div style="font-family:sans-serif;font-size:14px;line-height:22px !important;text-align:left;color:#444444;">
                       <span style="line-height: 22px !important; font-size: 14px; font-size: 14px !important; white-space: pre-wrap;">
                        ✌️
                       </span>
                       <a class="body-link dark-force" rel="noopener noreferrer" style="text-decoration: underline; color: #000000 !important;" target="_blank">
                        <span class="underline" style="font-size: 14px; white-space: pre-wrap; text-decoration: underline !important; line-height: 22px !important; font-size: 14px !important;">
                         Andreas
                        </span>
                       </a>
                      </div>
                     </td>
                    </tr>
                    <tr>
                     <td align="left" class="dark-force" style="font-size:0px;padding:10px 25px;padding-top:24px;padding-right:0px;padding-left:0px;word-break:break-word;">
                      <div style="font-family:sans-serif;font-size:12px;line-height:19px !important;text-align:left;color:#9ca3af;">
                       <span class="opt-in-explanation" style="color: #9ca3af !important; font-size: 12px !important; line-height: 19px !important;">
                        You are receiving this email because you opted-in to receive updates from Framer
                        <br/>
                        Framer, Rozengracht 207B 1016 LZ Amsterdam Netherlands
                        <br/>
                        <a class="bold link-nostyle link-unsubscribe" rel="noopener noreferrer" style="font-weight: 600; text-decoration: none !important; color: #9ca3af !important; font-size: 12px !important; line-height: 19px !important;" target="_blank">
                         Unsubscribe
                        </a>
                       </span>
                      </div>
                     </td>
                    </tr>
                   </tbody>
                  </table>
                 </td>
                </tr>
               </tbody>
              </table>
             </div>
             <!--[if mso | IE]></td></tr></table><![endif]-->
            </td>
           </tr>
          </tbody>
         </table>
        </div>
        <!--[if mso | IE]></td></tr></table></td></tr></table><![endif]-->
       </td>
      </tr>
     </tbody>
    </table>
   </div>
   <!--[if mso | IE]></td></tr></table><![endif]-->
  </div>
 </body>
</html>