feat: realtime editor cursors

deco-sites · Jan 6, 2024 · 1d35f48 · 1d35f48
1 parent faa9f5c
commit 1d35f48
Show file tree

Hide file tree

Showing 4 changed files with 122 additions and 13 deletions.
diff --git a/animations/timelines/editor.ts b/animations/timelines/editor.ts
@@ -135,6 +135,80 @@ const COMPONENT_LIBRARY_SEQUENCE: AnimationTimeline = [
   ],
 ];
 const REALTIME_EDITOR_SEQUENCE: AnimationTimeline = [
+  [
+    "#realtime-cursor-tiago", {
+      opacity: [0, 0, 1],
+      x: ["300px", "450px"],
+      y: ["800px", "590px"],
+    },
+    {
+      at: 0.08,
+      duration: 1,
+      easing: "ease-out",
+    },
+  ],
+  [
+    "#realtime-cursor-tiago", {
+      x: "350px",
+      y: "400px"
+    },
+    {
+      at: 1.08,
+      duration: 1,
+      easing: "ease-out",
+    },
+  ],
+  [
+    "#product-frame", {
+      opacity: [0, 1],
+      x: ["100px", "0px"],
+      y: ["190px", "0px"],
+    },
+    {
+      at: 1.08,
+      duration: 0.8,
+    },
+  ],
+  [
+    "#realtime-cursor-muriel", {
+      opacity: [0, 0, 1],
+      x: ["400px", "540px"],
+      y: ["0px", "120px"]
+    },
+    {
+      at: 0.2,
+      duration: 0.8,
+    }
+  ],
+  [
+    "#realtime-cursor-augusto", {
+      opacity: [0, 0, 1],
+      x: ["700px", "800px"],
+      y: ["700px", "360px"]
+    },
+    {
+      at: 0.2,
+      duration: 0.8,
+    }
+  ],
+  [
+    "#realtime-cursor-augusto", {
+      x: "750px"
+    },
+    {
+      at: 1.28,
+      duration: 0.8,
+    }
+  ],
+  [
+    "#product-form, #button-frame-br, #button-frame-bl, #button-frame-tr, #button-frame-tl", {
+      x: ["50px", 0]
+    },
+    {
+      at: 1.28,
+      duration: 0.8,
+    },
+  ],
   [".product-name-frame", { opacity: [0, 1] }, { at: 0.2, duration: 0.8 }],
   [
     ".product-frame",
@@ -145,7 +219,7 @@ const REALTIME_EDITOR_SEQUENCE: AnimationTimeline = [
     },
   ],
   [
-    "#product-name-border",
+    "#product-name-border rect",
     { width: ["291.5px", "20px"] },
     {
       at: 1.14,
@@ -164,7 +238,7 @@ const REALTIME_EDITOR_SEQUENCE: AnimationTimeline = [
   ],
   [
     "#product-name-placeholder",
-    { opacity: 0 },
+    { opacity: [1, 0] },
     {
       at: 1.14,
       duration: 0.06,
@@ -173,27 +247,48 @@ const REALTIME_EDITOR_SEQUENCE: AnimationTimeline = [
   ],
   [
     "#product-name",
-    { width: ["0%", "160px"], opacity: 1 },
+    { width: ["0%", "290px"], opacity: 1 },
     {
-      at: 1.4,
+      at: 1.8,
       duration: 1,
-      easing: "steps(12, end)",
+      easing: "steps(13, end)",
+    },
+  ],
+  [
+    "#realtime-mask",
+    { width: ["0%", "290px"], opacity: 1 },
+    {
+      at: 1.8,
+      duration: 1,
+      easing: "steps(13, end)",
+    },
+  ],
+  [
+    "#realtime-cursor-muriel",
+    { 
+      x: "830px",
+      y:"120px"
+    },
+    {
+      at: 1.8,
+      duration: 1,
+      easing: "steps(13, end)",
     },
   ],
   [
     "#product-name-frame-br, #product-name-frame-tr",
     { transform: ["translateX(-271px)", "translateX(0)"] },
     {
-      at: 1.4,
+      at: 1.8,
       duration: 1,
       easing: "steps(12, end)",
     },
   ],
   [
-    "#product-name-border",
+    "#product-name-border rect",
     { width: ["20px", "291.5px"] },
     {
-      at: 1.4,
+      at: 1.8,
       duration: 1,
       easing: "steps(12, end)",
     },

diff --git a/components/nrf/editor/RealtimeEditor.tsx b/components/nrf/editor/RealtimeEditor.tsx
@@ -428,6 +428,20 @@ export const RealtimeEditor = (props: AnimatedSvgProps) => {
                                 </tspan>
                               </text>
                             </g>
+                            <text
+                                id="product-name-placeholder"
+                                fill="white"
+                                xml:space="preserve"
+                                style="white-space: pre"
+                                font-family="Albert Sans"
+                                font-size="48"
+                                font-weight="bold"
+                                letter-spacing="-0.02em"
+                              >
+                                <tspan x="536" y="141.8">
+                                  Lorem Ipsum
+                                </tspan>
+                              </text>
                           </g>
                           <g id="product-name">
                             <g id="product-name-border">
@@ -459,7 +473,7 @@ export const RealtimeEditor = (props: AnimatedSvgProps) => {
                         <g id="Form">
                           <g id="Container">
                             <g id="Form Submit">
-                              <g id="Frame 2609177">
+                              <g id="product-form">
                                 <rect
                                   x="531.25"
                                   y="347.966"

diff --git a/sections/NRF/Hero.tsx b/sections/NRF/Hero.tsx
@@ -19,8 +19,8 @@ export interface Props {
 
 export default function Hero({ title, cta, alert }: Props) {
   return (
-    <div id="hero" class="relative bg-black min-h-screen space-y-10">
-      <div class="max-w-fit mx-auto flex flex-col items-center gap-8">
+    <div id="hero" class="relative bg-black min-h-screen space-y-16">
+      <div class="max-w-fit mx-auto flex flex-col items-center gap-16">
         {
           alert?.text && (
             <div class="rounded-[56px] border border-white/15 bg-white/5 py-2 px-4">
@@ -29,7 +29,7 @@ export default function Hero({ title, cta, alert }: Props) {
           )
         }
         <div
-          class="mt-48 inline-block text-[48px] lg:text-[104px] text-left leading-[100%] font-medium text-white max-w-lg lg:max-w-none"
+          class="mt-56 inline-block text-[48px] lg:text-[104px] text-left leading-[100%] font-medium text-white max-w-lg lg:max-w-none"
           dangerouslySetInnerHTML={{
             __html: title,
           }}

diff --git a/static/tailwind.css b/static/tailwind.css