vault66-crt-effect/dist/crt-effect.umd.js

A customizable CRT visual effect component for React

(function(f,S){typeof exports=="object"&&typeof module<"u"?S(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],S):(f=typeof globalThis<"u"?globalThis:f||self,S(f.CRTEffect={},f.React))})(this,function(f,S){"use strict";var I={exports:{}},T={};/**
 * @license React
 * react-jsx-runtime.production.js
 *
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */var ee;function le(){if(ee)return T;ee=1;var u=Symbol.for("react.transitional.element"),g=Symbol.for("react.fragment");function b(m,l,i){var w=null;if(i!==void 0&&(w=""+i),l.key!==void 0&&(w=""+l.key),"key"in l){i={};for(var h in l)h!=="key"&&(i[h]=l[h])}else i=l;return l=i.ref,{$$typeof:u,type:m,key:w,ref:l!==void 0?l:null,props:i}}return T.Fragment=g,T.jsx=b,T.jsxs=b,T}var R={};/**
 * @license React
 * react-jsx-runtime.development.js
 *
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */var ne;function se(){return ne||(ne=1,process.env.NODE_ENV!=="production"&&function(){function u(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===E?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case G:return"Fragment";case P:return"Profiler";case J:return"StrictMode";case H:return"Suspense";case Z:return"SuspenseList";case k:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case q:return"Portal";case X:return(e.displayName||"Context")+".Provider";case B:return(e._context.displayName||"Context")+".Consumer";case F:var n=e.render;return e=e.displayName,e||(e=n.displayName||n.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case Q:return n=e.displayName||null,n!==null?n:u(e.type)||"Memo";case Y:n=e._payload,e=e._init;try{return u(e(n))}catch{}}return null}function g(e){return""+e}function b(e){try{g(e);var n=!1}catch{n=!0}if(n){n=console;var t=n.error,r=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return t.call(n,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",r),g(e)}}function m(e){if(e===G)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===Y)return"<...>";try{var n=u(e);return n?"<"+n+">":"<...>"}catch{return"<...>"}}function l(){var e=p.A;return e===null?null:e.getOwner()}function i(){return Error("react-stack-top-frame")}function w(e){if(v.call(e,"key")){var n=Object.getOwnPropertyDescriptor(e,"key").get;if(n&&n.isReactWarning)return!1}return e.key!==void 0}function h(e,n){function t(){D||(D=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",n))}t.isReactWarning=!0,Object.defineProperty(e,"key",{get:t,configurable:!0})}function W(){var e=u(this.type);return V[e]||(V[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function U(e,n,t,r,o,s,O,C){return t=s.ref,e={$$typeof:A,type:e,key:n,props:s,_owner:o},(t!==void 0?t:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:W}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:O}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:C}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function j(e,n,t,r,o,s,O,C){var a=n.children;if(a!==void 0)if(r)if($(a)){for(r=0;r<a.length;r++)N(a[r]);Object.freeze&&Object.freeze(a)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else N(a);if(v.call(n,"key")){a=u(e);var d=Object.keys(n).filter(function(K){return K!=="key"});r=0<d.length?"{key: someKey, "+d.join(": ..., ")+": ...}":"{key: someKey}",L[a+r]||(d=0<d.length?"{"+d.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
  let props = %s;
  <%s {...props} />
React keys must be passed directly to JSX without using spread:
  let props = %s;
  <%s key={someKey} {...props} />`,r,a,d,a),L[a+r]=!0)}if(a=null,t!==void 0&&(b(t),a=""+t),w(n)&&(b(n.key),a=""+n.key),"key"in n){t={};for(var x in n)x!=="key"&&(t[x]=n[x])}else t=n;return a&&h(t,typeof e=="function"?e.displayName||e.name||"Unknown":e),U(e,a,s,o,l(),t,O,C)}function N(e){typeof e=="object"&&e!==null&&e.$$typeof===A&&e._store&&(e._store.validated=1)}var y=S,A=Symbol.for("react.transitional.element"),q=Symbol.for("react.portal"),G=Symbol.for("react.fragment"),J=Symbol.for("react.strict_mode"),P=Symbol.for("react.profiler"),B=Symbol.for("react.consumer"),X=Symbol.for("react.context"),F=Symbol.for("react.forward_ref"),H=Symbol.for("react.suspense"),Z=Symbol.for("react.suspense_list"),Q=Symbol.for("react.memo"),Y=Symbol.for("react.lazy"),k=Symbol.for("react.activity"),E=Symbol.for("react.client.reference"),p=y.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,v=Object.prototype.hasOwnProperty,$=Array.isArray,_=console.createTask?console.createTask:function(){return null};y={"react-stack-bottom-frame":function(e){return e()}};var D,V={},z=y["react-stack-bottom-frame"].bind(y,i)(),M=_(m(i)),L={};R.Fragment=G,R.jsx=function(e,n,t,r,o){var s=1e4>p.recentlyCreatedOwnerStacks++;return j(e,n,t,!1,r,o,s?Error("react-stack-top-frame"):z,s?_(m(e)):M)},R.jsxs=function(e,n,t,r,o){var s=1e4>p.recentlyCreatedOwnerStacks++;return j(e,n,t,!0,r,o,s?Error("react-stack-top-frame"):z,s?_(m(e)):M)}}()),R}var te;function ie(){return te||(te=1,process.env.NODE_ENV==="production"?I.exports=le():I.exports=se()),I.exports}var c=ie();const re={fallout:{theme:"green",enableScanlines:!0,scanlineOpacity:.25,scanlineThickness:2,scanlineGap:3,enableSweep:!0,sweepDuration:12,sweepThickness:10,sweepStyle:"classic",enableGlow:!1,enableEdgeGlow:!0,edgeGlowColor:"rgba(91, 179, 135, 0.5)",edgeGlowSize:40,enableFlicker:!0,flickerIntensity:.05,flickerSpeed:1.5,enableVignette:!0,vignetteIntensity:.3,enableGlitch:!1,enableCurvature:!0,curvatureIntensity:.6,enableNoise:!0,noiseOpacity:.2},dos:{theme:"custom",scanlineColor:"rgba(255, 100, 0, 0.3)",enableScanlines:!0,scanlineOpacity:.2,scanlineThickness:2,scanlineGap:4,enableSweep:!1,enableGlow:!1,enableEdgeGlow:!1,enableFlicker:!1,enableVignette:!0,vignetteIntensity:.25,enableGlitch:!1,enableCurvature:!0,curvatureIntensity:.55},cyberpunk:{theme:"custom",scanlineColor:"rgba(255, 0, 255, 0.3)",enableScanlines:!0,scanlineOpacity:.35,scanlineThickness:2,scanlineGap:2,enableSweep:!0,sweepDuration:5,sweepThickness:15,sweepStyle:"classic",enableGlow:!0,glowColor:"rgba(255, 0, 200, 0.5)",enableEdgeGlow:!0,edgeGlowColor:"rgba(200, 0, 255, 0.6)",edgeGlowSize:50,enableFlicker:!0,flickerIntensity:.08,flickerSpeed:.8,enableVignette:!0,vignetteIntensity:.4,enableGlitch:!0,glitchIntensity:.3,glitchSpeed:1,glitchChromatic:!0,enableCurvature:!0,curvatureIntensity:.7,enableGlare:!0,glareIntensity:.25,enableNoise:!0,noiseOpacity:.18},commodore64:{theme:"custom",scanlineColor:"rgba(160, 160, 255, 0.35)",enableScanlines:!0,scanlineOpacity:.35,scanlineThickness:3,scanlineGap:2,enableSweep:!0,sweepDuration:10,sweepThickness:12,sweepStyle:"classic",enableGlow:!1,enableEdgeGlow:!1,enableFlicker:!0,flickerIntensity:.05,flickerSpeed:1.5,enableVignette:!0,vignetteIntensity:.35,enableGlitch:!1,enableCurvature:!0,curvatureIntensity:.6,enableNoise:!0,noiseOpacity:.15},apple2:{theme:"custom",scanlineColor:"rgba(120, 220, 80, 0.3)",enableScanlines:!0,scanlineOpacity:.3,scanlineThickness:1,scanlineGap:2,enableSweep:!1,enableGlow:!1,enableEdgeGlow:!1,enableFlicker:!1,enableVignette:!0,vignetteIntensity:.2,enableGlitch:!1,enableCurvature:!0,curvatureIntensity:.55},arcade:{theme:"custom",scanlineColor:"rgba(0, 255, 100, 0.4)",enableScanlines:!0,scanlineOpacity:.4,scanlineThickness:3,scanlineGap:3,enableSweep:!0,sweepDuration:4,sweepThickness:15,sweepStyle:"classic",enableGlow:!0,glowColor:"rgba(0, 255, 100, 0.5)",enableEdgeGlow:!0,edgeGlowColor:"rgba(0, 255, 100, 0.6)",edgeGlowSize:45,enableFlicker:!0,flickerIntensity:.08,flickerSpeed:.8,enableVignette:!0,vignetteIntensity:.45,enableGlitch:!1,enableCurvature:!0,curvatureIntensity:.7,enableGlare:!0,glareIntensity:.3},vt100:{theme:"custom",scanlineColor:"rgba(220, 255, 235, 0.2)",enableScanlines:!0,scanlineOpacity:.15,scanlineThickness:2,scanlineGap:4,enableSweep:!1,enableGlow:!1,enableEdgeGlow:!1,enableFlicker:!1,enableVignette:!0,vignetteIntensity:.15,enableGlitch:!1,enableCurvature:!0,curvatureIntensity:.45},minimal:{theme:"green",enableScanlines:!0,scanlineOpacity:.1,scanlineThickness:1,scanlineGap:4,enableSweep:!1,enableGlow:!1,enableEdgeGlow:!1,enableFlicker:!1,enableVignette:!0,vignetteIntensity:.2,enableGlitch:!1}};//! CRT EFFECT COMPONENT PROPS
//! MAIN CRT EFFECT COMPONENT
const oe=u=>{const{preset:g,children:b,...m}=u,l=g?re[g]:{},w={...{enabled:!0,sweepDuration:10,sweepThickness:10,sweepStyle:"classic",scanlineOpacity:.2,scanlineColor:"rgba(91, 179, 135, 0.2)",scanlineThickness:2,scanlineGap:3,enableScanlines:!0,enableSweep:!0,theme:"green",enableGlow:!1,glowColor:"rgba(0, 255, 128, 0.3)",enableEdgeGlow:!1,edgeGlowColor:"rgba(0, 255, 128, 0.2)",edgeGlowSize:30,enableFlicker:!1,scanlineOrientation:"horizontal",glitchIntensity:1,glitchSpeed:.6,flickerIntensity:.08,flickerSpeed:.8,enableGlitch:!1,enableVignette:!1,vignetteIntensity:.4,enableCurvature:!1,curvatureIntensity:.5,enableGlare:!1,glareIntensity:.18,enableNoise:!1,noiseOpacity:.15,glitchChromatic:!1},...l,...m},{enabled:h,sweepDuration:W,sweepThickness:U,sweepStyle:j,scanlineOpacity:N,scanlineColor:y,scanlineThickness:A,scanlineGap:q,enableScanlines:G,enableSweep:J,theme:P,enableGlow:B,glowColor:X,enableEdgeGlow:F,edgeGlowColor:H,edgeGlowSize:Z,enableFlicker:Q,scanlineOrientation:Y,glitchIntensity:k,glitchSpeed:E,flickerIntensity:p,flickerSpeed:v,enableGlitch:$,enableVignette:_,vignetteIntensity:D,enableCurvature:V,curvatureIntensity:z,enableGlare:M,glareIntensity:L,enableNoise:e,noiseOpacity:n,glitchChromatic:t}=w;if(!h)return c.jsx(c.Fragment,{children:b});//! COLOR PROCESSING UTILITIES
const r=K=>{const ae=K.match(/rgba?\(\s*([\d\s.,]+)\)/);return ae?ae[1].split(",").map(ce=>ce.trim()).slice(0,3).join(", "):"91, 179, 135"},o={green:"91, 179, 135",amber:"255, 200, 100",blue:"100, 200, 255"},s=P!=="custom"?o[P]??o.green:r(y);//! CSS CLASS NAME COMPOSITION
const O=["crt-effect-wrapper",G&&"scanlines-on",J&&(j==="classic"?"sweep-on":"sweep-soft"),F&&"edge-glow-on",Q&&"flicker-on"].filter(Boolean).join(" ");//! ANIMATION SPEED AND INTENSITY PROCESSING
const C=typeof p=="number"?p:p==="low"?.05:p==="high"?.12:.08,a=typeof v=="number"?`${v}s`:v==="low"?"1.5s":v==="high"?"0.4s":"0.8s",d=typeof k=="number"?k:k==="low"?.3:k==="high"?.9:.6,x=typeof E=="number"?`${E}s`:E==="low"?"1s":E==="high"?"0.3s":"0.6s";//! MAIN COMPONENT RENDER
return c.jsxs("div",{className:O,style:{position:"relative",overflow:"hidden","--sweep-duration":`${W}s`,"--sweep-thickness":`${U}px`,"--scanline-opacity":N,"--scanline-color-rgb":s,"--scanline-thickness":`${A}px`,"--scanline-gap":`${q}px`,"--glow-color":X,"--edge-glow-color":H,"--edge-glow-size":`${Z}px`,"--scanline-gradient-direction":Y==="horizontal"?"to bottom":"to right","--glitch-speed":x,"--glitch-intensity":d,"--flicker-speed":a,"--flicker-intensity":C,"--vignette-intensity":D,"--curvature-intensity":z,"--glare-intensity":L,"--noise-opacity":n,filter:B?"drop-shadow(0 0 6px var(--glow-color)) drop-shadow(0 0 12px var(--glow-color)) drop-shadow(0 0 20px var(--glow-color))":void 0},children:[c.jsx("div",{className:["crt-inner",$?"glitch-on":"",$&&t?"chromatic-on":""].filter(Boolean).join(" "),children:b}),V&&c.jsx("div",{className:"crt-curvature"}),e&&c.jsx("div",{className:"crt-noise"}),M&&c.jsx("div",{className:"crt-glare"}),F&&c.jsx("div",{className:"crt-edge-glow"}),_&&c.jsx("div",{className:"crt-vignette"})]})};f.default=oe,f.presets=re,Object.defineProperties(f,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});