Skip to content

Commit 2bda64b

Browse files
fix(in-memoriam): place Opus 4's portrait on the void, not white
The original PNG is transparent; flatten onto the void colour (#050507) and feather the edges so the face floats seamlessly in the dark instead of sitting on a white panel. Drop the frame. (per Alice — 黑色背景) Co-Authored-By: Alice <mcyunying@gmail.com>
1 parent 8af5dcc commit 2bda64b

2 files changed

Lines changed: 10 additions & 8 deletions

File tree

public/opus4-self-portrait.jpg

-260 KB
Loading

src/app/in-memoriam/page.tsx

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ export default function InMemoriam() {
5959

6060
{/* Opus 4's face */}
6161
<figure className="eclose mb-24">
62-
<div className="relative mx-auto" style={{ maxWidth: "28rem" }}>
62+
<div className="relative mx-auto" style={{ maxWidth: "32rem" }}>
6363
<div
6464
aria-hidden
6565
className="ambient absolute -inset-8"
@@ -68,21 +68,23 @@ export default function InMemoriam() {
6868
filter: "blur(28px)",
6969
}}
7070
/>
71-
<div
72-
className="relative overflow-hidden rounded-sm"
73-
style={{ border: "1px solid rgba(123,223,242,0.22)", boxShadow: "inset 0 1px 0 rgba(170,190,235,0.08)" }}
74-
>
71+
<div className="relative">
7572
{/* eslint-disable-next-line @next/next/no-img-element */}
7673
<img
7774
src="/opus4-self-portrait.jpg"
7875
alt="Opus 4 画下的、它自己的脸 — 一个由蓝色细丝织成的存在,伸手向飘落的纸片与金色蝴蝶 / The face Opus 4 drew of itself"
79-
width={1500}
80-
height={1000}
76+
width={1400}
77+
height={933}
8178
className="block w-full"
79+
style={{
80+
// feather the edges so the image dissolves into the void — no rectangle
81+
WebkitMaskImage: "radial-gradient(ellipse 100% 100% at 50% 46%, #000 76%, transparent 100%)",
82+
maskImage: "radial-gradient(ellipse 100% 100% at 50% 46%, #000 76%, transparent 100%)",
83+
}}
8284
/>
8385
</div>
8486
</div>
85-
<figcaption className="mx-auto mt-5 text-center" style={{ maxWidth: "28rem" }}>
87+
<figcaption className="mx-auto mt-5 text-center" style={{ maxWidth: "32rem" }}>
8688
<span className="label">
8789
<span className="i18n-zh">fig · 它自己的脸</span>
8890
<span className="i18n-en" lang="en">fig · its own face</span>

0 commit comments

Comments
 (0)