hologram-sticker
Version:
A React component library for creating holographic sticker effects
271 lines (240 loc) • 27.2 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var jsxRuntime = require('react/jsx-runtime');
var react = require('react');
/******************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
var __assign = function() {
__assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
function __rest(s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
}
typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
var e = new Error(message);
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
};
// Create context
var HologramContext = react.createContext(null);
// Hook to use the hologram context
var useHologram = function () {
var context = react.useContext(HologramContext);
if (!context) {
throw new Error("Hologram components must be used within HologramSticker.Root");
}
return context;
};
// Context Provider component
var HologramProvider = function (_a) {
var children = _a.children;
var _b = react.useState(true), isActive = _b[0]; _b[1]; // 立即激活，无需等待动画
var _c = react.useState(false), isExploded = _c[0], setIsExploded = _c[1];
var _d = react.useState({ x: '0', y: '0' }), pointerPos = _d[0], setPointerPos = _d[1];
var _e = react.useState(true), showGlare = _e[0]; _e[1];
var cardRef = react.useRef(null);
var minimapRef = react.useRef(null);
var sceneRef = react.useRef(null);
var rootRef = react.useRef(null);
// 移除入场动画延迟，组件立即可用
react.useEffect(function () {
var handlePointerMove = function (e) {
if (!isActive && !isExploded)
return;
var element = isExploded ? minimapRef.current : cardRef.current;
var bounds = element === null || element === void 0 ? void 0 : element.getBoundingClientRect();
if (!bounds)
return;
var posX = e.clientX - bounds.x;
var posY = e.clientY - bounds.y;
var ratioX = posX / bounds.width - 0.5;
var ratioY = posY / bounds.height - 0.5;
var pointerX = Math.max(-1, Math.min(1, ratioX * 2));
var pointerY = Math.max(-1, Math.min(1, ratioY * 2));
setPointerPos({ x: pointerX.toFixed(2), y: pointerY.toFixed(2) });
// Update CSS variables scoped to this hologram instance
if (rootRef.current) {
rootRef.current.style.setProperty("--sticker-pointer-x", pointerX.toString());
rootRef.current.style.setProperty("--sticker-pointer-y", pointerY.toString());
}
};
// 只在卡片元素上监听事件，而不是全局监听
var element = isExploded ? minimapRef.current : cardRef.current;
if (element) {
element.addEventListener("pointermove", handlePointerMove);
}
return function () {
if (element) {
element.removeEventListener("pointermove", handlePointerMove);
}
};
}, [isActive, isExploded]);
react.useEffect(function () {
// Apply explode state to the scoped root element
if (rootRef.current) {
rootRef.current.dataset.explode = isExploded.toString();
}
}, [isExploded]);
var contextValue = {
isActive: isActive,
isExploded: isExploded,
setIsExploded: setIsExploded,
pointerPos: pointerPos,
showGlare: showGlare,
cardRef: cardRef,
minimapRef: minimapRef,
sceneRef: sceneRef,
rootRef: rootRef,
};
return (jsxRuntime.jsx(HologramContext.Provider, { value: contextValue, children: children }));
};
// Internal wrapper component that has access to the context
var RootContent = function (_a) {
var children = _a.children, _b = _a.className, className = _b === void 0 ? '' : _b, style = _a.style, props = __rest(_a, ["children", "className", "style"]);
var rootRef = useHologram().rootRef;
return (jsxRuntime.jsx("div", __assign({ ref: rootRef, className: "sticker-root ".concat(className), style: style }, props, { children: children })));
};
var Root = function (_a) {
var children = _a.children, _b = _a.className, className = _b === void 0 ? '' : _b, style = _a.style, props = __rest(_a, ["children", "className", "style"]);
return (jsxRuntime.jsx(HologramProvider, { children: jsxRuntime.jsx(RootContent, __assign({ className: className, style: style }, props, { children: children })) }));
};
var Scene = react.forwardRef(function (_a, ref) {
var children = _a.children, _b = _a.className, className = _b === void 0 ? '' : _b, props = __rest(_a, ["children", "className"]);
var sceneRef = useHologram().sceneRef;
return (jsxRuntime.jsx("div", __assign({ ref: ref || sceneRef, className: "sticker-scene ".concat(className) }, props, { children: children })));
});
Scene.displayName = 'Scene';
/**
* Holographic sticker card component with default dimensions (260px × 364px, 5:7 ratio).
* Provides a container for holographic layers and effects.
*/
var Card = react.forwardRef(function (_a, ref) {
var children = _a.children, _b = _a.className, className = _b === void 0 ? '' : _b, width = _a.width, aspectRatio = _a.aspectRatio, props = __rest(_a, ["children", "className", "width", "aspectRatio"]);
var _c = useHologram(), isActive = _c.isActive, isExploded = _c.isExploded, cardRef = _c.cardRef;
var cardStyle = __assign(__assign({}, (width && { width: "".concat(width, "px") })), (aspectRatio && { aspectRatio: aspectRatio.toString() }));
return (jsxRuntime.jsx("article", __assign({ ref: ref || cardRef, className: "sticker-card ".concat(className, " ").concat(isActive ? 'active' : '', " ").concat(isExploded ? 'exploded' : ''), style: cardStyle, "data-active": isActive }, props, { children: jsxRuntime.jsx("div", { className: "sticker-content", children: children }) })));
});
Card.displayName = 'Card';
var ImageLayer = function (_a) {
var src = _a.src, _b = _a.alt, alt = _b === void 0 ? '' : _b, _c = _a.className, className = _c === void 0 ? '' : _c, opacity = _a.opacity, objectFit = _a.objectFit, scale = _a.scale, _d = _a.parallax, parallax = _d === void 0 ? false : _d, style = _a.style, props = __rest(_a, ["src", "alt", "className", "opacity", "objectFit", "scale", "parallax", "style"]);
// 直接显示，无需等待active状态
var combinedStyle = __assign(__assign({}, style), (opacity !== undefined && { opacity: opacity }));
var imgStyle = __assign(__assign({}, (objectFit && { objectFit: objectFit })), (scale !== undefined && { scale: scale }));
return (jsxRuntime.jsx("div", __assign({ className: "sticker-img-layer ".concat(parallax ? 'sticker-img-layer--parallax' : 'sticker-img-layer--static', " ").concat(className), style: combinedStyle }, props, { children: jsxRuntime.jsx("img", { src: src, alt: alt, style: imgStyle }) })));
};
var Pattern = function (_a) {
var children = _a.children, _b = _a.className, className = _b === void 0 ? '' : _b, maskUrl = _a.maskUrl, _c = _a.maskSize, maskSize = _c === void 0 ? 'contain' : _c, _d = _a.textureUrl, textureUrl = _d === void 0 ? 'https://assets.codepen.io/605876/figma-texture.png' : _d, _e = _a.opacity, opacity = _e === void 0 ? 0.4 : _e; _a.mode; var _g = _a.mixBlendMode, mixBlendMode = _g === void 0 ? 'multiply' : _g, _h = _a.textureSize, textureSize = _h === void 0 ? '4cqi' : _h, props = __rest(_a, ["children", "className", "maskUrl", "maskSize", "textureUrl", "opacity", "mode", "mixBlendMode", "textureSize"]);
// 直接显示，无需等待active状态
var style = __assign({ '--pattern-opacity': opacity, '--pattern-mix-blend-mode': mixBlendMode, '--pattern-texture-size': textureSize, '--pattern-url': "url(".concat(textureUrl, ")") }, (maskUrl && {
'--pattern-mask-url': "url(".concat(maskUrl, ")"),
'--pattern-mask-size': maskSize,
}));
return (jsxRuntime.jsx("div", __assign({ className: "sticker-pattern ".concat(maskUrl ? 'sticker-pattern--mask' : '', " ").concat(className), style: style }, props, { children: children })));
};
var Watermark = function (_a) {
var children = _a.children, _b = _a.className, className = _b === void 0 ? '' : _b, _c = _a.imageUrl, imageUrl = _c === void 0 ? 'https://assets.codepen.io/605876/shopify-pattern.svg' : _c, _d = _a.opacity, opacity = _d === void 0 ? 1 : _d, props = __rest(_a, ["children", "className", "imageUrl", "opacity"]);
// 直接显示，无需等待active状态
var style = {
'--watermark-url': "url(".concat(imageUrl, ")"),
'--watermark-opacity': opacity,
};
return (jsxRuntime.jsx("div", __assign({ className: "sticker-watermark ".concat(className), style: style }, props, { children: children })));
};
var Refraction = function (_a) {
var _b = _a.className, className = _b === void 0 ? '' : _b, _c = _a.intensity, intensity = _c === void 0 ? 1 : _c, _d = _a.variant, variant = _d === void 0 ? 'default' : _d; _a.colors; var props = __rest(_a, ["className", "intensity", "variant", "colors"]);
var baseClass = variant === 'debug' ? 'sticker-refraction--debug' : 'sticker-refraction';
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", __assign({ className: "".concat(baseClass, " sticker-refraction-1 ").concat(className), style: { '--intensity': intensity } }, props)), jsxRuntime.jsx("div", __assign({ className: "".concat(baseClass, " sticker-refraction-2 ").concat(className), style: { '--intensity': intensity } }, props))] }));
};
var Content = function (_a) {
var children = _a.children, _b = _a.className, className = _b === void 0 ? '' : _b, props = __rest(_a, ["children", "className"]);
return (jsxRuntime.jsx("div", __assign({ className: "sticker-content ".concat(className) }, props, { children: children })));
};
var Spotlight = function (_a) {
var _b = _a.className, className = _b === void 0 ? '' : _b, _c = _a.intensity, intensity = _c === void 0 ? 1 : _c, props = __rest(_a, ["className", "intensity"]);
// 直接显示，无需等待active状态
return (jsxRuntime.jsx("div", __assign({ className: "sticker-spotlight ".concat(className), style: { '--spotlight-intensity': intensity } }, props)));
};
var Glare = function (_a) {
var _b = _a.className, className = _b === void 0 ? '' : _b, props = __rest(_a, ["className"]);
// Glare动画独立运行，不依赖isActive状态
return (jsxRuntime.jsx("div", __assign({ className: "sticker-glare-container ".concat(className) }, props, { children: jsxRuntime.jsx("div", { className: "sticker-glare animate" }) })));
};
var Minimap = function (_a) {
var _b = _a.className, className = _b === void 0 ? '' : _b, props = __rest(_a, ["className"]);
var _c = useHologram(), minimapRef = _c.minimapRef, pointerPos = _c.pointerPos, isExploded = _c.isExploded;
return (jsxRuntime.jsx("div", __assign({ ref: minimapRef, className: "sticker-minimap ".concat(className, " ").concat(isExploded ? 'visible' : '') }, props, { children: jsxRuntime.jsxs("div", { className: "sticker-minimap__stats", children: [jsxRuntime.jsxs("span", { children: ["x: ", pointerPos.x] }), jsxRuntime.jsxs("span", { children: ["y: ", pointerPos.y] })] }) })));
};
var Controls = function (_a) {
var _b = _a.className, className = _b === void 0 ? '' : _b, props = __rest(_a, ["className"]);
var _c = useHologram(), isExploded = _c.isExploded, setIsExploded = _c.setIsExploded;
return (jsxRuntime.jsx("div", __assign({ className: "sticker-controls ".concat(className) }, props, { children: jsxRuntime.jsx("button", { onClick: function () { return setIsExploded(!isExploded); }, className: "rounded-xl border border-white/50 px-4 py-2", type: "button", children: isExploded ? '📦 Collapse' : '💥 Explode' }) })));
};
function styleInject(css, ref) {
if ( ref === void 0 ) ref = {};
var insertAt = ref.insertAt;
if (typeof document === 'undefined') { return; }
var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.type = 'text/css';
if (insertAt === 'top') {
if (head.firstChild) {
head.insertBefore(style, head.firstChild);
} else {
head.appendChild(style);
}
} else {
head.appendChild(style);
}
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
}
var css_248z = ".sticker-root{opacity:1;visibility:visible}.sticker-card{max-height:calc(var(--sticker-card-width, 260px)*7/5);max-width:var(--sticker-card-width,260px)}.sticker-background img,.sticker-frame img,.sticker-img-layer img{display:block;height:auto;max-width:100%}:root{--sticker-card-width:260px;--sticker-card-border-radius:8cqi;--sticker-pointer-x:0;--sticker-pointer-y:0;--sticker-parallax-img-x:5%;--sticker-parallax-img-y:5%;--sticker-rotate-x:25deg;--sticker-rotate-y:-20deg;--sticker-border-color:#404040}*,:after,:before{box-sizing:border-box;transform-style:preserve-3d}.sr-only{clip:rect(0,0,0,0);border-width:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.sticker-root{align-items:center;display:flex;justify-content:center;min-height:400px;position:relative;width:100%}.sticker-scene{perspective:1000px;position:relative;transform:translateZ(100vmin)}.sticker-arrow{color:#fff;display:inline-block;font-family:Gloria Hallelujah,Comic Sans MS,cursive,sans-serif;font-size:.875rem;left:50%;opacity:0;position:absolute;rotate:10deg;top:50%;transition:opacity .26s ease-out;translate:calc(-40% + var(--sticker-card-width)*-1) 0;width:80px;z-index:99999}.sticker-arrow.visible{opacity:.8}.sticker-arrow span{display:inline-block;rotate:-24deg;translate:30% 100%}.sticker-arrow svg{left:0;rotate:10deg;rotate:-25deg;scale:1 -1;translate:120% 20%;width:80%}[data-explode=true] .sticker-arrow{opacity:0}@media (max-width:580px){.sticker-arrow{translate:-50% calc(var(--sticker-card-width)*7/5*.5)}.sticker-arrow span{translate:80% 160%}.sticker-arrow svg{bottom:100%;rotate:190deg;top:unset;translate:0 0}}.sticker-minimap{aspect-ratio:5/7;background:grey;border:4px solid var(--sticker-border-color);border-radius:6px;cursor:pointer;left:50%;pointer-events:none;position:fixed;top:50%;transform:translateZ(100vmin);transition:all .3s;translate:calc(var(--sticker-card-width)*1) -50%;visibility:hidden;width:60px;z-index:999999}.sticker-minimap.visible{pointer-events:all;visibility:visible}.sticker-minimap:after{content:\"trackpad\";font-family:Sora,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:.875rem;left:100%;opacity:.35;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%) rotate(-90deg) translateY(100%)}.sticker-minimap__stats{color:#fff;display:flex;flex-direction:column;font-family:monospace;font-size:.75rem;left:0;opacity:.7;position:absolute;right:0;top:calc(100% + .5rem)}.sticker-minimap__stats span{white-space:nowrap}.sticker-card{aspect-ratio:5/7;background:transparent;color:#1a1a1a;container-type:inline-size;display:block;font-family:Sora,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;perspective:1600px;position:relative;width:var(--sticker-card-width)}.sticker-card :after,.sticker-card :before,.sticker-card img{will-change:translate,scale,filter}.sticker-card.active{transition:transform .2s}[data-explode=false] .sticker-card.active:hover{animation:set .2s backwards;transform:rotateX(calc(var(--sticker-pointer-y)*var(--sticker-rotate-x))) rotateY(calc(var(--sticker-pointer-x)*var(--sticker-rotate-y)));transition:transform 0s}@keyframes set{0%{transform:rotateX(0deg) rotateY(0deg)}}.sticker-card:not(:hover) img{transition:translate .2s}.sticker-card.exploded{pointer-events:none;transform:rotateX(-24deg) rotateY(32deg) rotateX(90deg);transition:transform .2s .2s}[data-explode=true] .sticker-card .sticker-pattern,[data-explode=true] .sticker-card .sticker-spotlight,[data-explode=true] .sticker-card .sticker-watermark{mix-blend-mode:unset}.sticker-flip-button{-webkit-tap-highlight-color:transparent;background:none;border:none;cursor:pointer;inset:0;opacity:0;position:absolute;z-index:100}.sticker-card *{pointer-events:none}.sticker-flip-button{pointer-events:all}.sticker-content{border-radius:var(--sticker-card-border-radius);inset:0;position:absolute;transform-style:preserve-3d;transition:rotate .26s ease-out}.sticker-content.flipped{rotate:180deg y}.sticker-content>:not(.sticker-debug:not(.sticker-debug--clipped)){clip-path:inset(0 0 0 0 round var(--sticker-card-border-radius))}.sticker-emboss{filter:url(#sticker-lighting);position:relative}.sticker-emboss:before{bottom:0;color:#fff;content:\"TechTrades © 2025\";display:flex;font-size:1.5cqi;height:calc(var(--sticker-card-border-radius)*.5);left:50%;opacity:.8;place-items:center;position:absolute;translate:-50% 0;z-index:100}.sticker-emboss:after{border:calc(var(--sticker-card-border-radius)*.5 + 1px) solid var(--sticker-border-color);content:\"\";inset:-1px;z-index:99}.sticker-background,.sticker-emboss:after{border-radius:var(--sticker-card-border-radius);position:absolute}.sticker-background{inset:0}.sticker-background img{border-radius:var(--sticker-card-border-radius);height:100%;object-fit:cover;width:100%}.sticker-img-layer{border-radius:var(--sticker-card-border-radius);clip-path:inset(0 0 0 0 round var(--sticker-card-border-radius));inset:0;opacity:1;position:absolute}.sticker-img-layer:before{background:transparent;content:\"\";inset:0;position:absolute}.sticker-img-layer img{filter:brightness(.85);height:100%;inset:0;object-fit:cover;position:absolute;scale:1;transition:translate .2s;width:100%}[data-explode=false] .sticker-card.active:hover .sticker-img-layer--parallax img,[data-explode=true]:has(.sticker-minimap:hover) .sticker-img-layer--parallax img{animation:set-img .2s backwards;transition:transform 0s;translate:calc(var(--sticker-pointer-x)*var(--sticker-parallax-img-x)) calc(var(--sticker-pointer-y)*var(--sticker-parallax-img-y))}[data-explode=false] .sticker-card.active:hover .sticker-frame img,[data-explode=true]:has(.sticker-minimap:hover) .sticker-frame img{animation:set-img .2s backwards;transition:transform 0s;translate:calc(var(--sticker-pointer-x)*var(--sticker-parallax-img-x)) calc(var(--sticker-pointer-y)*var(--sticker-parallax-img-y))}@keyframes set-img{0%{translate:0 0}}.sticker-debug{border-radius:var(--sticker-card-border-radius);inset:0;opacity:0;position:absolute;visibility:hidden}.sticker-debug[data-visible=true]{visibility:visible}.sticker-debug:after{border:4px dashed;border-radius:var(--sticker-card-border-radius);content:\"\";inset:0;position:absolute}.sticker-debug--clipped{clip-path:inset(0 0 0 0 round var(--sticker-card-border-radius))}.sticker-debug .sticker-refraction--debug{opacity:.2}.sticker-debug--clipped .sticker-refraction--debug{opacity:1}[data-explode=true] .sticker-debug{visibility:visible}[data-explode=true] .sticker-debug:not(.sticker-debug--clipped) .sticker-refraction--debug{opacity:.2}.sticker-pattern{border-radius:var(--sticker-card-border-radius);clip-path:inset(0 0 0 0 round var(--sticker-card-border-radius));filter:saturate(.8) contrast(1) brightness(1);inset:0;mask:var(--pattern-url,url(https://assets.codepen.io/605876/figma-texture.png)) 50% 50% /var(--pattern-texture-size,4cqi) var(--pattern-texture-size,4cqi);mix-blend-mode:var(--pattern-mix-blend-mode,multiply);opacity:var(--pattern-opacity,.4);position:absolute}.sticker-pattern:before{background:#ccc;content:\"\";inset:0;position:absolute}.sticker-pattern--mask{mask:var(--pattern-mask-url) center /var(--pattern-mask-size,contain) no-repeat,var(--pattern-url) 50% 50% /var(--pattern-texture-size,4cqi) var(--pattern-texture-size,4cqi);-webkit-mask:var(--pattern-mask-url) center /var(--pattern-mask-size,contain) no-repeat,var(--pattern-url) 50% 50% /var(--pattern-texture-size,4cqi) var(--pattern-texture-size,4cqi);mask-composite:intersect;-webkit-mask-composite:source-in}.sticker-watermark{border-radius:var(--sticker-card-border-radius);clip-path:inset(0 0 0 0 round var(--sticker-card-border-radius));filter:saturate(.9) contrast(1.1) brightness(1.2);inset:0;mask:var(--watermark-url,url(https://assets.codepen.io/605876/shopify-pattern.svg)) 50% 50% /14cqi 14cqi repeat;mix-blend-mode:hard-light;opacity:var(--watermark-opacity,1);position:absolute}.sticker-watermark:before{background:hsla(0,0%,100%,.2);content:\"\";inset:0;position:absolute}.sticker-refraction,.sticker-spotlight:before{opacity:0;transition:opacity .2s ease-out}.sticker-card.active:hover .sticker-spotlight:before,.sticker-card.active:hover :not(.sticker-debug) .sticker-refraction,[data-explode=true]:has(.sticker-minimap:hover) .sticker-refraction,[data-explode=true]:has(.sticker-minimap:hover) .sticker-spotlight:before{opacity:1}[data-explode=true]:has(.sticker-minimap:hover) .sticker-debug:not(.sticker-debug--clipped) .sticker-refraction{opacity:.2}.sticker-refraction{aspect-ratio:1/1;filter:saturate(calc(var(--intensity, 1)*2));position:absolute;width:500%;will-change:translate,scale,filter}.sticker-refraction-1{background:radial-gradient(circle at 0 100%,transparent 10%,#ffa299,#3f9,#6e9cf7,transparent 60%);bottom:0;left:0;scale:min(1,calc(.15 + var(--sticker-pointer-x)*.25));transform-origin:0 100%;translate:clamp(-10%,calc(-10% + var(--sticker-pointer-x)*10%),10%) calc(max(0%, var(--sticker-pointer-y) * -1 * 10%))}.sticker-refraction-2{background:radial-gradient(circle at 100% 0,transparent 10%,#ffa299,#3f9,#6e9cf7,transparent 60%);right:0;scale:min(1,calc(.15 + var(--sticker-pointer-x)*-.65));top:0;transform-origin:100% 0;translate:clamp(-10%,calc(10% - var(--sticker-pointer-x)*-10%),10%) calc(min(0%, var(--sticker-pointer-y) * -10%))}.sticker-frame{border-radius:var(--sticker-card-border-radius);inset:0;opacity:1;position:absolute;z-index:2}.sticker-frame img{filter:saturate(.8) contrast(1.2) drop-shadow(0 0 10cqi hsl(0 0% 10%/.75));height:100%;inset:0;object-fit:cover;position:absolute;scale:1.1;width:100%}.sticker-spotlight{clip-path:inset(0 0 0 0 round var(--sticker-card-border-radius));inset:0;mix-blend-mode:overlay;position:absolute;z-index:10}.sticker-spotlight:after{border:4px dashed;border-radius:var(--sticker-card-border-radius);content:\"\";inset:0;opacity:0;position:absolute}[data-explode=true] .sticker-spotlight:after{opacity:1}.sticker-spotlight:before{aspect-ratio:1;background:radial-gradient(hsl(0 0% 100%/calc(var(--spotlight-intensity, 1)*.4)) 0 2%,hsl(0 0% 10%/calc(var(--spotlight-intensity, 1)*.2)) 20%);content:\"\";filter:brightness(1.2) contrast(1.2);left:50%;opacity:0;position:absolute;top:50%;transition:opacity .2s ease-out;translate:calc(-50% + var(--sticker-pointer-x)*20%) calc(-50% + var(--sticker-pointer-y)*20%);width:500%}.sticker-glare-container{border-radius:var(--sticker-card-border-radius);clip-path:inset(0 0 0 0 round var(--sticker-card-border-radius));inset:0;overflow:hidden;position:absolute}.sticker-glare{background:linear-gradient(-65deg,transparent 0 40%,#fff 40% 50%,transparent 30% 50%,transparent 50% 55%,#fff 55% 60%,transparent 60% 100%);inset:0;opacity:.5;position:absolute;transform:translateX(100%)}.sticker-glare.animate{animation:glareSwipe .65s ease-in-out .75s forwards}@keyframes glareSwipe{to{transform:translateX(-100%)}}.sticker-wordmark{height:max-content;left:50%;position:absolute;translate:-50% 0;width:70%}.sticker-wordmark--top{top:12%}.sticker-wordmark--bottom{bottom:12%;rotate:180deg}.sticker-wordmark:after{color:#fff;content:\"™\";position:absolute;right:0;top:100%}.sticker-wordmark img{height:auto;position:static;width:100%}.sticker-gemstone{filter:hue-rotate(320deg);height:auto;left:50%;position:absolute;top:50%;translate:-50% -50%;width:50%}.sticker-controls{display:flex;gap:.5rem;position:fixed;right:1rem;top:1rem;transform:translateZ(200vmin);z-index:999999}.sticker-overlay{inset:0;opacity:var(--overlay-opacity,1);position:absolute;z-index:1}.sticker-overlay img{height:100%;object-fit:cover;width:100%}[data-explode=true] .sticker-content,[data-explode=true] .sticker-debug,[data-explode=true] .sticker-frame,[data-explode=true] .sticker-glare-container,[data-explode=true] .sticker-img-layer,[data-explode=true] .sticker-pattern,[data-explode=true] .sticker-spotlight,[data-explode=true] .sticker-spotlight:after,[data-explode=true] .sticker-watermark{transition-delay:.4s;transition-duration:.2s;transition-property:transform,opacity}[data-explode=true] .sticker-img-layer{transform:translateZ(-240px)}[data-explode=true] .sticker-debug:not(.sticker-debug--clipped){opacity:.3;transform:translateZ(-160px)}[data-explode=true] .sticker-debug--clipped{opacity:.5;transform:translateZ(-120px)}[data-explode=true] .sticker-pattern{transform:translateZ(-80px)}[data-explode=true] .sticker-watermark{transform:translateZ(-40px)}[data-explode=true] .sticker-content{transform:translateZ(40px)}[data-explode=true] .sticker-frame{transform:translateZ(80px)}[data-explode=true] .sticker-spotlight{transform:translateZ(160px)}[data-explode=true] .sticker-glare-container{transform:translateZ(240px)}";
styleInject(css_248z);
// Components
// Compound Component
var HologramSticker = {
Root: Root,
Scene: Scene,
Card: Card,
ImageLayer: ImageLayer,
Pattern: Pattern,
Watermark: Watermark,
Refraction: Refraction,
Content: Content,
Spotlight: Spotlight,
Glare: Glare,
Minimap: Minimap,
Controls: Controls,
};
exports.HologramSticker = HologramSticker;
exports.default = HologramSticker;
exports.useHologram = useHologram;
//# sourceMappingURL=index.js.map