a

app/cursor.css

@@ -112,4 +112,13 @@
     transition-duration:.4s,.4s;
     transition-delay:0s,0s
 }
-/*# sourceMappingURL=mouse-follower.min.css.map */
+
+.mf-cursor.-down:before{
+    transform:scale(0.1);
+    transition-duration:.1s
+
+}
+
+.mf-cursor.-menu::before {
+    @apply scale-[1.32];
+  }

app/globals.css

@@ -6,14 +6,14 @@
 
 
 * {
-  @apply border-gray-4 selection:bg-gray-4/80;
+  @apply border-gray-5 selection:bg-gray-4/80;
 }
 
 html{
   @apply snap-y snap-mandatory;
 }
 body { 
-    @apply bg-gray-3 text-gray-12 overflow-x-hidden;
+    @apply bg-gray-2 text-gray-12 overflow-x-hidden;
   font-feature-settings: 'liga' 1, 'calt' 1;
 }
 
@@ -57,3 +57,43 @@ span[data-scroll] {
   50% { transform: scaleY(100%); }
   100% {  transform: scaleY(0%) scaleX(0%); }
 }
+
+#nav-button {
+  position: relative;
+  display: inline-block;
+  width: 25px;
+  line-height: 25px;
+  vertical-align: middle;
+  -webkit-transition: color 0.2s;
+  -o-transition: color 0.2s;
+  -moz-transition: color 0.2s;
+  transition: color 0.2s;
+}
+
+
+#nav-button:before {
+    content: "";
+    display: block;
+    position: absolute;
+    top: -20px;
+    right: -20px;
+    left: -20px;
+    bottom: -20px;
+}
+
+@media (pointer: fine){
+  #nav-button:before {
+    inset: -80px;
+  }
+}
+#nav-button span {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 2px;
+  margin: 5px 0;
+  top: 0;
+  transition: transform 0.4s cubic-bezier(0.7, 0, 0.2, 1), background 0.2s !important;
+  @apply  transition bg-gray-1;
+}
+

app/layout.tsx

@@ -23,8 +23,9 @@ const inter = localFont({
 });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "Kasane Studios",
