@pixerate/flair 0.30.0 → 0.31.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @pixerate/flair
 
+## 0.31.0
+
+### Minor Changes
+
+- 1bd6d27: A new `ui` catalog category for landing-page flourishes and backgrounds, plus more loaders and gradients (22 effects):
+
+  - **UI shaders**: Border beam (`border-beam`, a light beam running round a card's border), Gradient border (`gradient-border`, a turning conic ring with glow), Meteors (`meteors`), Background beams (`background-beams`), Grid spotlight (`grid-spotlight`, follows the pointer), Dot grid (`dot-grid`, dots swell near the pointer), Glass card (`glass-card`, frosted glass over a picture or video), Liquid glass (`liquid-glass`, a refracting glass pill that follows the pointer) and Grainy glow background (`noise-grain-bg`). Each has dark and light presets.
+  - **UI vectors**: Marquee (`marquee`, a seamless logo or word scroller with faded edges), Number ticker (`number-ticker`, an odometer roll to any formatted value such as `$12,480`) and Animated badge (`animated-badge`, a shimmering "New" pill with a sparkle).
+  - **Loaders**: Skeleton shimmer, Progress bar (striped, with a percentage), Indeterminate bar, Step progress, Circle dots loader and Wave bars.
+  - **Gradients**: Grainy gradient (with a Stripe-like preset), Stripe gradient, Holographic gradient and Radial glow.
+
 ## 0.30.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, 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, 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/).
 - ⚡ **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.
@@ -495,7 +495,7 @@ frames.render(t, { audio: track.at(t), scroll: [0.5, 0.5, 0, 0] });
 
 | Category | Effects |
 | :--- | :--- |
-| gradient | mesh gradient, aurora, gradient flow, conic sweep, silk |
+| gradient | mesh gradient, aurora, gradient flow, conic sweep, silk, grainy gradient, Stripe gradient, holographic gradient, radial glow |
 | organic | liquid marble, smoke, lava lamp, plasma, caustics, flames, reaction diffusion, cell division, coral growth, veins, ferrofluid, jellyfish, fur, blob morph |
 | pattern | dot wave, Truchet flow, hex pulse, living cells, moiré rings, kaleidoscope, stripes, Memphis pattern, chevron tunnel, neon circuit |
 | light / space | bokeh, god rays, sparkles, neon ripple, light ribbons, warp starfield, nebula, event horizon |
@@ -526,8 +526,9 @@ frames.render(t, { audio: track.at(t), scroll: [0.5, 0.5, 0, 0] });
 | scroll | scroll reveal, parallax layers, scroll progress glow, scroll velocity blur, scroll zoom, scroll draw, scroll counter, scroll steps |
 | broadcast | lower third, stacked lower third, title card, logo reveal, logo sting, end card, countdown, subscribe button, news ticker, scoreboard, chapter marker |
 | annotation | hand circle, hand arrow, callout, bracket note, scribble out, step badges, focus box, fake cursor, tooltip tour |
+| ui | border beam, gradient border, meteors, background beams, grid spotlight, dot grid, glass card, liquid glass, grainy glow background, marquee, number ticker, animated badge |
 | transition | liquid morph, displacement, luma fade, particle swap, ink bleed, pixel dissolve, comic panels, wipe, iris, block dissolve, grid wipe, glass wipe, twister, light leak, cross zoom, whip pan |
-| loader / icon / data | spinner, bouncing dots, pulse ping, equalizer, progress ring, bar chart, line chart, stat counter, route, timeline track, success check, error cross, heartbeat, signature, confetti, flow network, upload card |
+| loader / icon / data | spinner, bouncing dots, pulse ping, equalizer, skeleton shimmer, progress bar, indeterminate bar, step progress, circle dots loader, wave bars, progress ring, bar chart, line chart, stat counter, route, timeline track, success check, error cross, heartbeat, signature, confetti, flow network, upload card |
 
 #### Broadcast graphics and annotations
 

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-DuGVdJbt.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-DuGVdJbt.js';
+import { a as VideoUse, E as EffectDefinition, b as EffectCategory, S as ShaderEffect } from '../types-BDIzGWIS.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-BDIzGWIS.js';
 
 /**
  * What an effect takes and how it answers the pointer, worked out from the

package/dist/catalog/index.js

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

package/dist/{chunk-MAYKC3RF.js → chunk-45YUAQNZ.js}

@@ -12,7 +12,7 @@ import {
   getEffect,
   renderVectorEffect,
   textImage
-} from "./chunk-UIODYJ6B.js";
+} from "./chunk-7F4ITXGK.js";
 import {
   parseColor
 } from "./chunk-VYOMXE6I.js";
@@ -1126,4 +1126,4 @@ export {
   subjectValues,
   mountEffect
 };
-//# sourceMappingURL=chunk-MAYKC3RF.js.map
+//# sourceMappingURL=chunk-45YUAQNZ.js.map