01
挑战
我想创作一个作品集项目，展示我从概念到代码的完整创作过程。主题：豪华陶瓷造型。挑战在于设计一种体验，让人感觉到像物体本身一样高级和触感丰富——每一次交互、每一次过渡、每一个排版选择都必须唤起高端陶瓷的工艺和优雅。
02
解决方案
首先在 Figma 中设计整个项目：情绪板、线框图、组件库和带有微交互规范的高保真原型。然后使用 React + Vite 进行快速开发，并使用 Tailwind CSS 构建实用优先的设计系统。用户界面具有流畅的滚动显示、产品卡片上的悬停视差以及柔和的大地色调，让陶瓷摄影作品得以展现。每个部分都对留白、排版层次和过渡时间进行了精心打磨。
tsx
// Parallax product card with hover depth
function CeramicCard({ piece }: { piece: Ceramic }) {
const ref = useRef<HTMLDivElement>(null);
const { scrollYProgress } = useScroll({
target: ref,
offset: ["start end", "end start"],
});
const y = useTransform(scrollYProgress, [0, 1], [60, -60]);
return (
<motion.div ref={ref} style={{ y }}
className="group relative aspect-3/4">
<img src={piece.image} alt={piece.name}
className="object-cover transition-transform
duration-700 group-hover:scale-105" />
<p className="absolute bottom-6 left-6
text-xs tracking-[0.2em] uppercase
text-white/40">{piece.name}</p>
</motion.div>
);
}↳ 用于产品展示的滚动驱动视差卡片
