UNPKG

vault66-crt-effect

Version:

A customizable CRT (retro monitor) visual effect for React, Vue, and Web Components

2 lines (1 loc) 7 kB
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m={fallout:{theme:"green",tintText:!0,enableScanlines:!0,scanlineOpacity:.25,scanlineThickness:2,scanlineGap:3,enableSweep:!0,sweepDuration:12,sweepThickness:6,sweepStyle:"classic",sweepColor:"rgba(91, 179, 135, 0.5)",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)",tintText:!0,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)",tintText:!0,enableScanlines:!0,scanlineOpacity:.35,scanlineThickness:2,scanlineGap:2,enableSweep:!0,sweepDuration:5,sweepThickness:8,sweepStyle:"classic",sweepColor:"rgba(255, 0, 200, 0.5)",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)",tintText:!0,enableScanlines:!0,scanlineOpacity:.35,scanlineThickness:3,scanlineGap:2,enableSweep:!0,sweepDuration:10,sweepThickness:6,sweepStyle:"classic",sweepColor:"rgba(160, 160, 255, 0.5)",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)",tintText:!0,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)",tintText:!0,enableScanlines:!0,scanlineOpacity:.4,scanlineThickness:3,scanlineGap:3,enableSweep:!0,sweepDuration:4,sweepThickness:8,sweepStyle:"classic",sweepColor:"rgba(0, 255, 100, 0.5)",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)",tintText:!0,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}},te={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,tintText:!1,textColor:void 0,sweepColor:void 0,fill:!1};function h(e){const n={};for(const i in e){const a=e[i];a!==void 0&&(n[i]=a)}return n}function le(e){const n=e.trim(),i=n.match(/^#([\da-f]{3,4}|[\da-f]{6}|[\da-f]{8})$/i);if(i){const t=i[1];return(t.length<=4?t.slice(0,3).split("").map(s=>s+s):[t.slice(0,2),t.slice(2,4),t.slice(4,6)]).map(s=>Number.parseInt(s,16)).join(", ")}const a=n.match(/^rgba?\((.*)\)$/i);if(a){const t=a[1].split("/")[0].trim().split(/[\s,]+/).filter(Boolean).slice(0,3);if(t.length===3&&t.every(r=>/^\d*\.?\d+%?$/.test(r)))return t.join(", ")}return"91, 179, 135"}const d={green:"91, 179, 135",amber:"255, 200, 100",blue:"100, 200, 255"};function y(e,n){return typeof e=="number"?e:n[e]}function G(e,n){return typeof e=="number"?`${e}s`:n[e]}function ie(e={}){const{preset:n,...i}=e,a=n?m[n]:{},t={...te,...h(a),...h(i)},{enabled:r,sweepDuration:s,sweepThickness:k,sweepStyle:v,scanlineOpacity:S,scanlineColor:C,scanlineThickness:I,scanlineGap:x,enableScanlines:T,enableSweep:o,theme:u,enableGlow:O,glowColor:V,enableEdgeGlow:b,edgeGlowColor:E,edgeGlowSize:F,enableFlicker:N,scanlineOrientation:$,glitchIntensity:z,glitchSpeed:D,flickerIntensity:B,flickerSpeed:j,enableGlitch:p,enableVignette:M,vignetteIntensity:R,enableCurvature:H,curvatureIntensity:P,enableGlare:q,glareIntensity:A,enableNoise:J,noiseOpacity:K,glitchChromatic:L,tintText:g,textColor:Q,sweepColor:c,fill:w}=t,f=u!=="custom"?d[u]??d.green:le(C),U=Q??`rgb(${f})`,W=y(B,{low:.05,medium:.08,high:.12}),X=G(j,{low:"1.5s",medium:"0.8s",high:"0.4s"}),Y=y(z,{low:.3,medium:.6,high:.9}),Z=G(D,{low:"1s",medium:"0.6s",high:"0.3s"}),_=["crt-effect-wrapper",T&&"scanlines-on",o&&(v==="classic"?"sweep-on":"sweep-soft"),o&&c&&"sweep-colored",b&&"edge-glow-on",N&&"flicker-on"].filter(Boolean).join(" "),l={position:"relative",overflow:"hidden","--sweep-duration":`${s}s`,"--sweep-thickness":`${k}px`,"--scanline-opacity":S,"--scanline-color-rgb":f,"--scanline-thickness":`${I}px`,"--scanline-gap":`${x}px`,"--glow-color":V,"--edge-glow-color":E,"--edge-glow-size":`${F}px`,"--scanline-gradient-direction":$==="horizontal"?"to bottom":"to right","--glitch-speed":Z,"--glitch-intensity":Y,"--flicker-speed":X,"--flicker-intensity":W,"--vignette-intensity":R,"--curvature-intensity":P,"--glare-intensity":A,"--noise-opacity":K};g&&(l["--crt-text-color"]=U),c&&(l["--sweep-color"]=c),O&&(l.filter="drop-shadow(0 0 6px var(--glow-color)) drop-shadow(0 0 12px var(--glow-color)) drop-shadow(0 0 20px var(--glow-color))"),w&&(l.width="100%",l.height="100%",l.display="flex",l.flexDirection="column");const ee=["crt-inner",p&&"glitch-on",p&&L&&"chromatic-on",g&&"tint-text-on"].filter(Boolean).join(" "),ne=[H&&"crt-curvature",J&&"crt-noise",q&&"crt-glare",b&&"crt-edge-glow",M&&"crt-vignette"].filter(Boolean);return{enabled:r,wrapper:{className:_,style:l},inner:{className:ee,style:w?{display:"flex",flexDirection:"column"}:void 0},overlays:ne}}exports.computeCrt=ie;exports.presets=m;