3D Jack 作品集

使用 React、TypeScript、Tailwind CSS、Framer Motion 和 Lucide React，为「Jack」构建一个 3D 创作者作品集落地页。页面采用深色主题（背景为 #0C0C0C），字体使用 Kanit（Google Fonts，字重 300-900）。页面标题为「Jack -- 3D Creator」。

全局样式
html、body、#root 和主容器的背景：#0C0C0C
字体族：'Kanit', sans-serif
全局重置：box-sizing border-box、margin 0、padding 0
CSS 类 .hero-heading：渐变文字，使用 background: linear-gradient(180deg, #646973 0%, #BBCCD7 100%)，并设置 -webkit-background-clip: text 和 -webkit-text-fill-color: transparent
主容器设置 overflowX: 'clip'
区块顺序
HeroSection
MarqueeSection
AboutSection
ServicesSection
ProjectsSection
1. HERO SECTION
占满视口高度（h-screen），使用 flex 纵向布局，并设置 overflowX: clip。

Navbar：水平导航栏，包含 4 个链接——「About」「Price」「Projects」「Contact」——使用 justify-between 均匀分布。文字颜色 #D7E2EA，font-medium、uppercase、tracking-wider。字号：text-sm md:text-lg lg:text-[1.4rem]。内边距：px-6 md:px-10 pt-6 md:pt-8。Hover：透明度降至 70%，过渡时长 200ms。

Hero Heading：巨大的 h1，文字为「Hi, i'm jack」（小写「i」，通过 ' 使用弯引号）。使用 .hero-heading 渐变文字类。font-black、uppercase、tracking-tight、leading-none、whitespace-nowrap、w-full。字号：text-[14vw] sm:text-[15vw] md:text-[16vw] lg:text-[17.5vw]。上外边距：mt-6 sm:mt-4 md:-mt-5。包裹在 overflow-hidden 容器中。

底部栏：使用 Flexbox justify-between items-end，设置 pb-7 sm:pb-8 md:pb-10：

左侧：段落文字「a 3d creator driven by crafting striking and unforgettable projects」，颜色 #D7E2EA，font-light、uppercase、tracking-wide、leading-snug。字号：clamp(0.75rem, 1.4vw, 1.5rem)。最大宽度：max-w-[160px] sm:max-w-[220px] md:max-w-[260px]。
右侧：ContactButton 组件（见下文）
Hero Portrait：绝对定位并居中。使用 Magnet 组件（跟随鼠标的磁吸效果）包裹图片。图片 URL：https://shrug-person-78902957.figma.site/_components/v2/d24c01ad3a56fc65e942a1f501eb73db42d7cf9a/Rectangle_40443.81459862.png。Magnet 设置：padding 150、strength 3、activeTransition "transform 0.3s ease-out"、inactiveTransition "transform 0.6s ease-in-out"。定位：absolute left-1/2 -translate-x-1/2 z-10。宽度：w-[280px] sm:w-[360px] md:w-[440px] lg:w-[520px]。移动端：top-1/2 -translate-y-1/2。sm+：sm:top-auto sm:translate-y-0 sm:bottom-0。

FadeIn 动画：Navbar 淡入，delay 0、y -20。Heading：delay 0.15、y 40。左侧文字：delay 0.35、y 20。Contact button：delay 0.5、y 20。Portrait：delay 0.6、y 30。

2. MARQUEE SECTION
两行图片，根据页面滚动位置水平滚动。背景 #0C0C0C。内边距：pt-24 sm:pt-32 md:pt-40 pb-10。

来自 motionsites.ai 的 21 张 GIF 图片（URL 必须完全一致）：


https://motionsites.ai/assets/hero-space-voyage-preview-eECLH3Yc.gif
https://motionsites.ai/assets/hero-codenest-preview-Cgppc2qV.gif
https://motionsites.ai/assets/hero-vex-ventures-preview-BczMFIiw.gif
https://motionsites.ai/assets/hero-stellar-ai-v2-preview-DjvxjG3C.gif
https://motionsites.ai/assets/hero-asme-preview-B_nGDnTP.gif
https://motionsites.ai/assets/hero-transform-data-preview-Cx5OU29N.gif
https://motionsites.ai/assets/hero-vitara-preview-Cjz2QYyU.gif
https://motionsites.ai/assets/hero-terra-preview-BFjrCr7T.gif
https://motionsites.ai/assets/hero-skyelite-preview-DHaZIgUv.gif
https://motionsites.ai/assets/hero-aethera-preview-DknSlcTa.gif
https://motionsites.ai/assets/hero-designpro-preview-D8c5_een.gif
https://motionsites.ai/assets/hero-stellar-ai-preview-D3HL6bw1.gif
https://motionsites.ai/assets/hero-xportfolio-preview-D4A8maiC.gif
https://motionsites.ai/assets/hero-orbit-web3-preview-BXt4OttD.gif
https://motionsites.ai/assets/hero-nexora-preview-cx5HmUgo.gif
https://motionsites.ai/assets/hero-evr-ventures-preview-DZxeVFEX.gif
https://motionsites.ai/assets/hero-planet-orbit-preview-DWAP8Z1P.gif
https://motionsites.ai/assets/hero-new-era-preview-CocuDUm9.gif
https://motionsites.ai/assets/hero-wealth-preview-B70idl_u.gif
https://motionsites.ai/assets/hero-luminex-preview-CxOP7ce6.gif
https://motionsites.ai/assets/hero-celestia-preview-0yO3jXO8.gif
第 1 行：前 11 张图片，重复三次以实现无缝滚动。滚动时向 RIGHT 移动（translateX(offset - 200)）。
第 2 行：其余 10 张图片，重复三次。滚动时向 LEFT 移动（translateX(-(offset - 200))）。
滚动偏移量计算公式：(window.scrollY - sectionTop + window.innerHeight) * 0.3
每个图片块：420px x 270px、rounded-2xl、object-cover、延迟加载。
图片块之间的间距：gap-3。两行之间的间距：gap-3。
使用 willChange: 'transform' 提升性能。滚动监听器设置为 passive。
3. ABOUT SECTION
全高度居中区块，使用 min-h-screen，内边距 px-5 sm:px-8 md:px-10 py-20。

四张装饰性 3D 图片绝对定位在四角：

左上：Moon 图标——https://shrug-person-78902957.figma.site/_components/v2/ebb2b8f25d8e24d5f0a5ca8af4c950de81aa2fd7/moon_icon.11395d36.png——w-[120px] sm:w-[160px] md:w-[210px]，定位为 top-[4%] left-[1%] sm:left-[2%] md:left-[4%]。FadeIn：delay 0.1、x -80、y 0、duration 0.9。
左下：3D 物体——https://shrug-person-78902957.figma.site/_components/v2/ebb2b8f25d8e24d5f0a5ca8af4c950de81aa2fd7/p59_1.4659672e.png——w-[100px] sm:w-[140px] md:w-[180px]，定位为 bottom-[8%] left-[3%] sm:left-[6%] md:left-[10%]。FadeIn：delay 0.25、x -80、y 0、duration 0.9。
右上：Lego 图标——https://shrug-person-78902957.figma.site/_components/v2/ebb2b8f25d8e24d5f0a5ca8af4c950de81aa2fd7/lego_icon-1.703bb594.png——w-[120px] sm:w-[160px] md:w-[210px]，定位为 top-[4%] right-[1%] sm:right-[2%] md:right-[4%]。FadeIn：delay 0.15、x 80、y 0、duration 0.9。
右下：3D 组合——https://shrug-person-78902957.figma.site/_components/v2/ebb2b8f25d8e24d5f0a5ca8af4c950de81aa2fd7/Group_134-1.2e04f3ce.png——w-[130px] sm:w-[170px] md:w-[220px]，定位为 bottom-[8%] right-[3%] sm:right-[6%] md:right-[10%]。FadeIn：delay 0.3、x 80、y 0、duration 0.9。
Heading：「About me」，使用 .hero-heading 渐变文字，font-black、uppercase、leading-none、tracking-tight、居中。字号：clamp(3rem, 12vw, 160px)。FadeIn：delay 0、y 40。

动画段落：使用逐字符、由滚动驱动的不透明度动画。文字：「With more than five years of experience in design, i focus on branding, web design, and user experience, i truly enjoy working with businesses that aim to stand out and present their best image. Let's build something incredible together!」——颜色 #D7E2EA，font-medium、居中、leading-relaxed、max-w-[560px]，字号 clamp(1rem, 2vw, 1.35rem)。每个字符根据滚动进度从 opacity 0.2 动画至 1，滚动偏移为 ['start 0.8', 'end 0.2']。

文字块下方放置 Contact button。Heading 与文字之间的间距：gap-10 sm:gap-14 md:gap-16。文字块与按钮之间的间距：gap-16 sm:gap-20 md:gap-24。

4. SERVICES SECTION
白色背景（#FFFFFF），顶部圆角为 rounded-t-[40px] sm:rounded-t-[50px] md:rounded-t-[60px]。内边距：px-5 sm:px-8 md:px-10 py-20 sm:py-24 md:py-32。

Heading：「Services」，颜色 #0C0C0C，font-black、uppercase、居中，字号 clamp(3rem, 12vw, 160px)。下外边距：mb-16 sm:mb-20 md:mb-28。

5 个服务项目组成纵向列表，max-w-5xl，居中：

01 - 3D Modeling：「根据客户的具体需求创建细致的物体、角色或环境，适用于游戏、产品和可视化。」
02 - Rendering：「高质量、照片级真实感的渲染，通过定制灯光、纹理和材质展示设计，让概念栩栩如生。」
03 - Motion Design：「富有动感的动画与动态图形，为品牌、产品和数字体验注入活力与叙事感。」
04 - Branding：「打造统一的视觉识别——从标志到完整品牌系统——传达清晰且令人难忘的品牌形象。」
05 - Web Design：「设计简洁、现代且以转化为导向的网站，注重布局、字体排印和用户体验。」
每个项目：水平布局，左侧为编号（font-black，字号 clamp(3rem, 10vw, 140px)，颜色 #0C0C0C），右侧纵向排列名称和描述。名称：font-medium、uppercase，字号 clamp(1rem, 2.2vw, 2.1rem)。描述：font-light、leading-relaxed、max-w-2xl，字号 clamp(0.85rem, 1.6vw, 1.25rem)，opacity 0.6。项目之间用 1px 边框分隔（rgba(12, 12, 12, 0.15)）。内边距：py-8 sm:py-10 md:py-12。交错 FadeIn：每个项目的 delay 为 i * 0.1。

5. PROJECTS SECTION
深色背景（#0C0C0C），顶部圆角 rounded-t-[40px] sm:rounded-t-[50px] md:rounded-t-[60px]，使用 -mt-10 sm:-mt-12 md:-mt-14 向上拉，并设置 z-10。

Heading：「Project」（单数），使用 .hero-heading 渐变，与其他 heading 的样式相同。

3 张 sticky 堆叠项目卡片，滚动越过卡片时逐渐缩小（使用 Framer Motion useScroll 和 useTransform 实现卡片堆叠效果）。每张卡片在 h-[85vh] 容器内使用 sticky top-24 md:top-32。

缩放计算：targetScale = 1 - (totalCards - 1 - index) * 0.03。每张卡片的偏移为 top: ${index * 28}px。

每张卡片设置：rounded-[40px] sm:rounded-[50px] md:rounded-[60px]、border-2 border-[#D7E2EA]、背景 #0C0C0C、内边距 p-4 sm:p-6 md:p-8。

卡片布局：

顶行：编号（巨大，与 services 使用相同样式）、类别标签、项目名称，以及一个「Live Project」ghost button（rounded-full、border-2 #D7E2EA、uppercase、tracking-widest）。
底行：两列图片网格——左列（宽度 40%）包含 2 张纵向堆叠的图片，右列（宽度 60%）包含 1 张高图。所有图片均使用大圆角 rounded-[40px] sm:rounded-[50px] md:rounded-[60px]。左上图片高度：clamp(130px, 16vw, 230px)。左下图片高度：clamp(160px, 22vw, 340px)。
项目数据及 CloudFront 图片 URL：

项目 01 - 「Nextlevel Studio」（Client）：

Col1 图片 1：https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260412_055344_5eff02e0-87a5-41ce-b64f-eb08da8f33db.png&w=1280&q=85
Col1 图片 2：https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260412_055431_11d841fd-8b41-46a5-82e4-b04f2407a7d8.png&w=1280&q=85
Col2 图片：https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260412_055451_e317bf2d-28d4-48cc-86b0-6f72f25b6327.png&w=1280&q=85
项目 02 - 「Aura Brand Identity」（Personal）：

Col1 图片 1：https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260412_055654_911201c5-36d9-4bc6-bac7-331adfce159f.png&w=1280&q=85
Col1 图片 2：https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260412_055723_5ceda0b8-d9c2-4665-b2e3-83ba19ba76d1.png&w=1280&q=85
Col2 图片：https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260412_055753_adc5dcbd-a8e6-49c0-b43a-9b030d835cea.png&w=1280&q=85
项目 03 - 「Solaris Digital」（Client）：

Col1 图片 1：https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260412_055759_963cfb0b-4bd1-4b0f-9d0a-09bd6cf95b2f.png&w=1280&q=85
Col1 图片 2：https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260412_060108_438f781a-9846-4dcc-89ab-c4e6cb830f5b.png&w=1280&q=85
Col2 图片：https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260412_055818_9d062121-ad7e-46b9-999a-1a6a692ef1ee.png&w=1280&q=85
可复用组件
ContactButton：圆角胶囊按钮，渐变背景 linear-gradient(123deg, #18011F 7%, #B600A8 37%, #7621B0 72%, #BE4C00 100%)，内部阴影 0px 4px 4px rgba(181, 1, 167, 0.25)、4px 4px 12px #7721B1 inset，2px 白色轮廓，offset 为 -3px。文字：白色、font-medium、uppercase、tracking-widest。尺寸：px-8 py-3 sm:px-10 sm:py-3.5 md:px-12 md:py-4，文字 text-xs sm:text-sm md:text-base。标签：「Contact Me」。

LiveProjectButton：Ghost/outline 胶囊按钮。rounded-full、border-2 border-[#D7E2EA]，文字颜色 #D7E2EA，font-medium、uppercase、tracking-widest。尺寸：px-8 py-3 sm:px-10 sm:py-3.5，文字 text-sm sm:text-base。Hover：bg-[#D7E2EA]/10。标签：「Live Project」。

FadeIn：Framer Motion 包装器，使用 whileInView，viewport={{ once: true, margin: "50px", amount: 0 }}。接受 delay、duration（默认 0.7）、x（默认 0）、y（默认 30）。Easing：[0.25, 0.1, 0.25, 1]。使用 motion.create() 支持动态元素类型。

Magnet：跟随鼠标的磁性 hover 效果。追踪鼠标相对元素中心的位置，并应用除以 strength 系数后的 translate3d transform。当光标进入距元素边缘 padding 范围内时激活。进入时使用平滑过渡（0.3s ease-out），离开时使用（0.6s ease-in-out）。设置 willChange: 'transform'。

AnimatedText：逐字符的滚动揭示文字动画。每个字符根据其在文字中的位置与滚动进度，从 opacity 0.2 变化至 1。使用 Framer Motion useScroll，以段落元素为目标，offset 为 ['start 0.8', 'end 0.2']。每个字符使用不可见占位符 + 绝对定位的动画 span。

关键依赖
react, react-dom (^18.3.1)
framer-motion (^12.38.0)
lucide-react (^0.344.0)
tailwindcss (^3.4.1)
vite, typescript
响应式断点
所有区块均使用 Tailwind 的默认断点（sm: 640px、md: 768px、lg: 1024px），采用 mobile-first 方式。大量使用 clamp() 实现流式排版。整个设计可从移动端到超宽屏平滑缩放。