@pixerate/flair 0.27.0 → 0.28.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @pixerate/flair
 
+## 0.28.0
+
+### Minor Changes
+
+- da66f72: `glare-sweep` (overlay): the light sweep duotone used to have built in, now its own effect, as 0.22.0 should have added when it took the sweep out of `image-duotone`. A soft diagonal glare glides across without a pause, with strength, speed, tilt, sharpness and colour controls. It is added light: laid over a picture with `mix-blend-mode: plus-lighter`, `image-duotone` plus `glare-sweep` at their defaults matches the old duotone to within one level in 255; with normal blending it is a slightly softer, screen-like glare. `image-duotone`'s description now points to it (rather than `shine-sweep`, a different, intermittent gloss).
+
 ## 0.27.0
 
 ### Minor Changes

package/README.md

@@ -19,7 +19,7 @@ Flair gives products a library of good-looking, configurable visual effects (her
 
 ### Core Capabilities
 
-- 🎨 **Effect catalog (`@pixerate/flair/catalog`)**: 309 effects, each with controls and presets. There are 220 WebGL2 shaders (gradients, organic textures and growth, patterns, light, lighting that relights pictures, space, retro and pixel art, image treatments, transparent overlays, text fills, image morphs, pointer interactions, pyrotechnics, time warps, melting, electricity, splatters, bubbles, stickers, pointer trails, particles, debris, impacts, comic looks, atmosphere, glows, shadows, distortions, transitions) and 89 animated SVG effects (loaders, status icons, animated titles, shape morphs, UI micro-interactions, pixel sprites, stickers, cartoon effects, glowing and lifting UI, a lamp switch, charts, counters, node graphs). [Browse them live](https://pixerate.github.io/flair/).
+- 🎨 **Effect catalog (`@pixerate/flair/catalog`)**: 310 effects, each with controls and presets. There are 221 WebGL2 shaders (gradients, organic textures and growth, patterns, light, lighting that relights pictures, space, retro and pixel art, image treatments, transparent overlays, text fills, image morphs, pointer interactions, pyrotechnics, time warps, melting, electricity, splatters, bubbles, stickers, pointer trails, particles, debris, impacts, comic looks, atmosphere, glows, shadows, distortions, transitions) and 89 animated SVG effects (loaders, status icons, animated titles, shape morphs, UI micro-interactions, pixel sprites, stickers, cartoon effects, glowing and lifting UI, a lamp switch, charts, counters, node graphs). [Browse them live](https://pixerate.github.io/flair/).
 - ⚡ **Shader engine**:
   - Shadertoy-style GLSL ES 3.00 fragment shaders, with controls declared in the source (`// @control`), including image inputs.
   - Compile errors come back with line numbers that match the source.
@@ -59,7 +59,7 @@ The `flair` CLI inspects shaders, writes standalone pages and directs scenes (se
 ```mermaid
 graph TD
   subgraph Effects["Effects (no dependencies)"]
-    Catalog["catalog: 297 effects + presets"]
+    Catalog["catalog: 310 effects + presets"]
     Shader["shader engine: controls, compile, render, GIF, HTML"]
     Vector["vector motion: SvgMotion, SvgPlayer"]
     Time["time: clocks, easing, keyframes, noise"]
@@ -260,7 +260,7 @@ Each shader with an image control has a `video` field that says how it suits vid
 
 A video from another site needs `crossOrigin = "anonymous"` and that site's CORS consent. Without it, the control shows black and `onImageError` explains why. For frame-exact output, step the video with `ShaderFrames`: pause the video, then for each frame `await seekVideo(video, t); frames.render(t)`. Both `ShaderRenderer.ready()` and `ShaderFrames.ready()` wait for each live video's first frame.
 
-Overlay shaders (`category: "overlay"`) have `transparent: true`: they write coverage to `fragColor.a` and draw nothing elsewhere, so render them with `new ShaderRenderer(host, { alpha: true })` (or `new ThumbnailPool({ alpha: true })`) and lay the canvas over a picture, video or page. Interaction effects answer the pointer. Interactive shaders read `iPointer` and `iClicks`, so they work in any `ShaderRenderer` with no wiring, and play an idle demo when nobody is pointing (turn off "Demo when idle" to stop it). Vector micro-interactions carry a `trigger`: pass it to the player, `new SvgPlayer(host, renderVectorEffect(effect), { trigger: effect.trigger })`. A hover or press trigger plays to the end while hovered or held and back again after; a click trigger plays the next step on each click, so toggles turn on and off. Hosts can drive them too, with `player.setActive(on)` and `player.advance()` (from a keyboard handler, say).
+Overlay shaders (`category: "overlay"`) have `transparent: true`: they write coverage to `fragColor.a` and draw nothing elsewhere, so render them with `new ShaderRenderer(host, { alpha: true })` (or `new ThumbnailPool({ alpha: true })`) and lay the canvas over a picture, video or page. Some overlays are added light: give `glare-sweep`'s canvas `mix-blend-mode: plus-lighter` and it adds exactly (over `image-duotone`, that is the duotone with the gliding glare it used to have built in). Interaction effects answer the pointer. Interactive shaders read `iPointer` and `iClicks`, so they work in any `ShaderRenderer` with no wiring, and play an idle demo when nobody is pointing (turn off "Demo when idle" to stop it). Vector micro-interactions carry a `trigger`: pass it to the player, `new SvgPlayer(host, renderVectorEffect(effect), { trigger: effect.trigger })`. A hover or press trigger plays to the end while hovered or held and back again after; a click trigger plays the next step on each click, so toggles turn on and off. Hosts can drive them too, with `player.setActive(on)` and `player.advance()` (from a keyboard handler, say).
 
 To morph between any two SVG shapes, `morphPaths(from, to)` (from `@pixerate/flair/vector`) returns two paths with one structure, so `attrs: { d: [a, b] }` blends them point by point: curves and arcs are read, pieces are paired by position and size, and a piece with no partner grows from or shrinks to a point (draw them with `fill-rule="evenodd"`). `morphSequence` does the same for three or more shapes. `feature-morph` morphs two photos from five matching points, and `silhouette-morph` morphs any two silhouettes or logos (or words, through `textImage`).
 
@@ -462,7 +462,7 @@ The exporters carry the camera too:
 | lighting | relight, point light, studio lighting, time of day, gobo projection, neon spill, candlelight, pool caustics, party lights, lamp switch |
 | retro | synthwave, digital rain, dithered gradient, TV static, 8-bit, Game Boy screen, pixel fire, pixel landscape, OutRun road, palette cycle, raster bars, tape loading, pixel water, pixel text, coin spin, space invader, heart health bar, chomp loader |
 | image | ripple, glitch, duotone, halftone, pixel reveal, Ken Burns, ASCII art, shatter, melt, risograph, thermal, edge glow, tilt-shift, slit-scan, mosaic flip, chromatic lens, oil paint, CRT screen, film look |
-| overlay | rain on glass, snowfall, lens flare, vignette & grain, scanline sweep, spotlight, embers, shine sweep, frost creep, viewfinder |
+| overlay | rain on glass, snowfall, lens flare, vignette & grain, scanline sweep, spotlight, embers, shine sweep, glare sweep, frost creep, viewfinder |
 | text | shader text, drip text, typewriter, scramble text, kinetic stagger, neon sign, stroke draw text, split reveal, highlighter, word cycle, liquid fill, glitch text, extruded text |
 | morph | feature morph, silhouette morph, shape morph, icon toggle, morph sequence, gooey morph, particle morph, digit morph |
 | interaction | click ripple, click burst, cursor glow, hover liquid, X-ray reveal, magnifier, holo card, press charge, hover swap, like button, toggle switch, checkbox, menu toggle, bookmark, copy button, send button, download button, link hover, button hover fill, tooltip pop, press button, toast notification, slider scrub |

package/dist/catalog/index.js

@@ -30,7 +30,7 @@ import {
   vectorControlIssues,
   vectorControls,
   vectorEffectControls
-} from "../chunk-DBNSI4MF.js";
+} from "../chunk-4LKAPRFM.js";
 import "../chunk-EHDJ3CPJ.js";
 import "../chunk-VYOMXE6I.js";
 import "../chunk-ORAFCHX3.js";

package/dist/{chunk-DBNSI4MF.js → chunk-4LKAPRFM.js}

@@ -518,7 +518,7 @@ var imageDuotone = {
   kind: "shader",
   id: "image-duotone",
   name: "Duotone",
-  description: "An image mapped onto two colours, from its shadows to its highlights. For a passing glare, lay `shine-sweep` over it.",
+  description: "An image mapped onto two colours, from its shadows to its highlights. For the gliding glare it used to have, lay `glare-sweep` over it.",
   category: "image",
   video: "filter",
   tags: ["image", "brand", "editorial", "colour"],
@@ -13542,6 +13542,36 @@ void mainImage(out vec4 fragColor, in vec2 fragCoord) {
     { name: "Icy blue", values: { uColor: [0.62, 0.83, 1], uScale: 2.5 } }
   ]
 };
+var glareSweep = {
+  kind: "shader",
+  id: "glare-sweep",
+  name: "Glare sweep",
+  description: "A soft diagonal glare gliding across without a pause, added light to lay over a picture (with plus-lighter blending it adds exactly).",
+  category: "overlay",
+  tags: ["overlay", "glare", "light", "sweep", "gloss", "editorial"],
+  transparent: true,
+  // One sweep every 1 / 0.15 s at the default speed.
+  loop: 20 / 3,
+  source: glsl(
+    `// Glare sweep: a soft diagonal band of added light gliding across, again and again.
+uniform float uStrength;  // @control min=0 max=1 default=0.3 label="Strength"
+uniform float uSpeed;     // @control min=0.02 max=1 default=0.15 label="Sweeps per second"
+uniform float uTilt;      // @control min=-1 max=1 default=0.4 label="Tilt"
+uniform float uSharpness; // @control min=1 max=20 default=6 label="Sharpness"
+uniform vec3 uColor;      // @control color default=#FFFFFF label="Colour"`,
+    `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 uv = fragCoord / iResolution.xy;
+  // A band along x + tilt\xB7y, travelling from off one side to off the other each sweep.
+  float sweep = exp(-pow((uv.x + uv.y * uTilt - fract(iTime * uSpeed) * 2.0 + 0.4) * uSharpness, 2.0));
+  // Straight colour with the glare as coverage: added over a picture (plus-lighter), that is colour \xD7 strength \xD7 sweep.
+  fragColor = vec4(uColor, clamp(sweep * uStrength, 0.0, 1.0));
+}`
+  ),
+  presets: [
+    { name: "Gold", values: { uColor: [1, 0.85, 0.55], uStrength: 0.45 } },
+    { name: "Quick flash", values: { uSpeed: 0.6, uSharpness: 12, uStrength: 0.6 } }
+  ]
+};
 var overlayEffects = [
   rainOnGlass,
   snowfall,
@@ -13551,6 +13581,7 @@ var overlayEffects = [
   spotlight,
   embers,
   shineSweep,
+  glareSweep,
   frostCreep
 ];
 
@@ -22038,4 +22069,4 @@ export {
   effectControls,
   effectDefaults
 };
-//# sourceMappingURL=chunk-DBNSI4MF.js.map
+//# sourceMappingURL=chunk-4LKAPRFM.js.map