From 8ddf0e9b6221d69531807eb2105d5bf6b8a323b5 Mon Sep 17 00:00:00 2001
From: Raj Sharma <raj.sharma@phonepe.com>
Date: Tue, 9 Jan 2024 22:55:25 +0530
Subject: [PATCH] feat: added animations

---
 next.config.js                       |  1 +
 package-lock.json                    | 28 +++++++++++++++++++++++-----
 package.json                         |  5 +++--
 src/app/(home)/page.tsx              | 21 +++++++++++++++------
 src/components/framer.tsx            |  6 ++++++
 src/components/gradient-provider.tsx | 26 +++++++++++++++++++-------
 src/components/grain.tsx             | 11 +++++++++--
 tailwind.config.ts                   | 16 +++++++++++++++-
 8 files changed, 91 insertions(+), 23 deletions(-)
 create mode 100644 src/components/framer.tsx

diff --git a/next.config.js b/next.config.js
index e9f4b3e..111dfb8 100644
--- a/next.config.js
+++ b/next.config.js
@@ -5,6 +5,7 @@ const nextConfig = {
   // Configure `pageExtensions` to include MDX files
   pageExtensions: ["js", "jsx", "mdx", "ts", "tsx"],
   // Optionally, add any other Next.js config below
+
   images: {
     remotePatterns: [
       {
diff --git a/package-lock.json b/package-lock.json
index 1c04cac..ac56315 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,7 +17,7 @@
         "@types/mdx": "^2.0.10",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.0.0",
-        "framer-motion": "^10.16.4",
+        "framer-motion": "^10.17.12",
         "lucide-react": "^0.306.0",
         "nanoid": "^5.0.4",
         "next": "latest",
@@ -31,7 +31,8 @@
         "sass": "^1.69.7",
         "sharp": "^0.33.1",
         "tailwind-merge": "^1.14.0",
-        "tailwindcss-animate": "^1.0.7"
+        "tailwindcss-animate": "^1.0.7",
+        "tailwindcss-animation-delay": "^1.2.0"
       },
       "devDependencies": {
         "@tailwindcss/typography": "^0.5.10",
@@ -3335,8 +3336,9 @@
       }
     },
     "node_modules/framer-motion": {
-      "version": "10.16.4",
-      "license": "MIT",
+      "version": "10.17.12",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-10.17.12.tgz",
+      "integrity": "sha512-6aaBLN2EgH/GilXwOzEalTfw5Rx9DTQJJjTrxq5bfDbGtPCzXz2GCN6ePGRpTi1ZGugLHxdU273h38ENbcdFKQ==",
       "dependencies": {
         "tslib": "^2.4.0"
       },
@@ -7176,6 +7178,14 @@
         "tailwindcss": ">=3.0.0 || insiders"
       }
     },
+    "node_modules/tailwindcss-animation-delay": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/tailwindcss-animation-delay/-/tailwindcss-animation-delay-1.2.0.tgz",
+      "integrity": "sha512-fyDXWrBKZoTb6phV+bgtGFpxwWlvtlM+387gdpVc/mNgKJinayD1859vQ1aPmzDZ1DWbDZ/lpexukXRmc95Z6g==",
+      "peerDependencies": {
+        "tailwindcss": ">=2.0.0 || >=3.0.0"
+      }
+    },
     "node_modules/tailwindcss/node_modules/postcss-selector-parser": {
       "version": "6.0.13",
       "license": "MIT",
@@ -9891,7 +9901,9 @@
       "dev": true
     },
     "framer-motion": {
-      "version": "10.16.4",
+      "version": "10.17.12",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-10.17.12.tgz",
+      "integrity": "sha512-6aaBLN2EgH/GilXwOzEalTfw5Rx9DTQJJjTrxq5bfDbGtPCzXz2GCN6ePGRpTi1ZGugLHxdU273h38ENbcdFKQ==",
       "requires": {
         "@emotion/is-prop-valid": "^0.8.2",
         "tslib": "^2.4.0"
@@ -12203,6 +12215,12 @@
       "version": "1.0.7",
       "requires": {}
     },
+    "tailwindcss-animation-delay": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/tailwindcss-animation-delay/-/tailwindcss-animation-delay-1.2.0.tgz",
+      "integrity": "sha512-fyDXWrBKZoTb6phV+bgtGFpxwWlvtlM+387gdpVc/mNgKJinayD1859vQ1aPmzDZ1DWbDZ/lpexukXRmc95Z6g==",
+      "requires": {}
+    },
     "tapable": {
       "version": "2.2.1"
     },
