update fonts

appleicat · Jan 7, 2024 · 1b96f61 · 1b96f61
1 parent 819b4bc
commit 1b96f61
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 20 deletions.
diff --git a/src/pages/_herotext.jsx b/src/pages/_herotext.jsx
@@ -2,26 +2,18 @@ import { motion } from 'framer-motion';
 export const HeroText = ({ children, size }) => {
   return (
     <motion.div
-      animate={{ filter: ['blur(10px)', 'blur(0px)'] }}
+      animate={{ filter: ['blur(10px)', 'blur(0px)'], opacity: [0, 1] }}
       transition={{
-        duration: 1.3,
+        duration: 1.5,
         ease: 'easeOut',
       }}
-      className="w-full flex justify-evenly items-center"
+      className="w-full flex justify-evenly items-center font-thin font-['Melodrama']"
       style={{
         fontSize: size,
       }}
     >
       {children.split('').map((letter, key) => (
-        <motion.div
-          animate={{
-            rotateY: ['90deg', '0deg'],
-          }}
-          transition={{ duration: 1.3, ease: 'easeOut', delay: 0.15 }}
-          key={key}
-        >
-          {letter}
-        </motion.div>
+        <motion.div key={key}>{letter}</motion.div>
       ))}
     </motion.div>
   );

diff --git a/src/pages/_page.jsx b/src/pages/_page.jsx
@@ -29,12 +29,23 @@ export default function Page() {
               scale: useTransform(scrollYProgress, [0, 1], [1, 33], {
                 ease: easeInOut,
               }),
+              opacity: useTransform(scrollYProgress, [0.1, 0.5], [1, 0], {
+                ease: easeInOut,
+              }),
+              filter: useTransform(
+                scrollYProgress,
+                [0.1, 0.5],
+                ['blur(0px)', 'blur(3px)'],
+                {
+                  ease: easeInOut,
+                }
+              ),
             }}
             className="h-full w-full absolute"
           >
-            <div className="h-full w-full flex flex-col justify-center items-center select-none font-black">
+            <div className="h-full w-full flex flex-col justify-center items-center select-none">
               <div className="flex justify-center items-center overflow-hidden w-full h-full">
-                <HeroText size="32vmax">KITTY</HeroText>
+                <HeroText size="3.5vmax">kitty</HeroText>
               </div>
             </div>
           </motion.div>
@@ -61,7 +72,7 @@ export default function Page() {
               ease: easeInOut,
             }),
           }}
-          className="z-[0] h-full w-full flex justify-center items-center font-light"
+          className="z-[0] h-full w-full flex justify-center items-center"
         >
           <div className="w-1/2 flex flex-col justify-center items-center">
             <div>Design. Develop. Ship.</div>

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -9,8 +9,16 @@ import { Pointer } from './_pointer';
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>appleicat</title>
+    <link
+      href="https://api.fontshare.com/v2/css?f[]=satoshi@1&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://api.fontshare.com/v2/css?f[]=melodrama@1&display=swap"
+      rel="stylesheet"
+    />
   </head>
-  <body>
+  <body class="bg-black text-white font-['Satoshi']">
     <Pointer size="32" hover="data-hover-pointer" client:only />
     <Page client:only />
   </body>
@@ -23,10 +31,6 @@ import { Pointer } from './_pointer';
   ::selection {
     background-color: rgba(0, 0, 0, 0.1);
   }
-  body {
-    background-color: black;
-    color: white;
-  }
 </style>
 
 <script>