Ambient CSS

Overview

Ambient CSS is a physics-based lighting framework and component system designed to bring cohesive, raytraced-quality depth to web interfaces. Unlike traditional CSS frameworks where utility classes like shadow-md and shadow-lg operate as isolated blur offsets without a coherent light source, Ambient CSS models physical light in real time. Calibrated against Blender Cycles raytraces and rendered using pure box-shadow and surface gradients, a single light source declaration deterministically controls all drop shadows, specular edge highlights (chamfers & fillets), and material finishes across child elements.

Key Features

• Physically Grounded Scene Lighting: Set light vectors (direction, key/fill intensity, hue) on any parent container, and every nested element updates its shadow and specular response synchronously.
• Calibrated Against Blender 3D: Handcrafted and verified against parametric 3D raytraces, replacing decorative guesswork with authentic optical physics.
• Five-Layer Material Architecture: Combines structural lighting, surface contours (flat, concave, convex), edge cuts (chamfer, fillet, groove), finishes (matte, brushed aluminum, glass), and elevation.
• Pure CSS + Tactile React Components: Available as a framework-agnostic CSS stylesheet (@ambientcss/css) and a tactile React library (@ambientcss/components) featuring physical knobs, switches, and synth panels.

Installation & Quick Start

# Install the zero-dependency CSS engine or tactile React controls
npm install @ambientcss/css
# or
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>
  );
}

Why Choose Ambient CSS?

1. Unrivaled Tactile Realism: Achieve sophisticated Braun and Teenage Engineering-grade hardware aesthetics without the heavy weight of 3D WebGL canvases.
2. Deterministic Depth: Replace fragmented shadow tokens with a single unified light vector that keeps hundreds of UI components optically cohesive.