@pixerate/flair 0.33.0 → 0.34.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @pixerate/flair
 
+## 0.34.0
+
+### Minor Changes
+
+- a3be887: Catalog: `EFFECT_CATEGORY_GROUPS` sorts the 40 categories into 8 groups (Backgrounds, Light, Pictures, Particles & FX, Type & titles, Inputs, Interface, Transitions). `categoryGroup(category)` gives a category's group, and `findEffects({ group })` and the `catalog.search` command filter by group. The demo gallery browses by group, then by category. Editor documents for vector effects now get the effect's own length (its motion plus `hold`) as their timeline instead of a fixed 5 s.
+
 ## 0.33.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`)**: 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, web UI flourishes and backgrounds, transitions) and 89 animated SVG effects (loaders and progress bars, status icons, a logo marquee, a number ticker, 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`)**: 401 effects, each with controls and presets, in 40 categories browsed in 8 groups. There are 264 WebGL2 shaders (gradients, organic textures and growth, patterns, light, lighting that relights pictures, space, 3D objects and globes, weather, water, atmosphere, retro and pixel art, image treatments, transparent overlays, text fills, image morphs, pointer interactions, sound- and scroll-driven effects, pyrotechnics, time warps, melting, electricity, splatters, bubbles, stickers, pointer trails, particles, debris, impacts, comic looks, glows, shadows, distortions, web UI flourishes and backgrounds, transitions) and 137 animated SVG effects (loaders and progress bars, status and animated icons, a logo marquee, a number ticker, animated titles, broadcast graphics and lower thirds, scroll-driven drawing, counters and steps, annotations and product-demo callouts, shape morphs, UI micro-interactions, pixel sprites, stickers, cartoon effects, glowing and lifting UI, a lamp switch, charts, counters, node graphs and other data viz). [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.
