feat: component animations

deco-sites · Jan 3, 2024 · 72d7fcd · 72d7fcd
1 parent 0e0f341
commit 72d7fcd
Show file tree

Hide file tree

Showing 9 changed files with 2,708 additions and 620 deletions.
diff --git a/animations/assets/Cursors.tsx b/animations/assets/Cursors.tsx
@@ -277,3 +277,83 @@ export const HeroCursorPaths = () => (
     />
   </Fragment>
 );
+
+export const DesignSystemCursor = () => (
+  <svg
+    width="43"
+    height="30"
+    viewBox="0 0 43 30"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    id="cursor-tiago"
+    class="cursor"
+  >
+    <g>
+      <g id="Figma arrow" filter="url(#filter0_d_914_12404)">
+        <path
+          d="M1.00035 0.880005L14.0004 7.3684L7.94479 9.25217L5.13668 14.1767L1.00035 0.880005Z"
+          fill="#3988FF"
+        />
+      </g>
+      <g id="Frame 2609046">
+        <path
+          d="M11.4261 13.5402H34.5894C38.8921 13.5402 42.3802 17.0282 42.3802 21.331C42.3802 25.6337 38.8921 29.1218 34.5894 29.1218H21.7442C19.9363 29.1218 19.0324 29.1218 18.279 28.9827C14.8658 28.3528 12.1951 25.6822 11.5652 22.2689C11.4261 21.5155 11.4261 20.6116 11.4261 18.8038V13.5402Z"
+          fill="#3988FF"
+        />
+        <text
+          id="Tiago"
+          fill="white"
+          xml:space="preserve"
+          style="white-space: pre"
+          font-family="Albert Sans"
+          font-size="6.27933"
+          letter-spacing="0px"
+        >
+          <tspan x="18.8578" y="23.359">
+            Tiago
+          </tspan>
+        </text>
+      </g>
+    </g>
+    <defs>
+      <filter
+        id="filter0_d_914_12404"
+        x="0.123379"
+        y="0.529216"
+        width="14.7539"
+        height="15.0506"
+        filterUnits="userSpaceOnUse"
+        color-interpolation-filters="sRGB"
+      >
+        <feFlood flood-opacity="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.526183" />
+        <feGaussianBlur stdDeviation="0.438486" />
+        <feColorMatrix
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"
+        />
+        <feBlend
+          mode="normal"
+          in2="BackgroundImageFix"
+          result="effect1_dropShadow_914_12404"
+        />
+        <feBlend
+          mode="normal"
+          in="SourceGraphic"
+          in2="effect1_dropShadow_914_12404"
+          result="shape"
+        />
+      </filter>
+    </defs>
+  </svg>
+)
+
+export const DesignSystemCursorPath = () => (
+  <path id="design-system-cursor-path" d="M-121 201C-118.051 280.547 -50.6393 437.441 195.363 428.96C195.573 428.953 195.774 429.078 195.852 429.273L241.885 543.741C241.928 543.846 241.933 543.963 241.9 544.072L211.459 644.509C211.279 645.102 212.125 645.428 212.39 644.868L359 334.624" stroke="#FDE047" stroke-linecap="round" stroke-linejoin="round"/>
+)
diff --git a/components/nrf/editor/AppsIntegrations.tsx b/components/nrf/editor/AppsIntegrations.tsx
diff --git a/components/nrf/editor/DesignSystem.tsx b/components/nrf/editor/DesignSystem.tsx
diff --git a/components/nrf/editor/FullCode.tsx b/components/nrf/editor/FullCode.tsx
diff --git a/components/nrf/editor/RealtimeEditor.tsx b/components/nrf/editor/RealtimeEditor.tsx
diff --git a/islands/NRF/Editor.tsx b/islands/NRF/Editor.tsx
@@ -1,16 +1,17 @@
 import { BlankEditor } from "deco-sites/starting/components/nrf/editor/Blank.tsx";
 import { ImageWidget } from "apps/admin/widgets.ts";
 import { useEffect } from "preact/hooks";
-import { animate, inView, stagger, scroll } from "motion";
+import { animate, inView, stagger, timeline } from "motion";
 import { useSignal } from "@preact/signals";
 
 import { ComponentLibrary } from "deco-sites/starting/components/nrf/editor/ComponentLibrary.tsx";
-import { RealtimeEditor } from "deco-sites/starting/components/nrf/editor/RealtimeEditor.tsx";
-import { DesignSystem } from "../../components/nrf/editor/DesignSystem.tsx";
+import { RealtimeEditor, REALTIME_EDITOR_SEQUENCE } from "deco-sites/starting/components/nrf/editor/RealtimeEditor.tsx";
+import { DesignSystem, DESIGN_SYSTEM_SEQUENCE} from "../../components/nrf/editor/DesignSystem.tsx";
 import { FullCode } from "../../components/nrf/editor/FullCode.tsx";
 import { AppsIntegrations } from "../../components/nrf/editor/AppsIntegrations.tsx";
 import { Segmentation } from "../../components/nrf/editor/Segmentation.tsx";
 import { Analytics } from "../../components/nrf/editor/Analytics.tsx";
+import { DesignSystemCursor, DesignSystemCursorPath } from "deco-sites/starting/animations/assets/Cursors.tsx";
 
 export interface EditorFeature {
   title: string;
@@ -42,35 +43,6 @@ const svgs = [
   Analytics,
 ]
 
-
-function EditorCard({
-  title,
-  subtitle,
-  image,
-  index,
-}: {
-  title: string;
-  subtitle: string;
-  image?: string;
-  index: number;
-}) {
-  return (
-    <>
-      <div class="feature w-full flex items-center justify-between gap-28">
-        <div class="w-1/3 flex gap-20 h-screen items-center ">
-          <div class="flex flex-col gap-6">
-            <h2 class="text-5xl font-semibold">{title}</h2>
-            <p>{subtitle}</p>
-          </div>
-        </div>
-        <div class="flex-1 sticky h-screen top-0 flex items-center justify-center">
-          <img src={image} class="ml-auto" />
-        </div>
-      </div>
-    </>
-  );
-}
-
 export default function Editor({ features }: Props) {
   const currentFeature = useSignal<number | null>(null);
 
@@ -122,6 +94,8 @@ export default function Editor({ features }: Props) {
         { opacity: opacityValue },
         { duration: 0.3 }
       );
+
+      timeline(DESIGN_SYSTEM_SEQUENCE)
       animate(
         `#feature-title-${index}`,
         { color: colorValue, transform: scaleValue },