+  description:
+    "Kasane Studios is a creative studio based in Seoul, South Korea. We are a collective of designers and developers who are passionate about creating beautiful, functional, and meaningful work.",
 };
 
 export default function RootLayout({

app/nav.tsx

@@ -3,17 +3,22 @@ import Logo from "./components/logo-inverse";
 
 const Nav = () => {
   return (
-    <div className="container flex items-center text-gray-300 justify-between py-6 mix-blend-difference fixed top-0  inset-x-0 z-50">
+    <div className=" flex items-center text-gray-300 justify-between py-8 px-8 lg:px-12 mix-blend-difference fixed top-0  inset-x-0 z-[251]">
       <Link href="/" className=" align-middle inline-block">
         <Logo />
       </Link>
 
       <div className="flex leading-none gap-8  items-end  h-6">
-        <Link className="align-middle inline-block" href="/about">
-          About
-        </Link>
-        <Link href="/works">Works</Link>
-        <Link href="/contact">Contact</Link>
+        <span className="hidden sm:block">Menu</span>
+        <button
+          id="nav-button"
+          className="group block  outline-none "
+          data-cursor="-menu"
+          data-cursor-stick=""
+        >
+          <span></span>
+          <span></span>
+        </button>
       </div>
     </div>
   );

app/preloader.tsx

@@ -10,6 +10,7 @@ let resolver: (v?: any) => void;
 export let cursor: any;
 
 import MouseFollower from "mouse-follower";
+import Magnetic from "@/lib/magnetic";
 
 export const promise = new Promise((resolve) => {
   resolver = resolve;
@@ -22,6 +23,22 @@ const Loader = () => {
     cursor = new MouseFollower({
       speed: 0.3,
     });
+
+    document.addEventListener("mousedown", () => {
+      cursor.addState("-down");
+    });
+
+    document.addEventListener("mouseup", () => {
+      cursor.removeState("-down");
+    });
+
+    new Magnetic(document.querySelector("#nav-button") as HTMLDivElement, {
+      x: 0.08,
+      y: 0.08,
+      s: 0.2,
+      rs: 0.5,
+    });
+
     // const pageAccessedByReload =
     //   (window.performance.navigation &&
     //     window.performance.navigation.type === 1) ||
@@ -39,6 +56,7 @@ const Loader = () => {
         autoAlpha: 0,
         stagger: 0.01,
       });
+
       await gsap.to(".loader", {
         autoAlpha: 0,
         delay: 0.5,
@@ -48,15 +66,19 @@ const Loader = () => {
       resolver();
     });
 
-    return () => eases.kill();
+    return () => {
+      eases.kill();
+      cursor.destroy();
+    };
   }, []);
   return (
     <div
       id="loader"
-      className=" bg-black dark loader fixed inset-0 z-[100] flex items-center justify-center"
+      data-cursor="-inverse"
+      className=" bg-black dark loader fixed inset-0 z-[500] flex items-center justify-center"
     >
       <div className="space-y-8 flex flex-col w-[30rem] text-white">
-        <div className="text-gray-12 text-center name origin-center scale-[0.8]  ">
+        <div className="text-gray-12 text-center name origin-center relative  flex items-center justify-center aspect-square  ">
           <h2 className="invisible kasane-jp text-xl sm:text-3xl font-display font-semibold">
             Kasane Studios
           </h2>

app/works/project.tsx

@@ -35,7 +35,7 @@ export const Project = ({
         {name}{" "}
         <span className="text-gray-11 font-normal text-lg">- {type}</span>
       </div>
-      <div className="text-gray-11 mt-1">{desc}</div>
+      <div className="text-gray-10 mt-1">{desc}</div>
     </Link>
   );
 };

app/works/works.tsx

@@ -62,12 +62,14 @@ const Works = () => {
       </div>
       <div className="mt-8 grid sm:grid-cols-2 gap-8">
         <Project
+          slug="devbench"
           name="Devbench"
           desc="Developer forum"
           type="Website"
           img={"/devbench.png"}
         />
         <Project
+          slug="vignette"
           name="Vignette"
           type="Website"
           desc="Open source Vtuber software"

lib/magnetic.ts

@@ -0,0 +1,79 @@
+/*!
+ * Cuberto Magnetic
+ *
+ * @version 1.5.0
+ * @author Cuberto (cuberto.com)
+ * @licence Copyright (c) 2020, Cuberto. All rights reserved.
+ */
+
+import gsap from "gsap";
+
+interface Options {
+  x: number;
+  y: number;
+  s: number;
+  rs: number;
+}
+function getOffset(element: HTMLElement) {
+  if (!element.getClientRects().length) {
+    return { top: 0, left: 0 };
+  }
+
+  const rect = element.getBoundingClientRect();
+  const win = element.ownerDocument.defaultView as Window;
+  return {
+    top: rect.top + win.pageYOffset,
+    left: rect.left + win.pageXOffset,
+  };
+}
+
+export default class Magnetic {
+  el: HTMLElement;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  options: Options;
+  constructor(
+    el: HTMLElement,
+    options: Options = { x: 0.2, y: 0.2, s: 0.2, rs: 0.7 }
+  ) {
+    this.el = el;
+
+    this.y = 0;
+    this.x = 0;
+    this.width = 0;
+    this.height = 0;
+    this.options = options;
+    this.bind();
+  }
+
+  bind() {
+    this.el.addEventListener(`mouseenter`, () => {
+      this.y = getOffset(this.el).top - window.pageYOffset;
+      this.x = getOffset(this.el).left - window.pageXOffset;
+      this.width = this.el.clientWidth;
+      this.height = this.el.clientHeight;
+    });
+
+    this.el.addEventListener(`mousemove`, (e) => {
+      const y = (e.clientY - this.y - this.height / 2) * this.options.y;
+      const x = (e.clientX - this.x - this.width / 2) * this.options.x;
+      this.move(x, y, this.options.s);
+    });
+
+    this.el.addEventListener(`mouseleave`, (e) => {
+      this.move(0, 0, this.options.rs);
+    });
+  }
+
+  move(x: number, y: number, speed: number) {
+    gsap.to(this.el, {
+      y: y,
+      x: x,
+      overwrite: true,
+      duration: speed,
+    });
+  }
+}
+export { Magnetic };