diff --git a/.vscode/settings.json b/.vscode/settings.json
index ea6a48e..1ba3b03 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,4 +1,5 @@
 {
+  "css.customData": [".vscode/tailwind.json"],
   "editor.formatOnSave": false,
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": "explicit",
diff --git a/.vscode/tailwind.json b/.vscode/tailwind.json
new file mode 100644
index 0000000..96a1f57
--- /dev/null
+++ b/.vscode/tailwind.json
@@ -0,0 +1,55 @@
+{
+  "version": 1.1,
+  "atDirectives": [
+    {
+      "name": "@tailwind",
+      "description": "Use the `@tailwind` directive to insert Tailwind's `base`, `components`, `utilities` and `screens` styles into your CSS.",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#tailwind"
+        }
+      ]
+    },
+    {
+      "name": "@apply",
+      "description": "Use the `@apply` directive to inline any existing utility classes into your own custom CSS. This is useful when you find a common utility pattern in your HTML that you’d like to extract to a new component.",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#apply"
+        }
+      ]
+    },
+    {
+      "name": "@responsive",
+      "description": "You can generate responsive variants of your own classes by wrapping their definitions in the `@responsive` directive:\n```css\n@responsive {\n  .alert {\n    background-color: #E53E3E;\n  }\n}\n```\n",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#responsive"
+        }
+      ]
+    },
+    {
+      "name": "@screen",
+      "description": "The `@screen` directive allows you to create media queries that reference your breakpoints by **name** instead of duplicating their values in your own CSS:\n```css\n@screen sm {\n  /* ... */\n}\n```\n…gets transformed into this:\n```css\n@media (min-width: 640px) {\n  /* ... */\n}\n```\n",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#screen"
+        }
+      ]
+    },
+    {
+      "name": "@variants",
+      "description": "Generate `hover`, `focus`, `active` and other **variants** of your own utilities by wrapping their definitions in the `@variants` directive:\n```css\n@variants hover, focus {\n   .btn-brand {\n    background-color: #3182CE;\n  }\n}\n```\n",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#variants"
+        }
+      ]
+    }
+  ]
+}
diff --git a/src/components/HomepageHero/Setup.tsx b/src/components/HomepageHero/Setup.tsx
index 44b70cb..30b3c34 100644
--- a/src/components/HomepageHero/Setup.tsx
+++ b/src/components/HomepageHero/Setup.tsx
@@ -1,6 +1,7 @@
 import Link from 'next/link'
 import { Button } from '@/components/ui/button'
 import styles from '@/components/HomepageHero/SetupHero.module.scss'
+import { MotionWrapperFlash } from '@/components/MotionWrapper/Flash'
 
 interface Props {
 }
@@ -21,9 +22,9 @@ export function SetupHero(props: Props) {
           </a>
         </div>
         <h1 className={styles.headline}>
-          ⚡️
-          {' '}
-          <br className="sm:hidden"></br>
+          <MotionWrapperFlash>
+            <span className="icon-[emojione-v1--lightning-mood]"></span>
+          </MotionWrapperFlash>
           {' '}
           Nextra
           {' '}
diff --git a/src/components/HomepageHero/SetupHero.module.scss b/src/components/HomepageHero/SetupHero.module.scss
index 58fe7ce..46a0cdd 100644
--- a/src/components/HomepageHero/SetupHero.module.scss
+++ b/src/components/HomepageHero/SetupHero.module.scss
@@ -99,7 +99,6 @@
 
 .headline {
   margin-top: 1.5rem;
-  display: inline-flex;
   background-image: linear-gradient(146deg, #000, #5e6265);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
@@ -114,6 +113,8 @@
   :global(.dark) & {
     background-image: linear-gradient(146deg, #fff, #81878b);
   }
+
+  @apply sm:inline-flex max-sm:flex max-sm:flex-col;
 }
 
 .subtitle {
diff --git a/src/components/HomepageHero/index.tsx b/src/components/HomepageHero/index.tsx
index fef9346..e6b0c3f 100644
--- a/src/components/HomepageHero/index.tsx
+++ b/src/components/HomepageHero/index.tsx
@@ -1,23 +1,25 @@
-import Image from 'next/image'
 import { SetupHero } from './Setup'
+import { MotionWrapperFlash } from '@/components/MotionWrapper/Flash'
 
 export default function HomepageHero() {
   return (
     <>
       <SetupHero />
       <div className="relative top-[-118px] mb-[-118px] flex justify-center py-[100px] z-[2]">
-        <a
-          href="https://github.com/pdsuwwz/nextjs-nextra-starter"
-          target="_blank"
-          rel="noopener noreferrer"
-          className="w-[150px] h-[100px] flex flex-col items-center gap-[20px]"
-        >
-          <img
-            className="dark:invert"
-            src="/next.svg"
-            style={{ width: '100%', height: 'auto' }}
-          />
-        </a>
+        <MotionWrapperFlash disabledHover>
+          <a
+            href="https://github.com/pdsuwwz/nextjs-nextra-starter"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="w-[150px] h-[100px] flex flex-col items-center gap-[20px]"
+          >
+            <img
+              className="dark:invert"
+              src="/next.svg"
+              style={{ width: '100%', height: 'auto' }}
+            />
+          </a>
+        </MotionWrapperFlash>
       </div>
       <div className="h-[1000px] flex justify-center">
         🚧 待完善
diff --git a/src/components/MotionWrapper/Flash.tsx b/src/components/MotionWrapper/Flash.tsx
new file mode 100644
index 0000000..f503323
--- /dev/null
+++ b/src/components/MotionWrapper/Flash.tsx
@@ -0,0 +1,45 @@
+import React, { type ReactNode } from 'react'
+import { motion } from 'framer-motion'
+
+interface Props {
+  className?: string
+  disabledHover?: boolean
+  children: ReactNode
+}
+
+export const MotionWrapperFlash: React.FC<Props> = (props) => {
+  const { disabledHover = false, children, className } = props
+  return (
+    <motion.span
+      className={className}
+      initial={{ opacity: 0, scale: 0.8, rotate: -20 }}
+      animate={{ opacity: 1, scale: 1, rotate: 0 }}
+      whileHover={
+        !disabledHover
+          ? {
+              scale: 1.1,
+              rotate: 10,
+              transition: { duration: 0.3 },
+            }
+          : {}
+      }
+      transition={{
+        duration: 0.6,
+        ease: [0.2, 0.8, 0.6, 1],
+        scale: {
+          type: 'spring',
+          stiffness: 260,
+        },
+        rotate: {
+          type: 'spring',
+          stiffness: 150,
+        },
+        color: {
+          duration: 0.3,
+        },
+      }}
+    >
+      {children}
+    </motion.span>
+  )
+}