...

src/app/globals.css

@@ -27,4 +27,6 @@ body {
 
 .code-block {
   font-family: var(--font-geist-mono), monospace;
-}
+}
+
+@source '../../node_modules/rc-modal-sheet/**/*.js'

src/app/layout.tsx

@@ -4,6 +4,8 @@ import "./globals.css";
 import type { Viewport } from 'next'
 import Link from "next/link";
 import Image from "next/image";
+import { ModalStackContainer } from "rc-modal-sheet";
+import { motion } from "motion/react";
 
 export const viewport: Viewport = {
   width: 'device-width',

src/app/translator/page.tsx

@@ -234,7 +234,7 @@ export default function Home() {
       </div>
 
       <div className="button-area w-screen flex justify-center items-center">
-        <button onClick={translate} className={`text-xl font-extrabold border rounded-4xl p-3 border-gray-200 h-16 ${translating ? 'bg-gray-200' : 'bg-white hover:bg-gray-200 hover:cursor-pointer'}`}>
+        <button onClick={translate} className={`duration-150 ease-in text-xl font-extrabold border rounded-4xl p-3 border-gray-200 h-16 ${translating ? 'bg-gray-200' : 'bg-white hover:bg-gray-200 hover:cursor-pointer'}`}>
           {translating ? 'translating...' : 'translate'}
         </button>
       </div>