demo update

Author: takuma-hmng8

app/_home/index.module.scss

@@ -23,33 +23,38 @@
    justify-content: center;
    mix-blend-mode: difference;
    pointer-events: none;
-   gap: 12px;
 }
 
 .title {
    font-size: 40px;
    font-weight: 500;
    pointer-events: none;
    @media (max-width: 560px) {
-      font-size: 32px;
+      font-size: 9vw;
    }
 }
 
 .install {
    font-size: 16px;
+   pointer-events: auto;
+   cursor: pointer;
+   display: flex;
+   align-items: baseline;
+   gap: 8px;
+   &.copied {
+      pointer-events: none;
+      opacity: 0.24;
+   }
 }
 
 .link {
-   margin-top: 16px;
-   font-size: 16px;
+   margin-top: 24px;
+   font-size: 18px;
    a {
       pointer-events: auto;
       text-decoration: underline;
       margin-left: 8px;
    }
-   @media (max-width: 560px) {
-      font-size: 13px;
-   }
 }
 
 .input {
@@ -58,6 +63,7 @@
    align-items: center;
    justify-content: center;
    font-size: 16px;
+   margin-top: 16px;
    p {
       width: 64px;
    }
@@ -71,6 +77,7 @@
       @media (max-width: 560px) {
          text-align: left;
          padding: 0 16px;
+         width: 120px;
       }
    }
 }

app/_home/index.tsx

@@ -7,9 +7,27 @@ import { EasingTypes } from "@/packages/use-shader-fx/src";
 import Image from "next/image";
 import s from "./index.module.scss";
 
+const Install = () => {
+   const [copied, setIsCopied] = useState(false);
+   return (
+      <button
+         onClick={(e) => {
+            const target = e.target as HTMLButtonElement;
+            navigator?.clipboard?.writeText(target.innerText).then(() => {
+               setIsCopied(true);
+            });
+         }}
+         className={`${s.install} ${copied ? s.copied : ""}`}>
+         npm install @funtech-inc/use-shader-fx
+         <Image src="copy.svg" alt="Copy" width={12} height={12} />
+      </button>
+   );
+};
+
 export default function Page() {
    const [bpm, setBpm] = useState(120);
    const [easing, setEasing] = useState<EasingTypes>("easeOutQuad");
+
    const easingTypes: EasingTypes[] = [
       "easeInSine",
       "easeOutSine",
@@ -42,6 +60,7 @@ export default function Page() {
       "easeOutBounce",
       "easeInOutBounce",
    ];
+
    return (
       <div className={s.wrapper}>
          <div className={s.canvas}>
@@ -51,9 +70,9 @@ export default function Page() {
          </div>
          <div className={s.content}>
             <h1 className={s.title}>⚡️ More FXs, Less GLSL</h1>
-            <p className={s.install}>npm install @funtech-inc/use-shader-fx</p>
+            <Install />
             <p className={s.link}>
-               Oh, right, u can download the background gradient from
+               Oh, right, u can download the gradient from
                <a href="/gradation" target="_blank">
                   here 👉
                </a>