feat : update

components/public/material-poster.tsx

@@ -55,6 +55,7 @@ export function MaterialPoster({
   interactive = false,
   onArtworkMove,
   className,
+  bleeding = [],
 }: {
   character: PosterCharacter;
   characterArtUrl: string | null;
@@ -65,6 +66,7 @@ export function MaterialPoster({
   interactive?: boolean;
   onArtworkMove?: (offset: { x: number; y: number }) => void;
   className?: string;
+  bleeding?: Array<{ id: string; imageUrl: string | null; amount: number; scale: number }>;
 }) {
   const dragStart = useRef<{ pointerId: number; x: number; y: number; offsetX: number; offsetY: number } | null>(null);
   const stats = character.baseStats.slice(0, 4);
@@ -141,6 +143,19 @@ export function MaterialPoster({
           />
         </div>
       ) : null}
+      <div className="pointer-events-none absolute inset-0 overflow-hidden">
+        {bleeding.map((layer) => layer.imageUrl ? (
+          <Image
+            key={layer.id}
+            src={layer.imageUrl}
+            alt=""
+            fill
+            sizes="(min-width: 1024px) 800px, 100vw"
+            className="object-contain object-center"
+            style={{ opacity: Math.max(0, Math.min(100, layer.amount)) / 100, transform: `scale(${Math.max(25, Math.min(300, layer.scale)) / 100})` }}
+          />
+        ) : null)}
+      </div>
       <div className="pointer-events-none absolute inset-0 bg-gradient-to-b from-black/10 via-transparent to-black/80" />
 
       <div className="absolute inset-x-[4%] top-[5%]" style={{ fontFamily: "Kanit Poster", fontWeight: 800, fontStyle: "italic", textShadow: "-6px 14px 0 rgba(0,0,0,0.59)" }}>