vault66-crt-effect
Version:
A customizable CRT visual effect component for React
366 lines (365 loc) • 11.3 kB
JavaScript
import re from "react";
var y = { exports: {} }, g = {};
/**
* @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 Z;
function te() {
if (Z) return g;
Z = 1;
var l = Symbol.for("react.transitional.element"), p = Symbol.for("react.fragment");
function u(f, a, s) {
var d = null;
if (s !== void 0 && (d = "" + s), a.key !== void 0 && (d = "" + a.key), "key" in a) {
s = {};
for (var m in a)
m !== "key" && (s[m] = a[m]);
} else s = a;
return a = s.ref, {
$$typeof: l,
type: f,
key: d,
ref: a !== void 0 ? a : null,
props: s
};
}
return g.Fragment = p, g.jsx = u, g.jsxs = u, g;
}
var T = {};
/**
* @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 Q;
function ne() {
return Q || (Q = 1, process.env.NODE_ENV !== "production" && function() {
function l(e) {
if (e == null) return null;
if (typeof e == "function")
return e.$$typeof === U ? null : e.displayName || e.name || null;
if (typeof e == "string") return e;
switch (e) {
case v:
return "Fragment";
case I:
return "Profiler";
case F:
return "StrictMode";
case x:
return "Suspense";
case W:
return "SuspenseList";
case z:
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 $:
return "Portal";
case D:
return (e.displayName || "Context") + ".Provider";
case M:
return (e._context.displayName || "Context") + ".Consumer";
case L:
var r = e.render;
return e = e.displayName, e || (e = r.displayName || r.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
case h:
return r = e.displayName || null, r !== null ? r : l(e.type) || "Memo";
case S:
r = e._payload, e = e._init;
try {
return l(e(r));
} catch {
}
}
return null;
}
function p(e) {
return "" + e;
}
function u(e) {
try {
p(e);
var r = !1;
} catch {
r = !0;
}
if (r) {
r = console;
var t = r.error, n = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
return t.call(
r,
"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
n
), p(e);
}
}
function f(e) {
if (e === v) return "<>";
if (typeof e == "object" && e !== null && e.$$typeof === S)
return "<...>";
try {
var r = l(e);
return r ? "<" + r + ">" : "<...>";
} catch {
return "<...>";
}
}
function a() {
var e = _.A;
return e === null ? null : e.getOwner();
}
function s() {
return Error("react-stack-top-frame");
}
function d(e) {
if (O.call(e, "key")) {
var r = Object.getOwnPropertyDescriptor(e, "key").get;
if (r && r.isReactWarning) return !1;
}
return e.key !== void 0;
}
function m(e, r) {
function t() {
P || (P = !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)",
r
));
}
t.isReactWarning = !0, Object.defineProperty(e, "key", {
get: t,
configurable: !0
});
}
function C() {
var e = l(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 Y(e, r, t, n, i, c, G, q) {
return t = c.ref, e = {
$$typeof: w,
type: e,
key: r,
props: c,
_owner: i
}, (t !== void 0 ? t : null) !== null ? Object.defineProperty(e, "ref", {
enumerable: !1,
get: C
}) : 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: G
}), Object.defineProperty(e, "_debugTask", {
configurable: !1,
enumerable: !1,
writable: !0,
value: q
}), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
}
function R(e, r, t, n, i, c, G, q) {
var o = r.children;
if (o !== void 0)
if (n)
if (j(o)) {
for (n = 0; n < o.length; n++)
k(o[n]);
Object.freeze && Object.freeze(o);
} 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 k(o);
if (O.call(r, "key")) {
o = l(e);
var b = Object.keys(r).filter(function(ee) {
return ee !== "key";
});
n = 0 < b.length ? "{key: someKey, " + b.join(": ..., ") + ": ...}" : "{key: someKey}", H[o + n] || (b = 0 < b.length ? "{" + b.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} />`,
n,
o,
b,
o
), H[o + n] = !0);
}
if (o = null, t !== void 0 && (u(t), o = "" + t), d(r) && (u(r.key), o = "" + r.key), "key" in r) {
t = {};
for (var J in r)
J !== "key" && (t[J] = r[J]);
} else t = r;
return o && m(
t,
typeof e == "function" ? e.displayName || e.name || "Unknown" : e
), Y(
e,
o,
c,
i,
a(),
t,
G,
q
);
}
function k(e) {
typeof e == "object" && e !== null && e.$$typeof === w && e._store && (e._store.validated = 1);
}
var E = re, w = Symbol.for("react.transitional.element"), $ = Symbol.for("react.portal"), v = Symbol.for("react.fragment"), F = Symbol.for("react.strict_mode"), I = Symbol.for("react.profiler"), M = Symbol.for("react.consumer"), D = Symbol.for("react.context"), L = Symbol.for("react.forward_ref"), x = Symbol.for("react.suspense"), W = Symbol.for("react.suspense_list"), h = Symbol.for("react.memo"), S = Symbol.for("react.lazy"), z = Symbol.for("react.activity"), U = Symbol.for("react.client.reference"), _ = E.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, O = Object.prototype.hasOwnProperty, j = Array.isArray, A = console.createTask ? console.createTask : function() {
return null;
};
E = {
"react-stack-bottom-frame": function(e) {
return e();
}
};
var P, V = {}, B = E["react-stack-bottom-frame"].bind(
E,
s
)(), X = A(f(s)), H = {};
T.Fragment = v, T.jsx = function(e, r, t, n, i) {
var c = 1e4 > _.recentlyCreatedOwnerStacks++;
return R(
e,
r,
t,
!1,
n,
i,
c ? Error("react-stack-top-frame") : B,
c ? A(f(e)) : X
);
}, T.jsxs = function(e, r, t, n, i) {
var c = 1e4 > _.recentlyCreatedOwnerStacks++;
return R(
e,
r,
t,
!0,
n,
i,
c ? Error("react-stack-top-frame") : B,
c ? A(f(e)) : X
);
};
}()), T;
}
var K;
function oe() {
return K || (K = 1, process.env.NODE_ENV === "production" ? y.exports = te() : y.exports = ne()), y.exports;
}
var N = oe();
const se = ({
enabled: l = !0,
sweepDuration: p = 10,
sweepThickness: u = 10,
sweepStyle: f = "classic",
scanlineOpacity: a = 0.2,
scanlineColor: s = "rgba(91, 179, 135, 0.2)",
// fallback if custom
scanlineThickness: d = 2,
scanlineGap: m = 3,
enableScanlines: C = !0,
enableSweep: Y = !0,
theme: R = "green",
enableGlow: k = !1,
glowColor: E = "rgba(0, 255, 128, 0.3)",
enableEdgeGlow: w = !1,
edgeGlowColor: $ = "rgba(0, 255, 128, 0.2)",
edgeGlowSize: v = 30,
enableFlicker: F = !1,
scanlineOrientation: I = "horizontal",
glitchIntensity: M = "medium",
flickerIntensity: D = "medium",
glitchMode: L = !1,
children: x
}) => {
if (!l)
return /* @__PURE__ */ N.jsx(N.Fragment, { children: x });
const W = (O) => {
const j = O.match(/rgba?\(\s*([\d\s.,]+)\)/);
return j ? j[1].split(",").map((P) => P.trim()).slice(0, 3).join(", ") : "91, 179, 135";
}, h = {
green: "91, 179, 135",
amber: "255, 200, 100",
blue: "100, 200, 255"
}, S = R !== "custom" ? h[R] ?? h.green : W(s), z = [
"crt-effect-wrapper",
C && "scanlines-on",
Y && (f === "classic" ? "sweep-on" : "sweep-soft"),
w && "edge-glow-on",
F && "flicker-on"
].filter(Boolean).join(" "), U = {
low: "1s",
medium: "0.6s",
high: "0.3s"
}, _ = {
low: "1.5s",
medium: "0.8s",
high: "0.4s"
};
return /* @__PURE__ */ N.jsx(
"div",
{
className: z,
style: {
position: "relative",
"--sweep-duration": `${p}s`,
"--sweep-thickness": `${u}px`,
"--scanline-opacity": a,
"--scanline-color-rgb": S,
"--scanline-thickness": `${d}px`,
"--scanline-gap": `${m}px`,
"--glow-color": E,
"--edge-glow-color": $,
"--edge-glow-size": `${v}px`,
"--scanline-gradient-direction": I === "horizontal" ? "to bottom" : "to right",
"--glitch-speed": U[M ?? "medium"],
"--flicker-speed": _[D ?? "medium"]
},
children: /* @__PURE__ */ N.jsx(
"div",
{
className: ["crt-inner", L ? "glitch-on" : ""].join(" "),
style: {
boxShadow: k ? "0 0 6px var(--glow-color), 0 0 12px var(--glow-color), 0 0 20px var(--glow-color)" : void 0
},
children: x
}
)
}
);
};
export {
se as default
};