Ambient CSS

项目概述

Ambient CSS 是一套基于真实物理光照系统（Physics-based Lighting System）的创新前端 CSS 框架与组件系统。传统 Web 开发中的阴影规范（如 shadow-sm、shadow-md）往往是静态且脱节的人工数值堆叠，难以在同一界面中营造出统一的空间光感。Ambient CSS 打破了这一局限，它严格基于 Blender Cycles 光线追踪引擎渲染结果进行基准校准，开发者只需声明一个场景光源矢量（方向、明暗与色相），其下属所有按钮、面板与卡片的 5 层复合阴影（Drop shadow）、边缘高光（Chamfer/Fillet）及表面曲率渐变都将自动物理演化。

核心特性

• 💡 物理级场景光照统一：通过在父容器定义主光（Key light）与环境辅光（Fill light），容器内所有子元素无论如何嵌套排布，都会共享统一的光影朝向与空间深度。
• 📐 Blender 光线追踪像素校准：借助配套的 3D 参数化仿真引擎对真实光线路径反复校准，通过原生 box-shadow 与数学渐变还原媲美 3D 渲染的硬核工业质感。
• 🎛️ 五层材质控制模型：覆盖结构（Structure）、曲面（Flat/Concave/Convex）、倒角（Chamfer/Fillet）、材质（Matte/Shiny/Glass/Brushed Metal）与物理高度（Elevation 0~3）。
• 🔌 双生态支持（CSS + React）：不仅提供零依赖的纯 CSS 库（@ambientcss/css），还提供了拟物硬件风格的 React 组件库（@ambientcss/components），开箱即用支持旋钮（Knobs）、实体按键与仪表面板。

快速上手与示例代码

# 安装纯 CSS 核心样式库，或搭配 React 硬件级组件库
npm install @ambientcss/css
# 或
npm install @ambientcss/components @ambientcss/css

import React from 'react';
import { AmbientProvider, AmbientPanel, AmbientButton, AmbientKnob } from '@ambientcss/components';
import '@ambientcss/css/ambient.css';
import '@ambientcss/components/styles.css';

export function HardwareSynthesizer() {
  return (
    <AmbientProvider theme={{ lightX: -0.8, lightY: -0.9, keyLight: 0.9, fillLight: 0.6 }}>
      <AmbientPanel className="p-8 rounded-2xl flex items-center gap-6">
        <AmbientButton className="amb-elevation-2">Trigger</AmbientButton>
        <AmbientKnob label="Resonance" defaultValue={65} />
      </AmbientPanel>
    </AmbientProvider>
  );
}

技术选型建议与适用场景

• 非常适合：专业音频合成器与硬件插件控制台（Audio DAW / VST UI）、3D/汽车车载仪表模拟、极客硬件极简风控制面板、加密硬件钱包应用，以及对新拟物与触觉质感有深度执念的高级界面。
• 与同类方案对比：相比于早年粗糙浮夸且易产生视觉疲劳的 Neumorphism（新拟物化），Ambient CSS 具备严谨的物理光学逻辑与倒角微倒影，不仅没有违和感，反而呈现出极高工艺标准的 Braun / Teenage Engineering 式工业美学。