@medialane/ui 0.54.0 → 0.55.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/medialane-collection-card.cjs +81 -59
- package/dist/components/medialane-collection-card.cjs.map +1 -1
- package/dist/components/medialane-collection-card.d.cts +5 -4
- package/dist/components/medialane-collection-card.d.ts +5 -4
- package/dist/components/medialane-collection-card.js +80 -58
- package/dist/components/medialane-collection-card.js.map +1 -1
- package/package.json +1 -1
|
@@ -22,13 +22,13 @@ __export(medialane_collection_card_exports, {
|
|
|
22
22
|
MedialaneCollectionCard: () => MedialaneCollectionCard
|
|
23
23
|
});
|
|
24
24
|
module.exports = __toCommonJS(medialane_collection_card_exports);
|
|
25
|
-
var import_jsx_runtime = (
|
|
26
|
-
// eslint-disable-next-line @next/next/no-img-element
|
|
27
|
-
require("react/jsx-runtime")
|
|
28
|
-
);
|
|
25
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
29
26
|
var import_react = require("react");
|
|
30
27
|
var import_cn = require("../utils/cn.js");
|
|
31
28
|
const FRAME_GRADIENT = "linear-gradient(135deg, #3b7bff, #8a5cf6 38%, #f6608f 70%, #fb8b46)";
|
|
29
|
+
const MATERIAL = `radial-gradient(120% 90% at 0% 0%, rgba(59,123,255,0.14), transparent 55%),
|
|
30
|
+
radial-gradient(120% 90% at 100% 100%, rgba(251,139,70,0.10), transparent 55%),
|
|
31
|
+
#0a0e1f`;
|
|
32
32
|
function MedialaneCollectionCard({
|
|
33
33
|
image,
|
|
34
34
|
name,
|
|
@@ -45,16 +45,18 @@ function MedialaneCollectionCard({
|
|
|
45
45
|
const rect = el.getBoundingClientRect();
|
|
46
46
|
const x = (e.clientX - rect.left) / rect.width;
|
|
47
47
|
const y = (e.clientY - rect.top) / rect.height;
|
|
48
|
-
el.style.setProperty("--rx", `${(0.5 - y) *
|
|
49
|
-
el.style.setProperty("--ry", `${(x - 0.5) *
|
|
48
|
+
el.style.setProperty("--rx", `${(0.5 - y) * 9}deg`);
|
|
49
|
+
el.style.setProperty("--ry", `${(x - 0.5) * 9}deg`);
|
|
50
50
|
el.style.setProperty("--mx", `${x * 100}%`);
|
|
51
51
|
el.style.setProperty("--my", `${y * 100}%`);
|
|
52
|
+
el.style.setProperty("--pop", "1.015");
|
|
52
53
|
};
|
|
53
54
|
const handleLeave = () => {
|
|
54
55
|
const el = frameRef.current;
|
|
55
56
|
if (!el) return;
|
|
56
57
|
el.style.setProperty("--rx", "0deg");
|
|
57
58
|
el.style.setProperty("--ry", "0deg");
|
|
59
|
+
el.style.setProperty("--pop", "1");
|
|
58
60
|
};
|
|
59
61
|
const displayName = name?.trim() || "Untitled";
|
|
60
62
|
const monogram = displayName[0]?.toUpperCase() ?? "M";
|
|
@@ -64,68 +66,88 @@ function MedialaneCollectionCard({
|
|
|
64
66
|
ref: frameRef,
|
|
65
67
|
onPointerMove: handleMove,
|
|
66
68
|
onPointerLeave: handleLeave,
|
|
67
|
-
className: "rounded-[24px] p-[1.5px] transition-transform duration-200 ease-out will-change-transform",
|
|
69
|
+
className: "rounded-[24px] p-[1.5px] transition-transform duration-200 ease-out will-change-transform shadow-[0_16px_40px_-16px_rgba(91,76,230,0.45)]",
|
|
68
70
|
style: {
|
|
69
71
|
background: FRAME_GRADIENT,
|
|
70
|
-
transform: "rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg))",
|
|
72
|
+
transform: "rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--pop, 1))",
|
|
71
73
|
transformStyle: "preserve-3d"
|
|
72
74
|
},
|
|
73
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
className: "
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
children: displayName
|
|
108
|
-
}
|
|
109
|
-
),
|
|
110
|
-
(collection || serial) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mt-0.5 flex items-baseline gap-2", children: [
|
|
111
|
-
collection && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-[12.5px] text-white/60 truncate", children: collection }),
|
|
112
|
-
serial && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "ml-auto shrink-0 text-[12.5px] text-white/80 tabular-nums", children: serial })
|
|
113
|
-
] }),
|
|
114
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "my-3 h-px bg-white/10" }),
|
|
115
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2", children: [
|
|
75
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
76
|
+
"div",
|
|
77
|
+
{
|
|
78
|
+
className: "relative rounded-[22.5px] overflow-hidden text-white ring-1 ring-inset ring-white/[0.06]",
|
|
79
|
+
style: { background: MATERIAL },
|
|
80
|
+
children: [
|
|
81
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "p-2.5 pb-0", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative aspect-[4/5] w-full overflow-hidden rounded-[16px] ring-1 ring-white/10", children: [
|
|
82
|
+
image ? (
|
|
83
|
+
// eslint-disable-next-line @next/next/no-img-element
|
|
84
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src: image, alt: displayName, className: "h-full w-full object-cover" })
|
|
85
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
86
|
+
"div",
|
|
87
|
+
{
|
|
88
|
+
className: "h-full w-full flex items-center justify-center",
|
|
89
|
+
style: { background: FRAME_GRADIENT, opacity: 0.9 },
|
|
90
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
91
|
+
"span",
|
|
92
|
+
{
|
|
93
|
+
className: "text-7xl font-black text-white/90",
|
|
94
|
+
style: { fontFamily: "var(--font-display, inherit)" },
|
|
95
|
+
children: monogram
|
|
96
|
+
}
|
|
97
|
+
)
|
|
98
|
+
}
|
|
99
|
+
),
|
|
100
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
101
|
+
"div",
|
|
102
|
+
{
|
|
103
|
+
"aria-hidden": true,
|
|
104
|
+
className: "pointer-events-none absolute inset-x-0 bottom-0 h-16",
|
|
105
|
+
style: { background: "linear-gradient(to top, rgba(10,14,31,0.45), transparent)" }
|
|
106
|
+
}
|
|
107
|
+
)
|
|
108
|
+
] }) }),
|
|
116
109
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
117
|
-
"
|
|
110
|
+
"div",
|
|
118
111
|
{
|
|
119
112
|
"aria-hidden": true,
|
|
120
|
-
className: "
|
|
121
|
-
style: {
|
|
113
|
+
className: "pointer-events-none absolute inset-0 opacity-40 group-hover:opacity-100 transition-opacity duration-300",
|
|
114
|
+
style: {
|
|
115
|
+
background: `radial-gradient(420px circle at var(--mx, 70%) var(--my, 20%), rgba(255,255,255,0.20), transparent 45%),
|
|
116
|
+
linear-gradient(115deg, rgba(59,123,255,0.14), rgba(138,92,246,0.14) 35%, rgba(246,96,143,0.14) 65%, rgba(251,139,70,0.14))`,
|
|
117
|
+
mixBlendMode: "screen"
|
|
118
|
+
}
|
|
122
119
|
}
|
|
123
120
|
),
|
|
124
|
-
/* @__PURE__ */ (0, import_jsx_runtime.
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
121
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative px-4 pt-3 pb-4", children: [
|
|
122
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-start gap-2", children: [
|
|
123
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
124
|
+
"p",
|
|
125
|
+
{
|
|
126
|
+
className: "min-w-0 flex-1 text-[18px] font-bold leading-snug truncate",
|
|
127
|
+
style: { fontFamily: "var(--font-display, inherit)" },
|
|
128
|
+
children: displayName
|
|
129
|
+
}
|
|
130
|
+
),
|
|
131
|
+
serial && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "mt-0.5 shrink-0 rounded-full bg-white/10 px-2 py-0.5 text-[11px] font-semibold text-white/80 tabular-nums", children: serial })
|
|
132
|
+
] }),
|
|
133
|
+
collection && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "mt-0.5 text-[12.5px] text-white/55 truncate", children: collection }),
|
|
134
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "my-3 h-px bg-white/10" }),
|
|
135
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2", children: [
|
|
136
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
137
|
+
"span",
|
|
138
|
+
{
|
|
139
|
+
"aria-hidden": true,
|
|
140
|
+
className: "h-3.5 w-3.5 rounded-full shrink-0",
|
|
141
|
+
style: { background: FRAME_GRADIENT }
|
|
142
|
+
}
|
|
143
|
+
),
|
|
144
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-[9px] font-bold tracking-[0.18em] text-white/50", children: "MEDIALANE" }),
|
|
145
|
+
creator && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "ml-auto min-w-0 truncate text-[11px] text-white/55 tabular-nums", children: creator })
|
|
146
|
+
] })
|
|
147
|
+
] })
|
|
148
|
+
]
|
|
149
|
+
}
|
|
150
|
+
)
|
|
129
151
|
}
|
|
130
152
|
) });
|
|
131
153
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/medialane-collection-card.tsx"],"sourcesContent":["\"use client\";\n\nimport { useRef } from \"react\";\nimport { cn } from \"../utils/cn.js\";\n\nexport interface MedialaneCollectionCardProps {\n /** Resolved, browser-loadable image URL. Empty → branded monogram placeholder. */\n image?: string | null;\n /** Asset or collection name. */\n name?: string;\n /** Secondary line under the name (collection name, symbol, ticker…). */\n collection?: string;\n /** Edition or serial shown
|
|
1
|
+
{"version":3,"sources":["../../src/components/medialane-collection-card.tsx"],"sourcesContent":["\"use client\";\n\nimport { useRef } from \"react\";\nimport { cn } from \"../utils/cn.js\";\n\nexport interface MedialaneCollectionCardProps {\n /** Resolved, browser-loadable image URL. Empty → branded monogram placeholder. */\n image?: string | null;\n /** Asset or collection name. */\n name?: string;\n /** Secondary line under the name (collection name, symbol, ticker…). */\n collection?: string;\n /** Edition or serial shown as a pill, e.g. \"#42\" or \"1 / 300\". */\n serial?: string;\n /** Creator display name or shortened address. */\n creator?: string;\n className?: string;\n}\n\nconst FRAME_GRADIENT =\n \"linear-gradient(135deg, #3b7bff, #8a5cf6 38%, #f6608f 70%, #fb8b46)\";\n\n/** Foil tints on the card material — faint brand radials, like printed foil. */\nconst MATERIAL =\n `radial-gradient(120% 90% at 0% 0%, rgba(59,123,255,0.14), transparent 55%),\n radial-gradient(120% 90% at 100% 100%, rgba(251,139,70,0.10), transparent 55%),\n #0a0e1f`;\n\n/** The Medialane Collection Card — a branded collectors-card preview of an\n * asset or collection. A self-contained dark collectible object (identical in\n * both themes): brand-spectrum frame, inset artwork on foil-tinted material,\n * pointer-tracked 3D tilt + holographic sheen, display-face name, serial\n * pill, Medialane maker's mark. Fluid width — size it with the parent\n * container. Pure presentation. */\nexport function MedialaneCollectionCard({\n image,\n name,\n collection,\n serial,\n creator,\n className,\n}: MedialaneCollectionCardProps) {\n const frameRef = useRef<HTMLDivElement>(null);\n\n const handleMove = (e: React.PointerEvent<HTMLDivElement>) => {\n const el = frameRef.current;\n if (!el || e.pointerType !== \"mouse\") return;\n if (window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches) return;\n const rect = el.getBoundingClientRect();\n const x = (e.clientX - rect.left) / rect.width;\n const y = (e.clientY - rect.top) / rect.height;\n el.style.setProperty(\"--rx\", `${(0.5 - y) * 9}deg`);\n el.style.setProperty(\"--ry\", `${(x - 0.5) * 9}deg`);\n el.style.setProperty(\"--mx\", `${x * 100}%`);\n el.style.setProperty(\"--my\", `${y * 100}%`);\n el.style.setProperty(\"--pop\", \"1.015\");\n };\n\n const handleLeave = () => {\n const el = frameRef.current;\n if (!el) return;\n el.style.setProperty(\"--rx\", \"0deg\");\n el.style.setProperty(\"--ry\", \"0deg\");\n el.style.setProperty(\"--pop\", \"1\");\n };\n\n const displayName = name?.trim() || \"Untitled\";\n const monogram = displayName[0]?.toUpperCase() ?? \"M\";\n\n return (\n <div className={cn(\"group\", className)} style={{ perspective: \"1000px\" }}>\n <div\n ref={frameRef}\n onPointerMove={handleMove}\n onPointerLeave={handleLeave}\n className=\"rounded-[24px] p-[1.5px] transition-transform duration-200 ease-out will-change-transform shadow-[0_16px_40px_-16px_rgba(91,76,230,0.45)]\"\n style={{\n background: FRAME_GRADIENT,\n transform:\n \"rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--pop, 1))\",\n transformStyle: \"preserve-3d\",\n }}\n >\n <div\n className=\"relative rounded-[22.5px] overflow-hidden text-white ring-1 ring-inset ring-white/[0.06]\"\n style={{ background: MATERIAL }}\n >\n {/* Artwork — inset like a printed trading card */}\n <div className=\"p-2.5 pb-0\">\n <div className=\"relative aspect-[4/5] w-full overflow-hidden rounded-[16px] ring-1 ring-white/10\">\n {image ? (\n // eslint-disable-next-line @next/next/no-img-element\n <img src={image} alt={displayName} className=\"h-full w-full object-cover\" />\n ) : (\n <div\n className=\"h-full w-full flex items-center justify-center\"\n style={{ background: FRAME_GRADIENT, opacity: 0.9 }}\n >\n <span\n className=\"text-7xl font-black text-white/90\"\n style={{ fontFamily: \"var(--font-display, inherit)\" }}\n >\n {monogram}\n </span>\n </div>\n )}\n {/* Bottom scrim for depth against the meta block */}\n <div\n aria-hidden\n className=\"pointer-events-none absolute inset-x-0 bottom-0 h-16\"\n style={{ background: \"linear-gradient(to top, rgba(10,14,31,0.45), transparent)\" }}\n />\n </div>\n </div>\n\n {/* Holographic sheen — visible at rest, blooms and tracks on hover */}\n <div\n aria-hidden\n className=\"pointer-events-none absolute inset-0 opacity-40 group-hover:opacity-100 transition-opacity duration-300\"\n style={{\n background: `radial-gradient(420px circle at var(--mx, 70%) var(--my, 20%), rgba(255,255,255,0.20), transparent 45%),\n linear-gradient(115deg, rgba(59,123,255,0.14), rgba(138,92,246,0.14) 35%, rgba(246,96,143,0.14) 65%, rgba(251,139,70,0.14))`,\n mixBlendMode: \"screen\",\n }}\n />\n\n {/* Meta */}\n <div className=\"relative px-4 pt-3 pb-4\">\n <div className=\"flex items-start gap-2\">\n <p\n className=\"min-w-0 flex-1 text-[18px] font-bold leading-snug truncate\"\n style={{ fontFamily: \"var(--font-display, inherit)\" }}\n >\n {displayName}\n </p>\n {serial && (\n <span className=\"mt-0.5 shrink-0 rounded-full bg-white/10 px-2 py-0.5 text-[11px] font-semibold text-white/80 tabular-nums\">\n {serial}\n </span>\n )}\n </div>\n {collection && (\n <p className=\"mt-0.5 text-[12.5px] text-white/55 truncate\">{collection}</p>\n )}\n <div className=\"my-3 h-px bg-white/10\" />\n <div className=\"flex items-center gap-2\">\n <span\n aria-hidden\n className=\"h-3.5 w-3.5 rounded-full shrink-0\"\n style={{ background: FRAME_GRADIENT }}\n />\n <span className=\"text-[9px] font-bold tracking-[0.18em] text-white/50\">\n MEDIALANE\n </span>\n {creator && (\n <span className=\"ml-auto min-w-0 truncate text-[11px] text-white/55 tabular-nums\">\n {creator}\n </span>\n )}\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}\n"],"mappings":"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","names":[]}
|
|
@@ -7,7 +7,7 @@ interface MedialaneCollectionCardProps {
|
|
|
7
7
|
name?: string;
|
|
8
8
|
/** Secondary line under the name (collection name, symbol, ticker…). */
|
|
9
9
|
collection?: string;
|
|
10
|
-
/** Edition or serial shown
|
|
10
|
+
/** Edition or serial shown as a pill, e.g. "#42" or "1 / 300". */
|
|
11
11
|
serial?: string;
|
|
12
12
|
/** Creator display name or shortened address. */
|
|
13
13
|
creator?: string;
|
|
@@ -15,9 +15,10 @@ interface MedialaneCollectionCardProps {
|
|
|
15
15
|
}
|
|
16
16
|
/** The Medialane Collection Card — a branded collectors-card preview of an
|
|
17
17
|
* asset or collection. A self-contained dark collectible object (identical in
|
|
18
|
-
* both themes): brand-spectrum frame,
|
|
19
|
-
* sheen, display-face name,
|
|
20
|
-
* width — size it with the parent
|
|
18
|
+
* both themes): brand-spectrum frame, inset artwork on foil-tinted material,
|
|
19
|
+
* pointer-tracked 3D tilt + holographic sheen, display-face name, serial
|
|
20
|
+
* pill, Medialane maker's mark. Fluid width — size it with the parent
|
|
21
|
+
* container. Pure presentation. */
|
|
21
22
|
declare function MedialaneCollectionCard({ image, name, collection, serial, creator, className, }: MedialaneCollectionCardProps): react_jsx_runtime.JSX.Element;
|
|
22
23
|
|
|
23
24
|
export { MedialaneCollectionCard, type MedialaneCollectionCardProps };
|
|
@@ -7,7 +7,7 @@ interface MedialaneCollectionCardProps {
|
|
|
7
7
|
name?: string;
|
|
8
8
|
/** Secondary line under the name (collection name, symbol, ticker…). */
|
|
9
9
|
collection?: string;
|
|
10
|
-
/** Edition or serial shown
|
|
10
|
+
/** Edition or serial shown as a pill, e.g. "#42" or "1 / 300". */
|
|
11
11
|
serial?: string;
|
|
12
12
|
/** Creator display name or shortened address. */
|
|
13
13
|
creator?: string;
|
|
@@ -15,9 +15,10 @@ interface MedialaneCollectionCardProps {
|
|
|
15
15
|
}
|
|
16
16
|
/** The Medialane Collection Card — a branded collectors-card preview of an
|
|
17
17
|
* asset or collection. A self-contained dark collectible object (identical in
|
|
18
|
-
* both themes): brand-spectrum frame,
|
|
19
|
-
* sheen, display-face name,
|
|
20
|
-
* width — size it with the parent
|
|
18
|
+
* both themes): brand-spectrum frame, inset artwork on foil-tinted material,
|
|
19
|
+
* pointer-tracked 3D tilt + holographic sheen, display-face name, serial
|
|
20
|
+
* pill, Medialane maker's mark. Fluid width — size it with the parent
|
|
21
|
+
* container. Pure presentation. */
|
|
21
22
|
declare function MedialaneCollectionCard({ image, name, collection, serial, creator, className, }: MedialaneCollectionCardProps): react_jsx_runtime.JSX.Element;
|
|
22
23
|
|
|
23
24
|
export { MedialaneCollectionCard, type MedialaneCollectionCardProps };
|
|
@@ -3,6 +3,9 @@ import { jsx, jsxs } from "react/jsx-runtime";
|
|
|
3
3
|
import { useRef } from "react";
|
|
4
4
|
import { cn } from "../utils/cn.js";
|
|
5
5
|
const FRAME_GRADIENT = "linear-gradient(135deg, #3b7bff, #8a5cf6 38%, #f6608f 70%, #fb8b46)";
|
|
6
|
+
const MATERIAL = `radial-gradient(120% 90% at 0% 0%, rgba(59,123,255,0.14), transparent 55%),
|
|
7
|
+
radial-gradient(120% 90% at 100% 100%, rgba(251,139,70,0.10), transparent 55%),
|
|
8
|
+
#0a0e1f`;
|
|
6
9
|
function MedialaneCollectionCard({
|
|
7
10
|
image,
|
|
8
11
|
name,
|
|
@@ -19,16 +22,18 @@ function MedialaneCollectionCard({
|
|
|
19
22
|
const rect = el.getBoundingClientRect();
|
|
20
23
|
const x = (e.clientX - rect.left) / rect.width;
|
|
21
24
|
const y = (e.clientY - rect.top) / rect.height;
|
|
22
|
-
el.style.setProperty("--rx", `${(0.5 - y) *
|
|
23
|
-
el.style.setProperty("--ry", `${(x - 0.5) *
|
|
25
|
+
el.style.setProperty("--rx", `${(0.5 - y) * 9}deg`);
|
|
26
|
+
el.style.setProperty("--ry", `${(x - 0.5) * 9}deg`);
|
|
24
27
|
el.style.setProperty("--mx", `${x * 100}%`);
|
|
25
28
|
el.style.setProperty("--my", `${y * 100}%`);
|
|
29
|
+
el.style.setProperty("--pop", "1.015");
|
|
26
30
|
};
|
|
27
31
|
const handleLeave = () => {
|
|
28
32
|
const el = frameRef.current;
|
|
29
33
|
if (!el) return;
|
|
30
34
|
el.style.setProperty("--rx", "0deg");
|
|
31
35
|
el.style.setProperty("--ry", "0deg");
|
|
36
|
+
el.style.setProperty("--pop", "1");
|
|
32
37
|
};
|
|
33
38
|
const displayName = name?.trim() || "Untitled";
|
|
34
39
|
const monogram = displayName[0]?.toUpperCase() ?? "M";
|
|
@@ -38,71 +43,88 @@ function MedialaneCollectionCard({
|
|
|
38
43
|
ref: frameRef,
|
|
39
44
|
onPointerMove: handleMove,
|
|
40
45
|
onPointerLeave: handleLeave,
|
|
41
|
-
className: "rounded-[24px] p-[1.5px] transition-transform duration-200 ease-out will-change-transform",
|
|
46
|
+
className: "rounded-[24px] p-[1.5px] transition-transform duration-200 ease-out will-change-transform shadow-[0_16px_40px_-16px_rgba(91,76,230,0.45)]",
|
|
42
47
|
style: {
|
|
43
48
|
background: FRAME_GRADIENT,
|
|
44
|
-
transform: "rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg))",
|
|
49
|
+
transform: "rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--pop, 1))",
|
|
45
50
|
transformStyle: "preserve-3d"
|
|
46
51
|
},
|
|
47
|
-
children: /* @__PURE__ */ jsxs(
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
{
|
|
82
|
-
className: "text-[17px] font-bold leading-snug truncate",
|
|
83
|
-
style: { fontFamily: "var(--font-display, inherit)" },
|
|
84
|
-
children: displayName
|
|
85
|
-
}
|
|
86
|
-
),
|
|
87
|
-
(collection || serial) && /* @__PURE__ */ jsxs("div", { className: "mt-0.5 flex items-baseline gap-2", children: [
|
|
88
|
-
collection && /* @__PURE__ */ jsx("p", { className: "text-[12.5px] text-white/60 truncate", children: collection }),
|
|
89
|
-
serial && /* @__PURE__ */ jsx("p", { className: "ml-auto shrink-0 text-[12.5px] text-white/80 tabular-nums", children: serial })
|
|
90
|
-
] }),
|
|
91
|
-
/* @__PURE__ */ jsx("div", { className: "my-3 h-px bg-white/10" }),
|
|
92
|
-
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
|
|
52
|
+
children: /* @__PURE__ */ jsxs(
|
|
53
|
+
"div",
|
|
54
|
+
{
|
|
55
|
+
className: "relative rounded-[22.5px] overflow-hidden text-white ring-1 ring-inset ring-white/[0.06]",
|
|
56
|
+
style: { background: MATERIAL },
|
|
57
|
+
children: [
|
|
58
|
+
/* @__PURE__ */ jsx("div", { className: "p-2.5 pb-0", children: /* @__PURE__ */ jsxs("div", { className: "relative aspect-[4/5] w-full overflow-hidden rounded-[16px] ring-1 ring-white/10", children: [
|
|
59
|
+
image ? (
|
|
60
|
+
// eslint-disable-next-line @next/next/no-img-element
|
|
61
|
+
/* @__PURE__ */ jsx("img", { src: image, alt: displayName, className: "h-full w-full object-cover" })
|
|
62
|
+
) : /* @__PURE__ */ jsx(
|
|
63
|
+
"div",
|
|
64
|
+
{
|
|
65
|
+
className: "h-full w-full flex items-center justify-center",
|
|
66
|
+
style: { background: FRAME_GRADIENT, opacity: 0.9 },
|
|
67
|
+
children: /* @__PURE__ */ jsx(
|
|
68
|
+
"span",
|
|
69
|
+
{
|
|
70
|
+
className: "text-7xl font-black text-white/90",
|
|
71
|
+
style: { fontFamily: "var(--font-display, inherit)" },
|
|
72
|
+
children: monogram
|
|
73
|
+
}
|
|
74
|
+
)
|
|
75
|
+
}
|
|
76
|
+
),
|
|
77
|
+
/* @__PURE__ */ jsx(
|
|
78
|
+
"div",
|
|
79
|
+
{
|
|
80
|
+
"aria-hidden": true,
|
|
81
|
+
className: "pointer-events-none absolute inset-x-0 bottom-0 h-16",
|
|
82
|
+
style: { background: "linear-gradient(to top, rgba(10,14,31,0.45), transparent)" }
|
|
83
|
+
}
|
|
84
|
+
)
|
|
85
|
+
] }) }),
|
|
93
86
|
/* @__PURE__ */ jsx(
|
|
94
|
-
"
|
|
87
|
+
"div",
|
|
95
88
|
{
|
|
96
89
|
"aria-hidden": true,
|
|
97
|
-
className: "
|
|
98
|
-
style: {
|
|
90
|
+
className: "pointer-events-none absolute inset-0 opacity-40 group-hover:opacity-100 transition-opacity duration-300",
|
|
91
|
+
style: {
|
|
92
|
+
background: `radial-gradient(420px circle at var(--mx, 70%) var(--my, 20%), rgba(255,255,255,0.20), transparent 45%),
|
|
93
|
+
linear-gradient(115deg, rgba(59,123,255,0.14), rgba(138,92,246,0.14) 35%, rgba(246,96,143,0.14) 65%, rgba(251,139,70,0.14))`,
|
|
94
|
+
mixBlendMode: "screen"
|
|
95
|
+
}
|
|
99
96
|
}
|
|
100
97
|
),
|
|
101
|
-
/* @__PURE__ */
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
98
|
+
/* @__PURE__ */ jsxs("div", { className: "relative px-4 pt-3 pb-4", children: [
|
|
99
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
|
|
100
|
+
/* @__PURE__ */ jsx(
|
|
101
|
+
"p",
|
|
102
|
+
{
|
|
103
|
+
className: "min-w-0 flex-1 text-[18px] font-bold leading-snug truncate",
|
|
104
|
+
style: { fontFamily: "var(--font-display, inherit)" },
|
|
105
|
+
children: displayName
|
|
106
|
+
}
|
|
107
|
+
),
|
|
108
|
+
serial && /* @__PURE__ */ jsx("span", { className: "mt-0.5 shrink-0 rounded-full bg-white/10 px-2 py-0.5 text-[11px] font-semibold text-white/80 tabular-nums", children: serial })
|
|
109
|
+
] }),
|
|
110
|
+
collection && /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-[12.5px] text-white/55 truncate", children: collection }),
|
|
111
|
+
/* @__PURE__ */ jsx("div", { className: "my-3 h-px bg-white/10" }),
|
|
112
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
|
|
113
|
+
/* @__PURE__ */ jsx(
|
|
114
|
+
"span",
|
|
115
|
+
{
|
|
116
|
+
"aria-hidden": true,
|
|
117
|
+
className: "h-3.5 w-3.5 rounded-full shrink-0",
|
|
118
|
+
style: { background: FRAME_GRADIENT }
|
|
119
|
+
}
|
|
120
|
+
),
|
|
121
|
+
/* @__PURE__ */ jsx("span", { className: "text-[9px] font-bold tracking-[0.18em] text-white/50", children: "MEDIALANE" }),
|
|
122
|
+
creator && /* @__PURE__ */ jsx("span", { className: "ml-auto min-w-0 truncate text-[11px] text-white/55 tabular-nums", children: creator })
|
|
123
|
+
] })
|
|
124
|
+
] })
|
|
125
|
+
]
|
|
126
|
+
}
|
|
127
|
+
)
|
|
106
128
|
}
|
|
107
129
|
) });
|
|
108
130
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/medialane-collection-card.tsx"],"sourcesContent":["\"use client\";\n\nimport { useRef } from \"react\";\nimport { cn } from \"../utils/cn.js\";\n\nexport interface MedialaneCollectionCardProps {\n /** Resolved, browser-loadable image URL. Empty → branded monogram placeholder. */\n image?: string | null;\n /** Asset or collection name. */\n name?: string;\n /** Secondary line under the name (collection name, symbol, ticker…). */\n collection?: string;\n /** Edition or serial shown
|
|
1
|
+
{"version":3,"sources":["../../src/components/medialane-collection-card.tsx"],"sourcesContent":["\"use client\";\n\nimport { useRef } from \"react\";\nimport { cn } from \"../utils/cn.js\";\n\nexport interface MedialaneCollectionCardProps {\n /** Resolved, browser-loadable image URL. Empty → branded monogram placeholder. */\n image?: string | null;\n /** Asset or collection name. */\n name?: string;\n /** Secondary line under the name (collection name, symbol, ticker…). */\n collection?: string;\n /** Edition or serial shown as a pill, e.g. \"#42\" or \"1 / 300\". */\n serial?: string;\n /** Creator display name or shortened address. */\n creator?: string;\n className?: string;\n}\n\nconst FRAME_GRADIENT =\n \"linear-gradient(135deg, #3b7bff, #8a5cf6 38%, #f6608f 70%, #fb8b46)\";\n\n/** Foil tints on the card material — faint brand radials, like printed foil. */\nconst MATERIAL =\n `radial-gradient(120% 90% at 0% 0%, rgba(59,123,255,0.14), transparent 55%),\n radial-gradient(120% 90% at 100% 100%, rgba(251,139,70,0.10), transparent 55%),\n #0a0e1f`;\n\n/** The Medialane Collection Card — a branded collectors-card preview of an\n * asset or collection. A self-contained dark collectible object (identical in\n * both themes): brand-spectrum frame, inset artwork on foil-tinted material,\n * pointer-tracked 3D tilt + holographic sheen, display-face name, serial\n * pill, Medialane maker's mark. Fluid width — size it with the parent\n * container. Pure presentation. */\nexport function MedialaneCollectionCard({\n image,\n name,\n collection,\n serial,\n creator,\n className,\n}: MedialaneCollectionCardProps) {\n const frameRef = useRef<HTMLDivElement>(null);\n\n const handleMove = (e: React.PointerEvent<HTMLDivElement>) => {\n const el = frameRef.current;\n if (!el || e.pointerType !== \"mouse\") return;\n if (window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches) return;\n const rect = el.getBoundingClientRect();\n const x = (e.clientX - rect.left) / rect.width;\n const y = (e.clientY - rect.top) / rect.height;\n el.style.setProperty(\"--rx\", `${(0.5 - y) * 9}deg`);\n el.style.setProperty(\"--ry\", `${(x - 0.5) * 9}deg`);\n el.style.setProperty(\"--mx\", `${x * 100}%`);\n el.style.setProperty(\"--my\", `${y * 100}%`);\n el.style.setProperty(\"--pop\", \"1.015\");\n };\n\n const handleLeave = () => {\n const el = frameRef.current;\n if (!el) return;\n el.style.setProperty(\"--rx\", \"0deg\");\n el.style.setProperty(\"--ry\", \"0deg\");\n el.style.setProperty(\"--pop\", \"1\");\n };\n\n const displayName = name?.trim() || \"Untitled\";\n const monogram = displayName[0]?.toUpperCase() ?? \"M\";\n\n return (\n <div className={cn(\"group\", className)} style={{ perspective: \"1000px\" }}>\n <div\n ref={frameRef}\n onPointerMove={handleMove}\n onPointerLeave={handleLeave}\n className=\"rounded-[24px] p-[1.5px] transition-transform duration-200 ease-out will-change-transform shadow-[0_16px_40px_-16px_rgba(91,76,230,0.45)]\"\n style={{\n background: FRAME_GRADIENT,\n transform:\n \"rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--pop, 1))\",\n transformStyle: \"preserve-3d\",\n }}\n >\n <div\n className=\"relative rounded-[22.5px] overflow-hidden text-white ring-1 ring-inset ring-white/[0.06]\"\n style={{ background: MATERIAL }}\n >\n {/* Artwork — inset like a printed trading card */}\n <div className=\"p-2.5 pb-0\">\n <div className=\"relative aspect-[4/5] w-full overflow-hidden rounded-[16px] ring-1 ring-white/10\">\n {image ? (\n // eslint-disable-next-line @next/next/no-img-element\n <img src={image} alt={displayName} className=\"h-full w-full object-cover\" />\n ) : (\n <div\n className=\"h-full w-full flex items-center justify-center\"\n style={{ background: FRAME_GRADIENT, opacity: 0.9 }}\n >\n <span\n className=\"text-7xl font-black text-white/90\"\n style={{ fontFamily: \"var(--font-display, inherit)\" }}\n >\n {monogram}\n </span>\n </div>\n )}\n {/* Bottom scrim for depth against the meta block */}\n <div\n aria-hidden\n className=\"pointer-events-none absolute inset-x-0 bottom-0 h-16\"\n style={{ background: \"linear-gradient(to top, rgba(10,14,31,0.45), transparent)\" }}\n />\n </div>\n </div>\n\n {/* Holographic sheen — visible at rest, blooms and tracks on hover */}\n <div\n aria-hidden\n className=\"pointer-events-none absolute inset-0 opacity-40 group-hover:opacity-100 transition-opacity duration-300\"\n style={{\n background: `radial-gradient(420px circle at var(--mx, 70%) var(--my, 20%), rgba(255,255,255,0.20), transparent 45%),\n linear-gradient(115deg, rgba(59,123,255,0.14), rgba(138,92,246,0.14) 35%, rgba(246,96,143,0.14) 65%, rgba(251,139,70,0.14))`,\n mixBlendMode: \"screen\",\n }}\n />\n\n {/* Meta */}\n <div className=\"relative px-4 pt-3 pb-4\">\n <div className=\"flex items-start gap-2\">\n <p\n className=\"min-w-0 flex-1 text-[18px] font-bold leading-snug truncate\"\n style={{ fontFamily: \"var(--font-display, inherit)\" }}\n >\n {displayName}\n </p>\n {serial && (\n <span className=\"mt-0.5 shrink-0 rounded-full bg-white/10 px-2 py-0.5 text-[11px] font-semibold text-white/80 tabular-nums\">\n {serial}\n </span>\n )}\n </div>\n {collection && (\n <p className=\"mt-0.5 text-[12.5px] text-white/55 truncate\">{collection}</p>\n )}\n <div className=\"my-3 h-px bg-white/10\" />\n <div className=\"flex items-center gap-2\">\n <span\n aria-hidden\n className=\"h-3.5 w-3.5 rounded-full shrink-0\"\n style={{ background: FRAME_GRADIENT }}\n />\n <span className=\"text-[9px] font-bold tracking-[0.18em] text-white/50\">\n MEDIALANE\n </span>\n {creator && (\n <span className=\"ml-auto min-w-0 truncate text-[11px] text-white/55 tabular-nums\">\n {creator}\n </span>\n )}\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}\n"],"mappings":"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","names":[]}
|