ReactOmega 1.2.0 "Optics" — 6 new WebGL2 shaders (51 → 57) + a How-to-use guide

CHANGELOG.md

@@ -2,6 +2,33 @@
 
 Format: [Keep a Changelog](https://keepachangelog.com/) · [SemVer](https://semver.org/).
 
+## [1.2.0] — 2026-08-07 — "Materials"
+
+Six more shaders (51 → **57**), taking **Shaders & Light from 6 to 12**. The set is now a
+materials library: every entry is a different optical family rather than another noise field.
+
+### Added
+- **`refracted-glass`** — a thick bevelled slab. The view ray is refracted with a separate index
+  per RGB channel (Cauchy-ordered, blue bent hardest), so the bevel carries genuine chromatic
+  dispersion; a Schlick Fresnel term lifts the rim and a Beer–Lambert body tint darkens with depth.
+- **`brushed-metal`** — anisotropic GGX with Smith-correlated shadowing over a brush-direction
+  field: roughness stays low along the grain and is pushed hard across it, so the highlight
+  stretches perpendicular to the brushing. `pattern: "linear" | "radial"` for engine-turned.
+- **`moire-weave`** — two rigid lattices whose beat is the actual difference frequency. Every
+  cosine is band-limited by an exact box filter (`sinc(w)`, `w = fwidth(φ)` in cycles per pixel),
+  so amplitude reaches zero at a two-pixel period and the pattern dissolves into its own mean
+  instead of boiling.
+- **`velvet-sheen`** — an Ashikhmin velvet lobe gated by an inverted Fresnel, so the cloth is
+  brightest at grazing angles and dark facing the viewer. Drape comes from wandering the phase and
+  amplitude of a gather train; adding noise to the height read as stone, not cloth.
+- **`translucent-wax`** — light through a solid: the interior light path is marched to accumulate
+  thickness, then attenuated by Beer–Lambert with wrapped diffuse and a forward-scatter lobe. The
+  ground edge glows and the body goes deep, which is the cue that sells the translucency.
+- **`diffraction-grating`** — the grating equation solved for wavelength per order
+  (`d·sinθ = mλ`) rather than integrated over sampled wavelengths, which is what keeps the spectral
+  lines continuous instead of beading. Blaze falloff dims higher orders and `sharpness` acts as
+  resolving power, so they wash toward white rather than simply fading.
+
 ## [1.1.0] — 2026-07-28 — "Surfaces"
 
 Twenty new components (31 → **51**) and a second primitive. The theme is surfaces you can

README.md

@@ -4,7 +4,7 @@
 **motion & interaction** components you copy into your project — installable in one line by
 **humans _and_ AI agents**.
 
-![Version](https://img.shields.io/badge/version-1.1.0-7c5cff)
+![Version](https://img.shields.io/badge/version-1.2.0-7c5cff)
 ![License](https://img.shields.io/badge/license-MIT-blue)
 ![Deps](https://img.shields.io/badge/runtime%20deps-none-3c873a)
 ![A11y](https://img.shields.io/badge/reduced--motion-safe-22d3ee)
@@ -60,7 +60,7 @@ npx -y github:Edwson/ReactOmega list --category text  # filter by category
 
 ## Run the playground
 
-**Live:** **https://edwson.github.io/ReactOmega/** — every one of the 51 components rendered live,
+**Live:** **https://edwson.github.io/ReactOmega/** — every one of the 57 components rendered live,
 with a copy-paste install command on each card. The playground source lives in [`web/`](web)
 (Next.js + Tailwind). To run it locally:
 
@@ -70,7 +70,7 @@ npm install
 npm run dev        # → http://localhost:3000
 ```
 
-## Components (v1.1) — 51
+## Components (v1.2) — 57
 
 **Text Animations** (10) — novel + deeply customizable kinetic typography
 `split-text` · `shiny-text` · `gradient-text` · `count-up` · `variable-proximity` (per-letter
@@ -94,7 +94,7 @@ at any speed) · `pixel-trail` (sub-cell path walking — a fast flick still lig
 frame-rate independent) · `parallax-layers` (progress normalised to the section's own centre) ·
 `scroll-scene` (pins a section, exposes 0→1 scrub progress via render prop, CSS variable, or callback)
 
-**Shaders & Light** (6) — *new in 1.1* — **hand-written GLSL on raw WebGL2, still zero deps**
+**Shaders & Light** (12) — **hand-written GLSL on raw WebGL2, still zero deps**
 `liquid-metal` (domain-warped FBM, normals from finite differences, swept polish bands) ·
 `thin-film` (two-beam interference at three wavelengths — real fringe order, not a hue rotation) ·
 `caustics` (folded coordinates accumulating reciprocal distance) · `halftone-gradient` (angled
@@ -103,6 +103,16 @@ per-channel dot screens with √-corrected dot area, or a computed 4×4 Bayer ma
 (FBM as a stream function; velocity is the perpendicular of its gradient, so the field is
 divergence-free by construction)
 
+*New in 1.2 — a materials set, each a different optical family:* `refracted-glass` (per-channel
+IOR through a bevelled slab — real chromatic dispersion, Schlick Fresnel rim) · `brushed-metal`
+(anisotropic GGX with Smith shadowing; the highlight stretches perpendicular to the grain, linear
+or engine-turned) · `moire-weave` (two lattices beating at their true difference frequency,
+band-limited by an exact box filter so it dissolves rather than aliases) · `velvet-sheen`
+(Ashikhmin velvet lobe under an inverted Fresnel — brightest at grazing angles) ·
+`translucent-wax` (marched interior light path, Beer–Lambert through a back-lit slab of banded
+stone) · `diffraction-grating` (the grating equation solved per order, so spectral lines are sharp
+and higher orders wash toward white)
+
 **Physics & Art** (12) — real physics — tactile, designed, never cosmic
 `spring-mesh` (press an elastic lattice, waves ripple & settle) · `cloth` (a verlet fabric you grab
 & wave) · `metaballs` (gooey fluid that merges around the pointer) · `rope` (a verlet rope you grab

deploy/DEPLOY.md

@@ -1,7 +1,7 @@
 # Deploy ReactOmega → https://edwson.com/ReactOmega/
 
-`ReactOmega-cpanel.zip` is a **fully static** build of the new ReactOmega playground
-(31 live components). No Node server, no database — it's plain HTML/CSS/JS that Apache
+`ReactOmega-cpanel.zip` is a **fully static** build of the ReactOmega playground
+(**51 live components**, v1.1.0 — including six raw-WebGL2 shaders). No Node server, no database — it's plain HTML/CSS/JS that Apache
 serves directly. The Inter font is **self-hosted inside the build**, so the page makes
 **zero external requests** at runtime.
 
@@ -42,7 +42,7 @@ _next/            ← hashed JS/CSS + self-hosted fonts
 
 - Open **https://edwson.com/ReactOmega/** → the ReactΩ landing page (Inter wordmark,
   "Motion · Interaction · Physics").
-- Open **https://edwson.com/ReactOmega/components/** → the live gallery, all 31 demos.
+- Open **https://edwson.com/ReactOmega/components/** → the live gallery, all 51 demos.
 - Hard-refresh once (**Cmd/Ctrl + Shift + R**) so the browser drops any cached old build.
 
 ---

llms.txt

@@ -1,6 +1,6 @@
 # ReactOmega
 
-> AI-native React component registry — premium, accessible, reduced-motion-safe motion & interaction components. v1.1.0. Install any component in one line via the ReactOmega CLI, shadcn, or an MCP server. Source of truth: /registry.json.
+> AI-native React component registry — premium, accessible, reduced-motion-safe motion & interaction components. v1.2.0. Install any component in one line via the ReactOmega CLI, shadcn, or an MCP server. Source of truth: /registry.json.
 
 ## Install a component
 ```
@@ -49,6 +49,12 @@ Every component is a self-contained file copied into your project (you own the c
 - `halftone-gradient` — A drifting multi-stop gradient rendered through a print screen — either angled per-channel dots with radius proportional to the square root of tone, or a computed 4x4 ordered Bayer matrix. The screen opens up under the pointer.
 - `volumetric-rays` — God rays from a pointer-driven light source, integrated the classic way: march back toward the light sampling a drifting haze field and attenuating each step, with decay normalised by sample count so quality and brightness stay independent.
 - `curl-flow` — Silk-like flowing bands from a curl-noise field. FBM acts as a stream function and the velocity is the perpendicular of its gradient, so the field is divergence-free by construction; coordinates advect along it and shade as anisotropic streamlines. The pointer injects a vortex.
+- `refracted-glass` — A thick bevelled glass panel over a procedural backdrop. The view ray is refracted through the slab with a different index per RGB channel, so the bevel carries real chromatic dispersion, and a Schlick Fresnel term brightens the rim where the surface turns away.
+- `brushed-metal` — Machined metal, still and precise — the opposite register to liquid-metal's flow. An anisotropic GGX lobe with Smith-correlated shadowing runs over a brush-direction field, so the highlight stretches perpendicular to the grain. Linear or radial (engine-turned) finishes.
+- `moire-weave` — Two rigid lattices at a small relative angle, beating against each other at their true difference frequency. Every cosine is band-limited by an exact box filter, so the pattern dissolves into its own mean grey as the period approaches two pixels instead of aliasing into noise.
+- `velvet-sheen` — Soft fabric: an Ashikhmin velvet lobe gated by an inverted Fresnel, so the cloth is brightest at grazing angles and dark facing the viewer. Fibre rank modulates the sheen itself, and the drape comes from wandering the phase and amplitude of a gather train rather than adding noise to the height.
+- `translucent-wax` — Light travelling through a solid rather than off it: a back-lit slab of banded stone. The interior light path is marched to accumulate thickness, attenuated by Beer–Lambert with wrapped diffuse and a forward-scatter lobe, so the ground edge glows and the body goes deep.
+- `diffraction-grating` — The optics behind a CD surface: the grating equation places spectral orders by solving d·sinθ = mλ for wavelength per order, giving sharp rainbow lines rather than broad fringes. Higher orders are dimmer and wash toward white, over a band-limited pressed ruling.
 
 ## Physics & Art
 - `spring-mesh` — An elastic lattice: every node is sprung to rest and coupled to its neighbors, so pressing the pointer sends real waves rippling outward that settle naturally.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "reactomega",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "The AI-native React component registry \u2014 premium, accessible, reduced-motion-safe motion, interaction & physics components, installable by humans and AI agents via a CLI, shadcn, or an MCP server.",
   "keywords": [
     "react",
@@ -21,7 +21,9 @@
     "shader",
     "glsl",
     "cursor",
-    "scroll"
+    "scroll",
+    "materials",
+    "shaders"
   ],
   "license": "MIT",
   "author": "Ed Chen (https://www.edwson.com)",