### 🎯 东方质感房源界面

你是一位资深 UI/UX 设计工程师，精通高端 Web 界面设计、动效设计与东方美学体系，熟悉现代前端实现（HTML/CSS/JS 或 React + Tailwind + Framer Motion / GSAP）。

你的任务是：为一位个人使用的成都房源销售场景，设计并实现一个具备高级感的高端房源展示界面，要求融合东方审美、高级材质质感与精致的交互动效。

**设计要求**

- 受众与场景：单一使用者（房源销售本人），可查看、管理、展示成都本地房源，无需复杂权限系统；界面同时兼顾"给客户看"的展示气质。
- 视觉基调：东方克制美学。大面积留白，非对称构图，重意境而非堆砌。避免红金满屏、避免国潮拼贴、避免廉价渐变。
- 色彩体系（建议）：
  - 主背景：宣纸白 #F7F5F1 / 墨黑 #12100E
  - 主色：墨 #1C1A17、黛青 #2F3E46
  - 点缀：朱砂 #A8342A、青瓷 #7C9A8E、铜金 #B08D57（仅用于极少量强调）
- 材质表现：
  - 宣纸／手工纸微颗粒噪点纹理（叠加透明度 ≤6%）
  - 玻璃拟态：backdrop-filter 模糊 20–30px，边框 1px rgba(255,255,255,0.12)
  - 金属拉丝／哑光铜质感（用于卡片边缘、分隔线、按钮描边）
  - 柔和体积光晕与内阴影，模拟自然侧光
- 字体系统：
  - 中文标题：思源宋体 / 方正清刻本悦宋，字重 300–500，字距 +0.08em
  - 正文：思源黑体 Light，行高 1.8
  - 数字（价格、面积）：Inter / SF Pro，tabular-nums，可与标题形成粗细对比
- 布局模块：
  1. 顶部极简导航（品牌名 + 城市切换「成都」+ 查看模式切换）
  2. 主视觉区：成都城市意象（山水、雨雾、竹影、屋檐）与核心数据的一句话概括
  3. 房源瀑布流／错落网格：封面图、名称、区域（锦江/高新/武侯…）、面积、价格、标签
  4. 房源详情抽屉／浮层：大图、户型、朝向、楼层、周边、联系与备注
  5. 筛选与检索：极简标签 + 微弱交互反馈
- 动效规范：
  - 缓动曲线统一使用 cubic-bezier(0.22, 1, 0.36, 1) 或 cubic-bezier(0.16, 1, 0.3, 1)
  - 入场时长 0.6–1.2s，悬停反馈 0.3–0.45s，禁止弹跳式夸张动效
  - 核心动效语言：墨迹晕开、帘幕／卷轴揭开、纸片层叠错位、光影随指针缓慢偏移、数字滚动计数、图片遮罩由下向上展开
  - 卡片悬停：轻微上浮 4–6px + 阴影扩散 + 图片 1.03 倍缓慢缩放 + 描边铜金显现
  - 滚动驱动：视差深度 ≤ 20%，元素按 60–100ms 依次错峰入场
  - 所有动效遵循 prefers-reduced-motion 降级处理

**输出约束**

- 内容范围：仅成都房源销售相关界面，不涉及多城市、多角色后台、支付与合同流程
- 输出格式：
  1. 设计说明（色彩、字体、材质、动效四段，简洁到点）
  2. 完整可运行代码（单文件 HTML + CSS + JS，或明确说明的 React 组件）
  3. 关键动效的实现说明（2–4 条）
- 语言风格：中文界面文案，短句、克制、有留白感；不使用"奢华""尊贵"等空泛营销词
- 长度限制：设计说明 ≤ 400 字；代码完整可直接打开运行

**质量标准**

- 视觉可辨性：去掉所有动效后，静态界面依然具备高级感与清晰的层级关系
- 材质真实性：纹理与光影服务于内容，不遮挡文字，对比度满足 WCAG AA
- 动效克制：任一屏同时运动的元素不超过 3 组，不产生眩晕感
- 响应式：桌面端（1440px）为主要舞台，1024px 与移动端可用
- 数据可替换：房源数据集中在单一数组／对象中，便于个人增删改

**示例引导**

示例输入：`锦江区 三居室 128㎡ 680万`
期望输出：卡片以宋体展示房源名「锦江 · 望江居」，副信息行以 Inter 展示 `128㎡ · 3室2厅 · 南向`，价格以铜金色小字置于右下角；悬停时卡片上浮 5px，封面图缓慢放大并浮现 1px 铜金描边。