text-shadow — Shadow Lab

A scientific CSS text-shadow builder that models shadows as optical systems. Pick a physical model, adjust its parameters, and copy production-ready CSS.

Run locally

npm run dev

Opens http://localhost:8080 via http-server.

File structure

text-shadow/
├── index.html          ← HTML shell (custom elements only, no logic)
├── styles.css          ← All CSS: tokens, layout, preview, keyframe animations
├── src/
│   ├── main.js         ← Entry point: imports and registers all custom elements
│   ├── reactive.js     ← Signal/Scope/Concern reactive primitives
│   ├── context.js      ← ApplicationContext (state root) and AppElement base class
│   ├── utils/
│   │   ├── math.js     ← clamp, round, lightVector, shadowEntry
│   │   └── color.js    ← hex/rgb/hsl conversions, luminance, contrast ratio
│   ├── domain/
│   │   ├── effects.js  ← EFFECTS config — developer-editable model definitions
│   │   ├── presets.js  ← PRESETS config — developer-editable preset library
│   │   ├── state.js    ← BASE_STATE, FONT_STACKS, state factory functions
│   │   └── model.js    ← buildShadowModel, buildAudit, normalise/patch helpers
│   └── components/
│       ├── layout.js   ← Structural custom elements (navbar, card, grid…)
│       └── features.js ← Feature custom elements (editor, preview, audit…)
├── AGENTS.md           ← Guide for AI agents working on this codebase
└── SKILL.md            ← Reference for the shadow model skill

Adding an effect

See the top of src/domain/effects.js for a step-by-step template. The short version:

1. Add an entry to EFFECTS in effects.js
2. Add its id to GLOBAL_RANGE_USAGE in effects.js
3. Add a CSS generation block in model.js
4. Optionally add presets in presets.js

Adding a preset

See the top of src/domain/presets.js for a copy-paste template.

Technology

• Vanilla ES modules — no bundler, no framework
• Bootstrap 5.3 for layout and base styles
• Web Components (Custom Elements v1) for the component model
• A tiny hand-written reactive layer (src/reactive.js)