feat: animation

Weminal-labs · Feb 14, 2025 · 8b653d6 · 8b653d6
1 parent 6e12e61
commit 8b653d6
Show file tree

Hide file tree

Showing 3 changed files with 123 additions and 30 deletions.
diff --git a/components/VariantsComponent.tsx b/components/VariantsComponent.tsx
@@ -0,0 +1,78 @@
+"use client";
+import React from "react";
+import { motion, TargetAndTransition, Variants } from "framer-motion";
+
+function createVariants(
+  direction: string,
+  startDistance: number,
+  endDistance: number,
+  duration: number,
+  delay: number,
+  type: string
+) {
+  const componentsVariants: Variants = {
+    offscreen: {
+      y: direction === "y" ? startDistance : 0,
+      x: direction === "x" ? startDistance : 0,
+      opacity: 0,
+    },
+    onscreen: {
+      y: direction === "y" ? endDistance : 0,
+      x: direction === "x" ? endDistance : 0,
+      opacity: 1,
+      transition: {
+        type: type,
+        bounce: 0.4,
+        duration: duration,
+        delay: delay,
+      },
+    },
+  };
+  return componentsVariants;
+}
+
+const VariantsComponent = ({
+  children,
+  direction = "y",
+  startDistance = 100,
+  endDistance = 0,
+  className,
+  duration = 2,
+  delay = 0,
+  whileHoverObject = undefined,
+  isOnce = true,
+  type = "spring",
+}: {
+  children: React.ReactNode;
+  direction?: "x" | "y";
+  startDistance?: number;
+  endDistance?: number;
+  className?: string;
+  duration?: number;
+  delay?: number;
+  whileHoverObject?: TargetAndTransition;
+  isOnce?: boolean;
+  type?: string;
+}) => {
+  return (
+    <motion.div
+      variants={createVariants(
+        direction,
+        startDistance,
+        endDistance,
+        duration,
+        delay,
+        type
+      )}
+      initial="offscreen"
+      whileInView="onscreen"
+      viewport={{ once: isOnce, amount: "some" }}
+      className={className}
+      whileHover={whileHoverObject}
+    >
+      {children}
+    </motion.div>
+  );
+};
+
+export default VariantsComponent;
diff --git a/components/chat.tsx b/components/chat.tsx
@@ -15,6 +15,7 @@ import { Messages } from "./messages";
 import type { VisibilityType } from "./visibility-selector";
 import { useBlockSelector } from "@/hooks/use-block";
 import { useWallet } from "@razorlabs/razorkit";
+import VariantsComponent from "./VariantsComponent";
 
 export function Chat({
   id,
@@ -62,48 +63,60 @@ export function Chat({
 
   return (
     <>
-      <div className="flex flex-col min-w-0 h-dvh bg-[#F4F5F7] p-6">
-        <div className="w-full h-dvh grid grid-cols-2 relative z-10 gap-4">
+      <div className="flex flex-col min-w-0 h-dvh bg-[#F4F5F7] p-6 overflow-hidden">
+        <div className="w-full h-dvh grid grid-cols-2 relative z-10 gap-4 ">
           {/* <ChatHeader
             chatId={id}
             selectedModelId={selectedModelId}
             selectedVisibilityType={selectedVisibilityType}
             isReadonly={isReadonly}
           /> */}
           <div className="size-full flex flex-col gap-4">
-            <div className="flex-grow bg-white rounded-2xl shadow"></div>
-            <form className="flex mx-auto gap-2 w-full bg-white rounded-2xl shadow">
-              {!isReadonly && (
-                <MultimodalInput
+            <VariantsComponent className="flex-grow" startDistance={-200}>
+              <div className="size-full bg-white rounded-2xl shadow"></div>
+            </VariantsComponent>
+            <VariantsComponent delay={0.5}>
+              <form className="flex mx-auto gap-2 w-full bg-white rounded-2xl shadow">
+                {!isReadonly && (
+                  <MultimodalInput
+                    chatId={id}
+                    input={input}
+                    setInput={setInput}
+                    handleSubmit={handleSubmit}
+                    isLoading={isLoading}
+                    stop={stop}
+                    attachments={attachments}
+                    setAttachments={setAttachments}
+                    messages={messages}
+                    setMessages={setMessages}
+                    append={append}
+                  />
+                )}
+              </form>
+            </VariantsComponent>
+          </div>
+          <div className="size-full flex flex-col gap-4">
+            <VariantsComponent
+              className="flex-grow"
+              startDistance={-200}
+              delay={1}
+            >
+              <div className="size-full bg-white rounded-2xl shadow"></div>
+            </VariantsComponent>
+            <VariantsComponent className="h-1/3" delay={1.5}>
+              <div className="size-full bg-white rounded-2xl shadow">
+                <Messages
                   chatId={id}
-                  input={input}
-                  setInput={setInput}
-                  handleSubmit={handleSubmit}
                   isLoading={isLoading}
-                  stop={stop}
-                  attachments={attachments}
-                  setAttachments={setAttachments}
+                  votes={votes}
                   messages={messages}
                   setMessages={setMessages}
-                  append={append}
+                  reload={reload}
+                  isReadonly={isReadonly}
+                  isBlockVisible={isBlockVisible}
                 />
-              )}
-            </form>
-          </div>
-          <div className="size-full flex flex-col gap-4">
-            <div className="flex-grow bg-white rounded-2xl shadow"></div>
-            <div className="h-1/3 bg-white rounded-2xl shadow">
-              <Messages
-                chatId={id}
-                isLoading={isLoading}
-                votes={votes}
-                messages={messages}
-                setMessages={setMessages}
-                reload={reload}
-                isReadonly={isReadonly}
-                isBlockVisible={isBlockVisible}
-              />
-            </div>
+              </div>
+            </VariantsComponent>
           </div>
         </div>
       </div>

diff --git a/components/overview.tsx b/components/overview.tsx
@@ -17,6 +17,7 @@ export const Overview = () => {
       {!wallet.connected ? (
         <div className="w-full flex flex-col items-center space-y-4">
           {/* <Image src={"/images/hand.png"} alt="hand" width={100} height={100} /> */}
+
           <GradientText
             className="text-2xl !font-bold text-center !cursor-default"
             colors={["#b0c4de", "#c0c0c0", "#d3d3d3", "#a9a9a9", "#808080"]}
@@ -29,6 +30,7 @@ export const Overview = () => {
       ) : (
         <div className="w-full flex flex-col items-center space-y-4">
           {/* <Image src={"/images/hand.png"} alt="hand" width={100} height={100} /> */}
+
           <GradientText
             className="text-2xl !font-bold text-center"
             colors={["#b0c4de", "#c0c0c0", "#d3d3d3", "#a9a9a9", "#808080"]}