@@ -61,7 +61,7 @@ The `flair` CLI inspects shaders, writes standalone pages and directs scenes (se
 ```mermaid
 graph TD
   subgraph Effects["Effects (no dependencies)"]
-    Catalog["catalog: 310 effects + presets"]
+    Catalog["catalog: 401 effects + presets"]
     Shader["shader engine: controls, compile, render, GIF, HTML"]
     Vector["vector motion: SvgMotion, SvgPlayer"]
     Time["time: clocks, easing, keyframes, noise"]
@@ -151,7 +151,7 @@ Object.assign(host.style, { display: "inline-block", height: "0.72em", aspectRat
 new SvgPlayer(host, motion, { loop: false });
 ```
 
-Find effects with `findEffects({ text: "glow", category: "light", kind: "shader" })`. Each effect has an `id`, `name`, `description`, `category`, `tags` and optional `presets`. Image effects default to built-in sample pictures, so they look right before you set `uImage` to your own URL.
+Find effects with `findEffects({ text: "glow", category: "light", kind: "shader" })`, or by a group of related categories with `findEffects({ group: "Backgrounds" })` (`EFFECT_CATEGORY_GROUPS` lists them, and `categoryGroup(category)` gives a category's group). Each effect has an `id`, `name`, `description`, `category`, `tags` and optional `presets`. Image effects default to built-in sample pictures, so they look right before you set `uImage` to your own URL.
 
 #### What an effect takes
 

package/dist/catalog/index.d.ts

@@ -1,7 +1,7 @@
 import { a as ControlDef, C as ControlValue } from '../controls-Ec6P0Vpy.js';
 import { a as SvgTrigger } from '../svg-DaKRPA9v.js';
-import { a as VideoUse, E as EffectDefinition, b as EffectCategory, S as ShaderEffect } from '../types-c8cnPzuE.js';
-export { C as CURRENT_COLOR, c as EFFECT_CATEGORIES, d as EffectPreset, e as VECTOR_CONTROL_TYPES, f as VIDEO_USES, g as VectorControl, V as VectorEffect, h as colorControl, i as isCurrentColor, n as numberControl, r as renderVectorEffect, v as vectorControlDef, j as vectorControlIssues, k as vectorControls, l as vectorEffectControls } from '../types-c8cnPzuE.js';
+import { a as VideoUse, E as EffectDefinition, b as EffectCategory, S as ShaderEffect } from '../types-B4Wjzde0.js';
+export { C as CURRENT_COLOR, c as EFFECT_CATEGORIES, d as EFFECT_CATEGORY_GROUPS, e as EffectCategoryGroup, f as EffectPreset, g as VECTOR_CONTROL_TYPES, h as VIDEO_USES, i as VectorControl, V as VectorEffect, j as categoryGroup, k as colorControl, l as isCurrentColor, n as numberControl, r as renderVectorEffect, v as vectorControlDef, m as vectorControlIssues, o as vectorControls, p as vectorEffectControls } from '../types-B4Wjzde0.js';
 
 /**
  * What an effect takes and how it answers the pointer, worked out from the
@@ -173,6 +173,8 @@ interface EffectQuery {
     /** Words to look for in the name, description, tags and id (all must match). */
     text?: string;
     category?: EffectCategory;
+    /** Effects in any category of the group with this name (`EFFECT_CATEGORY_GROUPS`, any case). */
+    group?: string;
     kind?: EffectDefinition["kind"];
     /** Effects with every one of these tags. */
     tags?: readonly string[];

package/dist/catalog/index.js

@@ -2,6 +2,7 @@ import {
   CURRENT_COLOR,
   EFFECTS,
   EFFECT_CATEGORIES,
+  EFFECT_CATEGORY_GROUPS,
   EFFECT_INPUTS,
   EFFECT_INTERACTIONS,
   FBM,
@@ -14,6 +15,7 @@ import {
   SHADER_EFFECTS,
   VECTOR_CONTROL_TYPES,
   VIDEO_USES,
+  categoryGroup,
   colorControl,
   effectControls,
   effectDefaults,
@@ -30,7 +32,7 @@ import {
   vectorControlIssues,
   vectorControls,
   vectorEffectControls
-} from "../chunk-4FFBIVPI.js";
+} from "../chunk-IHUNCBMF.js";
 import "../chunk-EHDJ3CPJ.js";
 import "../chunk-VYOMXE6I.js";
 import "../chunk-VKIDRHBG.js";
@@ -38,6 +40,7 @@ export {
   CURRENT_COLOR,
   EFFECTS,
   EFFECT_CATEGORIES,
+  EFFECT_CATEGORY_GROUPS,
   EFFECT_INPUTS,
   EFFECT_INTERACTIONS,
   FBM,
@@ -50,6 +53,7 @@ export {
   SHADER_EFFECTS,
   VECTOR_CONTROL_TYPES,
   VIDEO_USES,
+  categoryGroup,
   colorControl,
   effectControls,
   effectDefaults,

package/dist/{chunk-ARYM5VEJ.js → chunk-2O3RMSOE.js}

@@ -12,7 +12,7 @@ import {
   getEffect,
   renderVectorEffect,
   textImage
-} from "./chunk-4FFBIVPI.js";
+} from "./chunk-IHUNCBMF.js";
 import {
   parseColor
 } from "./chunk-VYOMXE6I.js";
@@ -1126,4 +1126,4 @@ export {
   subjectValues,
   mountEffect
 };
-//# sourceMappingURL=chunk-ARYM5VEJ.js.map
+//# sourceMappingURL=chunk-2O3RMSOE.js.map

package/dist/{chunk-4FFBIVPI.js → chunk-IHUNCBMF.js}

@@ -1681,6 +1681,19 @@ var EFFECT_CATEGORIES = [
   "data",
   "icon"
 ];
+var EFFECT_CATEGORY_GROUPS = [
+  { name: "Backgrounds", categories: ["gradient", "organic", "pattern", "space", "3d", "weather", "water", "atmosphere"] },
+  { name: "Light", categories: ["light", "lighting", "glow", "shadow", "electric"] },
+  { name: "Pictures", categories: ["image", "distortion", "retro", "comic", "timewarp", "melt"] },
+  { name: "Particles & FX", categories: ["overlay", "splatter", "bubble", "particles", "trail", "debris", "impact", "pyrotechnics"] },
+  { name: "Type & titles", categories: ["text", "morph", "broadcast", "annotation", "sticker"] },
+  { name: "Inputs", categories: ["interaction", "audio", "scroll"] },
+  { name: "Interface", categories: ["ui", "loader", "icon", "data"] },
+  { name: "Transitions", categories: ["transition"] }
+];
+function categoryGroup(category) {
+  return EFFECT_CATEGORY_GROUPS.find((g) => g.categories.includes(category));
+}
 var VIDEO_USES = ["filter", "transition", "interactive", "stills", "none"];
 var VECTOR_CONTROL_TYPES = ["float", "int", "bool", "color", "text"];
 var PLACEHOLDER = /\{\{\s*([A-Za-z_]\w*)\s*(?::\s*([A-Za-z0-9]*)([^}]*))?\}\}/g;
@@ -28473,6 +28486,7 @@ function findEffects(query = {}) {
   const words = (query.text ?? "").toLowerCase().split(/\s+/).filter(Boolean);
   return EFFECTS.filter((e) => {
     if (query.category && e.category !== query.category) return false;
+    if (query.group && !EFFECT_CATEGORY_GROUPS.find((g) => g.name.toLowerCase() === query.group.toLowerCase())?.categories.includes(e.category)) return false;
     if (query.kind && e.kind !== query.kind) return false;
     if (query.tags && !query.tags.every((t) => e.tags.includes(t))) return false;
     if (query.video && !(e.kind === "shader" && e.video && query.video.includes(e.video))) return false;
@@ -28513,6 +28527,8 @@ export {
   SAMPLE_IMAGES,
   textImage,
   EFFECT_CATEGORIES,
+  EFFECT_CATEGORY_GROUPS,
+  categoryGroup,
   VIDEO_USES,
   VECTOR_CONTROL_TYPES,
   vectorControls,
@@ -28532,4 +28548,4 @@ export {
   effectControls,
   effectDefaults
 };
-//# sourceMappingURL=chunk-4FFBIVPI.js.map
+//# sourceMappingURL=chunk-IHUNCBMF.js.map