feat: refine homepage copy and reveal animation

.github/workflows/ci.yml

@@ -0,0 +1,42 @@
+name: CI
+
+on:
+  pull_request:
+    branches:
+      - main
+
+permissions:
+  contents: read
+
+concurrency:
+  group: ci-${{ github.event.pull_request.number }}
+  cancel-in-progress: true
+
+jobs:
+  validate:
+    name: Validate
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v6
+
+      - name: Set up pnpm
+        uses: pnpm/action-setup@v6
+        with:
+          version: 11.16.0
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v6
+        with:
+          node-version: 24
+          cache: pnpm
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Check Astro and TypeScript
+        run: pnpm check
+
+      - name: Build
+        run: pnpm build

src/components/Hero.astro

@@ -36,7 +36,10 @@ const { locale, copy } = Astro.props;
       <span>{copy.hero.titleLead}</span>
       <span>{copy.hero.titleEnd}</span>
     </h1>
-    <p class="hero-description">{copy.hero.description}</p>
+    <p class="hero-description">
+      <span>{copy.hero.descriptionLead}</span>
+      <span>{copy.hero.descriptionEnd}</span>
+    </p>
     <a class="hero-action" href="https://github.com/deepfurry" target="_blank" rel="noreferrer">
       {copy.hero.action}
       <ArrowUpRight aria-hidden="true" size={20} stroke-width={1.65} />

src/i18n/content.ts

@@ -15,7 +15,8 @@ export interface HomeCopy {
     eyebrow: string;
     titleLead: string;
     titleEnd: string;
-    description: string;
+    descriptionLead: string;
+    descriptionEnd: string;
     action: string;
     meta: string;
   };
@@ -29,7 +30,7 @@ export const homeCopy = {
     seo: {
       title: "DeepFurry — Open source Untamed",
       description:
-        "DeepFurry is an independent open-source collective for curious builders.",
+        "We were lone wolves, until our paths crossed. Will you be one of the pack?",
     },
     nav: {
       projects: "Projects",
@@ -38,11 +39,11 @@ export const homeCopy = {
       close: "Close navigation",
     },
     hero: {
-      eyebrow: "// OPEN SOURCE COLLECTIVE",
+      eyebrow: "// INDEPENDENT OPEN SOURCE COLLECTIVE",
       titleLead: "Open source",
       titleEnd: "Untamed",
-      description:
-        "An independent open-source collective for curious builders.",
+      descriptionLead: "We were lone wolves, until our paths crossed.",
+      descriptionEnd: "Will you be one of the pack?",
       action: "Explore GitHub",
       meta: "FANTASY  ·  PURSUIT  ·  DESIRE",
     },
@@ -53,7 +54,7 @@ export const homeCopy = {
   zh: {
     seo: {
       title: "DeepFurry — 保持开源 保持野性",
-      description: "DeepFurry 是一个面向探索者与创造者的独立开源组织。",
+      description: "我们曾是孤狼，直到在探索中相遇。你，会是狼群的一员吗？",
     },
     nav: {
       projects: "项目",
@@ -65,12 +66,13 @@ export const homeCopy = {
       eyebrow: "// 独立开源组织",
       titleLead: "保持开源",
       titleEnd: "保持野性",
-      description: "DeepFurry 是一个面向探索者与创造者的独立开源组织。",
+      descriptionLead: "我们曾是孤狼，直到在探索中相遇。",
+      descriptionEnd: "你，会是狼群的一员吗？",
       action: "探索 GitHub",
       meta: "幻想  ·  追寻  ·  渴望",
     },
     footer: {
-      note: "开源自由不羁的灵魂，构建心中狂野的梦想。",
+      note: "享受开源带来的自由，构建心中狂野的梦想。",
     },
   },
 } satisfies Record<Locale, HomeCopy>;

src/styles/global.css

@@ -117,6 +117,12 @@ a {
   padding: clamp(1.5rem, 3.2vw, 2.75rem) var(--page-gutter);
 }
 
+.wordmark,
+.desktop-nav,
+.menu-toggle {
+  animation: reveal-interface 800ms cubic-bezier(0.4, 0, 0.2, 1) 3.35s both;
+}
+
 .wordmark {
   font-size: clamp(1.35rem, 1.7vw, 1.85rem);
   font-weight: 600;
@@ -186,6 +192,10 @@ a {
   text-transform: uppercase;
 }
 
+.hero-eyebrow {
+  animation: reveal-detail 800ms cubic-bezier(0.4, 0, 0.2, 1) 3.75s both;
+}
+
 .hero-content h1 {
   display: flex;
   flex-direction: column;
@@ -207,6 +217,10 @@ a {
 }
 
 .hero-description {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: clamp(0.2rem, 0.55vh, 0.45rem);
   max-width: 41rem;
   margin: clamp(1.85rem, 3vh, 2.5rem) 0 0;
   color: rgb(241 247 250 / 82%);
@@ -215,6 +229,21 @@ a {
   line-height: 1.65;
 }
 
+.hero-description span {
+  display: block;
+  animation: reveal-line 1.1s cubic-bezier(0.4, 0, 0.2, 1) both;
+  will-change: clip-path, opacity, transform;
+}
+
+.hero-description span:first-child {
+  animation-delay: 600ms;
+}
+
+.hero-description span:nth-child(2) {
+  margin-left: clamp(1.5rem, 3.2vw, 3.75rem);
+  animation-delay: 1.9s;
+}
+
 .hero-action {
   position: relative;
   display: inline-flex;
@@ -225,6 +254,7 @@ a {
   color: var(--color-signal);
   font-family: var(--font-mono);
   font-size: clamp(0.9rem, 1vw, 1.12rem);
+  animation: reveal-detail 800ms cubic-bezier(0.4, 0, 0.2, 1) 4.2s both;
 }
 
 .hero-action::after {
@@ -249,6 +279,45 @@ a {
   left: var(--page-gutter);
   color: var(--color-faint);
   font-size: clamp(0.62rem, 0.72vw, 0.8rem);
+  animation: reveal-detail 800ms cubic-bezier(0.4, 0, 0.2, 1) 4.65s both;
+}
+
+@keyframes reveal-line {
+  from {
+    clip-path: inset(0 0 100% 0);
+    opacity: 0;
+    transform: translateY(0.65em);
+  }
+
+  to {
+    clip-path: inset(0 0 0 0);
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes reveal-interface {
+  from {
+    opacity: 0;
+    transform: translateY(-0.75rem);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes reveal-detail {
+  from {
+    opacity: 0;
+    transform: translateY(0.55rem);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
 .site-footer {
@@ -382,6 +451,10 @@ a {
     font-size: 0.78rem;
   }
 
+  .hero-description span:nth-child(2) {
+    margin-left: clamp(1rem, 6vw, 2rem);
+  }
+
   .hero-action {
     min-height: 2.8rem;
     margin-top: 1rem;
@@ -409,6 +482,7 @@ a {
   *::before,
   *::after {
     scroll-behavior: auto !important;
+    animation-delay: 0ms !important;
     transition-duration: 0.01ms !important;
     animation-duration: 0.01ms !important;
     animation-iteration-count: 1 !important;