feat(core): adjust ui for new design (#5322)

feat(core): add bg and hover state for onboarding

feat(core): adjust onboarding styles for web

feat(core): add get started page for onboarding

packages/frontend/core/src/components/affine/onboarding/animate-in-tooltip.css.tsx

@@ -14,11 +14,16 @@ export const tooltip = style({
   fontSize: '20px',
   lineHeight: '28px',
   fontWeight: 600,
-  textShadow: '0px 0px 4px rgba(66, 65, 73, 0.14)',
-  color: 'white',
   opacity: 0,
   animation: `${fadeIn} 1s ease forwards`,
   animationDelay: onboardingVars.animateIn.tooltipShowUpDelay,
+  color: '#121212',
+  selectors: {
+    '[data-is-desktop="true"] &': {
+      color: 'white',
+      textShadow: '0px 0px 4px rgba(66, 65, 73, 0.14)',
+    },
+  },
 });
 
 export const next = style({

packages/frontend/core/src/components/affine/onboarding/articles/article-0.tsx

@@ -3,6 +3,7 @@ import type { OnboardingBlockOption } from '../types';
 import bookmark1png from './assets/article-0-bookmark-1.png';
 import bookmark2png from './assets/article-0-bookmark-2.png';
 import embed1png from './assets/article-0-embed-1.png';
+import { BlogLink } from './blog-link';
 
 export const article0: Array<OnboardingBlockOption> = [
   {
@@ -245,6 +246,7 @@ export const article0: Array<OnboardingBlockOption> = [
           work. Obviously if you attend one of these, you should stop. But what
           else can you do?
         </p>
+        <BlogLink />
       </>
     ),
     offset: { x: 1200, y: -1600 },

packages/frontend/core/src/components/affine/onboarding/articles/article-1.tsx

@@ -7,6 +7,7 @@ import bookmark1png from './assets/article-1-bookmark-1.png';
 import illustration1png from './assets/article-1-illustration-1.png';
 import Article1Illustration2 from './assets/article-1-illustration-2';
 import { hr, link, quote } from './blocks.css';
+import { BlogLink } from './blog-link';
 
 export const article1: Array<OnboardingBlockOption> = [
   {
@@ -256,6 +257,7 @@ export const article1: Array<OnboardingBlockOption> = [
           intricate algorithm, designing a user interface, or figuring out how
           to lead a team towards some goal are also creative efforts.)
         </p>
+        <BlogLink />
       </>
     ),
     offset: { x: 900, y: -950 },

packages/frontend/core/src/components/affine/onboarding/articles/article-2.tsx

@@ -4,6 +4,7 @@ import illustration1png from './assets/article-2-illustration-1.jpg';
 import illustration2png from './assets/article-2-illustration-2.jpg';
 import note1png from './assets/article-2-note-1.png';
 import note2png from './assets/article-2-note-2.png';
+import { BlogLink } from './blog-link';
 
 export const article2: Array<OnboardingBlockOption> = [
   {
@@ -140,6 +141,7 @@ export const article2: Array<OnboardingBlockOption> = [
           media can also be an echo chamber that can push us to unwittingly
           become more extreme in our beliefs.
         </p>
+        <BlogLink />
       </>
     ),
     offset: { x: 150, y: -680 },

packages/frontend/core/src/components/affine/onboarding/articles/article-3.tsx

@@ -5,6 +5,7 @@ import illustration2jpg from './assets/article-3-illustration-2.jpg';
 import illustration3jpg from './assets/article-3-illustration-3.jpg';
 import illustration4jpg from './assets/article-3-illustration-4.jpg';
 import illustration5jpg from './assets/article-3-illustration-5.jpg';
+import { BlogLink } from './blog-link';
 
 export const article3: Array<OnboardingBlockOption> = [
   {
@@ -191,6 +192,7 @@ export const article3: Array<OnboardingBlockOption> = [
           game world in creative and flexible ways, leading to fresh and
           unexpected discoveries.
         </p>
+        <BlogLink />
       </>
     ),
     offset: { x: 450, y: -1400 },

packages/frontend/core/src/components/affine/onboarding/articles/article-4.tsx

@@ -4,6 +4,7 @@ import bookmark1png from './assets/article-4-bookmark-1.png';
 import bookmark2png from './assets/article-4-bookmark-2.png';
 import illustration1jpg from './assets/article-4-illustration-1.jpg';
 import illustration2jpg from './assets/article-4-illustration-2.jpg';
+import { BlogLink } from './blog-link';
 
 export const article4: Array<OnboardingBlockOption> = [
   {
@@ -180,6 +181,7 @@ export const article4: Array<OnboardingBlockOption> = [
           degree as in the previous one. Psychology is not applied biology, nor
           is biology applied chemistry.
         </p>
+        <BlogLink />
       </>
     ),
 

packages/frontend/core/src/components/affine/onboarding/articles/blog-link.tsx

@@ -0,0 +1,9 @@
+import { link } from './blocks.css';
+
+export const BlogLink = () => {
+  return (
+    <a className={link} href="https://affine.pro/blog">
+      Check other articles
+    </a>
+  );
+};

packages/frontend/core/src/components/affine/onboarding/articles/index.tsx

@@ -36,7 +36,7 @@ const paperLocations = {
 /** paper enter animation config */
 const paperEnterAnimationOriginal = {
   '0': {
-    curveCenter: 4,
+    curveCenter: 3,
     curve: 292,
     delay: 800,
     fromZ: 1230,
@@ -54,7 +54,7 @@ const paperEnterAnimationOriginal = {
   },
   '1': {
     curveCenter: 4,
-    curve: 280,
+    curve: 390,
     delay: 0,
     fromZ: 3697,
     fromX: 25,
@@ -71,9 +71,9 @@ const paperEnterAnimationOriginal = {
   },
   '2': {
     curveCenter: 3,
-    curve: 660,
+    curve: 1240,
     delay: 1700,
-    fromZ: 57379,
+    fromZ: 27379,
     fromX: 2,
     fromY: -77,
     fromRotateX: 0,
@@ -87,8 +87,8 @@ const paperEnterAnimationOriginal = {
     easing: 'ease',
   },
   '3': {
-    curveCenter: 4,
-    curve: 260,
+    curveCenter: 1,
+    curve: 300,
     delay: 1500,
     fromZ: 4303,
     fromX: -37,
@@ -104,8 +104,8 @@ const paperEnterAnimationOriginal = {
     easing: 'ease',
   },
   '4': {
-    curveCenter: 3,
-    curve: 270,
+    curveCenter: 4,
+    curve: 470,
     delay: 1571,
     fromZ: 1876,
     fromX: 65,

packages/frontend/core/src/components/affine/onboarding/assets/logo.tsx

@@ -0,0 +1,101 @@
+import { memo } from 'react';
+
+export default memo(function Logo() {
+  return (
+    <svg
+      width="120"
+      height="120"
+      viewBox="0 0 120 120"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clipPath="url(#clip0_6096_19874)">
+        <rect width="120" height="120" fill="white" />
+        <path
+          opacity="0.4"
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M-14.6534 -15.0049H-14.8878V-14.7705V3.80879H-14.8878V4.04316V22.6213V22.7107V22.8557V22.9451V41.5232V41.7576V60.2502V60.4846V79.1521V79.3865H-14.8877V97.8752H-14.8878V98.1096V116.777V117.012H-14.8877V135.591V135.825H-14.6533H3.92549H4.01425H4.15986H4.24863H22.739H22.8274H22.9733H23.0618H41.5527H41.6409H41.7871H41.8753H60.3659H60.4547H60.6003H60.6891H79.1791H79.2679H79.4135H79.5022H97.9928H98.081H98.2271H98.3154H116.807H116.895H117.041H117.129H135.708H135.943V135.591V116.923V116.689H135.943V98.199H135.943V97.9646V79.2971V79.0627H135.943L135.943 60.5729V60.3385V41.6709V41.4365L135.943 22.9451V22.8557V22.7107V22.6213L135.943 4.13144V3.89707V-14.7705V-15.0049H135.708H117.129H117.041H116.895H116.806H98.3153H98.2271H98.0809H97.9927H79.5022H79.4134H79.2679H79.179H60.6891H60.6003H60.4547H60.3659H41.8753H41.7871H41.6409H41.5527H23.0617H22.9733H22.8273H22.739H4.24853H4.15977H4.01416H3.92539H-14.6534ZM117.129 135.591V117.012H135.708H135.708V117.158V135.356V135.591H135.474H117.275H117.129ZM135.708 116.689V116.543V98.3439V98.199H117.129L117.129 116.689H135.708ZM116.807 117.012H116.806H98.3154V135.591H98.4615H116.66H116.807V117.012ZM116.806 116.689V98.199H98.3154H98.3153V116.689H98.3154H116.806ZM116.807 97.8752H116.806H98.3154V79.3865H116.806H116.807V97.8752ZM135.708 97.8752H135.708V97.7303V79.5314V79.3865H135.708H117.129V97.8752H135.708ZM97.9927 117.012H79.5023L79.5022 135.591H79.6479H97.8467H97.9928L97.9927 117.012ZM97.9927 116.689V98.199H79.5024H79.5023V116.689H97.9927ZM97.9928 97.8752H97.9927H79.5024V79.3865H97.9928V97.8752ZM79.1791 117.012H79.179H60.6891V135.591H60.8347H79.0335H79.1791V117.012ZM79.179 116.689V98.199H60.6891V116.689H79.179ZM79.1791 97.8752H79.179H60.6891V79.3865H79.179H79.1791V97.8752ZM60.366 116.689V98.199H41.8753V116.689H60.366ZM60.366 117.012L60.3659 135.591H60.2203H42.0215H41.8753L41.8753 117.012H60.366ZM60.3661 97.8752H60.366H41.8753V79.3865H60.366H60.3661V97.8752ZM41.5527 116.689V98.199H23.0619H23.0617L23.0618 116.689H41.5527ZM41.5527 117.012H23.0618V135.591H23.2077H41.4065H41.5527V117.012ZM23.0619 97.8752H41.5527V79.3865H23.0619V97.8752ZM22.739 116.689V98.199H4.24863H4.24851V116.689H4.24863H22.739ZM22.739 117.012L22.739 135.591H22.5931H4.39424H4.24863V117.012H22.739ZM4.24863 97.8752H22.739V79.3865H4.24863V97.8752ZM3.92542 117.012H-14.6533V117.158V135.356V135.591H-14.4189H3.77988H3.92549L3.92542 117.012ZM3.92542 116.689V98.199H-14.6533H-14.6534V98.3439V116.543V116.689H-14.6533H3.92542ZM3.92554 97.8752H3.92542H-14.6533V97.7303V79.5314V79.3865H3.92542H3.92554V97.8752ZM135.708 79.0627V78.9178V60.7189L135.708 60.5729H117.129L117.129 79.0627H135.708ZM116.806 79.0627L116.806 60.5729H98.3153L98.3153 79.0627H98.3154H116.806ZM135.708 60.1041L135.708 60.2502H117.129L117.129 41.7576H135.708L135.708 41.9053V60.1041ZM98.3153 60.2502H116.806L116.806 41.7576H98.3153V60.2502ZM97.9928 79.0627L97.9928 60.5729H79.5022L79.5023 79.0627H79.5024H97.9928ZM79.179 79.0627L79.179 60.5729H60.6891V79.0627H79.179ZM79.5023 60.2502H97.9928V41.7576H97.9927H79.5023V60.2502ZM60.6891 60.2502H79.179L79.179 41.7576H60.6891V60.2502ZM41.8753 60.5729H60.3659L60.366 79.0627H41.8753L41.8753 60.5729ZM60.366 41.7576L60.3659 60.2502H41.8753V41.7576H60.366ZM41.5527 79.0627V60.5729H23.0617L23.0617 79.0627H23.0619H41.5527ZM23.0617 60.2502H41.5527V41.7576H23.0617V60.2502ZM22.739 79.0627L22.739 60.5729H4.24853L4.24851 79.0627H4.24863H22.739ZM-14.6534 60.5729H3.92539L3.92542 79.0627H-14.6533H-14.6534V78.9178V60.7189V60.5729H-14.6534ZM4.24853 60.2502H22.739V41.7576H4.24853V60.2502ZM3.92542 41.7576L3.92539 60.2502H-14.6534V60.1041V41.9053V41.7576H3.92542ZM135.708 41.4365L135.708 41.2889V23.09V22.9451H117.129L117.129 41.4365H135.708ZM98.3153 22.9451H116.806V41.4365H98.3153L98.3153 22.9451ZM117.129 22.6213H135.708V22.4764V4.27754L135.708 4.13144H117.129V22.6213ZM98.3153 22.6213H116.806L116.806 4.13144H98.3153L98.3153 22.6213ZM79.5023 22.9451H97.9927V41.4365H79.5023V22.9451ZM79.5023 22.6213H97.9927V4.13144H79.5023V22.6213ZM60.6891 22.9451H79.179V41.4365H60.6891V22.9451ZM60.6891 22.6213H79.179L79.179 4.13144H60.6891V22.6213ZM60.366 41.4365V22.9451H41.8753V41.4365H60.366ZM41.8753 22.6213H60.366L60.3659 4.13144H41.8753V22.6213ZM41.5527 41.4365V22.9451H23.0617V41.4365H41.5527ZM23.0617 22.6213H41.5527V4.13144H23.0617V22.6213ZM22.739 41.4365V22.9451H4.24851L4.24853 41.4365H22.739H22.739ZM4.24851 22.6213H22.739V4.13144H22.739H4.24853H4.24851V22.6213ZM3.92542 41.4365V22.9451H-14.6534V23.09V41.2889V41.4365H-14.6534H3.92542ZM-14.6534 22.6213H3.92542V4.13144H3.92539H-14.6534H-14.6534V4.27754V22.4764V22.6213ZM135.708 3.80879L135.708 3.66269V-14.5361V-14.7705H135.474H117.275H117.129V3.80879H135.708ZM116.806 3.80879V-14.7705H116.66H98.4614H98.3153V3.80879H116.806ZM97.9927 3.80879V-14.7705H97.8466H79.6478H79.5022L79.5023 3.80879H97.9927ZM79.179 3.80879V-14.7705H79.0335H60.8347H60.6891V3.80879H79.179ZM60.3659 3.80879V-14.7705H60.2203H42.0215H41.8753V3.80879H41.8753H60.3659ZM41.5527 3.80879V-14.7705H41.4065H23.2077H23.0617L23.0617 3.80879H41.5527ZM22.7Line truncated
+          fill="url(#paint0_radial_6096_19874)"
+        />
+        <g filter="url(#filter0_di_6096_19874)">
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M53.7056 26.3403C56.0371 22.3021 57.7872 19.2714 58.607 17.8517L58.6042 17.8545C59.2324 16.7486 60.871 16.7625 61.4991 17.8545C61.8015 18.3604 62.3791 19.3716 62.9726 20.4105L62.9733 20.4116L62.9733 20.4117C63.6345 21.5692 64.3152 22.7607 64.6564 23.3258C69.4094 31.566 75.1171 41.4534 80.9167 51.5001L80.9263 51.5166C83.6334 56.2061 86.3604 60.9301 89.0196 65.5373L53.7056 26.3403ZM46.0443 39.6113C35.1951 58.4062 21.1805 82.6946 18.849 86.7797C18.4358 87.7739 19.1979 89.0279 20.2811 89.0475C20.4956 89.0681 21.7625 89.0659 22.5802 89.0644C22.8688 89.0639 23.1015 89.0635 23.2122 89.0642C25.3423 89.0651 27.6158 89.0657 30.0033 89.0662L46.0443 39.6113ZM63.9558 89.0649H64.023H64.084C76.828 89.0633 89.3663 89.0617 98.9988 89.0642L99.1086 89.0643C99.4211 89.0646 99.8052 89.0649 99.8251 89.0475C99.9015 89.054 99.9684 89.0387 100.034 89.0237L100.034 89.0237C100.081 89.013 100.128 89.0024 100.177 89C101.079 88.7291 101.623 87.6678 101.257 86.7825C101.222 86.7309 101.207 86.6977 101.186 86.6498L101.185 86.6497L101.185 86.6496C101.155 86.5808 101.111 86.4817 100.972 86.2546C99.5197 83.7349 97.9768 81.0598 96.3686 78.2722L45.7317 89.0668C51.6017 89.0665 57.7223 89.0657 63.8007 89.0649H63.8819H63.9558ZM63.9948 13.2659C60.832 10.9422 56.1867 11.9281 54.2549 15.3382C52.7098 18.0368 48.0139 26.1637 42.3426 35.9789C31.3329 55.0332 16.6468 80.45 14.1981 84.8666C12.6907 88.4861 14.79 92.7788 18.5642 93.8317C19.675 94.1263 20.8278 94.1059 21.9126 94.0868H21.913C22.3602 94.0789 22.7958 94.0712 23.2122 94.0858C33.1101 94.0952 46.0706 94.0899 59.1794 94.0845H59.1987C73.5688 94.0786 88.1152 94.0727 98.9988 94.0858C99.6018 94.097 100.654 94.0858 101.542 93.8345C104.281 93.072 106.316 90.4663 106.397 87.6259C106.427 86.6847 106.251 85.7435 105.911 84.8722C105.6 84.198 105.343 83.7601 105.091 83.3298C104.994 83.1647 104.898 83.0008 104.8 82.825L102.695 79.1775C97.9796 71.0065 91.8839 60.4436 85.7927 49.8887C79.7418 39.4036 73.6954 28.9264 69.0114 20.8094L66.9065 17.1619L65.854 15.3382C65.3767 14.5478 64.7514 13.8272 63.9948 13.2659ZM89.911 70.321C88.9393 69.4741 87.9408 68.664 86.914 67.8994L52.7152 84.4279C52.6312 84.4872 52.547 84.5461 52.4625 84.6046L93.7971 74.3586L89.911 70.321ZM60.2878 77.5471L82.9756 65.2888C81.6605 64.5235 80.3023 63.8381 78.8986 63.2473L60.2878 77.5471ZM63.7252 71.3493L74.7033 61.8136C74.1129 61.6576 73.5149 61.5186 72.9094 61.3974C71.8451 61.2029 70.7747 61.0668 69.698 60.9979L63.7252 71.3493ZM58.2536 74.5869L52.2856 64.2437L55.0519 78.5084C55.4794 78.0771 55.8961 77.6311 56.3014 77.1697C57.0024 76.3455 57.6555 75.4858 58.2536 74.5869ZM52.2107 57.8829C51.7315 56.9148 51.3135 55.9185 50.9499 54.8971C50.7538 54.3167 50.5766 53.7341 50.4175 53.1495L64.149 57.8829H52.2107ZM49.5654 39.6179L80.4651 60.6406C80.5406 60.6741 80.616 60.7078 80.6913 60.7418L51.5023 30.4146L50.8628 32.6348C50.2824 34.9443 49.8332 37.2782 49.5654 39.6179ZM51.7001 81.4387L48.477 56.9719C48.4111 56.8032 48.3468 56.6341 48.2841 56.4646L47.4974 84.174C48.9596 83.3588 50.3656 82.4512 51.7001 81.4387ZM43.2739 86.2227L45.9716 49.6168L34.6203 89.0272L34.6606 89.0174L35.0028 88.9325C37.8332 88.2235 40.6154 87.3412 43.2739 86.2227ZM70.8163 57.5825L49.2866 44.3175C49.285 45.8074 49.3707 47.2945 49.5565 48.7742L70.8163 57.5825ZM54.7052 62.3068L59.2723 70.219H59.2751C59.624 70.8223 60.4922 70.8223 60.8412 70.219L65.4083 62.3068C65.7544 61.7036 65.3189 60.9495 64.6238 60.9495H55.4897C54.7918 60.9495 54.3563 61.7036 54.7052 62.3068Z"
+            fill="black"
+          />
+        </g>
+      </g>
+      <defs>
+        <filter
+          id="filter0_di_6096_19874"
+          x="10.7686"
+          y="10.0425"
+          width="98.5692"
+          height="87.9712"
+          filterUnits="userSpaceOnUse"
+          colorInterpolationFilters="sRGB"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix
+            in="SourceAlpha"
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            result="hardAlpha"
+          />
+          <feOffset dy="0.979244" />
+          <feGaussianBlur stdDeviation="1.46887" />
+          <feComposite in2="hardAlpha" operator="out" />
+          <feColorMatrix
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"
+          />
+          <feBlend
+            mode="normal"
+            in2="BackgroundImageFix"
+            result="effect1_dropShadow_6096_19874"
+          />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="effect1_dropShadow_6096_19874"
+            result="shape"
+          />
+          <feColorMatrix
+            in="SourceAlpha"
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            result="hardAlpha"
+          />
+          <feOffset dy="-0.293773" />
+          <feGaussianBlur stdDeviation="0.587547" />
+          <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+          <feColorMatrix
+            type="matrix"
+            values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0"
+          />
+          <feBlend
+            mode="normal"
+            in2="shape"
+            result="effect2_innerShadow_6096_19874"
+          />
+        </filter>
+        <radialGradient
+          id="paint0_radial_6096_19874"
+          cx="0"
+          cy="0"
+          r="1"
+          gradientUnits="userSpaceOnUse"
+          gradientTransform="translate(60.5275 60.4101) rotate(90) scale(45.8319 45.8321)"
+        >
+          <stop stopColor="#737373" />
+          <stop offset="1" stopColor="#EFEFEF" />
+        </radialGradient>
+        <clipPath id="clip0_6096_19874">
+          <rect width="120" height="120" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+});

packages/frontend/core/src/components/affine/onboarding/onboarding.tsx

@@ -35,7 +35,11 @@ export const Onboarding = ({ onOpenApp }: OnboardingProps) => {
   }, []);
 
   return (
-    <div className={styles.onboarding} data-is-desktop={environment.isDesktop}>
+    <div
+      className={styles.onboarding}
+      data-is-desktop={environment.isDesktop}
+      data-is-window={!!status.activeId || !!status.unfoldingId}
+    >
       <div className={styles.offsetOrigin}>
         {(Object.entries(articles) as Array<[ArticleId, ArticleOption]>).map(
           ([id, article]) => {

packages/frontend/core/src/components/affine/onboarding/paper-steps.tsx

@@ -55,7 +55,6 @@ export const PaperSteps = ({
 
   useEffect(() => {
     if (stage === 'unfold' && status.unfoldingId === article.id) {
-      console.log('unfold', article.id);
       setFold(false);
     }
   }, [article.id, stage, status.unfoldingId]);

packages/frontend/core/src/components/affine/onboarding/steps/animate-in.tsx

@@ -12,8 +12,8 @@ interface AnimateInProps {
   onFinished?: () => void;
 }
 
-const easing = 'spring(5, 100, 10, 0)';
-const segments = 4;
+const easing = 'spring(3.2, 100, 10, 0)';
+const segments = 6;
 
 const animeSync = (params: Parameters<typeof anime>[0]) => {
   return new Promise(resolve => {

packages/frontend/core/src/components/affine/onboarding/steps/edgeless-switch.css.ts

@@ -1,4 +1,4 @@
-import { globalStyle, style } from '@vanilla-extract/css';
+import { globalStyle, keyframes, style } from '@vanilla-extract/css';
 
 import { onboardingVars } from '../style.css';
 
@@ -7,9 +7,9 @@ export const edgelessSwitchWindow = style({
   borderRadius: onboardingVars.paper.r,
   backgroundColor: onboardingVars.paper.bg,
   position: 'relative',
-  transition: `width ${onboardingVars.window.transition.size}, height ${onboardingVars.window.transition.size}`,
+  transition: `width ${onboardingVars.window.transition.size}, height ${onboardingVars.window.transition.size}, border-radius ${onboardingVars.window.transition.size}`,
   overflow: 'hidden',
-  boxShadow: 'var(--affine-shadow-2)',
+  boxShadow: onboardingVars.web.windowShadow,
 
   fontFamily: 'var(--affine-font-family)',
   color: onboardingVars.paper.textColor,
@@ -18,11 +18,43 @@ export const edgelessSwitchWindow = style({
     '&[data-mode="edgeless"]': {
       width: onboardingVars.edgeless.w,
       height: onboardingVars.edgeless.h,
+      borderRadius: onboardingVars.edgeless.r,
     },
     '&[data-mode="page"]': {
       width: onboardingVars.article.w,
       height: onboardingVars.article.h,
+      borderRadius: onboardingVars.article.r,
     },
+    '&[data-mode="well-done"]': {
+      width: onboardingVars.wellDone.w,
+      height: onboardingVars.wellDone.h,
+      borderRadius: onboardingVars.wellDone.r,
+    },
+  },
+});
+
+export const orbit = style({
+  width: '200%',
+  height: '100%',
+  display: 'flex',
+  transition: 'transform 0.4s ease',
+  willChange: 'transform',
+  selectors: {
+    '[data-mode="well-done"] &': {
+      transform: 'translateX(-50%)',
+    },
+  },
+});
+export const orbitItem = style({
+  width: '50%',
+  height: '100%',
+  flexShrink: 0,
+  flexGrow: 0,
+  overflow: 'hidden',
+});
+
+export const doc = style({
+  selectors: {
     // grid background
     '&::before': {
       content: '""',
@@ -39,12 +71,56 @@ export const edgelessSwitchWindow = style({
       pointerEvents: 'none',
       transition: 'opacity 0.3s ease',
     },
-    '&[data-mode="edgeless"]::before': {
+    '[data-mode="edgeless"] &::before': {
       opacity: 1,
     },
   },
 });
 
+export const wellDone = style({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center',
+  gap: 8,
+  textAlign: 'center',
+  userSelect: 'none',
+});
+
+const wellDoneSlideIn = keyframes({
+  from: {
+    transform: 'translateX(100px)',
+    opacity: 0,
+  },
+  to: {
+    transform: 'translateX(0)',
+    opacity: 1,
+  },
+});
+export const wellDoneEnterAnim = style({
+  opacity: 0,
+  selectors: {
+    '[data-mode="well-done"] &': {
+      animation: `${wellDoneSlideIn} 0.25s cubic-bezier(0.25, 0.1, 0.25, 1) forwards`,
+    },
+    '&:nth-child(1)': { animationDelay: '0.1s' },
+    '&:nth-child(2)': { animationDelay: '0.15s' },
+    '&:nth-child(3)': { animationDelay: '0.2s' },
+    '&:nth-child(4)': { animationDelay: '0.25s' },
+  },
+});
+
+export const wellDoneTitle = style({
+  fontSize: 28,
+  lineHeight: '36px',
+  fontWeight: '600',
+});
+export const wellDoneContent = style({
+  fontSize: 15,
+  lineHeight: '24px',
+  fontWeight: '400',
+});
+
 export const toolbar = style({
   position: 'absolute',
   bottom: '20px',
@@ -77,11 +153,11 @@ export const canvas = style({
     '[data-mode="edgeless"] &': {
       cursor: 'grab',
     },
-    '.grabbing[data-mode="edgeless"] &': {
+    '[data-mode="edgeless"] .grabbing &': {
       cursor: 'grabbing',
       transition: 'none',
     },
-    '.scaling[data-mode="edgeless"] &': {
+    '[data-mode="edgeless"] .scaling &': {
       transition: 'none',
     },
   },

packages/frontend/core/src/components/affine/onboarding/steps/edgeless-switch.tsx

@@ -1,4 +1,5 @@
 import { Button } from '@affine/component';
+import clsx from 'clsx';
 import { debounce } from 'lodash-es';
 import {
   type CSSProperties,
@@ -8,6 +9,7 @@ import {
   useState,
 } from 'react';
 
+import Logo from '../assets/logo';
 import { OnboardingBlock } from '../switch-widgets/block';
 import { EdgelessSwitchButtons } from '../switch-widgets/switch';
 import { ToolbarSVG } from '../switch-widgets/toolbar';
@@ -39,7 +41,8 @@ export const EdgelessSwitch = ({
   onBack,
   onNext,
 }: EdgelessSwitchProps) => {
-  const windowRef = useRef<HTMLDivElement>(null);
+  // const windowRef = useRef<HTMLDivElement>(null);
+  const docRef = useRef<HTMLDivElement>(null);
   const canvasRef = useRef<HTMLDivElement>(null);
   const mouseDownRef = useRef(false);
   const prevStateRef = useRef<EdgelessSwitchState | null>(
@@ -59,12 +62,12 @@ export const EdgelessSwitch = ({
   const onSwitchToPageMode = useCallback(() => setMode('page'), []);
   const onSwitchToEdgelessMode = useCallback(() => setMode('edgeless'), []);
   const toggleGrabbing = useCallback((v: boolean) => {
-    if (!windowRef.current) return;
-    windowRef.current.classList.toggle('grabbing', v);
+    if (!docRef.current) return;
+    docRef.current.classList.toggle('grabbing', v);
   }, []);
   const turnOnScaling = useCallback(() => {
-    if (!windowRef.current) return;
-    windowRef.current.classList.add('scaling');
+    if (!docRef.current) return;
+    docRef.current.classList.add('scaling');
   }, []);
 
   const enableScrollWithDelay = useCallback(() => {
@@ -86,20 +89,21 @@ export const EdgelessSwitch = ({
   }, []);
   const onNextClick = useCallback(() => {
     if (mode === 'page') setMode('edgeless');
+    else if (mode === 'edgeless') setMode('well-done');
     else onNext?.();
   }, [mode, onNext]);
 
   useEffect(() => {
     turnOffScalingRef.current = debounce(() => {
-      if (!windowRef.current) return;
-      windowRef.current.classList.remove('scaling');
+      if (!docRef.current) return;
+      docRef.current.classList.remove('scaling');
     }, 100);
   }, []);
 
   useEffect(() => {
     if (mode === 'page') return;
     const canvas = canvasRef.current;
-    const win = windowRef.current;
+    const win = docRef.current;
     if (!win || !canvas) return;
 
     const onWheel = (e: WheelEvent) => {
@@ -197,40 +201,71 @@ export const EdgelessSwitch = ({
 
   return (
     <div
-      ref={windowRef}
       data-mode={mode}
-      data-scroll={scrollable}
       className={styles.edgelessSwitchWindow}
       style={canvasStyle}
     >
-      <div className={styles.canvas} ref={canvasRef}>
-        <div className={styles.page}>
-          {
-            /* render blocks */
-            article.blocks.map((block, key) => {
-              return <OnboardingBlock key={key} mode={mode} {...block} />;
-            })
-          }
+      <div className={styles.orbit}>
+        <div
+          ref={docRef}
+          className={clsx(styles.orbitItem, styles.doc)}
+          data-scroll={scrollable}
+        >
+          <div className={styles.canvas} ref={canvasRef}>
+            <div className={styles.page}>
+              {
+                /* render blocks */
+                article.blocks.map((block, key) => {
+                  return <OnboardingBlock key={key} mode={mode} {...block} />;
+                })
+              }
+            </div>
+          </div>
+
+          <div data-no-drag className={styles.noDragWrapper}>
+            <header className={styles.header}>
+              <Button size="extraLarge" onClick={onBack}>
+                Back
+              </Button>
+              <EdgelessSwitchButtons
+                mode={mode}
+                onSwitchToPageMode={onSwitchToPageMode}
+                onSwitchToEdgelessMode={onSwitchToEdgelessMode}
+              />
+              <Button size="extraLarge" type="primary" onClick={onNextClick}>
+                Next
+              </Button>
+            </header>
+
+            <div className={styles.toolbar}>
+              <ToolbarSVG />
+            </div>
+          </div>
         </div>
-      </div>
 
-      <div data-no-drag className={styles.noDragWrapper}>
-        <header className={styles.header}>
-          <Button size="extraLarge" onClick={onBack}>
-            Back
+        <div className={clsx(styles.orbitItem, styles.wellDone)}>
+          <div
+            className={styles.wellDoneEnterAnim}
+            onDoubleClick={() => setMode('edgeless')}
+          >
+            <Logo />
+          </div>
+          <h1 className={clsx(styles.wellDoneTitle, styles.wellDoneEnterAnim)}>
+            Well Done !
+          </h1>
+          <p className={clsx(styles.wellDoneContent, styles.wellDoneEnterAnim)}>
+            You have the flexibility to switch between Page and Edgeless
+            <br /> Mode at any point during content creation.
+          </p>
+          <Button
+            className={styles.wellDoneEnterAnim}
+            onClick={onNextClick}
+            type="primary"
+            size="extraLarge"
+            style={{ marginTop: 40 }}
+          >
+            Get Start
           </Button>
-          <EdgelessSwitchButtons
-            mode={mode}
-            onSwitchToPageMode={onSwitchToPageMode}
-            onSwitchToEdgelessMode={onSwitchToEdgelessMode}
-          />
-          <Button size="extraLarge" type="primary" onClick={onNextClick}>
-            Next
-          </Button>
-        </header>
-
-        <div className={styles.toolbar}>
-          <ToolbarSVG />
         </div>
       </div>
     </div>

packages/frontend/core/src/components/affine/onboarding/steps/unfolding.css.ts

@@ -20,11 +20,16 @@ const fadeOut = keyframes({
 export const unfoldingWrapper = style([
   paperLocation,
   {
+    vars: {
+      '--hover-offset-y': '0px',
+      '--hover-scale': '1',
+    },
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
 
-    transform: 'rotate(var(--toRotateZ))',
+    transform:
+      'rotate(var(--toRotateZ)) translateY(var(--hover-offset-y)) scale(var(--hover-scale))',
     cursor: 'pointer',
 
     backgroundColor: onboardingVars.paper.bg,
@@ -38,6 +43,13 @@ export const unfoldingWrapper = style([
 
     transition: `all 0.23s ease, width ${unfolding.sizeTransition}, height ${unfolding.sizeTransition}, transform ${unfolding.transformTransition}`,
 
+    ':hover': {
+      vars: {
+        '--hover-offset-y': '-10px',
+        '--hover-scale': '1.03',
+      },
+    },
+
     '::before': {
       // hack border
       content: '""',
@@ -53,6 +65,9 @@ export const unfoldingWrapper = style([
       '&[data-fold="false"]': {
         vars: {
           '--toRotateZ': '0deg',
+          // reset hover to avoid flickering
+          '--hover-offset-y': '0px',
+          '--hover-scale': '1',
         },
         width: onboardingVars.article.w,
         height: onboardingVars.article.h,

packages/frontend/core/src/components/affine/onboarding/style.css.ts

@@ -1,4 +1,4 @@
-import { globalStyle, style } from '@vanilla-extract/css';
+import { globalStyle, keyframes, style } from '@vanilla-extract/css';
 
 // in case that we need to support dark mode later
 export const onboardingVars = {
@@ -23,16 +23,25 @@ export const onboardingVars = {
     transformTransition: '0.3s ease',
   },
   web: {
-    bg: '#fafafa',
+    bg: '#F4F4F5',
+    windowShadow:
+      '1px 18px 39px 0px rgba(0, 0, 0, 0.15), 5px 71px 71px 0px rgba(0, 0, 0, 0.09), 12px 160px 96px 0px rgba(0, 0, 0, 0.05), 20px 284px 114px 0px rgba(0, 0, 0, 0.01), 32px 443px 124px 0px rgba(0, 0, 0, 0.00)',
   },
 
   article: {
     w: '1200px',
     h: '800px',
+    r: '8px',
   },
   edgeless: {
     w: '1200px',
     h: '800px',
+    r: '8px',
+  },
+  wellDone: {
+    w: '800px',
+    h: '600px',
+    r: '12px',
   },
 
   canvas: {
@@ -62,6 +71,11 @@ export const perspective = style({
   transformStyle: 'preserve-3d',
 });
 
+export const fadeIn = keyframes({
+  from: { opacity: 0 },
+  to: { opacity: 1 },
+});
+
 export const onboarding = style([
   perspective,
   {
@@ -80,9 +94,17 @@ export const onboarding = style([
         inset: 0,
         background: onboardingVars.web.bg,
         transform: 'translateZ(-1000px) scale(2)',
+        transition: 'opacity 0.3s ease',
       },
       '&[data-is-desktop="true"]::after': {
-        content: 'unset',
+        animation: `${fadeIn} 0.8s linear`,
+        // content: 'unset',
+        background:
+          // 'linear-gradient(180deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 99.58%)',
+          'linear-gradient(180deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 80%)',
+      },
+      '&[data-is-window="true"][data-is-desktop="true"]::after': {
+        opacity: 0,
       },
     },
   },

packages/frontend/core/src/components/affine/onboarding/switch-widgets/block.tsx

@@ -47,7 +47,7 @@ export const OnboardingBlock = ({
   const blockStyles = {
     ...baseStyles,
     ...style,
-    ...customStyle?.[mode],
+    ...customStyle?.[mode === 'page' ? 'page' : 'edgeless'],
   } as CSSProperties;
 
   return (
@@ -58,7 +58,7 @@ export const OnboardingBlock = ({
       }}
       className={onboardingBlock}
       data-mode={mode}
-      data-bg-mode={bg && mode === 'edgeless'}
+      data-bg-mode={bg && mode !== 'page'}
       data-invisible={mode === 'page' && edgelessOnly}
     >
       {children}

packages/frontend/core/src/components/affine/onboarding/switch-widgets/style.css.tsx

@@ -109,7 +109,7 @@ export const onboardingBlock = style([
       '&:last-child': {
         marginBottom: 0,
       },
-      '&[data-mode="edgeless"]': {
+      '&[data-mode="edgeless"], &[data-mode="well-done"]': {
         transition: `all ${onboardingVars.block.transition} var(--enter-delay)`,
       },
       '&[data-mode="page"]': {

packages/frontend/core/src/components/affine/onboarding/types.ts

@@ -3,7 +3,7 @@ import type { PropsWithChildren, ReactNode } from 'react';
 
 export type OnboardingStep = 'enter' | 'unfold' | 'edgeless-switch';
 export type ArticleId = '0' | '1' | '2' | '3' | '4';
-export type EdgelessSwitchMode = 'edgeless' | 'page';
+export type EdgelessSwitchMode = 'edgeless' | 'page' | 'well-done';
 
 /**
  * Paper enter animation options
@@ -77,10 +77,7 @@ export interface OnboardingBlockOption extends PropsWithChildren {
   style?: CSSProperties;
 
   /** customize style for different mode */
-  customStyle?: {
-    page?: CSSProperties;
-    edgeless?: CSSProperties;
-  };
+  customStyle?: Partial<Record<EdgelessSwitchMode, CSSProperties>>;
 
   /** attach a sub block to current block */
   sub?: OnboardingBlockOption;