@pixerate/flair 0.17.0 → 0.18.0

package/dist/{chunk-LURJMWYM.js → chunk-UI5X4D63.js}

@@ -390,6 +390,7 @@ var imageRipple = {
   name: "Ripple",
   description: "An image rippling as if seen through water, from the pointer or the centre.",
   category: "image",
+  video: "filter",
   tags: ["image", "water", "interactive", "distortion"],
   source: glsl(
     `// Ripple: an image rippling as if under water.
@@ -419,6 +420,7 @@ var imageGlitch = {
   name: "Glitch",
   description: "Digital glitch on an image: RGB split, slice displacement and blocky corruption in bursts.",
   category: "image",
+  video: "filter",
   tags: ["image", "glitch", "cyber", "transition"],
   source: glsl(
     `// Glitch: RGB split, slice displacement and blocky corruption in bursts.
@@ -456,6 +458,7 @@ var imageDuotone = {
   name: "Duotone",
   description: "An image mapped onto two colours, with a slow light sweep.",
   category: "image",
+  video: "filter",
   tags: ["image", "brand", "editorial", "colour"],
   source: glsl(
     `// Duotone: an image mapped onto two colours, with a light sweep.
@@ -487,6 +490,7 @@ var imagePixelate = {
   name: "Pixel reveal",
   description: "An image resolving from big blocks to full detail, then back, in a loop.",
   category: "image",
+  video: "filter",
   tags: ["image", "reveal", "transition", "8-bit"],
   loop: 4,
   source: glsl(
@@ -511,6 +515,7 @@ var imageHalftone = {
   name: "Halftone",
   description: "An image printed as rotated halftone dots, breathing slightly.",
   category: "image",
+  video: "filter",
   tags: ["image", "print", "comic", "pop-art"],
   source: glsl(
     `// Halftone: an image as rotated print dots.
@@ -542,6 +547,7 @@ var crt = {
   name: "CRT screen",
   description: "An image on a curved CRT: scanlines, shadow mask, bloom and flicker.",
   category: "image",
+  video: "filter",
   tags: ["image", "retro", "screen", "arcade"],
   source: glsl(
     `// CRT screen: an image on a curved tube with scanlines and a shadow mask.
@@ -580,6 +586,7 @@ var filmGrain = {
   name: "Film look",
   description: "An image graded like film: grain, gate weave, halation and vignette.",
   category: "image",
+  video: "filter",
   tags: ["image", "cinematic", "grain", "vintage"],
   source: glsl(
     `// Film look: grain, gate weave, halation and vignette.
@@ -626,6 +633,7 @@ var transitions = TRANSITIONS.map(({ type, id, name, description }) => ({
   name,
   description: `${description} Loops back and forth; or turn Animate off and set Progress.`,
   category: "transition",
+  video: "transition",
   tags: ["transition", "image", "slideshow"],
   loop: 4,
   source: glsl(
@@ -2452,6 +2460,7 @@ var image8bit = {
   name: "8-bit",
   description: "An image on a chunky pixel grid, reduced to a classic console or computer palette with ordered Bayer dithering.",
   category: "retro",
+  video: "filter",
   tags: ["pixel", "retro", "image", "8-bit", "dither", "palette", "game boy", "pico-8"],
   source: glsl(
     `// 8-bit: an image on a chunky pixel grid in a classic palette, Bayer-dithered.
@@ -2527,6 +2536,7 @@ var gameboyScreen = {
   name: "Game Boy screen",
   description: "An image on a handheld's green dot-matrix LCD: four shades, a visible pixel grid and smeary ghosting, inset in an olive bezel.",
   category: "retro",
+  video: "filter",
   tags: ["pixel", "retro", "image", "game boy", "lcd", "handheld", "screen"],
   source: glsl(
     `// Game Boy screen: an image on a 4-shade green LCD with a pixel grid, ghosting and a bezel.
@@ -2969,6 +2979,7 @@ var rasterBars = {
   name: "Raster bars",
   description: "Demoscene copper bars bouncing on sine paths behind a sine-scrolling greeting, all in chunky pixels.",
   category: "retro",
+  video: "none",
   tags: ["pixel", "retro", "demoscene", "amiga", "c64", "scroller", "text", "copper"],
   source: glsl(
     `// Raster bars: copper bars on sine paths behind a sine scroller.
@@ -3154,6 +3165,7 @@ var pixelDissolve = {
   name: "Pixel dissolve",
   description: "The picture pixelates up to big blocks, the blocks swap to the next image in a random order, then it resolves into the new picture. Loops back and forth; or turn Animate off and set Progress.",
   category: "transition",
+  video: "transition",
   tags: ["transition", "pixel", "image", "retro", "8-bit", "slideshow"],
   loop: 4,
   source: glsl(
@@ -4215,6 +4227,7 @@ var hoverLiquid = {
   name: "Liquid hover",
   description: "An image that swells and ripples like liquid around the pointer while it hovers.",
   category: "interaction",
+  video: "interactive",
   tags: ["interactive", "hover", "image", "liquid", "distortion"],
   source: glsl(
     `// Liquid hover: an image bulging and rippling around the pointer, as strongly as it is hovered.
@@ -4261,6 +4274,7 @@ var hoverReveal = {
   name: "X-ray reveal",
   description: "A second image showing through a soft lens around the pointer that grows as it hovers and pulses on click.",
   category: "interaction",
+  video: "interactive",
   tags: ["interactive", "hover", "click", "image", "reveal", "x-ray"],
   source: glsl(
     `// X-ray reveal: a second image seen through a soft lens at the pointer.
@@ -4312,6 +4326,7 @@ var magnifier = {
   name: "Magnifier",
   description: "A round magnifying glass over an image at the pointer, with a bright rim and a fringe of colour at its edge.",
   category: "interaction",
+  video: "interactive",
   tags: ["interactive", "hover", "image", "lens", "zoom"],
   source: glsl(
     `// Magnifier: a round lens over an image at the pointer, showing while hovered.
@@ -4366,6 +4381,7 @@ var holoCard = {
   name: "Holo card",
   description: "A holographic foil trading card whose rainbow sheen and glare shift as the pointer tilts it.",
   category: "interaction",
+  video: "interactive",
   tags: ["interactive", "hover", "card", "holographic", "foil", "iridescent"],
   transparent: true,
   source: glsl(
@@ -4520,6 +4536,7 @@ var hoverSwap = {
   name: "Hover swap",
   description: "One image burning away into another from the pointer as it hovers, along a glowing ragged edge.",
   category: "interaction",
+  video: "interactive",
   tags: ["interactive", "hover", "image", "dissolve", "transition"],
   source: glsl(
     `// Hover swap: image A dissolves into image B as hover goes 0 \u2192 1, spreading from the pointer.
@@ -5044,6 +5061,7 @@ var electricText = {
   name: "Electric text",
   description: "A word with electricity crawling over its outlines and arcs leaping between its letters, flickering on a dark background.",
   category: "electric",
+  video: "none",
   tags: ["electric", "text", "title", "glow", "sci-fi"],
   source: glsl(
     `// Electric text: electricity crawling along the letters' outlines, arcs jumping between them.
@@ -5306,6 +5324,7 @@ var powerSurge = {
   name: "Power surge",
   description: "A picture jolted by a power surge: a flash, an arc tearing across, scanlines and colour split, then a brownout before it settles.",
   category: "electric",
+  video: "filter",
   tags: ["electric", "image", "glitch", "surge", "flash"],
   source: glsl(
     `// Power surge: an image jolted by a surge, then settling, on a schedule.
@@ -5487,6 +5506,7 @@ var dripMelt = {
   name: "Drip melt",
   description: "An image melting from the top edge down: columns slump, thick glossy drips run down and pool in a puddle, then it all reforms.",
   category: "melt",
+  video: "filter",
   tags: ["melt", "image", "drip", "liquid", "glossy", "loop"],
   loop: 8,
   source: glsl(
@@ -5595,6 +5615,7 @@ var heatHaze = {
   name: "Heat haze",
   description: "A mirage shimmer rising off a hot image: wavering refraction strongest near the ground, with a warm tint and a faint reflection.",
   category: "melt",
+  video: "filter",
   tags: ["melt", "image", "heat", "mirage", "shimmer", "desert", "distortion"],
   source: glsl(
     `// Heat haze: rising, wavering refraction over a picture, strongest near the bottom.
@@ -5654,6 +5675,7 @@ var waxMelt = {
   name: "Wax melt",
   description: "A silhouette softening like warm wax: its edges round off, its top sags and it slumps into a glossy puddle, then sets again.",
   category: "melt",
+  video: "none",
   tags: ["melt", "wax", "text", "silhouette", "glossy", "loop"],
   loop: 8,
   source: glsl(
@@ -5754,6 +5776,7 @@ var meltingText = {
   name: "Melting text",
   description: "Letters sagging and stretching downwards as long glossy drips run from their bottoms and droplets break off and fall.",
   category: "melt",
+  video: "none",
   tags: ["melt", "text", "title", "drip", "liquid", "glossy", "loop"],
   loop: 8,
   transparent: true,
@@ -5871,6 +5894,7 @@ var liquify = {
   name: "Liquify",
   description: "An image pushed and smeared like wet paint by a moving brush (or the pointer), the smears slowly relaxing back.",
   category: "melt",
+  video: "filter",
   tags: ["melt", "image", "liquify", "smear", "paint", "interactive", "hover"],
   source: glsl(
     `// Liquify: a brush pushes the picture around; its recent path leaves smears that relax over time.
@@ -6946,6 +6970,7 @@ var timeEcho = {
   name: "Time echo",
   description: "A swaying picture trailed by fading, tinted ghost echoes of where it just was.",
   category: "timewarp",
+  video: "stills",
   tags: ["time", "image", "echo", "trail", "ghost"],
   loop: 8,
   source: glsl(
@@ -6993,6 +7018,7 @@ var chronoSplit = {
   name: "Chrono split",
   description: "Red, green and blue each lagging a little further behind in time, so movement leaves colour fringes.",
   category: "timewarp",
+  video: "stills",
   tags: ["time", "image", "rgb", "chromatic", "echo"],
   loop: 8,
   source: glsl(
@@ -7026,6 +7052,7 @@ var timeSlice = {
   name: "Time slice",
   description: "Bands of a moving picture each showing a different moment, staggered like a time-displacement.",
   category: "timewarp",
+  video: "stills",
   tags: ["time", "image", "slices", "stagger", "displacement"],
   loop: 8,
   source: glsl(
@@ -7090,6 +7117,7 @@ var rewind = {
   name: "VHS rewind",
   description: "A tape playing, then rewinding fast with tracking noise, jittering lines, colour bleed and a \u25C0\u25C0 display.",
   category: "timewarp",
+  video: "stills",
   tags: ["time", "image", "vhs", "retro", "rewind", "tape"],
   loop: 6,
   source: glsl(
@@ -7196,6 +7224,7 @@ var bulletTime = {
   name: "Bullet time",
   description: "A shockwave sweeping out from the centre or a click, freezing the picture grey and zoomed behind it while the rest moves on.",
   category: "timewarp",
+  video: "stills",
   tags: ["time", "image", "freeze", "shockwave", "click", "cinematic"],
   loop: 8,
   source: glsl(
@@ -7255,6 +7284,7 @@ var timeTunnel = {
   name: "Time tunnel",
   description: "A picture wrapped round a spiralling tunnel rushing at the viewer, with light streaks and a blazing core.",
   category: "timewarp",
+  video: "filter",
   tags: ["time", "image", "tunnel", "vortex", "sci-fi", "warp"],
   loop: 8,
   source: glsl(
@@ -7313,6 +7343,7 @@ var speedRamp = {
   name: "Speed ramp",
   description: "A panning picture lurching from a crawl to a blur and back, motion-blurred in proportion to its speed.",
   category: "timewarp",
+  video: "stills",
   tags: ["time", "image", "speed", "motion blur", "cinematic"],
   loop: 4,
   source: glsl(
@@ -7360,6 +7391,7 @@ var stutterFreeze = {
   name: "Stutter freeze",
   description: "A moving picture that catches in irregular bursts, holding or stuttering frames with a flash on each freeze.",
   category: "timewarp",
+  video: "stills",
   tags: ["time", "image", "freeze", "stutter", "glitch"],
   source: glsl(
     `// Stutter freeze: some moments end in a hold (or a skipping stutter) before cutting back to live.
@@ -7445,6 +7477,7 @@ var featureMorph = {
   name: "Feature morph",
   description: "The classic face morph: two pictures warp so five matching points (eyes, mouth, chin, hairline) meet while they cross-fade.",
   category: "morph",
+  video: "stills",
   tags: ["morph", "face", "warp", "image", "transition"],
   loop: 4,
   source: glsl(
@@ -7543,6 +7576,7 @@ var silhouetteMorph = {
   name: "Silhouette morph",
   description: "One silhouette or logo flowing into another as a gooey blob, its colour blending from the first shape's to the second's.",
   category: "morph",
+  video: "stills",
   tags: ["morph", "shape", "logo", "goo", "blob", "text"],
   loop: 4,
   source: glsl(
@@ -7623,6 +7657,7 @@ var transitionLiquidMorph = {
   name: "Liquid morph",
   description: "Both images swept along a flowing, swirling current that peaks half way, dissolving one into the other like ink in water.",
   category: "transition",
+  video: "transition",
   tags: ["transition", "morph", "liquid", "image", "flow"],
   loop: 4,
   source: glsl(
@@ -7664,6 +7699,7 @@ var transitionDisplacement = {
   name: "Displacement",
   description: "Each image's brightness pushes it out in one direction as the next slides in, warped by its own light and dark.",
   category: "transition",
+  video: "transition",
   tags: ["transition", "morph", "displacement", "image", "warp"],
   loop: 4,
   source: glsl(
@@ -7696,6 +7732,7 @@ var transitionLuma = {
   name: "Luma fade",
   description: "Pixels switch to the next image in order of brightness, shadows first or highlights first, along a soft edge.",
   category: "transition",
+  video: "transition",
   tags: ["transition", "morph", "luma", "image", "dissolve"],
   loop: 4,
   source: glsl(
@@ -7730,6 +7767,7 @@ var transitionParticleSwap = {
   name: "Particle swap",
   description: "The image breaks into square particles that tumble along curved, staggered paths and land as the next image.",
   category: "transition",
+  video: "transition",
   tags: ["transition", "morph", "particles", "image", "mosaic"],
   loop: 4,
   source: glsl(
@@ -7813,6 +7851,7 @@ var transitionInkBleed = {
   name: "Ink bleed",
   description: "The next image bleeds through the first like wet ink on paper, spreading from a few seeds with dark, pooled edges.",
   category: "transition",
+  video: "transition",
   tags: ["transition", "morph", "ink", "watercolour", "image", "organic"],
   loop: 4,
   source: glsl(
@@ -8498,6 +8537,7 @@ var shaderText = {
   name: "Shader text",
   description: "A title filled with a living texture (plasma, fire, caustics or liquid chrome), with a soft glow and outline.",
   category: "text",
+  video: "none",
   tags: ["text", "title", "plasma", "fire", "chrome", "glow"],
   source: glsl(
     `// Shader text: the letters of a text image filled with an animated pattern.
@@ -8601,6 +8641,7 @@ var imageKenBurns = {
   name: "Ken Burns",
   description: "A slow documentary-style pan and zoom across an image, easing in and out and back again.",
   category: "image",
+  video: "filter",
   tags: ["image", "camera", "documentary", "slideshow"],
   loop: 12,
   source: glsl(
@@ -8641,6 +8682,7 @@ var imageAscii = {
   name: "ASCII art",
   description: "An image drawn as text characters picked by brightness, in one ink or the picture's own colours.",
   category: "image",
+  video: "filter",
   tags: ["image", "ascii", "text", "terminal", "retro"],
   source: glsl(
     `// ASCII art: each cell of the image becomes a character, denser for brighter cells.
@@ -8700,6 +8742,7 @@ var imageShatter = {
   name: "Shatter",
   description: "An image breaking into glass-like shards that fly apart, spin and reassemble in a loop.",
   category: "image",
+  video: "filter",
   tags: ["image", "shatter", "transition", "voronoi", "explode"],
   loop: 5,
   source: glsl(
@@ -8783,6 +8826,7 @@ var imageMelt = {
   name: "Melt",
   description: "An image melting and dripping downwards in slow, noisy runs.",
   category: "image",
+  video: "filter",
   tags: ["image", "melt", "drip", "psychedelic", "distortion"],
   source: glsl(
     `// Melt: noise-driven runs drag the image downwards.
@@ -8821,6 +8865,7 @@ var imageRisograph = {
   name: "Risograph",
   description: "An image printed in two posterized, slightly misregistered inks on grainy paper.",
   category: "image",
+  video: "filter",
   tags: ["image", "print", "riso", "editorial", "poster"],
   source: glsl(
     `// Risograph: two posterized ink layers, out of register, on grainy paper.
@@ -8871,6 +8916,7 @@ var imageThermal = {
   name: "Thermal",
   description: "An image seen through a heat camera or night-vision goggles.",
   category: "image",
+  video: "filter",
   tags: ["image", "thermal", "night-vision", "surveillance", "colour"],
   source: glsl(
     `// Thermal: brightness mapped to a heat palette, or to green night-vision phosphor.
@@ -8924,6 +8970,7 @@ var imageEdgeGlow = {
   name: "Edge glow",
   description: "An image's edges traced as glowing neon lines over a dimmed picture, with a travelling pulse.",
   category: "image",
+  video: "filter",
   tags: ["image", "neon", "edges", "outline", "cyber"],
   loop: 2,
   source: glsl(
@@ -8984,6 +9031,7 @@ var imageTiltShift = {
   name: "Tilt-shift",
   description: "An image blurred outside a sharp horizontal band, with punchy colour, so it looks like a miniature.",
   category: "image",
+  video: "filter",
   tags: ["image", "blur", "miniature", "photography", "depth"],
   source: glsl(
     `// Tilt-shift: blur away from a focus band, plus saturation, for the miniature look.
@@ -9026,6 +9074,7 @@ var imageSlitScan = {
   name: "Slit-scan",
   description: "An image smeared into time-stretched streaks, like a slit-scan photograph.",
   category: "image",
+  video: "stills",
   tags: ["image", "slit-scan", "smear", "experimental", "distortion"],
   source: glsl(
     `// Slit-scan: rows (or columns) squeeze towards a moving slit and smear into streaks.
@@ -9070,6 +9119,7 @@ var imageMosaic = {
   name: "Mosaic flip",
   description: "Hexagonal or triangular tiles flipping over from the left to reveal an image, then back.",
   category: "image",
+  video: "filter",
   tags: ["image", "reveal", "transition", "tiles", "hexagon"],
   loop: 6,
   source: glsl(
@@ -9155,6 +9205,7 @@ var imageChromaticLens = {
   name: "Chromatic lens",
   description: "An image through a cheap wide lens: barrel distortion and colour fringes growing towards the edges.",
   category: "image",
+  video: "filter",
   tags: ["image", "lens", "aberration", "distortion", "vintage"],
   source: glsl(
     `// Chromatic lens: barrel distortion with red, green and blue bent by different amounts.
@@ -9195,6 +9246,7 @@ var imageOilPaint = {
   name: "Oil paint",
   description: "An image repainted in flat, edge-keeping brush dabs, like an oil painting.",
   category: "image",
+  video: "filter",
   tags: ["image", "painterly", "artistic", "kuwahara", "filter"],
   source: glsl(
     `// Oil paint: a four-sector Kuwahara filter, each pixel takes the calmest neighbourhood's colour.
@@ -9287,6 +9339,7 @@ var EFFECT_CATEGORIES = [
   "data",
   "icon"
 ];
+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;
 function motionStrings(motion) {
@@ -10557,6 +10610,7 @@ function findEffects(query = {}) {
     if (query.category && e.category !== query.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;
     const haystack = [e.id, e.name, e.description, e.category, ...e.tags].join(" ").toLowerCase();
     return words.every((w) => haystack.includes(w));
   });
@@ -10583,6 +10637,7 @@ export {
   SAMPLE_IMAGES,
   textImage,
   EFFECT_CATEGORIES,
+  VIDEO_USES,
   VECTOR_CONTROL_TYPES,
   vectorControls,
   vectorEffectControls,
@@ -10600,4 +10655,4 @@ export {
   effectControls,
   effectDefaults
 };
-//# sourceMappingURL=chunk-LURJMWYM.js.map
+//# sourceMappingURL=chunk-UI5X4D63.js.map