Material Definition System v3.0

Manifest-driven material properties with tactile physics

Overview

MDS applies material properties (optics, surface, behavior) to DOM elements via JSON manifests. Define materials once, apply everywhere with data-material="name".

What's New in v3.0

Built-in Materials

Three materials demonstrate the system architecture. Visual effects are minimal (CSS limitations), but physics simulation showcases tactile response. Drag the liquid silicone sample to see elastic deformation.

A
Glass
Backdrop blur + shadows
B
Paper
SVG noise texture
C
Liquid Silicone (NEW)
Elastic physics (K=22, D=18)
Theme:

Quick Start

// 1. Install
npm install @v1b3x0r/mds-core

// 2. HTML
<div data-material="@mds/glass">Content</div>

// 3. Load materials
const manifest = await fetch('./glass.mdm.json').then(r => r.json())
MaterialSystem.register('@mds/glass', manifest)
MaterialSystem.apply()

Architecture

Material Layer (MDS): Visual (optics, surface) + Tactile (deformation physics)
Behavior Layer (External): Positional interactions (drag-to-move, scroll, etc.)
Interop API: Query material state, drive visual transitions 

// Material = Visual + Tactile (deform only, no translate)
{
  "name": "@mds/liquid-silicone",
  "optics": { "tint": "rgba(200, 200, 255, 0.3)" },
  "surface": { "radius": "16px" },
  "behavior": {
    "physics": "./liquid-silicone.physics.js",
    "physicsParams": { "K": 22, "D": 18, "mass": 1.5 }
  }
}

System Details