polish website with animation

docs/app/page.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import { TerminalAnimation } from './terminal-animation'
 
 export default function Page() {
   return (
@@ -36,17 +37,27 @@ function TerminalBody() {
   "name": "coffee",
   "type": "module",
   "main": "./dist/index.js",
-  "scripts": { "build": "bunchee" }
+  "scripts": {
+    "build": "bunchee"
+  }
 }`}
       </CodeBlock>
       <BlockSpacer />
-      <Prompt caret>npm run build</Prompt>
-      <CodeBlock>{`Exports  File             Size
-.        dist/index.js    5.6 kB`}</CodeBlock>
+      <TerminalAnimation
+        text="npm run build"
+        logs={`Exports  File             Size\n.        dist/index.js    5.6 kB`}
+      />
       <BlockSpacer />
-      <Comment># Features</Comment>
-      <Comment> - Zero config, smart externals, and TS declarations</Comment>
-      <Comment> - Works great for monorepos</Comment>
+      <MarkdownTitle title="# Why bunchee?" />
+      <Comment> - Zero config - package.json as config</Comment>
+      <Comment> - Auto-generates TypeScript declarations</Comment>
+      <Comment> - Supports ESM, CJS, or dual packages</Comment>
+      <Comment> - Tree-shakeable and monorepo friendly</Comment>
+      <BlockSpacer />
+      <MarkdownTitle title="# Perfect for" />
+      <Comment> - npm packages and component libraries</Comment>
+      <Comment> - Node.js tools, CLI apps, and utilities</Comment>
+      <Comment> - Monorepo workspaces with shared packages</Comment>
       <BlockSpacer />
       <div className="my-2 h-px bg-white/10" />
       <BlockSpacer />
@@ -103,28 +114,47 @@ function Output({ children }: { children: React.ReactNode }) {
 }
 
 function Comment({ children }: { children: React.ReactNode }) {
-  return <div className="pl-6 text-sm text-black/90">{children}</div>
+  return <div className="pl-2 text-sm text-black/80">{children}</div>
+}
+
+function MarkdownTitle({ title }: { title: string }) {
+  const match = title.match(/^(#+)\s+(.+)$/)
+  if (match) {
+    const [, hashes, titleText] = match
+    return (
+      <div className="pl-2 text-sm">
+        <span className="text-black/40">{hashes} </span>
+        <span className="text-black/90 font-bold">{titleText}</span>
+      </div>
+    )
+  }
+  return (
+    <div className="pl-2 text-sm">
+      <span className="text-black/40"># </span>
+      <span className="text-black/90 font-bold">{title}</span>
+    </div>
+  )
 }
 
 function CodeBlock({ children }: { children: React.ReactNode }) {
   return (
-    <pre className="ml-4 mt-2 rounded-md bg-[#f5e6d4] text-[12px] leading-relaxed text-black/80">
-      <code className="px-3 py-2 block">{children}</code>
+    <pre className="mt-2 w-full block rounded-md bg-[#f5e6d4] text-[12px] leading-relaxed text-black/80">
+      <code className="px-3 py-2 block w-full select-none">{children}</code>
     </pre>
   )
 }
 
 function TerminalLearn() {
   return (
     <div>
-      <Comment># Learn</Comment>
-      <Comment>## Entry & Convention</Comment>
+      <MarkdownTitle title="# Learn" />
+      <MarkdownTitle title="## Entry & Convention" />
       <Output>Files in src/ folder match export names in package.json:</Output>
       <CodeBlock>
         {`+--------------------------+---------------------+\n| File                     | Export Name         |\n+--------------------------+---------------------+\n| src/index.ts             | "." (default)       |\n| src/lite.ts              | "./lite"            |\n| src/react/index.ts       | "./react"           |\n+--------------------------+---------------------+`}
       </CodeBlock>
       <BlockSpacer />
-      <Comment>## Directives</Comment>
+      <MarkdownTitle title="## Directives" />
       <Output>
         {`Bunchee can manage multiple directives such as "use client", "use server", or "use cache" and automatically split your code into different chunks and preserve the directives properly.`}
       </Output>

docs/app/terminal-animation.tsx

@@ -0,0 +1,156 @@
+'use client'
+import React, { useEffect, useState } from 'react'
+
+export function TerminalAnimation({
+  text,
+  logs,
+  spinner = 'ora',
+}: {
+  text: string
+  logs: string
+  spinner?: 'ora' | 'line' | 'dots' | 'blocks'
+}) {
+  const command = text
+
+  const [typedLength, setTypedLength] = useState(0)
+  const [phase, setPhase] = useState<
+    'typing' | 'waitingEnter' | 'spinning' | 'showingLogs'
+  >('typing')
+  const [reveal, setReveal] = useState(false)
+  const [revealedCount, setRevealedCount] = useState(0)
+  const spinnerFramesMap: Record<string, string[]> = {
+    ora: ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'],
+    line: ['|', '/', '-', '\\'],
+    dots: ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'],
+    blocks: ['▖', '▘', '▝', '▗'],
+  }
+  const spinFrames = spinnerFramesMap[spinner] ?? spinnerFramesMap.ora
+  const [spinIndex, setSpinIndex] = useState(0)
+
+  const resetAnimation = () => {
+    setTypedLength(0)
+    setPhase('typing')
+    setReveal(false)
+    setRevealedCount(0)
+    setSpinIndex(0)
+  }
+
+  useEffect(() => {
+    if (phase !== 'typing') return
+    const id = setInterval(() => {
+      setTypedLength((n) => {
+        const next = n + 1
+        if (next >= command.length) {
+          clearInterval(id)
+          setPhase('waitingEnter')
+          return command.length
+        }
+        return next
+      })
+    }, 25)
+    return () => clearInterval(id)
+  }, [phase, command.length])
+
+  useEffect(() => {
+    if (phase === 'waitingEnter') {
+      const id = setTimeout(() => setPhase('spinning'), 500)
+      return () => clearTimeout(id)
+    }
+    if (phase === 'spinning') {
+      setRevealedCount(0)
+      const timeoutId = setTimeout(() => setPhase('showingLogs'), 1200)
+      const spinId = setInterval(() => {
+        setSpinIndex((i) => (i + 1) % spinFrames.length)
+      }, 80)
+      return () => {
+        clearTimeout(timeoutId)
+        clearInterval(spinId)
+      }
+    }
+    if (phase === 'showingLogs') {
+      const logLines = logs.split('\n')
+      const timer = setInterval(() => {
+        setRevealedCount((n) => {
+          const next = n + 1
+          if (next >= logLines.length) {
+            clearInterval(timer)
+            setReveal(true)
+            return logLines.length
+          }
+          return next
+        })
+      }, 180)
+      return () => clearInterval(timer)
+    }
+  }, [phase, logs, spinFrames.length])
+
+  return (
+    <div>
+      <Prompt caret>
+        {command.slice(0, typedLength)}
+        {phase === 'waitingEnter' && (
+          <span className="ml-2 text-xs text-black/50">⏎</span>
+        )}
+      </Prompt>
+      <div
+        className={`transition-all duration-300 ease-out ${
+          reveal
+            ? 'opacity-100 translate-y-0 scale-100'
+            : 'opacity-100 translate-y-0 scale-100'
+        }`}
+        onDoubleClick={resetAnimation}
+      >
+        <CodeBlock>
+          {logs.split('\n').map((line, idx) => {
+            const isVisible =
+              phase === 'spinning'
+                ? idx === 0
+                : idx <
+                  (phase === 'showingLogs' ? Math.max(1, revealedCount) : 0)
+            const content =
+              phase === 'spinning' && idx === 0
+                ? `Building ${spinFrames[spinIndex]}`
+                : line
+            return (
+              <div key={idx} className={isVisible ? '' : 'opacity-0'}>
+                {content}
+              </div>
+            )
+          })}
+        </CodeBlock>
+      </div>
+    </div>
+  )
+}
+
+function Prompt({
+  children,
+  className = '',
+  caret = false,
+}: {
+  children: React.ReactNode
+  className?: string
+  caret?: boolean
+}) {
+  return (
+    <div className={`flex text-sm ${className}`}>
+      <span className="text-black/40 mr-2">{`➜`}</span>
+      <span className="text-[#000]">~/project</span>
+      <span className="ml-2 text-black">$</span>
+      <span className="ml-2 inline-flex items-center">
+        <span className="text-black/60">{children}</span>
+        {caret && (
+          <span className="ml-1 inline-block h-4 w-2 translate-y-[1px] bg-[#000]/70 align-middle caret" />
+        )}
+      </span>
+    </div>
+  )
+}
+
+function CodeBlock({ children }: { children: React.ReactNode }) {
+  return (
+    <pre className="mt-2 w-full block rounded-md bg-[#f5e6d4] text-[12px] leading-relaxed text-black/80">
+      <code className="px-3 py-2 block w-full select-none">{children}</code>
+    </pre>
+  )
+}

docs/next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-/// <reference path="./.next/types/routes.d.ts" />
+import './.next/dev/types/routes.d.ts'
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

docs/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "bunchee-docs",
+  "private": true,
+  "type": "module"
+}

docs/tsconfig.json

@@ -12,13 +12,19 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "plugins": [
       {
         "name": "next"
       }
     ]
   },
-  "include": ["next-env.d.ts", ".next/types/**/*.ts", "**/*.ts", "**/*.tsx"],
+  "include": [
+    "next-env.d.ts",
+    ".next/types/**/*.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/dev/types/**/*.ts"
+  ],
   "exclude": ["node_modules"]
 }

package.json

@@ -102,7 +102,7 @@
     "cross-env": "^7.0.3",
     "husky": "^9.0.11",
     "lint-staged": "^15.2.2",
-    "next": "canary",
+    "next": "16.0.0-canary.1",
     "picocolors": "^1.0.0",
     "postcss": "^8.5.4",
     "prettier": "3.4.2",