Pixel Grid Hover

在云境TS 中打开并复制 →

内容预览

Build a "Projects / Case Studies" section as a React + TypeScript component using Tailwind CSS 3 and Framer Motion. Font is `'DM Sans', sans-serif` (Google Fonts: `https://fonts.googleapis.com/css?family=DM+Sans:500,400`). White background, black text. Here is the exact specification: --- **Section Container:** - `` with `relative bg-white text-black`, inline style `fontFamily: "'DM Sans', sans-serif"` - All animations use easing `[0.22, 1, 0.36, 1]` - Inject a `` block for the marquee keyframe: ```css @keyframes marqueeProjects { from { transform: translateX(0); } to { transform: translateX(-50%); } } .marquee-projects { animation: marqueeProjects 28s linear infinite; } .marquee-projects:hover { animation-play-state: paused; } ``` --- **Top Area (Header with floating squares):** - Container: `relative px-6 pb-10 pt-32 sm:px-10 lg:px-16 lg:pt-40` - Contains a `pointer-events-none absolute inset-0 overflow-hidden` layer with 8 parallax floating black squares. Each square uses `useScroll` (target: the section ref, offset `["start end", "end start"]`) and `useTransform` + `useSpring` for vertical parallax, plus a gentle infinite bob animation (`y: [0, -10, 0]`, duration `3s + index * 0.4s`, ease `easeInOut`, staggered delay `index * 0.3s`). - Square positions (x%, y%, size px): ``` (6, 20, 12), (12, 32, 8), (8, 44, 6), (88, 18, 10), (92, 30, 14), (85, 42, 7), (90, 52, 5), (14, 56, 5) ``` - Parallax formula: `useTransform(scrollYProgress, [0, 1], [0, -(80 + index * 30)])`, smooth

……（完整源码请在站内查看）