css-mesh
Version:
Beautiful CSS-based animated mesh gradients for React - 34 themes, 3D lighting, drop shadows, mouse tracking, no WebGL required
2,928 lines • 80.5 kB
JavaScript
import require$$0, { useRef, useState, useEffect } from "react";
var jsxRuntime = { exports: {} };
var reactJsxRuntime_production = {};
/**
* @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 hasRequiredReactJsxRuntime_production;
function requireReactJsxRuntime_production() {
if (hasRequiredReactJsxRuntime_production) return reactJsxRuntime_production;
hasRequiredReactJsxRuntime_production = 1;
var REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"), REACT_FRAGMENT_TYPE = Symbol.for("react.fragment");
function jsxProd(type, config, maybeKey) {
var key = null;
void 0 !== maybeKey && (key = "" + maybeKey);
void 0 !== config.key && (key = "" + config.key);
if ("key" in config) {
maybeKey = {};
for (var propName in config)
"key" !== propName && (maybeKey[propName] = config[propName]);
} else maybeKey = config;
config = maybeKey.ref;
return {
$$typeof: REACT_ELEMENT_TYPE,
type,
key,
ref: void 0 !== config ? config : null,
props: maybeKey
};
}
reactJsxRuntime_production.Fragment = REACT_FRAGMENT_TYPE;
reactJsxRuntime_production.jsx = jsxProd;
reactJsxRuntime_production.jsxs = jsxProd;
return reactJsxRuntime_production;
}
var reactJsxRuntime_development = {};
/**
* @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 hasRequiredReactJsxRuntime_development;
function requireReactJsxRuntime_development() {
if (hasRequiredReactJsxRuntime_development) return reactJsxRuntime_development;
hasRequiredReactJsxRuntime_development = 1;
"production" !== process.env.NODE_ENV && function() {
function getComponentNameFromType(type) {
if (null == type) return null;
if ("function" === typeof type)
return type.$$typeof === REACT_CLIENT_REFERENCE ? null : type.displayName || type.name || null;
if ("string" === typeof type) return type;
switch (type) {
case REACT_FRAGMENT_TYPE:
return "Fragment";
case REACT_PROFILER_TYPE:
return "Profiler";
case REACT_STRICT_MODE_TYPE:
return "StrictMode";
case REACT_SUSPENSE_TYPE:
return "Suspense";
case REACT_SUSPENSE_LIST_TYPE:
return "SuspenseList";
case REACT_ACTIVITY_TYPE:
return "Activity";
}
if ("object" === typeof type)
switch ("number" === typeof type.tag && console.error(
"Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
), type.$$typeof) {
case REACT_PORTAL_TYPE:
return "Portal";
case REACT_CONTEXT_TYPE:
return (type.displayName || "Context") + ".Provider";
case REACT_CONSUMER_TYPE:
return (type._context.displayName || "Context") + ".Consumer";
case REACT_FORWARD_REF_TYPE:
var innerType = type.render;
type = type.displayName;
type || (type = innerType.displayName || innerType.name || "", type = "" !== type ? "ForwardRef(" + type + ")" : "ForwardRef");
return type;
case REACT_MEMO_TYPE:
return innerType = type.displayName || null, null !== innerType ? innerType : getComponentNameFromType(type.type) || "Memo";
case REACT_LAZY_TYPE:
innerType = type._payload;
type = type._init;
try {
return getComponentNameFromType(type(innerType));
} catch (x) {
}
}
return null;
}
function testStringCoercion(value) {
return "" + value;
}
function checkKeyStringCoercion(value) {
try {
testStringCoercion(value);
var JSCompiler_inline_result = false;
} catch (e) {
JSCompiler_inline_result = true;
}
if (JSCompiler_inline_result) {
JSCompiler_inline_result = console;
var JSCompiler_temp_const = JSCompiler_inline_result.error;
var JSCompiler_inline_result$jscomp$0 = "function" === typeof Symbol && Symbol.toStringTag && value[Symbol.toStringTag] || value.constructor.name || "Object";
JSCompiler_temp_const.call(
JSCompiler_inline_result,
"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
JSCompiler_inline_result$jscomp$0
);
return testStringCoercion(value);
}
}
function getTaskName(type) {
if (type === REACT_FRAGMENT_TYPE) return "<>";
if ("object" === typeof type && null !== type && type.$$typeof === REACT_LAZY_TYPE)
return "<...>";
try {
var name = getComponentNameFromType(type);
return name ? "<" + name + ">" : "<...>";
} catch (x) {
return "<...>";
}
}
function getOwner() {
var dispatcher = ReactSharedInternals.A;
return null === dispatcher ? null : dispatcher.getOwner();
}
function UnknownOwner() {
return Error("react-stack-top-frame");
}
function hasValidKey(config) {
if (hasOwnProperty.call(config, "key")) {
var getter = Object.getOwnPropertyDescriptor(config, "key").get;
if (getter && getter.isReactWarning) return false;
}
return void 0 !== config.key;
}
function defineKeyPropWarningGetter(props, displayName) {
function warnAboutAccessingKey() {
specialPropKeyWarningShown || (specialPropKeyWarningShown = true, 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)",
displayName
));
}
warnAboutAccessingKey.isReactWarning = true;
Object.defineProperty(props, "key", {
get: warnAboutAccessingKey,
configurable: true
});
}
function elementRefGetterWithDeprecationWarning() {
var componentName = getComponentNameFromType(this.type);
didWarnAboutElementRef[componentName] || (didWarnAboutElementRef[componentName] = true, 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."
));
componentName = this.props.ref;
return void 0 !== componentName ? componentName : null;
}
function ReactElement(type, key, self, source, owner, props, debugStack, debugTask) {
self = props.ref;
type = {
$$typeof: REACT_ELEMENT_TYPE,
type,
key,
props,
_owner: owner
};
null !== (void 0 !== self ? self : null) ? Object.defineProperty(type, "ref", {
enumerable: false,
get: elementRefGetterWithDeprecationWarning
}) : Object.defineProperty(type, "ref", { enumerable: false, value: null });
type._store = {};
Object.defineProperty(type._store, "validated", {
configurable: false,
enumerable: false,
writable: true,
value: 0
});
Object.defineProperty(type, "_debugInfo", {
configurable: false,
enumerable: false,
writable: true,
value: null
});
Object.defineProperty(type, "_debugStack", {
configurable: false,
enumerable: false,
writable: true,
value: debugStack
});
Object.defineProperty(type, "_debugTask", {
configurable: false,
enumerable: false,
writable: true,
value: debugTask
});
Object.freeze && (Object.freeze(type.props), Object.freeze(type));
return type;
}
function jsxDEVImpl(type, config, maybeKey, isStaticChildren, source, self, debugStack, debugTask) {
var children = config.children;
if (void 0 !== children)
if (isStaticChildren)
if (isArrayImpl(children)) {
for (isStaticChildren = 0; isStaticChildren < children.length; isStaticChildren++)
validateChildKeys(children[isStaticChildren]);
Object.freeze && Object.freeze(children);
} 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 validateChildKeys(children);
if (hasOwnProperty.call(config, "key")) {
children = getComponentNameFromType(type);
var keys = Object.keys(config).filter(function(k) {
return "key" !== k;
});
isStaticChildren = 0 < keys.length ? "{key: someKey, " + keys.join(": ..., ") + ": ...}" : "{key: someKey}";
didWarnAboutKeySpread[children + isStaticChildren] || (keys = 0 < keys.length ? "{" + keys.join(": ..., ") + ": ...}" : "{}", console.error(
'A props object containing a "key" prop is being spread into JSX:\n let props = %s;\n <%s {...props} />\nReact keys must be passed directly to JSX without using spread:\n let props = %s;\n <%s key={someKey} {...props} />',
isStaticChildren,
children,
keys,
children
), didWarnAboutKeySpread[children + isStaticChildren] = true);
}
children = null;
void 0 !== maybeKey && (checkKeyStringCoercion(maybeKey), children = "" + maybeKey);
hasValidKey(config) && (checkKeyStringCoercion(config.key), children = "" + config.key);
if ("key" in config) {
maybeKey = {};
for (var propName in config)
"key" !== propName && (maybeKey[propName] = config[propName]);
} else maybeKey = config;
children && defineKeyPropWarningGetter(
maybeKey,
"function" === typeof type ? type.displayName || type.name || "Unknown" : type
);
return ReactElement(
type,
children,
self,
source,
getOwner(),
maybeKey,
debugStack,
debugTask
);
}
function validateChildKeys(node) {
"object" === typeof node && null !== node && node.$$typeof === REACT_ELEMENT_TYPE && node._store && (node._store.validated = 1);
}
var React = require$$0, REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"), REACT_PORTAL_TYPE = Symbol.for("react.portal"), REACT_FRAGMENT_TYPE = Symbol.for("react.fragment"), REACT_STRICT_MODE_TYPE = Symbol.for("react.strict_mode"), REACT_PROFILER_TYPE = Symbol.for("react.profiler");
var REACT_CONSUMER_TYPE = Symbol.for("react.consumer"), REACT_CONTEXT_TYPE = Symbol.for("react.context"), REACT_FORWARD_REF_TYPE = Symbol.for("react.forward_ref"), REACT_SUSPENSE_TYPE = Symbol.for("react.suspense"), REACT_SUSPENSE_LIST_TYPE = Symbol.for("react.suspense_list"), REACT_MEMO_TYPE = Symbol.for("react.memo"), REACT_LAZY_TYPE = Symbol.for("react.lazy"), REACT_ACTIVITY_TYPE = Symbol.for("react.activity"), REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference"), ReactSharedInternals = React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, hasOwnProperty = Object.prototype.hasOwnProperty, isArrayImpl = Array.isArray, createTask = console.createTask ? console.createTask : function() {
return null;
};
React = {
"react-stack-bottom-frame": function(callStackForError) {
return callStackForError();
}
};
var specialPropKeyWarningShown;
var didWarnAboutElementRef = {};
var unknownOwnerDebugStack = React["react-stack-bottom-frame"].bind(
React,
UnknownOwner
)();
var unknownOwnerDebugTask = createTask(getTaskName(UnknownOwner));
var didWarnAboutKeySpread = {};
reactJsxRuntime_development.Fragment = REACT_FRAGMENT_TYPE;
reactJsxRuntime_development.jsx = function(type, config, maybeKey, source, self) {
var trackActualOwner = 1e4 > ReactSharedInternals.recentlyCreatedOwnerStacks++;
return jsxDEVImpl(
type,
config,
maybeKey,
false,
source,
self,
trackActualOwner ? Error("react-stack-top-frame") : unknownOwnerDebugStack,
trackActualOwner ? createTask(getTaskName(type)) : unknownOwnerDebugTask
);
};
reactJsxRuntime_development.jsxs = function(type, config, maybeKey, source, self) {
var trackActualOwner = 1e4 > ReactSharedInternals.recentlyCreatedOwnerStacks++;
return jsxDEVImpl(
type,
config,
maybeKey,
true,
source,
self,
trackActualOwner ? Error("react-stack-top-frame") : unknownOwnerDebugStack,
trackActualOwner ? createTask(getTaskName(type)) : unknownOwnerDebugTask
);
};
}();
return reactJsxRuntime_development;
}
var hasRequiredJsxRuntime;
function requireJsxRuntime() {
if (hasRequiredJsxRuntime) return jsxRuntime.exports;
hasRequiredJsxRuntime = 1;
if (process.env.NODE_ENV === "production") {
jsxRuntime.exports = requireReactJsxRuntime_production();
} else {
jsxRuntime.exports = requireReactJsxRuntime_development();
}
return jsxRuntime.exports;
}
var jsxRuntimeExports = requireJsxRuntime();
const BASE_THEMES = {
sunset: {
backgroundColor: "#1a1a2e",
shapes: [
{
id: "sunset-1",
width: 70,
height: 35,
x: -15,
y: -5,
gradient: "radial-gradient(ellipse, #ff6b6b 0%, #ee5a24 50%, #ff9ff3 100%)",
blur: 15,
opacity: 0.7,
zIndex: 1
},
{
id: "sunset-2",
width: 80,
height: 30,
x: 40,
y: 25,
gradient: "radial-gradient(ellipse, #feca57 0%, #ff9ff3 50%, #ff6b6b 100%)",
blur: 20,
opacity: 0.6,
zIndex: 2
},
{
id: "sunset-3",
width: 60,
height: 25,
x: 10,
y: 60,
gradient: "radial-gradient(ellipse, #ff9ff3 0%, #a55eea 50%, #26de81 100%)",
blur: 18,
opacity: 0.5,
zIndex: 3
}
]
},
ocean: {
backgroundColor: "#0c1821",
shapes: [
{
id: "ocean-1",
width: 75,
height: 30,
x: -10,
y: 15,
gradient: "radial-gradient(ellipse, #00d2d3 0%, #54a0ff 50%, #5f27cd 100%)",
blur: 19,
opacity: 0.8,
zIndex: 1
},
{
id: "ocean-2",
width: 65,
height: 25,
x: 50,
y: -5,
gradient: "radial-gradient(ellipse, #0abde3 0%, #006ba6 50%, #00d2d3 100%)",
blur: 16,
opacity: 0.6,
zIndex: 2
},
{
id: "ocean-3",
width: 70,
height: 28,
x: 20,
y: 65,
gradient: "radial-gradient(ellipse, #74b9ff 0%, #0984e3 50%, #00cec9 100%)",
blur: 21,
opacity: 0.7,
zIndex: 3
}
]
},
aurora: {
backgroundColor: "#1a1a2e",
shapes: [
{
id: "aurora-1",
width: 85,
height: 25,
x: 5,
y: -5,
gradient: "radial-gradient(ellipse, #a55eea 0%, #26de81 50%, #fd79a8 100%)",
blur: 23,
opacity: 0.6,
zIndex: 1
},
{
id: "aurora-2",
width: 65,
height: 30,
x: -20,
y: 45,
gradient: "radial-gradient(ellipse, #00cec9 0%, #74b9ff 50%, #a29bfe 100%)",
blur: 18,
opacity: 0.8,
zIndex: 2
},
{
id: "aurora-3",
width: 70,
height: 25,
x: 60,
y: 35,
gradient: "radial-gradient(ellipse, #fd79a8 0%, #e84393 50%, #00b894 100%)",
blur: 20,
opacity: 0.5,
zIndex: 3
},
{
id: "aurora-4",
width: 55,
height: 20,
x: 40,
y: 75,
gradient: "radial-gradient(ellipse, #6c5ce7 0%, #a29bfe 50%, #fd79a8 100%)",
blur: 15,
opacity: 0.7,
zIndex: 4
}
]
},
cosmic: {
backgroundColor: "#0f0f23",
shapes: [
{
id: "cosmic-1",
width: 90,
height: 30,
x: -20,
y: 20,
gradient: "radial-gradient(ellipse, #6c5ce7 0%, #a55eea 50%, #fd79a8 100%)",
blur: 25,
opacity: 0.7,
zIndex: 1
},
{
id: "cosmic-2",
width: 75,
height: 25,
x: 45,
y: -5,
gradient: "radial-gradient(ellipse, #e17055 0%, #d63031 50%, #74b9ff 100%)",
blur: 21,
opacity: 0.6,
zIndex: 2
},
{
id: "cosmic-3",
width: 80,
height: 28,
x: 15,
y: 60,
gradient: "radial-gradient(ellipse, #fd79a8 0%, #fdcb6e 50%, #6c5ce7 100%)",
blur: 19,
opacity: 0.8,
zIndex: 3
}
]
},
forest: {
backgroundColor: "#1e3c1e",
shapes: [
{
id: "forest-1",
width: 85,
height: 25,
x: -15,
y: 25,
gradient: "radial-gradient(ellipse, #00b894 0%, #00cec9 50%, #fdcb6e 100%)",
blur: 18,
opacity: 0.7,
zIndex: 1
},
{
id: "forest-2",
width: 70,
height: 30,
x: 50,
y: -5,
gradient: "radial-gradient(ellipse, #26de81 0%, #6c5ce7 50%, #00b894 100%)",
blur: 20,
opacity: 0.6,
zIndex: 2
},
{
id: "forest-3",
width: 65,
height: 25,
x: 20,
y: 60,
gradient: "radial-gradient(ellipse, #fdcb6e 0%, #e17055 50%, #00cec9 100%)",
blur: 16,
opacity: 0.8,
zIndex: 3
}
]
},
monochrome: {
backgroundColor: "#1a1a1a",
shapes: [
{
id: "mono-1",
width: 80,
height: 25,
x: 5,
y: 15,
gradient: "radial-gradient(ellipse, #636e72 0%, #2d3436 50%, #ddd 100%)",
blur: 15,
opacity: 0.4,
zIndex: 1
},
{
id: "mono-2",
width: 70,
height: 20,
x: 45,
y: 35,
gradient: "radial-gradient(ellipse, #b2bec3 0%, #636e72 50%, #2d3436 100%)",
blur: 19,
opacity: 0.6,
zIndex: 2
},
{
id: "mono-3",
width: 75,
height: 28,
x: 15,
y: 65,
gradient: "radial-gradient(ellipse, #ddd 0%, #74b9ff 50%, #636e72 100%)",
blur: 18,
opacity: 0.3,
zIndex: 3
}
]
},
minimal: {
backgroundColor: "#f8f9fa",
shapes: [
{
id: "minimal-1",
width: 90,
height: 25,
x: -20,
y: 25,
gradient: "radial-gradient(ellipse, rgba(116, 185, 255, 0.6) 0%, rgba(166, 206, 255, 0.4) 50%, rgba(200, 220, 255, 0.2) 100%)",
blur: 20,
opacity: 0.9,
zIndex: 1
},
{
id: "minimal-2",
width: 75,
height: 30,
x: 50,
y: -5,
gradient: "radial-gradient(ellipse, rgba(99, 110, 114, 0.4) 0%, rgba(178, 190, 195, 0.3) 50%, rgba(220, 221, 225, 0.2) 100%)",
blur: 18,
opacity: 0.8,
zIndex: 2
},
{
id: "minimal-3",
width: 65,
height: 20,
x: 20,
y: 70,
gradient: "radial-gradient(ellipse, rgba(74, 144, 226, 0.5) 0%, rgba(144, 224, 239, 0.3) 50%, rgba(237, 242, 247, 0.2) 100%)",
blur: 15,
opacity: 0.7,
zIndex: 3
}
]
},
spring: {
backgroundColor: "#f0f8f0",
shapes: [
{
id: "spring-1",
width: 85,
height: 30,
x: -15,
y: 20,
gradient: "radial-gradient(ellipse, rgba(144, 238, 144, 0.7) 0%, rgba(152, 251, 152, 0.5) 50%, rgba(173, 255, 173, 0.3) 100%)",
blur: 18,
opacity: 0.8,
zIndex: 1
},
{
id: "spring-2",
width: 70,
height: 25,
x: 50,
y: -5,
gradient: "radial-gradient(ellipse, rgba(255, 182, 193, 0.6) 0%, rgba(255, 228, 196, 0.4) 50%, rgba(240, 255, 240, 0.2) 100%)",
blur: 16,
opacity: 0.7,
zIndex: 2
},
{
id: "spring-3",
width: 75,
height: 28,
x: 20,
y: 65,
gradient: "radial-gradient(ellipse, rgba(255, 255, 224, 0.8) 0%, rgba(144, 238, 144, 0.6) 30%, rgba(173, 216, 230, 0.4) 100%)",
blur: 20,
opacity: 0.6,
zIndex: 3
}
]
},
sky: {
backgroundColor: "#f0f8ff",
shapes: [
{
id: "sky-1",
width: 95,
height: 35,
x: -25,
y: 15,
gradient: "radial-gradient(ellipse, rgba(135, 206, 235, 0.6) 0%, rgba(173, 216, 230, 0.4) 50%, rgba(230, 248, 255, 0.2) 100%)",
blur: 22,
opacity: 0.8,
zIndex: 1
},
{
id: "sky-2",
width: 80,
height: 30,
x: 45,
y: 35,
gradient: "radial-gradient(ellipse, rgba(255, 255, 255, 0.8) 0%, rgba(240, 248, 255, 0.5) 50%, rgba(135, 206, 235, 0.3) 100%)",
blur: 19,
opacity: 0.9,
zIndex: 2
},
{
id: "sky-3",
width: 70,
height: 25,
x: 15,
y: 70,
gradient: "radial-gradient(ellipse, rgba(176, 224, 230, 0.7) 0%, rgba(173, 216, 230, 0.5) 40%, rgba(240, 248, 255, 0.3) 100%)",
blur: 17,
opacity: 0.7,
zIndex: 3
}
]
},
cream: {
backgroundColor: "#fefefe",
shapes: [
{
id: "cream-1",
width: 85,
height: 30,
x: -10,
y: 25,
gradient: "radial-gradient(ellipse, rgba(255, 228, 196, 0.7) 0%, rgba(255, 239, 213, 0.5) 50%, rgba(255, 248, 220, 0.3) 100%)",
blur: 18,
opacity: 0.8,
zIndex: 1
},
{
id: "cream-2",
width: 75,
height: 25,
x: 50,
y: 10,
gradient: "radial-gradient(ellipse, rgba(245, 222, 179, 0.6) 0%, rgba(255, 239, 213, 0.4) 50%, rgba(255, 250, 240, 0.2) 100%)",
blur: 16,
opacity: 0.7,
zIndex: 2
},
{
id: "cream-3",
width: 80,
height: 28,
x: 20,
y: 60,
gradient: "radial-gradient(ellipse, rgba(255, 218, 185, 0.8) 0%, rgba(255, 228, 196, 0.6) 30%, rgba(255, 245, 238, 0.4) 100%)",
blur: 19,
opacity: 0.6,
zIndex: 3
}
]
},
dawn: {
backgroundColor: "#fef9f3",
shapes: [
{
id: "dawn-1",
width: 90,
height: 32,
x: -20,
y: 20,
gradient: "radial-gradient(ellipse, rgba(255, 182, 193, 0.6) 0%, rgba(255, 218, 185, 0.4) 50%, rgba(255, 239, 213, 0.2) 100%)",
blur: 20,
opacity: 0.8,
zIndex: 1
},
{
id: "dawn-2",
width: 75,
height: 28,
x: 50,
y: 5,
gradient: "radial-gradient(ellipse, rgba(255, 160, 122, 0.7) 0%, rgba(255, 192, 203, 0.5) 40%, rgba(255, 228, 225, 0.3) 100%)",
blur: 17,
opacity: 0.7,
zIndex: 2
},
{
id: "dawn-3",
width: 80,
height: 25,
x: 15,
y: 65,
gradient: "radial-gradient(ellipse, rgba(255, 239, 213, 0.8) 0%, rgba(255, 228, 196, 0.6) 50%, rgba(255, 245, 238, 0.4) 100%)",
blur: 18,
opacity: 0.6,
zIndex: 3
}
]
},
pearl: {
backgroundColor: "#f8f8ff",
shapes: [
{
id: "pearl-1",
width: 85,
height: 30,
x: -15,
y: 25,
gradient: "radial-gradient(ellipse, rgba(230, 230, 250, 0.8) 0%, rgba(240, 248, 255, 0.6) 50%, rgba(255, 250, 250, 0.4) 100%)",
blur: 19,
opacity: 0.9,
zIndex: 1
},
{
id: "pearl-2",
width: 70,
height: 25,
x: 45,
y: 15,
gradient: "radial-gradient(ellipse, rgba(248, 248, 255, 0.7) 0%, rgba(230, 230, 250, 0.5) 40%, rgba(255, 255, 255, 0.3) 100%)",
blur: 16,
opacity: 0.8,
zIndex: 2
},
{
id: "pearl-3",
width: 75,
height: 28,
x: 20,
y: 65,
gradient: "radial-gradient(ellipse, rgba(221, 160, 221, 0.4) 0%, rgba(230, 230, 250, 0.6) 50%, rgba(240, 248, 255, 0.3) 100%)",
blur: 18,
opacity: 0.7,
zIndex: 3
}
]
},
blush: {
backgroundColor: "#fff5f8",
shapes: [
{
id: "blush-1",
width: 85,
height: 30,
x: -10,
y: 20,
gradient: "radial-gradient(ellipse, rgba(255, 182, 193, 0.6) 0%, rgba(255, 192, 203, 0.4) 50%, rgba(255, 228, 225, 0.2) 100%)",
blur: 18,
opacity: 0.8,
zIndex: 1
},
{
id: "blush-2",
width: 75,
height: 25,
x: 50,
y: 10,
gradient: "radial-gradient(ellipse, rgba(255, 160, 200, 0.7) 0%, rgba(255, 182, 193, 0.5) 40%, rgba(255, 240, 245, 0.3) 100%)",
blur: 16,
opacity: 0.7,
zIndex: 2
},
{
id: "blush-3",
width: 80,
height: 28,
x: 25,
y: 65,
gradient: "radial-gradient(ellipse, rgba(255, 228, 225, 0.8) 0%, rgba(255, 192, 203, 0.6) 30%, rgba(255, 250, 250, 0.4) 100%)",
blur: 19,
opacity: 0.6,
zIndex: 3
}
]
}
};
const DRAMATIC_THEMES = {
volcanic: {
backgroundColor: "#1a0f0a",
shapes: [
{
id: "volcanic-1",
width: 120,
height: 45,
x: -30,
y: 10,
gradient: "radial-gradient(ellipse, #ff4757 0%, #ff3838 30%, #ff6348 70%, #ffa502 100%)",
blur: 23,
opacity: 0.8,
zIndex: 1
},
{
id: "volcanic-2",
width: 110,
height: 40,
x: 30,
y: 35,
gradient: "radial-gradient(ellipse, #ff6348 0%, #ff4757 40%, #c44569 80%, #f8b500 100%)",
blur: 21,
opacity: 0.7,
zIndex: 2
},
{
id: "volcanic-3",
width: 100,
height: 35,
x: -10,
y: 60,
gradient: "radial-gradient(ellipse, #ffa502 0%, #ff6348 50%, #ff4757 100%)",
blur: 20,
opacity: 0.9,
zIndex: 3
},
{
id: "volcanic-4",
width: 95,
height: 30,
x: 50,
y: -5,
gradient: "radial-gradient(ellipse, #c44569 0%, #ff3838 60%, #ffa502 100%)",
blur: 19,
opacity: 0.6,
zIndex: 4
}
]
},
electric: {
backgroundColor: "#0a0a23",
shapes: [
{
id: "electric-1",
width: 130,
height: 50,
x: -25,
y: 15,
gradient: "radial-gradient(ellipse, #00f5ff 0%, #0078ff 40%, #7d5fff 80%, #ff006e 100%)",
blur: 24,
opacity: 0.8,
zIndex: 1
},
{
id: "electric-2",
width: 115,
height: 45,
x: 25,
y: 40,
gradient: "radial-gradient(ellipse, #7d5fff 0%, #00f5ff 30%, #ff006e 70%, #0078ff 100%)",
blur: 23,
opacity: 0.7,
zIndex: 2
},
{
id: "electric-3",
width: 105,
height: 40,
x: -15,
y: 65,
gradient: "radial-gradient(ellipse, #ff006e 0%, #7d5fff 50%, #00f5ff 100%)",
blur: 21,
opacity: 0.9,
zIndex: 3
},
{
id: "electric-4",
width: 120,
height: 35,
x: 60,
y: -10,
gradient: "radial-gradient(ellipse, #0078ff 0%, #ff006e 40%, #00f5ff 80%, #7d5fff 100%)",
blur: 20,
opacity: 0.6,
zIndex: 4
},
{
id: "electric-5",
width: 85,
height: 25,
x: 40,
y: 80,
gradient: "radial-gradient(ellipse, #00f5ff 0%, #7d5fff 60%, #ff006e 100%)",
blur: 18,
opacity: 0.8,
zIndex: 5
}
]
},
dreamy: {
backgroundColor: "#f7f1ff",
shapes: [
{
id: "dreamy-1",
width: 140,
height: 55,
x: -35,
y: 20,
gradient: "radial-gradient(ellipse, rgba(255, 182, 193, 0.7) 0%, rgba(255, 160, 200, 0.5) 40%, rgba(221, 160, 221, 0.3) 100%)",
blur: 25,
opacity: 0.9,
zIndex: 1
},
{
id: "dreamy-2",
width: 125,
height: 50,
x: 30,
y: 45,
gradient: "radial-gradient(ellipse, rgba(221, 160, 221, 0.6) 0%, rgba(173, 216, 230, 0.4) 50%, rgba(255, 182, 193, 0.3) 100%)",
blur: 24,
opacity: 0.8,
zIndex: 2
},
{
id: "dreamy-3",
width: 110,
height: 45,
x: -20,
y: 70,
gradient: "radial-gradient(ellipse, rgba(173, 216, 230, 0.8) 0%, rgba(255, 182, 193, 0.6) 30%, rgba(221, 160, 221, 0.4) 100%)",
blur: 23,
opacity: 0.7,
zIndex: 3
},
{
id: "dreamy-4",
width: 115,
height: 40,
x: 55,
y: -5,
gradient: "radial-gradient(ellipse, rgba(255, 160, 200, 0.5) 0%, rgba(221, 160, 221, 0.4) 60%, rgba(173, 216, 230, 0.3) 100%)",
blur: 21,
opacity: 0.6,
zIndex: 4
}
]
},
neon: {
backgroundColor: "#0d0d0d",
shapes: [
{
id: "neon-1",
width: 135,
height: 55,
x: -30,
y: 25,
gradient: "radial-gradient(ellipse, #39ff14 0%, #00ff41 30%, #1dd1a1 70%, #00d4aa 100%)",
blur: 25,
opacity: 0.8,
zIndex: 1
},
{
id: "neon-2",
width: 120,
height: 50,
x: 35,
y: 50,
gradient: "radial-gradient(ellipse, #ff073a 0%, #f54291 40%, #bd5eff 80%, #7c3aed 100%)",
blur: 24,
opacity: 0.7,
zIndex: 2
},
{
id: "neon-3",
width: 105,
height: 45,
x: -15,
y: 75,
gradient: "radial-gradient(ellipse, #00bcd4 0%, #2196f3 50%, #3f51b5 100%)",
blur: 23,
opacity: 0.9,
zIndex: 3
},
{
id: "neon-4",
width: 125,
height: 40,
x: 50,
y: 5,
gradient: "radial-gradient(ellipse, #ffeb3b 0%, #ff9800 40%, #ff5722 80%, #e91e63 100%)",
blur: 21,
opacity: 0.6,
zIndex: 4
},
{
id: "neon-5",
width: 90,
height: 30,
x: 25,
y: 30,
gradient: "radial-gradient(ellipse, #9c27b0 0%, #673ab7 50%, #3f51b5 100%)",
blur: 19,
opacity: 0.8,
zIndex: 5
}
]
}
};
const ORB_THEMES = {
// DARK ORB THEMES (5)
cyberpunk: {
backgroundColor: "#0a0a0a",
visualEffects: {
saturation: 1.5,
contrast: 1.5,
brightness: 1,
hue: 0
},
lighting3d: {
enabled: true,
position: { x: 30, y: 30 },
intensity: 0.75
},
dropShadow: {
enabled: true,
size: 20,
opacity: 0.15,
direction: { x: 0, y: -3 }
},
shapes: [
{
id: "cyberpunk-1",
width: 80,
height: 80,
x: -20,
y: -20,
gradient: "radial-gradient(circle, #00ff88 0%, #00cc44 100%)",
blur: 12,
opacity: 0.85,
zIndex: 1
},
{
id: "cyberpunk-2",
width: 80,
height: 80,
x: 40,
y: -20,
gradient: "radial-gradient(circle, #ff0080 0%, #cc0060 100%)",
blur: 12,
opacity: 0.85,
zIndex: 2
},
{
id: "cyberpunk-3",
width: 80,
height: 80,
x: -20,
y: 40,
gradient: "radial-gradient(circle, #0080ff 0%, #0060cc 100%)",
blur: 12,
opacity: 0.85,
zIndex: 3
},
{
id: "cyberpunk-4",
width: 80,
height: 80,
x: 40,
y: 40,
gradient: "radial-gradient(circle, #ffff00 0%, #cccc00 100%)",
blur: 12,
opacity: 0.85,
zIndex: 4
}
]
},
voidPulse: {
backgroundColor: "#000000",
visualEffects: {
saturation: 1.5,
contrast: 1.5,
brightness: 1,
hue: 0
},
lighting3d: {
enabled: true,
position: { x: 30, y: 30 },
intensity: 0.75
},
dropShadow: {
enabled: true,
size: 20,
opacity: 0.15,
direction: { x: 0, y: -3 }
},
shapes: [
{
id: "void-1",
width: 80,
height: 80,
x: -20,
y: -20,
gradient: "radial-gradient(circle, #6a0dad 0%, #4b0082 100%)",
blur: 12,
opacity: 0.85,
zIndex: 1
},
{
id: "void-2",
width: 80,
height: 80,
x: 40,
y: -20,
gradient: "radial-gradient(circle, #8a2be2 0%, #6a0dad 100%)",
blur: 12,
opacity: 0.85,
zIndex: 2
},
{
id: "void-3",
width: 80,
height: 80,
x: -20,
y: 40,
gradient: "radial-gradient(circle, #000080 0%, #000040 100%)",
blur: 12,
opacity: 0.85,
zIndex: 3
},
{
id: "void-4",
width: 80,
height: 80,
x: 40,
y: 40,
gradient: "radial-gradient(circle, #4b0082 0%, #2d1b69 100%)",
blur: 12,
opacity: 0.85,
zIndex: 4
}
]
},
fireCore: {
backgroundColor: "#1a0f0a",
visualEffects: {
saturation: 1.5,
contrast: 1.5,
brightness: 1,
hue: 0
},
lighting3d: {
enabled: true,
position: { x: 30, y: 30 },
intensity: 0.75
},
dropShadow: {
enabled: true,
size: 20,
opacity: 0.15,
direction: { x: 0, y: -3 }
},
shapes: [
{
id: "fire-1",
width: 80,
height: 80,
x: -20,
y: -20,
gradient: "radial-gradient(circle, #ff6b35 0%, #f7931e 100%)",
blur: 12,
opacity: 0.85,
zIndex: 1
},
{
id: "fire-2",
width: 80,
height: 80,
x: 40,
y: -20,
gradient: "radial-gradient(circle, #ffa502 0%, #ff6348 100%)",
blur: 12,
opacity: 0.85,
zIndex: 2
},
{
id: "fire-3",
width: 80,
height: 80,
x: -20,
y: 40,
gradient: "radial-gradient(circle, #ffdd59 0%, #ffa502 100%)",
blur: 12,
opacity: 0.85,
zIndex: 3
},
{
id: "fire-4",
width: 80,
height: 80,
x: 40,
y: 40,
gradient: "radial-gradient(circle, #ff4757 0%, #c44569 100%)",
blur: 12,
opacity: 0.85,
zIndex: 4
}
]
},
deepSpace: {
backgroundColor: "#0c0c1e",
visualEffects: {
saturation: 1.5,
contrast: 1.5,
brightness: 1,
hue: 0
},
lighting3d: {
enabled: true,
position: { x: 30, y: 30 },
intensity: 0.75
},
dropShadow: {
enabled: true,
size: 20,
opacity: 0.15,
direction: { x: 0, y: -3 }
},
shapes: [
{
id: "space-1",
width: 80,
height: 80,
x: -20,
y: -20,
gradient: "radial-gradient(circle, #00d4ff 0%, #0078d4 100%)",
blur: 12,
opacity: 0.85,
zIndex: 1
},
{
id: "space-2",
width: 80,
height: 80,
x: 40,
y: -20,
gradient: "radial-gradient(circle, #805ad5 0%, #553c9a 100%)",
blur: 12,
opacity: 0.85,
zIndex: 2
},
{
id: "space-3",
width: 80,
height: 80,
x: -20,
y: 40,
gradient: "radial-gradient(circle, #38b2ac 0%, #319795 100%)",
blur: 12,
opacity: 0.85,
zIndex: 3
},
{
id: "space-4",
width: 80,
height: 80,
x: 40,
y: 40,
gradient: "radial-gradient(circle, #5a67d8 0%, #2d3748 100%)",
blur: 12,
opacity: 0.85,
zIndex: 4
}
]
},
shadowGlow: {
backgroundColor: "#1a1a1a",
visualEffects: {
saturation: 1.5,
contrast: 1.5,
brightness: 1,
hue: 0
},
lighting3d: {
enabled: true,
position: { x: 30, y: 30 },
intensity: 0.75
},
dropShadow: {
enabled: true,
size: 20,
opacity: 0.15,
direction: { x: 0, y: -3 }
},
shapes: [
{
id: "shadow-1",
width: 80,
height: 80,
x: -20,
y: -20,
gradient: "radial-gradient(circle, #a78bfa 0%, #8b5cf6 100%)",
blur: 12,
opacity: 0.85,
zIndex: 1
},
{
id: "shadow-2",
width: 80,
height: 80,
x: 40,
y: -20,
gradient: "radial-gradient(circle, #f472b6 0%, #ec4899 100%)",
blur: 12,
opacity: 0.85,
zIndex: 2
},
{
id: "shadow-3",
width: 80,
height: 80,
x: -20,
y: 40,
gradient: "radial-gradient(circle, #7c3aed 0%, #5b21b6 100%)",
blur: 12,
opacity: 0.85,
zIndex: 3
},
{
id: "shadow-4",
width: 80,
height: 80,
x: 40,
y: 40,
gradient: "radial-gradient(circle, #be185d 0%, #831843 100%)",
blur: 12,
opacity: 0.85,
zIndex: 4
}
]
},
// LIGHT ORB THEMES (5)
crystalBlue: {
backgroundColor: "#f0f8ff",
visualEffects: {
saturation: 1.5,
contrast: 1.5,
brightness: 1,
hue: 0
},
lighting3d: {
enabled: true,
position: { x: 30, y: 30 },
intensity: 0.75
},
dropShadow: {
enabled: true,
size: 20,
opacity: 0.15,
direction: { x: 0, y: -3 }
},
shapes: [
{
id: "crystal-1",
width: 80,
height: 80,
x: -20,
y: -20,
gradient: "radial-gradient(circle, #3b82f6 0%, #2563eb 100%)",
blur: 12,
opacity: 0.85,
zIndex: 1
},
{
id: "crystal-2",
width: 80,
height: 80,
x: 40,
y: -20,
gradient: "radial-gradient(circle, #0ea5e9 0%, #0284c7 100%)",
blur: 12,
opacity: 0.85,
zIndex: 2
},
{
id: "crystal-3",
width: 80,
height: 80,
x: -20,
y: 40,
gradient: "radial-gradient(circle, #22c55e 0%, #16a34a 100%)",
blur: 12,
opacity: 0.85,
zIndex: 3
},
{
id: "crystal-4",
width: 80,
height: 80,
x: 40,
y: 40,
gradient: "radial-gradient(circle, #1d4ed8 0%, #1e40af 100%)",
blur: 12,
opacity: 0.85,
zIndex: 4
}
]
},
sunbeam: {
backgroundColor: "#fffbf0",
visualEffects: {
saturation: 1.5,
contrast: 1.5,
brightness: 1,
hue: 0
},
lighting3d: {
enabled: true,
position: { x: 30, y: 30 },
intensity: 0.75
},
dropShadow: {
enabled: true,
size: 20,
opacity: 0.15,
direction: { x: 0, y: -3 }
},
shapes: [
{
id: "sun-1",
width: 80,
height: 80,
x: -20,
y: -20,
gradient: "radial-gradient(circle, #fbbf24 0%, #f59e0b 100%)",
blur: 12,
opacity: 0.85,
zIndex: 1
},
{
id: "sun-2",
width: 80,
height: 80,
x: 40,
y: -20,
gradient: "radial-gradient(circle, #fcd34d 0%, #fbbf24 100%)",
blur: 12,
opacity: 0.85,
zIndex: 2
},
{
id: "sun-3",
width: 80,
height: 80,
x: -20,
y: 40,
gradient: "radial-gradient(circle, #f87171 0%, #ef4444 100%)",
blur: 12,
opacity: 0.85,
zIndex: 3
},
{
id: "sun-4",
width: 80,
height: 80,
x: 40,
y: 40,
gradient: "radial-gradient(circle, #d97706 0%, #dc2626 100%)",
blur: 12,
opacity: 0.85,
zIndex: 4
}
]
},
roseDawn: {
backgroundColor: "#fdf2f8",
visualEffects: {
saturation: 1.5,
contrast: 1.5,
brightness: 1,
hue: 0
},
lighting3d: {
enabled: true,
position: { x: 30, y: 30 },
intensity: 0.75
},
dropShadow: {
enabled: true,
size: 20,
opacity: 0.15,
direction: { x: 0, y: -3 }
},
shapes: [
{
id: "rose-1",
width: 80,
height: 80,
x: -20,
y: -20,
gradient: "radial-gradient(circle, #f472b6 0%, #ec4899 100%)",
blur: 12,
opacity: 0.85,
zIndex: 1
},
{
id: "rose-2",
width: 80,
height: 80,
x: 40,
y: -20,
gradient: "radial-gradient(circle, #c4b5fd 0%, #a78bfa 100%)",
blur: 12,
opacity: 0.85,
zIndex: 2
},
{
id: "rose-3",
width: 80,
height: 80,
x: -20,
y: 40,
gradient: "radial-gradient(circle, #fbcfe8 0%, #f472b6 100%)",
blur: 12,
opacity: 0.85,
zIndex: 3
},
{
id: "rose-4",
width: 80,
height: 80,
x: 40,
y: 40,
gradient: "radial-gradient(circle, #db2777 0%, #8b5cf6 100%)",
blur: 12,
opacity: 0.85,
zIndex: 4
}
]
},
mintFresh: {
backgroundColor: "#f0fdf4",
visualEffects: {
saturation: 1.5,
contrast: 1.5,
brightness: 1,
hue: 0
},
lighting3d: {
enabled: true,
position: { x: 30, y: 30 },
intensity: 0.75
},
dropShadow: {
enabled: true,
size: 20,
opacity: 0.15,
direction: { x: 0, y: -3 }
},
shapes: [
{
id: "mint-1",
width: 80,
height: 80,
x: -20,
y: -20,
gradient: "radial-gradient(circle, #34d399 0%, #10b981 100%)",
blur: 12,
opacity: 0.85,
zIndex: 1
},
{
id: "mint-2",
width: 80,
height: 80,
x: 40,
y: -20,
gradient: "radial-gradient(circle, #22c55e 0%, #16a34a 100%)",
blur: 12,
opacity: 0.85,
zIndex: 2
},
{
id: "mint-3",
width: 80,
height: 80,
x: -20,
y: 40,
gradient: "radial-gradient(circle, #86efac 0%, #4ade80 100%)",
blur: 12,
opacity: 0.85,
zIndex: 3
},
{
id: "mint-4",
width: 80,
height: 80,
x: 40,
y: 40,
gradient: "radial-gradient(circle, #059669 0%, #15803d 100%)",
blur: 12,
opacity: 0.85,
zIndex: 4
}
]
},
lavenderMist: {
backgroundColor: "#faf5ff",
visualEffects: {
saturation: 1.5,
contrast: 1.5,
brightness: 1,
hue: 0
},
lighting3d: {
enabled: true,
position: { x: 30, y: 30 },
intensity: 0.75
},
dropShadow: {
enabled: true,
size: 20,
opacity: 0.15,
direction: { x: 0, y: -3 }
},
shapes: [
{
id: "lavender-1",
width: 80,
height: 80,
x: -20,
y: -20,
gradient: "radial-gradient(circle, #c4b5fd 0%, #a78bfa 100%)",
blur: 12,
opacity: 0.85,
zIndex: 1
},
{
id: "lavender-2",
width: 80,
height: 80,
x: 40,
y: -20,
gradient: "radial-gradient(circle, #ddd6fe 0%, #c4b5fd 100%)",
blur: 12,
opacity: 0.85,
zIndex: 2
},
{
id: "lavender-3",
width: 80,
height: 80,
x: -20,
y: 40,
gradient: "radial-gradient(circle, #a5b4fc 0%, #818cf8 100%)",
blur: 12,
opacity: 0.85,
zIndex: 3
},
{
id: "lavender-4",
width: 80,
height: 80,
x: 40,
y: 40,
gradient: "radial-gradient(circle, #8b5cf6 0%, #6366f1 100%)",
blur: 12,
opacity: 0.85,
zIndex: 4
}
]
},
// NEW PREMIUM ORB THEMES - Enhanced Sunset Variations
sunsetGlow: {
backgroundColor: "#1a0f0a",
visualEffects: {
saturation: 3,
contrast: 2,
brightness: 2,
hue: 0
},
lighting3d: {
enabled: true,
position: { x: 75, y: 15 },
intensity: 0.85
},
dropShadow: {
enabled: true,
size: 20,
opacity: 0.15,
direction: { x: 0, y: -3 }
},
shapes: [
{
id: "sunset-glow-1",
width: 85,
height: 85,
x: -22,
y: -22,
gradient: "radial-gradient(circle, #ff6b35 0%, #f7931e 30%, #ff4757 70%, #c44569 100%)",
blur: 15,
opacity: 0.9,
zIndex: 1
},
{
id: "sunset-glow-2",
width: 80,
height: 80,
x: 40,
y: -20,
gradient: "radial-gradient(circle, #ffa502 0%, #ff6348 50%, #ff4757 100%)",
blur: 12,
opacity: 0.85,
zIndex: 2
},
{
id: "sunset-glow-3",
width: 80,
height: 80,
x: -20,
y: 40,
gradient: "radial-gradient(circle, #ffdd59 0%, #ffa502 60%, #ff6b35 100%)",
blur: 12,
opacity: 0.85,
zIndex: 3
},
{
id: "sunset-glow-4",
width: 85,
height: 85,
x: 37,
y: 37,
gradient: "radial-gradient(circle, #ff4757 0%, #c44569 40%, #8b5cf6 80%, #6a0dad 100%)",
blur: 15,
opacity: 0.9,
zIndex: 4
}
]
},
dawnLight: {
backgroundColor: "#fef3f2",
visualEffects: {
saturation: 2.5,
contrast: 1.8,
brightness: 1.8,
hue: 10
},
lighting3d: {
enabled: true,
position: { x: 70, y: 20 },
intensity: 0.75
},
dropShadow: {
enabled: true,
size: 20,
opacity: 0.15,
direction: { x: 0, y: -3 }
},
shapes: [
{
id: "dawn-1",
width: 85,
height: 85,
x: -22,
y: -22,
gradient: "radial-gradient(circle, #fbbf24 0%, #f59e0b 30%, #f97316 70%, #ea580c 100%)",
blur: 15,
opacity: 0.8,
zIndex: 1
},
{
id: "dawn-2",
width: 80,
height: 80,
x: 40,
y: -20,
gradient: "radial-gradient(circle, #fed7aa 0%, #fdba74 50%, #fb923c 100%)",
blur: 12,
opacity: 0.75,
zIndex: 2
},
{
id: "dawn-3",
width: 80,
height: 80,
x: -20,
y: 40,
gradient: "radial-gradient(circle, #fef3c7 0%, #fde68a 60%, #fbbf24 100%)",
blur: 12,
opacity: 0.75,
zIndex: 3
},
{
id: "dawn-4",
width: 85,
height: 85,
x: 37,
y: 37,
gradient: "radial-gradient(circle, #f97316 0%, #ea580c 40%, #dc2626 80%, #b91c1c 100%)",
blur: 15,
opacity: 0.8,
zIndex: 4
}
]
},
twilightDark: {
backgroundColor: "#0c0513",
visualEffects: {
saturation: 3.2,
contrast: 2.2,
brightness: 1.9,
hue: -5
},
lighting3d: {
enabled: true,
position: { x: 80, y: 10 },
intensity: 0.9
},
dropShadow: {
enabled: true,
size: 20,
opacity: 0.15,
direction: { x: 0, y: -3 }
},
shapes: [
{
id: "twilight-1",
width: 85,
height: 85,
x: -22,
y: -22,
gradient: "radial-gradient(circle, #4c1d95 0%, #6b21a8 30%, #7c3aed 70%, #8b5cf6 100%)",
blur: 15,
opacity: 0.9,
zIndex: 1
},
{
id: "twilight-2",
width: 80,
height: 80,
x: 40,
y: -20,
gradient: "radial-gradient(circle, #1e1b4b 0%, #312e81 50%, #4338ca 100%)",
blur: 12,
opacity: 0.85,
zIndex: 2
},
{
id: "twilight-3",
width: 80,
height: 80,
x: -20,
y: 40,
gradient: "radial-gradient(circle, #7c2d12 0%, #9a3412 60%, #dc2626 100%)",
blur: 12,
opacity: 0.85,
zIndex: 3
},
{
id: "twilight-4",
width: 85,
height: 85,
x: 37,
y: 37,
gradient: "radial-gradient(circle, #831843 0%, #be185d 40%, #e11d48 80%, #f43f5e 100%)",
blur: 15,
opacity: 0.9,
zIndex: 4
}
]
},
midnightGlow: {
backgroundColor: "#000000",
visualEffects: {
saturation: 3.5,
contrast: 2.5,
brightness: 2.2,
hue: 0
},
lighting3d: {
enabled: true,
position: { x: 85, y: 5 },
intensity: 1
},
dropShadow: {
enabled: true,
size: 20,
opacity: 0.15,
direction: { x: 0, y: -3 }
},
shapes: [
{
id: "midnight-1",
width: 85,
height: 85,
x: -22,
y: -22,
gradient: "radial-gradient(circle, #0ea5e9 0%, #0284c7 30%, #0369a1 70%, #075985 100%)",
blur: 15,
opacity: 0.95,
zIndex: 1
},
{
id: "midnight-2",
width: 80,
height: 80,
x: 40,
y: -20,
gradient: "radial-gradient(circle, #06b6d4 0%, #0891b2 50%, #0e7490 100%)",
blur: 12,
opacity: 0.9,
zIndex: 2
},
{
id: "midnight-3",
width: 80,
height: 80,
x: -20,
y: 40,
gradient: "radial-gradient(circle, #10b981 0%, #059669 60%, #047857 100%)",
blur: 12,
opacity: 0.9,
zIndex: 3
},
{
id: "midnight-4",
width: 85,
height: 85,
x: 37,
y: 37,
gradient: "radial-gradient(circle, #6366f1 0%, #4f46e5 40%, #4338ca 80%, #3730a3 100%)",
blur: 15,
opacity: 0.95,
zIndex: 4
}
]
}
};
const ALL_THEMES = {
// === DARK THEMES ===
sunset: BASE_THEMES.sunset,
ocean: BASE_THEMES.ocean,
aurora: BASE_THEMES.aurora,
cosmic: BASE_THEMES.cosmic,
forest: BASE_THEMES.forest,
monochrome: BASE_THEMES.monochrome,
volcanic: DRAMATIC_THEMES.volcanic,
electric: DRAMATIC_THEMES.electric,
neon: DRAMATIC_THEMES.neon,
// === DARK ORB THEMES ===
cyberpunk: ORB_THEMES.cyberpunk,
voidPulse: ORB_THEMES.voidPulse,
fireCore: ORB_THEMES.fireCore,
deepSpace: ORB_THEMES.deepSpace,
shadowGlow: ORB_THEMES.shadowGlow,
sunsetGlow: ORB_THEMES.sunsetGlow,
twilightDark: ORB_THEMES.twilightDark,
midnightGlow: ORB_THEMES.midnightGlow,
shapes: {
backgroundColor: "#1a1a2e",
shapes: [
{
id: "shape-ellipse",
width: 70,
height: 45,
x: 10,
y: 15,
gradient: "radial-gradient(ellipse, #ff6b6b 0%, #ee5a24 50%, #ff9ff3 100%)",
blur: 20,
opacity: 0.7,
zIndex: 1,
shape: "ellipse"
},
{
id: "shape-circle",
width: 60,
height: 60,
x: 70,
y: 10,
gradient: "radial-gradient(circle, #74b9ff 0%, #0984e3 50%, #00cec9 100%)",
blur: 18,
opacity: 0.6,
zIndex: 2,
shape: "ellipse"
// Circle is just ellipse with equal width/height
},
{
id: "shape-rectangle",
width: 80,
height: 30,
x: -10,
y: 65,
gradient: "linear-gradient(45deg, #a55eea 0%, #26de81 50%, #fd79a8 100%)",
blur: 16,
opacity: 0.8,
zIndex: 3,
shape: "rectangle"
},
{
id: "shape-rounded",
width: 85,
height: 35,
x: 40,
y: 45,
gradient: "linear-gradient(135deg, #feca57 0%, #ff9ff3 50%, #ff6b6b 100%)",
blur: 17,
opacity: 0.6,
zIndex: 4,
shape: "rectangle",
// Rounded rectangle is just rectangle with borderRadius
shapeProps: { borderRadius: "20px" }
}
]
},
// === LIGHT THEMES ===
minimal: BASE_THEMES.minimal,
dreamy: DRAMATIC_THEMES.dreamy,
spring: BASE_THEMES.spring,
sky: BASE_THEMES.sky,
cream: BASE_THEMES.cream,
dawn: BASE_THEMES.dawn,
pearl: BASE_THEMES.pearl,
blush: BASE_THEMES.blush,
// === LIGHT ORB THEMES ===
crystalBlue: ORB_THEMES.crystalBlue,
sunbeam: ORB_THEMES.sunbeam,
roseDawn: ORB_THEMES.roseDawn,
mintFresh: ORB_THEMES.mintFresh,
lavenderMist: ORB_THEMES.lavenderMist,
dawnLight: ORB_THEMES.dawnLight,
lavender: {
backgroundColor: "#f8f4ff",
shapes: [
{
id: "lavender-1",
width: 85,
height: 30,
x: -10,
y: 25,
gradient: "radial-gradient(ellipse, rgba(221, 160, 221, 0.6) 0%, rgba(230, 230, 250, 0.4) 50%, rgba(248, 248, 255, 0.2) 100%)",
blur: 18,
opacity: 0.8,
zIndex: 1
},
{
id: "lavender-2",
width: 75,
height: 25,
x: 50,
y: 15,
gradient: "radial-gradient(ellipse, rgba(186, 85, 211, 0.5) 0%, rgba(221, 160, 221, 0.3) 50%, rgba(230, 230, 250, 0.2) 100%)",
blur: 16,
opacity: 0.7,
zIndex: 2
},
{
id: "lavender-3",
width: 80,
height: 28,
x: 20,
y: 60,
gradient: "radial-gradient(ellipse, rgba(230, 230, 250, 0.7) 0%, rgba(221, 160, 221, 0.5) 30%, rgba(248, 248, 255, 0.3) 100%)",
blur: 19,
opacity: 0.6,
zIndex: 3
}
]
},
mint: {
backgroundColor: "#f0fff4",
shapes: [
{
id: "mint-1",
width: 85,
height: 30,
x: -15,
y: 20,
gradient: "radial-gradient(ellipse, rgba(144, 238, 144, 0.6) 0%, rgba(152, 251, 152, 0.4) 50%, rgba(240, 255, 240, 0.2) 100%)",
blur: 18,
opacity: 0.8,
zIndex: 1
},
{
id: "mint-2",
width: 75,
height: 25,
x: 50,
y: 10,
gradient: "radial-gradient(ellipse, rgba(102, 205, 170, 0.7) 0%, rgba(144, 238, 144, 0.5) 40%, rgba(240, 255, 244, 0.3) 100%)",
blur: 16,
opacity: 0.7,
zIndex: 2
},
{
id: "mint-3",
width: 80,
height: 28,
x: 25,
y: 65,
gradient: "radial-gradient(ellipse, rgba(175, 238, 238, 0.8) 0%, rgba(152, 251, 152, 0.6) 30%, rgba(240, 255, 240, 0.4) 100%)",
blur: 19,
opacity: 0.6,
zIndex: 3
}
]
}
};
const THEME_NAMES = Object.keys(ALL_THEMES);
const DARK_THEMES = [
"sunset",
"ocean",
"aurora",
"cosmic",
"forest",
"monochrome",
"volcanic",
"electric",
"neon",
"cyberpunk",
"voidPulse",
"fireCore",
"deepSpace",
"shadowGlow",
"sunsetGlow",
"twilightDark",
"midnightGlow",
"shapes"
];
const LIGHT_THEMES = [
"minimal",
"dreamy",
"spring",
"sky",
"cream",
"dawn",
"pearl",
"blush",
"crystalBlue",
"sunbeam",
"roseDawn",
"mintFresh",
"lavenderMist",
"dawnLight",
"lavender",
"mint"
];
const getTheme = (themeName) => {
return ALL_THEMES[themeName] || ALL_THEMES.sunset;
};
const isLightTheme = (themeName) => {
return LIGHT_THEMES.includes(themeName);
};
const FLOAT_ANIMATION = {
name: "float",
duration: 20,
easing: "ease-in-out",
iterationCount: "infinite",
keyframes: [
{
percent: 0,
transform: "translateY(0px) translateX(0px) scale(1)"
},
{
percent: 25,
transform: "translateY(-10px) translateX(5px) scale(1.02)"
},
{
percent: 50,
transform: "translateY(5px) translateX(-5px) scale(0.98)"
},
{
percent: 75,
transform: "translateY(-5px) translateX(10px) scale(1.01)"
},
{
percent: 100,
transform: "translateY(0px) translateX(0px) scale(1)"
}
]
};
const generateFloatKeyframes = () => {
const keyframeString = FLOAT_ANIMATION.keyframes.map((frame) => `${frame.percent}% { transform: ${frame.transform}; }`).join("\n ");
return `
@keyframes ${FLOAT_ANIMATION.name} {
${keyframeString}
}
`;
};
const PULSE_ANIMATION = {
name: "pulse",
duration: 8,
easing: "ease-in-out",
iterationCount: "infinite",
keyframes: [
{
percent: 0,
transform: "scale(1) translateY(0px)"
},
{
percent: 50,
transform: "scale(1.08) translateY(-3px)"
},
{
percent: 100,
transform: "scale(1) translateY(0px)"
}
]
};
const generatePulseKeyframes = () => {
const keyframeString = PULSE_ANIMATION.keyframes.map((frame) => `${frame.percent}% { transform: ${frame.transform}; }`).join("\n ");
return `
@keyframes ${PULSE_ANIMATION.name} {
${keyframeString}
}
`;
};
const WAVE_ANIMATION = {
name: "css-mesh-wave",
keyframes: [
{ percent: 0, transform: "translate(0px, 0px)" },
{ percent: 25, transform: "translate(15px, -10px)" },
{ percent: 50, transform: "translate(0px, -20px)" },
{ percent: 75, transform: "translate(-15px, -10px)" },
{ percent: 100, transform: "translate(0px, 0px)" }
],
duration: 8,
easing: "ease-in-out",
iterationCount: "infinite"
};
const generateWaveKeyframes = () => {
return `
@keyframes ${WAVE_ANIMATION.name} {
0% { transform: translate(0px, 0px); }
25% { transform: translate(15px, -10px); }
50% { transform: translate(0px, -20px); }
75% { transform: translate(-15px, -10px); }
100% { transform: translate(0px, 0px); }
}
`;
};
const ROTATION_ANIMATION = {
name: "css-mesh-rotation",
keyframes: [
{ percent: 0, transform: "rotate(0deg) scale(1)" },
{ percent: 5, transform: "rotate(10deg) scale(1)" },
{ percent: 15, transform: "rotate(60deg) scale(1)" },
{ percent: 25, transform: "rotate(90deg) scale(1)" },
{ percent: 35, transform: "rotate(110deg) scale(1)" },
{ percent: 50, transform: "rotate(180deg) scale(1)" },
{ percent: 60, transform: "rotate(200deg) scale(1)" },
{ percent: 70, transform: "rotate(250deg) scale(1)" },
{ percent: 80, transform: "rotate(290deg) scale(1)" },
{ percent: 90, transform: "rotate(330deg) scale(1)" },
{ percent: 100, transform: "rotate(360deg) scale(1)" }
],
duration: 20,
easing: "linear",
iterationCount: "infinite"
};
const generateRotationKeyframes = (intensity = 1) => {
const i = Math.max(0.1, Math.min(2, intensity));
return `
@keyframes css-mesh-rotation {
0% {
transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
}
5% {
transform: translate3d(${0.2 * i}%, ${-0.2 * i}%, 0) rotate(${10 * i}deg) scale(1);
}
15% {
transform: translate3d(${0.4 * i}%, ${-0.4 * i}%, 0) rotate(${60 * i}deg) scale(1);
}
25% {
transform: translate3d(${0.5 * i}%, ${-0.5 * i}%, 0) rotate(${90 * i}deg) scale(1);
}
35% {
transform: translate3d(${0.3 * i}%, ${-0.7 * i}%, 0) rotate(${110 * i}deg) scale(1);
}
50% {
transform: translate3d(0, 0, 0) rotate(${180 * i}deg) scale(1);
}
60% {
transform: translate3d(${-0.2 * i}%, ${0.2 * i}%, 0) rotate(${200 * i}deg) scale(1);
}
70% {
transform: translate3d(${-0.4 * i}%, ${0.4 * i}%, 0) rotate(${250 * i}deg) scale(1);
}
80% {
transform: translate3d(${-0.5 * i}%, ${0.5 * i}%, 0) rotate(${290 * i}deg) scale(1);
}
90% {
transform: translate3d(${-0.2 * i}%, ${0.4 * i}%, 0) rotate(${330 * i}deg) scale(1);
}
100% {
transform: translate3d(0, 0, 0) rotate(${360 * i}deg) scale(1);
}
}
`;
};
const ORBIT_ANIMATION = {
name: "css-mesh-orbit",
keyframes: [
{ percent: 0, transform: "translate(0px, 0px) rotate(0deg)" },
{ percent: 25, transform: "translate(25px, -25px) rotate(90deg)" },
{ percent: 50, transform: "translate(0px, -50px) rotate(180deg)" },
{ percent: 75, transform: "translate(-25px, -25px) rotate(270deg)" },
{ percent: 100, transform: "translate(0px, 0px) rotate(360deg)" }
],
duration: 15,
easing: "ease-in-out",
iterationCount: "infinite"
};
const generateOrbitKeyframes = () => {
return `
@keyframes ${ORBIT_ANIMATION.name} {
0% { transform: translate(0px, 0px) rotate(0deg); }
25% { transform: translate(25px, -25px) rotate(90deg); }
50% { transform: translate(0px, -50px) rotate(180deg); }
75% { transform: translate(-25px, -25px) rotate(270deg); }
100% { transform: translate(0px, 0px) rotate(360deg); }
}
`;
};
const MORPH_ANIMATION = {
name: "css-mesh-morph",
duration: 8,
easing: "ease-in-out",
iterationCount: "infinite",
keyframes: [
{
percent: 0,
transform: "translate3d(0, 0, 0) scale(1) rotate(0deg)"
},
{
percent: 20,
transform: "translate3d(2%, 1%, 0) scale(1.05) rotate(20deg)"
},
{
percent: 40,
transform: "translate3d(1%, -2%, 0) scale(0.97) rotate(10deg)"
},
{
percent: 60,
transform: "translate3d(-1.5%, 0.5%, 0) scale(1.02) rotate(-10deg)"
},
{
percent: 80,
transform: "translate3d(-0.5%, 1.5%, 0) scale(1.01) rotate(-20deg)"
},
{
percent: 100,
transform: "translate3d(0, 0, 0) scale(1) rotate(0deg)"
}
]
};
const generateMorphKeyframes = (intensity = 1) => {
const i = Math.max(0.1, Math.min(2, intensity));
return `
@keyframes css-mesh-morph {
0% {
transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
}
20% {
transform: translate3d(${2 * i}%, ${1 * i}%, 0) scale(${1 + 0.05 * i}) rotate(${20 * i}deg);
}
40% {
transform: translate3d(${1 * i}%, ${-2 * i}%, 0) scale(${1 - 0.03 * i}) rotate(${10 * i}deg);
}
60% {
transform: translate3d(${-1.5 * i}%, ${0.5 * i}%, 0) scale(${1 + 0.02 * i}) rotate(${-10 * i}deg);
}
80% {
transform: translate3d(${-0.5 * i}%, ${1.5 * i}%, 0) scale(${1 + 0.01 * i}) rotate(${-20 * i}deg);
}
100% {
transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
}
}
`;
};
const ANIMATIONS = {
none: null,
float: FLOAT_ANIMATION,
pulse: PULSE_ANIMATION,
wave: WAVE_ANIMATION,
rotation: ROTATION_ANIMATION,
orbit: ORBIT_ANIMATION,
morph: MORPH_ANIMATION
};
const CONTAINER_ANIMATIONS = {
none: null,
hue: `
@keyframes css-mesh-container-hue {
0% { filter: hue-rotate(0deg); }
100% { filter: hue-rotate(360deg); }
}
`,
rotation: `
@keyframes css-mesh-container-rotation {
0% {
transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
}
5% {
transform: translate3d(0.2%, -0.2%, 0) rotate(10deg) scale(1);
}
15% {
transform: translate3d(0.4%, -0.4%, 0) rotate(60deg) scale(1);
}
25% {
transform: translate3d(0.5%, -0.5%, 0) rotate(90deg) scale(1);
}
35% {
transform: translate3d(0.3%, -0.7%, 0) rotate(110deg) scale(1);
}
50% {
transform: translate3d(0, 0, 0) rotate(180deg) scale(1);
}
60% {
transform: translate3d(-0.2%, 0.2%, 0) rotate(200deg) scale(1);
}
70% {
transform: translate3d(-0.4%, 0.4%, 0) rotate(250deg) scale(1);
}
80% {
transform: translate3d(-0.5%, 0.5%, 0) rotate(290deg) scale(1);
}
90% {
transform: translate3d(-0.2%, 0.4%, 0) rotate(330deg) scale(1);
}
100% {
transform: translate3d(0, 0, 0) rotate(360deg) scale(1);
}
}
`,
"hue-rotation": `
@keyframes css-mesh-container-hue-rotation {
0% {
transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
filter: hue-rotate(0deg);
}
5% {
transform: translate3d(0.2%, -0.2%, 0) rotate(10deg) scale(1);
filter: hue-rotate(10deg);
}
15% {
transform: translate3d(0.4%, -0.4%, 0) rotate(60deg) scale(1);
filter: hue-rotate(60deg);
}
25% {
transform: translate3d(0.5%, -0.5%, 0) rotate(90deg) scale(1);
filter: hue-rotate(90deg);
}
35% {
transform: translate3d(0.3%, -0.7%, 0) rotate(110deg) scale(1);
filter: hue-rotate(110deg);
}
50% {
transform: translate3d(0, 0, 0) rotate(180deg) scale(1);
filter: hue-rotate(180deg);
}
60% {
transform: translate3d(-0.2%, 0.2%, 0) rotate(200deg) scale(1);
filter: hue-rotate(200deg);
}
70% {
transform: translate3d(-0.4%, 0.4%, 0) rotate(250deg) scale(1);
filter: hue-rotate(250deg);
}
80% {
transform: translate3d(-0.5%, 0.5%, 0) rotate(290deg) scale(1);
filter: hue-rotate(290deg);
}
90% {
transform: translate3d(-0.2%, 0.4%, 0) rotate(330deg) scale(1);
filter: hue-rotate(330deg);
}
100% {
transform: translate3d(0, 0, 0) rotate(360deg) scale(1);
filter: hue-rotate(360deg);
}
}
`,
"drop-shadow": `
@keyframes css-mesh-container-drop-shadow {
0% {
filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.3));
}
25% {
filter: drop-shadow(6px 6px 12px rgba(0, 0, 0, 0.4));
}
50% {
filter: drop-shadow(4px 8px 16px rgba(0, 0, 0, 0.5));
}
75% {
filter: drop-shadow(8px 4px 12px rgba(0, 0, 0, 0.4));
}
100% {
filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.3));
}
}
`
};
const KEYFRAME_GENERATORS = {
float: generateFloatKeyframes,
pulse: generatePulseKeyframes,
wave: generateWaveKeyframes,
rotation: generateRotationKeyframes,
orbit: generateOrbitKeyframes,
morph: generateMorphKeyframes
};
const getAnimation = (type) => {
return ANIMATIONS[type];
};
const generateAnimationKeyframes = (type, intensity = 1) => {
if (type === "none") return "";
const generator = KEYFRAME_GENERATORS[type];
if (!generator) return "";
if (type === "morph") {
return generator(intensity);
}
const baseKeyframes = generator();
if (intensity === 1) return baseKeyframes;
return baseKeyframes.replace(
/translate\(([^)]+)\)/g,
(_match, values) => {
const coords = values.split(",").map((v) => {
const num = parseFloat(v.trim().replace("px", ""));
return `${num * intensity}px`;
});
return `translate(${coords.join(", ")})`;
}
).replace(
/rotate\(([^)]+)\)/g,
(_match, value) => {
const deg = parseFloat(value.replace("deg", ""));
return `rotate(${deg * intensity}deg)`;
}
).replace(
/scale\(([^)]+)\)/g,
(_match, value) => {
const scale = parseFloat(value);
const scaledValue = 1 + (scale - 1) * intensity;
return `scale(${scaledValue})`;
}
);
};
const getAnimationStyles = (type, index = 0, configuredDuration) => {
if (type === "none") return {};
const animation = getAnimation(type);
if (!animation) return {};
const delay = index * 1.5;
const duration = configuredDuration || animation.duration;
return {
animation: `${animation.name} ${duration}s ${animation.easing} infinite`,
animationDelay: `${delay}s`,
transformOrigin: "center center"
};
};
const generateContainerAnimationKeyframes = (type) => {
if (type === "none") return "";
return CONTAINER_ANIMATIONS[type] || "";
};
const getContainerAnimationStyles = (type, duration = 10) => {
if (type === "none") return {};
let animationName = "";
switch (type) {
case "hue":
animationName = "css-mesh-container-hue";
break;
case "rotation":
animationName = "css-mesh-container-rotation";
break;
case "hue-rotation":
animationName = "css-mesh-container-hue-rotation";
break;
case "drop-shadow":
animationName = "css-mesh-container-drop-shadow";
break;
}
if (!animationName) return {};
return {
animation: `${animationName} ${duration}s linear infinite`,
transformOrigin: "center center"
// Ensure rotation happens from center
};
};
const generateShapeStyles = (shape = "ellipse", shapeProps = {}) => {
const baseStyles = {
position: "absolute",
pointerEvents: "none",
willChange: "transform, filter",
backfaceVisibility: "hidden"
};
switch (shape) {
case "ellipse":
return {
...baseStyles,
borderRadius: "50%"
};
case "rectangle":
return {
...baseStyles,
borderRadius: shapeProps.borderRadius || "0"
};
default:
return {
...baseStyles,
borderRadius: "50%"
};
}
};
const MeshGradient = ({
theme = "sunset",
customConfig,
className = "",
style = {},
children,
animated = false,
animationType = "float",
animationConfig,
containerAnimation = "none",
containerAnimationConfig,
mouseTracking,
visualEffects,
// onThemeChange, // TODO: Implement callback functionality
performance = "auto",
shape = "background",
size,
dropShadow,
dropShadowOpacity = 0.4,
dropShadowDirection = { x: 0, y: 8 },
lighting3d
}) => {
const containerRef = useRef(null);
const [containerHeight, setContainerHeight] = useState(400);
const [mousePosition, setMousePosition] = useState({ x: 50, y: 50 });
useEffect(() => {
const updateHeight = () => {
if (containerRef.current) {
setContainerHeight(containerRef.current.offsetHeight);
}
};
updateHeight();
const resizeObserver = new ResizeObserver(updateHeight);
if (containerRef.current) {
resizeObserver.observe(containerRef.current);
}
return () => resizeObserver.disconnect();
}, []);
useEffect(() => {
if (!(mouseTracking == null ? void 0 : mouseTracking.enabled) || !containerRef.current) return;
const handleMouseMove = (event) => {
if (!containerRef.current) return;
const rect = containerRef.current.getBoundingClientRect();
const x = (event.clientX - rect.left) / rect.width * 100;
const y = (event.clientY - rect.top) / rect.height * 100;
setMousePosition({ x: Math.max(0, Math.min(100, x)), y: Math.max(0, Math.min(100, y)) });
};
const container = containerRef.current;
container.addEventListener("mousemove", handleMouseMove);
container.addEventListener("mouseenter", handleMouseMove);
const handleMouseLeave = () => {
setMousePosition({ x: 50, y: 50 });
};
container.addEventListener("mouseleave", handleMouseLeave);
return () => {
container.removeEventListener("mousemove", handleMouseMove);
container.removeEventListener("mouseenter", handleMouseMove);
container.removeEventListener("mouseleave", handleMouseLeave);
};
}, [mouseTracking == null ? void 0 : mouseTracking.enabled]);
const baseTheme = getTheme(theme);
if (!baseTheme) {
console.warn(`Theme "${theme}" not found, falling back to sunset`);
const fallbackTheme = getTheme("sunset");
if (!fallbackTheme) {
throw new Error('Fallback theme "sunset" not found');
}
}
const selectedTheme = baseTheme || getTheme("sunset");
const finalConfig = {
backgroundColor: (customConfig == null ? void 0 : customConfig.backgroundColor) || selectedTheme.backgroundColor,
shapes: (customConfig == null ? void 0 : customConfig.shapes) || selectedTheme.shapes,
containerStyle: (customConfig == null ? void 0 : customConfig.containerStyle) || {}
};
const defaultVisualEffects = selectedTheme.visualEffects || { saturation: 1, contrast: 1, brightness: 1, hue: 0 };
const finalVisualEffects = visualEffects || defaultVisualEffects;
const defaultLighting3d = selectedTheme.lighting3d || { enabled: false };
const finalLighting3d = lighting3d || defaultLighting3d;
const themeDropShadow = selectedTheme.dropShadow;
const finalDropShadow = dropShadow !== void 0 ? dropShadow : (themeDropShadow == null ? void 0 : themeDropShadow.enabled) ? themeDropShadow.size || true : false;
const finalDropShadowOpacity = dropShadowOpacity !== void 0 ? dropShadowOpacity : (themeDropShadow == null ? void 0 : themeDropShadow.opacity) || 0.4;
const finalDropShadowDirection = dropShadowDirection !== void 0 ? dropShadowDirection : (themeDropShadow == null ? void 0 : themeDropShadow.direction) || { x: 0, y: 8 };
const effectiveAnimationType = animated ? animationType : "none";
const effectiveContainerAnimation = containerAnimation;
const optimizedShapes = performance === "low" ? finalConfig.shapes.slice(0, 3) : finalConfig.shapes;
const containerAnimationStyles = getContainerAnimationStyles(
effectiveContainerAnimation,
(containerAnimationConfig == null ? void 0 : containerAnimationConfig.duration) || 10
);
const getOrbSize = () => {
if (typeof size === "number") return size;
if (typeof size === "string") {
switch (size) {
case "sm":
return 50;
case "md":
return 80;
case "lg":
return 120;
default:
return 80;
}
}
return 80;
};
const isOrb = shape === "orb";
const orbSize = isOrb ? getOrbSize() : void 0;
const getDropShadowStyles = () => {
if (!finalDropShadow) return "none";
const shadowSize = typeof finalDropShadow === "number" ? finalDropShadow : isOrb ? orbSize * 0.2 : 20;
const opacity = finalDropShadowOpacity;
const direction = finalDropShadowDirection;
const shadows = [
`${direction.x}px ${direction.y + shadowSize * 0.5}px ${shadowSize * 1.5}px rgba(0, 0, 0, ${opacity})`,
`${direction.x * 0.5}px ${direction.y + shadowSize * 0.2}px ${shadowSize * 0.8}px rgba(0, 0, 0, ${opacity * 0.8})`,
`${direction.x * 0.3}px ${direction.y + shadowSize * 0.1}px ${shadowSize * 0.3}px rgba(0, 0, 0, ${opacity * 0.6})`
];
return shadows.join(", ");
};
const getLighting3dOverlay = () => {
if (!finalLighting3d.enabled) return void 0;
const position = finalLighting3d.position || { x: 30, y: 30 };
const intensity2 = finalLighting3d.intensity || 0.3;
return {
position: "absolute",
top: 0,
left: 0,
right: 0,
bottom: 0,
pointerEvents: "none",
background: `radial-gradient(circle at ${position.x}% ${position.y}%,
rgba(255, 255, 255, ${intensity2 * 0.5}) 0%,
rgba(255, 255, 255, ${intensity2 * 0.2}) 30%,
rgba(0, 0, 0, ${intensity2 * 0.1}) 70%,
transparent 100%)`,
borderRadius: isOrb ? "50%" : void 0,
// Match container shape
zIndex: 500
};
};
const containerStyles = {
position: "relative",
width: "100%",
height: "100%",
backgroundColor: finalConfig.backgroundColor,
overflow: "hidden",
// Keep shapes clipped to container shape
transform: "translate3d(0, 0, 0)",
// Force GPU acceleration for the container
borderRadius: isOrb ? "50%" : void 0,
...finalConfig.containerStyle,
...containerAnimationStyles
};
const getShapeBaseStyles = (shape2 = "ellipse", shapeProps = {}) => {
return generateShapeStyles(shape2, shapeProps);
};
const intensity = (animationConfig == null ? void 0 : animationConfig.intensity) || 1;
const animationKeyframes = generateAnimationKeyframes(effectiveAnimationType, intensity);
const containerKeyframes = generateContainerAnimationKeyframes(effectiveContainerAnimation);
const getBlurInPixels = (blurPercentage) => {
return Math.round(blurPercentage / 100 * containerHeight);
};
const getMouseOffset = (ellipseX, ellipseY) => {
if (!(mouseTracking == null ? void 0 : mouseTracking.enabled)) return { x: 0, y: 0 };
const config = {
mode: mouseTracking.mode || "attract",
intensity: mouseTracking.intensity || 0.3,
radius: mouseTracking.radius || 30
};
const dx = mousePosition.x - ellipseX;
const dy = mousePosition.y - ellipseY;
const distance = Math.sqrt(dx * dx + dy * dy);
if (distance > config.radius) return { x: 0, y: 0 };
const strength = (1 - distance / config.radius) * config.intensity;
const direction = config.mode === "attract" ? 1 : -1;
const offsetX = dx / distance * strength * direction * 10;
const offsetY = dy / distance * strength * direction * 10;
return { x: offsetX || 0, y: offsetY || 0 };
};
return /* @__PURE__ */ jsxRuntimeExports.jsxs(
"div",
{
ref: containerRef,
"data-testid": "mesh-gradient",
className: `css-mesh ${className}`,
style: {
position: "relative",
width: isOrb ? `${orbSize}px` : "100%",
height: isOrb ? `${orbSize}px` : "100%",
backgroundColor: finalConfig.backgroundColor,
// Apply background to outer container for tests and visual consistency
boxShadow: getDropShadowStyles(),
// Apply shadow to outer container so it doesn't rotate
borderRadius: isOrb ? "50%" : void 0,
// Match inner container shape for shadows
...style
},
children: [
(animationKeyframes || containerKeyframes) && /* @__PURE__ */ jsxRuntimeExports.jsxs("style", { children: [
animationKeyframes,
containerKeyframes
] }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: containerStyles, children: [
optimizedShapes.map((shape2, index) => {
const animationStyles = getAnimationStyles(
effectiveAnimationType,
index,
animationConfig == null ? void 0 : animationConfig.duration
);
const blurInPixels = getBlurInPixels(shape2.blur);
const shapeType = shape2.shape || "ellipse";
const mouseOffset = getMouseOffset(shape2.x + shape2.width / 2, shape2.y + shape2.height / 2);
const filterEffects = `blur(${blurInPixels}px) saturate(${finalVisualEffects.saturation}) contrast(${finalVisualEffects.contrast}) brightness(${finalVisualEffects.brightness}) hue-rotate(${finalVisualEffects.hue}deg)`;
const mouseTransform = mouseOffset.x !== 0 || mouseOffset.y !== 0 ? `translate(${mouseOffset.x}%, ${mouseOffset.y}%)` : "";
const baseTransform = "translate3d(0, 0, 0)";
const animTransform = animationStyles.transform || "";
const finalTransform = [baseTransform, animTransform, mouseTransform].filter(Boolean).join(" ");
const shapeStyles = getShapeBaseStyles(shapeType, shape2.shapeProps || {});
return /* @__PURE__ */ jsxRuntimeExports.jsx(
"div",
{
"data-testid": `mesh-ellipse-${shape2.id}`,
style: {
...shapeStyles,
width: `${shape2.width}%`,
height: `${shape2.height}%`,
left: `${shape2.x}%`,
top: `${shape2.y}%`,
background: shape2.gradient,
filter: filterEffects,
opacity: shape2.opacity || 1,
zIndex: shape2.zIndex || index,
...animationStyles,
// Override any transform from animationStyles to include mouse effects
transform: finalTransform,
// Smooth transitions for mouse effects
transition: (mouseTracking == null ? void 0 : mouseTracking.enabled) ? "transform 0.1s ease-out" : void 0
}
},
shape2.id
);
}),
children && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { position: "relative", zIndex: 1e3 }, children })
] }),
finalLighting3d.enabled && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: getLighting3dOverlay() })
]
}
);
};
const VERSION = "0.7.1";
export {
ALL_THEMES,
ANIMATIONS,
BASE_THEMES,
CONTAINER_ANIMATIONS,
DARK_THEMES,
DRAMATIC_THEMES,
FLOAT_ANIMATION,
KEYFRAME_GENERATORS,
LIGHT_THEMES,
MeshGradient,
ORBIT_ANIMATION,
PULSE_ANIMATION,
ROTATION_ANIMATION,
THEME_NAMES,
VERSION,
WAVE_ANIMATION,
generateAnimationKeyframes,
generateContainerAnimationKeyframes,
getAnimation,
getAnimationStyles,
getContainerAnimationStyles,
getTheme,
isLightTheme
};
//# sourceMappingURL=index.es.js.map