diff --git a/package.json b/package.json
index 83fc690..6a59f7c 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,7 @@
     "@types/mdx": "^2.0.10",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
-    "framer-motion": "^10.16.4",
+    "framer-motion": "^10.17.12",
     "lucide-react": "^0.306.0",
     "nanoid": "^5.0.4",
     "next": "latest",
@@ -32,7 +32,8 @@
     "sass": "^1.69.7",
     "sharp": "^0.33.1",
     "tailwind-merge": "^1.14.0",
-    "tailwindcss-animate": "^1.0.7"
+    "tailwindcss-animate": "^1.0.7",
+    "tailwindcss-animation-delay": "^1.2.0"
   },
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.10",
diff --git a/src/app/(home)/page.tsx b/src/app/(home)/page.tsx
index dcc9b44..7984cc4 100644
--- a/src/app/(home)/page.tsx
+++ b/src/app/(home)/page.tsx
@@ -8,10 +8,11 @@ import { StyledNotion } from "@/components/notion/styled";
 import { ExternalLink } from "lucide-react";
 import { Footer } from "./Footer";
 import { Connect } from "./Connect";
+import { cn } from "@/lib/utils";
 
 export default function Page() {
   return (
-    <main>
+    <main className="animate-fade-in">
       <div className="container py-12 max-w-xl">
         <GrainProvider
           grain_options={{
@@ -24,11 +25,13 @@ export default function Page() {
           }}
         />
         <header className="my-2">
-          <GradientProvider>
-            <h1 className="text-xl font-display font-medium">./raj</h1>
-          </GradientProvider>
+          {/* <GradientProvider> */}
+          <h1 className="text-xl animate-fade-in-from-bottom font-display font-medium">
+            ./raj
+          </h1>
+          {/* </GradientProvider> */}
         </header>
-        <div className="">
+        <div className="animate-fade-in-from-bottom animation-delay-600">
           <p className="text-xs italic">I like to build things</p>
           <p className="text-xs">
             Software Engineer{" "}
@@ -121,6 +124,7 @@ function Projects() {
 
       <div className="sm:grid-cols-2 grid-cols-1 grid gap-2">
         <Project
+          className="animate-fade-in-from-bottom animation-delay-[1200]"
           title="PPEC"
           description={
             "PhonePe’s internal cloud provisioning service with fine grain control over provisioning and network, I made the entire ux ui flow for this, very cool service"
@@ -128,6 +132,7 @@ function Projects() {
           href="https://tech.phonepe.com/heres-everything-you-need-to-know-about-phonepes-internal-cloud-provisioning-service/"
         />
         <Project
+          className="animate-fade-in-from-bottom animation-delay-[2400]"
           title="Chakshu"
           description={
             "Server inventory management service that manages procurement to server onboarding."
@@ -135,6 +140,7 @@ function Projects() {
           href="https://tech.phonepe.com/phonepes-server-state-management-via-senzu-and-pious-an-overview/"
         />
         <Project
+          className="animate-fade-in-from-bottom animation-delay-[4800]"
           title="Makima"
           href="https://github.com/xrehpicx/makima"
           description={`Manage servers using natural language.
@@ -142,6 +148,7 @@ Keep track of stats of various things by memory.
         Schedule absolutely anything across all kind of tasks by making the ai talk to itself in the future.`}
         />
         <Project
+          className="animate-fade-in-from-bottom animation-delay-[9600]"
           title="PEE (Project Environment Executor)"
           description={
             "A tmux session manager with a tui and config control to setup tmux sessions."
@@ -157,13 +164,15 @@ function Project({
   title,
   description,
   href,
+  className,
 }: {
   title: string;
   description: JSX.Element | string;
   href?: string;
+  className?: string;
 }) {
   return (
-    <div className="mt-4">
+    <div className={cn("mt-4", className)}>
       <div className="flex items-center gap-1">
         <h4 className="font-display font-medium text-sm">{title}</h4>
         {href ? (
diff --git a/src/components/framer.tsx b/src/components/framer.tsx
new file mode 100644
index 0000000..68243b8
--- /dev/null
+++ b/src/components/framer.tsx
@@ -0,0 +1,6 @@
+"use client";
+import { motion } from "framer-motion";
+
+export const Mdiv = motion.div;
+export const Mh1 = motion.h1;
+export const Mp = motion.p;
diff --git a/src/components/gradient-provider.tsx b/src/components/gradient-provider.tsx
index 965403f..a94a470 100644
--- a/src/components/gradient-provider.tsx
+++ b/src/components/gradient-provider.tsx
@@ -1,17 +1,23 @@
+"use client";
 import gradient from "@/app/(assets)/gradient.svg";
 import symetric_gradient from "@/app/(assets)/symetric-grad.svg";
 import background_gradient from "@/app/(assets)/background-gradient.png";
 import { cn } from "@/lib/utils";
 import Image from "next/image";
+import { motion } from "framer-motion";
 
 export function GradientProvider({ children }: { children: React.ReactNode }) {
   return (
-    <div className="relative w-fit">
-      <div className="absolute rotate-180 w-[600px] -z-10 h-[800px] opacity-60 top-1/2 -translate-x-1/2 -translate-y-1/2 left-1/2">
+    <motion.div
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      className="relative w-fit"
+    >
+      <div className="absolute rotate-180 -z-[5] w-[600px] h-[800px] opacity-60 top-1/2 -translate-x-1/2 -translate-y-1/2 left-1/2">
         <Image src={gradient} alt="gradient" />
       </div>
       {children}
-    </div>
+    </motion.div>
   );
 }
 
@@ -25,7 +31,11 @@ export function SymetricGradProvider({
   gradient_class?: string;
 }) {
   return (
-    <div className={cn("relative w-fit", className)}>
+    <motion.div
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      className={cn("relative w-fit", className)}
+    >
       <div
         className={cn(
           "absolute w-full -z-10 h-[800px] opacity-70 top-1/4 rotate-180 -translate-x-1/2 -translate-y-1/2 left-1/2",
@@ -35,7 +45,7 @@ export function SymetricGradProvider({
         <Image src={symetric_gradient} alt="gradient" />
       </div>
       {children}
-    </div>
+    </motion.div>
   );
 }
 
@@ -45,7 +55,9 @@ export function BackgroundGradentProvider({
   className?: string;
 }) {
   return (
-    <div
+    <motion.div
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
       className={cn(
         "fixed overflow-hidden w-full h-full opacity-50 top-0 left-0",
         className,
@@ -56,6 +68,6 @@ export function BackgroundGradentProvider({
         src={background_gradient}
         alt="gradient"
       />
-    </div>
+    </motion.div>
   );
 }
diff --git a/src/components/grain.tsx b/src/components/grain.tsx
index 93451a8..b46e203 100644
--- a/src/components/grain.tsx
+++ b/src/components/grain.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { motion } from "framer-motion";
 // Grain.tsx
 import React, { useEffect, useRef } from "react";
 
@@ -67,11 +68,17 @@ export const GrainProvider = ({
   }, [grain_options]);
 
   return (
-    <div
+    <motion.div
+      initial={{
+        opacity: 0,
+      }}
+      animate={{
+        opacity: 1,
+      }}
       ref={providerRef}
       id="grained-bg"
       className="fixed left-0 top-0 inset-0 z-50 pointer-events-none w-full h-full"
-    ></div>
+    ></motion.div>
   );
 };
 
diff --git a/tailwind.config.ts b/tailwind.config.ts
index af2cdc5..4adb523 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -64,12 +64,26 @@ module.exports = {
           from: { height: "var(--radix-accordion-content-height)" },
           to: { height: 0 },
         },
+        "fade-in": {
+          from: { opacity: 0 },
+          to: { opacity: 1 },
+        },
+        "fade-in-from-bottom": {
+          from: { opacity: 0, transform: "translateY(0.5rem)" },
+          to: { opacity: 1, transform: "translateY(0)" },
+        },
       },
       animation: {
         "accordion-down": "accordion-down 0.2s ease-out",
         "accordion-up": "accordion-up 0.2s ease-out",
+        "fade-in": "fade-in 0.8s ease-out",
+        "fade-in-from-bottom": "fade-in-from-bottom 0.6s ease-out",
       },
     },
   },
-  plugins: [require("tailwindcss-animate"), require("@tailwindcss/typography")],
+  plugins: [
+    require("tailwindcss-animate"),
+    require("@tailwindcss/typography"),
+    require("tailwindcss-animation-delay"),
+  ],
 };