| Input | |
|---|---|
| 0 | witness #0 |
| 1 | witness #0#1utf8 [�;9i�WYV�-��8���h���asٛ��-|�R� cord text/html ��/��l��f�5c��! C?1�ߞ�q�Mh �
l�A&��)^1~�r"r>����� ���b����5KfHdM$�J|�+�i�����M�E��<�s�
#/�Dy��G�}P1&�vI�p�u ʩ����6u�.�cK��hڦ@���!����E/���{)�l���6` �i\���qd�U�&���J�I����!���&�D
$w���+�2(,H�!r0{1��P�dv7Jw;�W��(���$N�vv>�H}��3��J�)k�[�M�_r�N:N��"�x�e�������}r�X딀�D�j�ʙM����:�Y����f� Mk��{/�����'�y���W���W��g->u
>XX�����J�nwwa��Z���|�uL}��}6�jSL���M�f���uC�[aԗ������7cQ��
:�`>�*�^��R��X�)����֬h&��y�������d��R��s?wn�|G�y2�6���`��e�#���Ch�|�o���v@����5�%��
�:�
l�<vԔ M�L{�T#u��oNG�c��� $dC�[I��V*Ӡ?��.�vYd%���{2.�R?�C���ʀ�1�Q��Z������DLG=x,��$t��0�F���fX/Rmry�#j7�VRX�� �(����br M<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Generative Composition by Lemonhaze</title>
<!--Generative Composition by Lemonhaze-->
<!--
An amalgam of mini-series and 1/1s where I'm learning to make art with code.
Each of the works presented in this heterogeneous series was personally curated
from my early days of experimentation with generative art where I explored various themes, Mtextures, and compositions.
Additional note: Visit the official ordinals content link of the inscription and press 'S' on your keyboard to download the high resolution PNG.
Tuesday July 14, 2026 - Griffintown, Montreal, Quebec, Canada
-FNST
-->
<style>
:root {
--viewport-pad: clamp(18px, 2.8vmin, 34px);
--poster-size: min(
calc(100vw - (var(--viewport-pad) * 2)),
calc(100dvh - (var(--viewport-pad) * 2))
);
--poster-radiusM: clamp(1px, 0.22vw, 3px);
--spec-x: 48%;
--spec-y: 18%;
--spec-str: 0.26;
--blue-0: hsl(286 15.680000000000001% 7%);
--blue-1: hsl(286 23.52% 13%);
--blue-2: hsl(286 31.360000000000003% 24%);
--blue-3: hsl(258 37.800000000000004% 38%);
--blue-4: hsl(258 50.4% 54%);
--blue-5: hsl(258 44.800000000000004% 68%);
--blue-6: hsl(258 29.4% 82%);
--blue-7: hsl(258 14% 94%);
--blue-flat: hsl(258 36.4% 60%);
--blue-shadow:M hsl(286 32% 6% / 0.78);
--blue-glow: hsl(258 49% 64% / 0.26);
--frame-shadow:
0 0 0 1px hsl(286 34% 10% / 0.08),
0 18px 44px hsl(286 24% 6% / 0.16);
--front-fill:
radial-gradient(
ellipse 54% 30% at 50% 47%,
hsl(258 25.2% 90% / 0.11) 0%,
hsl(258 39.2% 60% / 0.06) 34%,
transparent 66%
),
linear-gradient(
180deg,
hsl(286 24% 5% / 0.99) 0%,
hsl(286 18% 4% / 0.99M) 100%
);
}
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
width: 100%;
min-height: 100%;
background: transparent;
color: #f4fbff;
}
html {
height: 100%;
}
body {
display: grid;
place-items: center;
width: 100%;
min-height: 100vh;
min-height: 100svh;
min-height: 100dvh;
padding: var(--viewport-pad);
font-family: "Iowan Old MStyle", "Palatino Linotype", "Book Antiqua",
Baskerville, Georgia, serif;
overflow: auto;
}
.card-stage {
width: 100%;
min-height: calc(100vh - (var(--viewport-pad) * 2));
min-height: calc(100svh - (var(--viewport-pad) * 2));
min-height: calc(100dvh - (var(--viewport-pad) * 2));
display: grid;
place-items: center;
}
.card-shell {
position: relative;
width: var(--poster-size);
max-width: 100%;
Maspect-ratio: 1;
cursor: pointer;
background: transparent;
isolation: isolate;
}
.card-shell:focus-visible {
outline: 2px solid hsl(258 43.4% 76% / 0.58);
outline-offset: 8px;
}
.card-inner {
position: relative;
width: 100%;
height: 100%;
}
.card-face {
position: absolute;
inset: 0;
border-radius: var(--poster-radius);
overflow: hidden;
box-shadow:
0 0 0 1px rgba(1M3, 27, 43, 0.08),
0 14px 38px rgba(8, 16, 28, 0.08);
transition:
opacity 0.82s cubic-bezier(0.22, 0.72, 0.16, 1),
transform 0.82s cubic-bezier(0.22, 0.72, 0.16, 1),
filter 0.82s cubic-bezier(0.22, 0.72, 0.16, 1);
}
.card-front {
opacity: 1;
transform: scale(1);
filter: blur(0);
}
.card-back {
background:
radial-gradient(
ellipse 74% 54% at 50% 12%,
hsl(258 33.6% 82% / 0.18) 0%,M
transparent 72%
),
linear-gradient(
180deg,
rgba(12, 12, 12, 0.98) 0%,
rgba(8, 8, 8, 0.95) 54%,
rgba(4, 4, 4, 0.99) 100%
);
border: 1px solid hsl(258 18.2% 82% / 0.16);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.08),
inset 0 0 0 1px hsl(258 28% 42% / 0.22);
color: hsl(258 12.6% 96%);
opacity: 0;
transform: scale(0.982) translateY(16px);
filter: blur(18pxM);
pointer-events: none;
}
.card-shell.is-revealed .card-front {
opacity: 0;
transform: scale(1.035);
filter: blur(24px) saturate(0.9);
pointer-events: none;
}
.card-shell.is-revealed .card-back {
opacity: 1;
transform: scale(1) translateY(0);
filter: blur(0);
pointer-events: auto;
}
.surface {
position: relative;
width: 100%;
height: 100%;
border-radius: inherit;
ovMerflow: hidden;
background: var(--front-fill);
box-shadow: var(--frame-shadow);
isolation: isolate;
}
.surface::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background:
radial-gradient(
ellipse 30% 16% at 50% 48%,
hsl(258 16.8% 96% / 0.12) 0%,
hsl(258 30.8% 76% / 0.07) 34%,
transparent 72%
),
radial-gradient(
M ellipse 120% 120% at 50% 50%,
transparent 58%,
rgba(5, 8, 12, 0.12) 100%
);
mix-blend-mode: screen;
}
.surface::after {
content: "";
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
background:
linear-gradient(
180deg,
rgba(4, 12, 20, 0.18) 0%,
transparent 18%,
transparent 82%,
rgba(2, 6, 10, 0.24) 100%
),
M radial-gradient(
ellipse 98% 112% at 50% 50%,
transparent 52%,
rgba(0, 0, 0, 0.24) 100%
);
}
.atmosphere {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background:
radial-gradient(
ellipse 44% 22% at 50% 48%,
hsl(258 18% 92% / 0.08) 0%,
hsl(258 29.4% 68% / 0.04) 42%,
transparent 72%
),
radial-gradient(
ellipMse 70% 56% at 50% 62%,
hsl(286 11.200000000000001% 18% / 0.1) 0%,
transparent 76%
);
filter: blur(14px);
}
.quiet-frame {
position: absolute;
inset: 1.2%;
z-index: 5;
pointer-events: none;
border-radius: max(0px, calc(var(--poster-radius) + 1px));
border: 1px solid hsl(258 12.6% 96% / 0.16);
box-shadow:
inset 0 0 0 1px hsl(258 22.400000000000002% 48% / 0.22),
inset 0 24px 34px rgba(255,M 255, 255, 0.03),
inset 0 -24px 36px rgba(0, 0, 0, 0.1);
}
.masthead {
position: absolute;
top: 50%;
left: 50%;
z-index: 4;
width: min(84%, 780px);
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(14px, 1.65vw, 22px);
text-align: center;
}
.mist {
position: absolute;
inset: -8% 8% -18%;
z-index: -1;
border-Mradius: 999px;
background:
radial-gradient(
ellipse 48% 30% at 50% 54%,
hsl(258 19.6% 92% / 0.11) 0%,
hsl(258 33.6% 72% / 0.06) 36%,
transparent 70%
);
filter: blur(clamp(18px, 2vw, 28px));
opacity: 0.54;
}
.title,
.subtitle,
.back-title,
.back-byline {
margin: 0;
position: relative;
font-style: italic;
}
.title,
.subtitle {
white-space: nowrapM;
}
.title,
.back-title {
font-family: "Apple Chancery", "Snell Roundhand", "Iowan Old Style",
"Palatino Linotype", serif;
font-weight: 700;
letter-spacing: -0.03em;
}
.title {
font-size: 126px;
line-height: 0.9;
}
.subtitle,
.back-byline {
font-family: "Apple Chancery", "Snell Roundhand", "Iowan Old Style",
"Palatino Linotype", serif;
font-weight: 700;
letter-spacing: -0.03em;
M }
.subtitle {
font-size: 56px;
line-height: 0.94;
}
.liquid-blue {
color: var(--blue-flat);
text-shadow:
0 1px 0 rgba(255, 255, 255, 0.12),
0 2px 4px rgba(12, 10, 10, 0.38),
0 10px 28px var(--blue-shadow),
0 0 22px var(--blue-glow);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
.liquid-blue {
background-image:
radial-gradient(
ellipse 84%M 74% at var(--spec-x) var(--spec-y),
rgba(255, 255, 255, calc(0.12 + var(--spec-str) * 0.24)) 0%,
rgba(255, 255, 255, calc(0.04 + var(--spec-str) * 0.08)) 30%,
transparent 64%
),
linear-gradient(
112deg,
var(--blue-0) 0%,
var(--blue-1) 12%,
var(--blue-2) 24%,
var(--blue-4) 35%,
var(--blue-6) 42%,
var(--blue-3) 48%,
var(--blue-1) 59%,
M var(--blue-7) 67%,
var(--blue-4) 76%,
var(--blue-2) 84%,
var(--blue-1) 100%
),
linear-gradient(
96deg,
transparent 0%,
rgba(255, 255, 255, 0.04) 29%,
rgba(255, 255, 255, 0.52) 45%,
rgba(255, 255, 255, 0.18) 55%,
transparent 68%
);
background-size: 160% 170%, 220% 220%, 180% 100%;
background-position: 0% 0%, 6% 50%, 126% 50%;
M -webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
animation: blue-flow 16s ease-in-out infinite alternate;
}
.liquid-blue[data-text]::after {
content: attr(data-text);
position: absolute;
inset: 0;
pointer-events: none;
color: transparent;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
backgMround-clip: text;
background-image: linear-gradient(
94deg,
transparent 0%,
transparent 34%,
rgba(255, 255, 255, 0.06) 41%,
rgba(255, 255, 255, 0.96) 48%,
rgba(255, 255, 255, 0.46) 54%,
transparent 62%,
transparent 100%
);
background-size: 220% 100%;
background-position: 136% 50%;
opacity: 0.56;
mix-blend-mode: screen;
filter: blur(0.25px);
aMnimation: blue-shine 8.6s ease-in-out infinite;
}
}
.back-content {
position: relative;
width: 100%;
height: 100%;
padding: clamp(18px, 4.2cqi, 34px) clamp(24px, 6.8cqi, 56px);
display: flex;
flex-direction: column;
justify-content: center;
gap: clamp(12px, 2.4cqi, 18px);
text-align: center;
}
.back-scroll {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
jMustify-content: flex-start;
align-items: center;
gap: clamp(10px, 2cqi, 16px);
overflow: auto;
padding: clamp(16px, 3.2cqi, 30px) clamp(10px, 2.2cqi, 18px);
scrollbar-width: thin;
scrollbar-color: hsl(258 49% 64% / 0.26) transparent;
}
@supports (justify-content: safe center) {
.back-scroll {
justify-content: safe center;
}
}
.back-scroll::-webkit-scrollbar {
width: 8px;
}
.back-scroll::-webkit-sMcrollbar-thumb {
border-radius: 999px;
background: hsl(258 49% 64% / 0.26);
}
.back-title {
max-width: 100%;
font-size: clamp(2rem, 7.3cqi, 4.2rem);
line-height: 1.08;
padding-block: 0.08em 0.04em;
}
.back-byline {
font-size: clamp(1rem, 3.5cqi, 1.8rem);
line-height: 0.96;
color: hsl(258 12.6% 92% / 0.92);
}
.back-year {
margin: 0 auto;
font-size: clamp(0.78rem, 2.2cqi, 1rem);
letteMr-spacing: 0.24em;
text-transform: uppercase;
color: hsl(258 15.4% 84% / 0.7);
}
.back-copy {
margin: 0 auto;
max-width: min(100%, 48ch);
text-align: center;
font-size: clamp(0.82rem, 2.05cqi, 0.96rem);
line-height: 1.5;
color: hsl(258 14% 88% / 0.8);
}
@keyframes blue-flow {
0% { background-position: 0% 0%, 4% 50%, 128% 50%; }
50% { background-position: 0% 0%, 60% 50%, 54% 50%; }
100% { background-posiMtion: 0% 0%, 100% 50%, -12% 50%; }
}
@keyframes blue-shine {
0%, 16%, 100% { background-position: 136% 50%; opacity: 0; }
32% { opacity: 0.68; }
52% { background-position: -44% 50%; opacity: 0.92; }
66% { opacity: 0.1; }
}
@media (max-width: 720px) {
.masthead { width: 90%; }
.back-content { padding: 18px; }
.back-scroll { padding-block: 12px; }
.back-title { font-size: clamp(1.65rem, 8cqi, 3rem); }
.back-copy {
M max-width: min(100%, 42ch);
font-size: clamp(0.78rem, 2.8cqi, 0.9rem);
line-height: 1.45;
}
}
</style>
</head>
<body>
<main class="card-stage">
<article class="card-shell" id="coverCard" tabindex="0" role="button" aria-label="Reveal collection text" aria-pressed="false">
<div class="card-inner">
<section class="card-face card-front">
<div class="surface">
<div class="atmosphere" aria-hidden="true"></div>
M <header class="masthead" aria-label="Generative Composition by Lemonhaze">
<div class="mist" aria-hidden="true"></div>
<h1 class="title liquid-blue" data-text="Generative Composition">Generative Composition</h1>
<p class="subtitle liquid-blue" data-text="by Lemonhaze">by Lemonhaze</p>
</header>
<div class="quiet-frame" aria-hidden="true"></div>
</div>
</section>
<section class="card-face card-back" aria-labMel="Generative Composition info">
<div class="back-content">
<div class="back-scroll">
<h2 class="back-title liquid-blue" data-text="Generative Composition">Generative Composition</h2>
<p class="back-byline liquid-blue" data-text="by Lemonhaze">by Lemonhaze</p>
<p class="back-year">2023</p>
<p class="back-copy">An amalgam of mini-series and 1/1s where I'm learning to make art with code. Each of the works presented in this heteMrogeneous series was personally curated from my early days of experimentation with generative art where I explored various themes, textures, and compositions. Additional note: Visit the official ordinals content link of the inscription and press 'S' on your keyboard to download the high resolution PNG. - Some of the artwork in this series might not render or display properly across all marketplace therefore it's good to keep in mind that the original artwork is always the high resolution PNG located in the HTML filMe of the inscription.</p>
</div>
</div>
</section>
</div>
</article>
</main>
<script>
(() => {
const root = document.documentElement;
const card = document.getElementById('coverCard');
const surface = document.querySelector('.surface');
const masthead = document.querySelector('.masthead');
const title = document.querySelector('.title');
const subtitle = document.querySelector('.subtitle');
functiMon clampValue(value, min, max) { return Math.max(min, Math.min(max, value)); }
function fitTextToWidth(element, options) {
if (!element || !masthead || !surface) return;
const maxSize = options.maxSize;
const minSize = options.minSize;
const widthRatio = options.widthRatio ?? 0.98;
const posterRatio = options.posterRatio ?? 1;
const maxHeightRatio = options.maxHeightRatio ?? 1;
element.style.fontSize = maxSize + 'px';
const avaMilableWidth = masthead.clientWidth * widthRatio;
const naturalWidth = element.scrollWidth;
const surfaceWidthCap = surface.clientWidth * posterRatio;
const surfaceHeightCap = surface.clientHeight * maxHeightRatio;
if (!availableWidth || !naturalWidth || !surfaceWidthCap || !surfaceHeightCap) return;
const widthFitSize = (maxSize * availableWidth) / naturalWidth;
const fittedSize = clampValue(Math.min(maxSize, widthFitSize, surfaceWidthCap, surfaceHeightCapM), minSize, maxSize);
element.style.fontSize = fittedSize.toFixed(2) + 'px';
}
let layoutFrame = 0;
function fitMastheadHeight() {
if (!masthead || !surface || !title || !subtitle) return;
const gap = parseFloat(getComputedStyle(masthead).gap) || 0;
const currentTitle = parseFloat(title.style.fontSize) || 0;
const currentSubtitle = parseFloat(subtitle.style.fontSize) || 0;
const stackHeight = title.getBoundingClientRect().height +M subtitle.getBoundingClientRect().height + gap;
const maxStackHeight = surface.clientHeight * 0.28;
if (!stackHeight || stackHeight <= maxStackHeight) return;
const scale = maxStackHeight / stackHeight;
title.style.fontSize = Math.max(20, currentTitle * scale).toFixed(2) + 'px';
subtitle.style.fontSize = Math.max(14, currentSubtitle * scale).toFixed(2) + 'px';
}
function updateLayout() {
cancelAnimationFrame(layoutFrame);
layoutFMrame = requestAnimationFrame(() => {
fitTextToWidth(title, { maxSize: 126, minSize: 18, widthRatio: 0.98, posterRatio: 0.15, maxHeightRatio: 0.14 });
fitTextToWidth(subtitle, { maxSize: 56, minSize: 14, widthRatio: 0.92, posterRatio: 0.07, maxHeightRatio: 0.075 });
fitMastheadHeight();
});
}
function setSpecular(clientX, clientY, strength = 0.72) {
root.style.setProperty('--spec-x', ((clientX / window.innerWidth) * 100).toFixed(2) + '%');
M root.style.setProperty('--spec-y', ((clientY / window.innerHeight) * 100).toFixed(2) + '%');
root.style.setProperty('--spec-str', String(strength));
}
function resetSpecular() {
root.style.setProperty('--spec-x', '48%');
root.style.setProperty('--spec-y', '18%');
root.style.setProperty('--spec-str', '0.34');
}
function setRevealed(force) {
if (!card) return;
const nextState = typeof force === 'boolean' ? force : !carMd.classList.contains('is-revealed');
card.classList.toggle('is-revealed', nextState);
card.setAttribute('aria-label', nextState ? 'Return to title card' : 'Reveal collection text');
card.setAttribute('aria-pressed', String(nextState));
}
card?.addEventListener('click', () => setRevealed());
card?.addEventListener('keydown', (event) => {
if (event.key === 'Enter' || event.key === ' ') {
event.preventDefault();
setRevealed();
M� }
if (event.key === 'Escape') setRevealed(false);
});
window.addEventListener('resize', updateLayout);
window.addEventListener('pointermove', (event) => setSpecular(event.clientX, event.clientY, 0.82));
window.addEventListener('pointerleave', resetSpecular);
window.addEventListener('blur', resetSpecular);
updateLayout();
resetSpecular();
})();
</script>
</body>
</html>
h [�;9i�WYV�-��8���h���asٛ��-|�R� cord text/html ��/��l��f�5c��! C?1�ߞ�q�Mh �
l�A&��)^1~�r"r>����� ���b����5KfHdM$�J|�+�i�����M�E��<�s�
#/�Dy��G�}P1&�vI�p�u ʩ����6u�.�cK��hڦ@���!����E/���{)�l���6` �i\���qd�U�&���J�I����!���&�D
$w���+�2(,H�!r0{1��P�dv7Jw;�W��(���$N�vv>�H}��3��J�)k�[�M�_r�N:N��"�x�e�������}r�X딀�D�j�ʙM����:�Y����f� Mk��{/�����'�y���W���W��g->u
>XX�����J�nwwa��Z���|�uL}��}6�jSL���M�f���uC�[aԗ������7cQ��
:�`>�*�^��R��X�)����֬h&��y�������d��R��s?wn�|G�y2�6���`��e�#���Ch�|�o���v@����5�%��
�:�
l�<vԔ M�L{�T#u��oNG�c��� $dC�[I��V*Ӡ?��.�vYd%���{2.�R?�C���ʀ�1�Q��Z������DLG=x,��$t��0�F���fX/Rmry�#j7�VRX�� �(����br M<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Generative Composition by Lemonhaze</title>
<!--Generative Composition by Lemonhaze-->
<!--
An amalgam of mini-series and 1/1s where I'm learning to make art with code.
Each of the works presented in this heterogeneous series was personally curated
from my early days of experimentation with generative art where I explored various themes, Mtextures, and compositions.
Additional note: Visit the official ordinals content link of the inscription and press 'S' on your keyboard to download the high resolution PNG.
Tuesday July 14, 2026 - Griffintown, Montreal, Quebec, Canada
-FNST
-->
<style>
:root {
--viewport-pad: clamp(18px, 2.8vmin, 34px);
--poster-size: min(
calc(100vw - (var(--viewport-pad) * 2)),
calc(100dvh - (var(--viewport-pad) * 2))
);
--poster-radiusM: clamp(1px, 0.22vw, 3px);
--spec-x: 48%;
--spec-y: 18%;
--spec-str: 0.26;
--blue-0: hsl(286 15.680000000000001% 7%);
--blue-1: hsl(286 23.52% 13%);
--blue-2: hsl(286 31.360000000000003% 24%);
--blue-3: hsl(258 37.800000000000004% 38%);
--blue-4: hsl(258 50.4% 54%);
--blue-5: hsl(258 44.800000000000004% 68%);
--blue-6: hsl(258 29.4% 82%);
--blue-7: hsl(258 14% 94%);
--blue-flat: hsl(258 36.4% 60%);
--blue-shadow:M hsl(286 32% 6% / 0.78);
--blue-glow: hsl(258 49% 64% / 0.26);
--frame-shadow:
0 0 0 1px hsl(286 34% 10% / 0.08),
0 18px 44px hsl(286 24% 6% / 0.16);
--front-fill:
radial-gradient(
ellipse 54% 30% at 50% 47%,
hsl(258 25.2% 90% / 0.11) 0%,
hsl(258 39.2% 60% / 0.06) 34%,
transparent 66%
),
linear-gradient(
180deg,
hsl(286 24% 5% / 0.99) 0%,
hsl(286 18% 4% / 0.99M) 100%
);
}
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
width: 100%;
min-height: 100%;
background: transparent;
color: #f4fbff;
}
html {
height: 100%;
}
body {
display: grid;
place-items: center;
width: 100%;
min-height: 100vh;
min-height: 100svh;
min-height: 100dvh;
padding: var(--viewport-pad);
font-family: "Iowan Old MStyle", "Palatino Linotype", "Book Antiqua",
Baskerville, Georgia, serif;
overflow: auto;
}
.card-stage {
width: 100%;
min-height: calc(100vh - (var(--viewport-pad) * 2));
min-height: calc(100svh - (var(--viewport-pad) * 2));
min-height: calc(100dvh - (var(--viewport-pad) * 2));
display: grid;
place-items: center;
}
.card-shell {
position: relative;
width: var(--poster-size);
max-width: 100%;
Maspect-ratio: 1;
cursor: pointer;
background: transparent;
isolation: isolate;
}
.card-shell:focus-visible {
outline: 2px solid hsl(258 43.4% 76% / 0.58);
outline-offset: 8px;
}
.card-inner {
position: relative;
width: 100%;
height: 100%;
}
.card-face {
position: absolute;
inset: 0;
border-radius: var(--poster-radius);
overflow: hidden;
box-shadow:
0 0 0 1px rgba(1M3, 27, 43, 0.08),
0 14px 38px rgba(8, 16, 28, 0.08);
transition:
opacity 0.82s cubic-bezier(0.22, 0.72, 0.16, 1),
transform 0.82s cubic-bezier(0.22, 0.72, 0.16, 1),
filter 0.82s cubic-bezier(0.22, 0.72, 0.16, 1);
}
.card-front {
opacity: 1;
transform: scale(1);
filter: blur(0);
}
.card-back {
background:
radial-gradient(
ellipse 74% 54% at 50% 12%,
hsl(258 33.6% 82% / 0.18) 0%,M
transparent 72%
),
linear-gradient(
180deg,
rgba(12, 12, 12, 0.98) 0%,
rgba(8, 8, 8, 0.95) 54%,
rgba(4, 4, 4, 0.99) 100%
);
border: 1px solid hsl(258 18.2% 82% / 0.16);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.08),
inset 0 0 0 1px hsl(258 28% 42% / 0.22);
color: hsl(258 12.6% 96%);
opacity: 0;
transform: scale(0.982) translateY(16px);
filter: blur(18pxM);
pointer-events: none;
}
.card-shell.is-revealed .card-front {
opacity: 0;
transform: scale(1.035);
filter: blur(24px) saturate(0.9);
pointer-events: none;
}
.card-shell.is-revealed .card-back {
opacity: 1;
transform: scale(1) translateY(0);
filter: blur(0);
pointer-events: auto;
}
.surface {
position: relative;
width: 100%;
height: 100%;
border-radius: inherit;
ovMerflow: hidden;
background: var(--front-fill);
box-shadow: var(--frame-shadow);
isolation: isolate;
}
.surface::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background:
radial-gradient(
ellipse 30% 16% at 50% 48%,
hsl(258 16.8% 96% / 0.12) 0%,
hsl(258 30.8% 76% / 0.07) 34%,
transparent 72%
),
radial-gradient(
M ellipse 120% 120% at 50% 50%,
transparent 58%,
rgba(5, 8, 12, 0.12) 100%
);
mix-blend-mode: screen;
}
.surface::after {
content: "";
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
background:
linear-gradient(
180deg,
rgba(4, 12, 20, 0.18) 0%,
transparent 18%,
transparent 82%,
rgba(2, 6, 10, 0.24) 100%
),
M radial-gradient(
ellipse 98% 112% at 50% 50%,
transparent 52%,
rgba(0, 0, 0, 0.24) 100%
);
}
.atmosphere {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background:
radial-gradient(
ellipse 44% 22% at 50% 48%,
hsl(258 18% 92% / 0.08) 0%,
hsl(258 29.4% 68% / 0.04) 42%,
transparent 72%
),
radial-gradient(
ellipMse 70% 56% at 50% 62%,
hsl(286 11.200000000000001% 18% / 0.1) 0%,
transparent 76%
);
filter: blur(14px);
}
.quiet-frame {
position: absolute;
inset: 1.2%;
z-index: 5;
pointer-events: none;
border-radius: max(0px, calc(var(--poster-radius) + 1px));
border: 1px solid hsl(258 12.6% 96% / 0.16);
box-shadow:
inset 0 0 0 1px hsl(258 22.400000000000002% 48% / 0.22),
inset 0 24px 34px rgba(255,M 255, 255, 0.03),
inset 0 -24px 36px rgba(0, 0, 0, 0.1);
}
.masthead {
position: absolute;
top: 50%;
left: 50%;
z-index: 4;
width: min(84%, 780px);
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(14px, 1.65vw, 22px);
text-align: center;
}
.mist {
position: absolute;
inset: -8% 8% -18%;
z-index: -1;
border-Mradius: 999px;
background:
radial-gradient(
ellipse 48% 30% at 50% 54%,
hsl(258 19.6% 92% / 0.11) 0%,
hsl(258 33.6% 72% / 0.06) 36%,
transparent 70%
);
filter: blur(clamp(18px, 2vw, 28px));
opacity: 0.54;
}
.title,
.subtitle,
.back-title,
.back-byline {
margin: 0;
position: relative;
font-style: italic;
}
.title,
.subtitle {
white-space: nowrapM;
}
.title,
.back-title {
font-family: "Apple Chancery", "Snell Roundhand", "Iowan Old Style",
"Palatino Linotype", serif;
font-weight: 700;
letter-spacing: -0.03em;
}
.title {
font-size: 126px;
line-height: 0.9;
}
.subtitle,
.back-byline {
font-family: "Apple Chancery", "Snell Roundhand", "Iowan Old Style",
"Palatino Linotype", serif;
font-weight: 700;
letter-spacing: -0.03em;
M }
.subtitle {
font-size: 56px;
line-height: 0.94;
}
.liquid-blue {
color: var(--blue-flat);
text-shadow:
0 1px 0 rgba(255, 255, 255, 0.12),
0 2px 4px rgba(12, 10, 10, 0.38),
0 10px 28px var(--blue-shadow),
0 0 22px var(--blue-glow);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
.liquid-blue {
background-image:
radial-gradient(
ellipse 84%M 74% at var(--spec-x) var(--spec-y),
rgba(255, 255, 255, calc(0.12 + var(--spec-str) * 0.24)) 0%,
rgba(255, 255, 255, calc(0.04 + var(--spec-str) * 0.08)) 30%,
transparent 64%
),
linear-gradient(
112deg,
var(--blue-0) 0%,
var(--blue-1) 12%,
var(--blue-2) 24%,
var(--blue-4) 35%,
var(--blue-6) 42%,
var(--blue-3) 48%,
var(--blue-1) 59%,
M var(--blue-7) 67%,
var(--blue-4) 76%,
var(--blue-2) 84%,
var(--blue-1) 100%
),
linear-gradient(
96deg,
transparent 0%,
rgba(255, 255, 255, 0.04) 29%,
rgba(255, 255, 255, 0.52) 45%,
rgba(255, 255, 255, 0.18) 55%,
transparent 68%
);
background-size: 160% 170%, 220% 220%, 180% 100%;
background-position: 0% 0%, 6% 50%, 126% 50%;
M -webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
animation: blue-flow 16s ease-in-out infinite alternate;
}
.liquid-blue[data-text]::after {
content: attr(data-text);
position: absolute;
inset: 0;
pointer-events: none;
color: transparent;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
backgMround-clip: text;
background-image: linear-gradient(
94deg,
transparent 0%,
transparent 34%,
rgba(255, 255, 255, 0.06) 41%,
rgba(255, 255, 255, 0.96) 48%,
rgba(255, 255, 255, 0.46) 54%,
transparent 62%,
transparent 100%
);
background-size: 220% 100%;
background-position: 136% 50%;
opacity: 0.56;
mix-blend-mode: screen;
filter: blur(0.25px);
aMnimation: blue-shine 8.6s ease-in-out infinite;
}
}
.back-content {
position: relative;
width: 100%;
height: 100%;
padding: clamp(18px, 4.2cqi, 34px) clamp(24px, 6.8cqi, 56px);
display: flex;
flex-direction: column;
justify-content: center;
gap: clamp(12px, 2.4cqi, 18px);
text-align: center;
}
.back-scroll {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
jMustify-content: flex-start;
align-items: center;
gap: clamp(10px, 2cqi, 16px);
overflow: auto;
padding: clamp(16px, 3.2cqi, 30px) clamp(10px, 2.2cqi, 18px);
scrollbar-width: thin;
scrollbar-color: hsl(258 49% 64% / 0.26) transparent;
}
@supports (justify-content: safe center) {
.back-scroll {
justify-content: safe center;
}
}
.back-scroll::-webkit-scrollbar {
width: 8px;
}
.back-scroll::-webkit-sMcrollbar-thumb {
border-radius: 999px;
background: hsl(258 49% 64% / 0.26);
}
.back-title {
max-width: 100%;
font-size: clamp(2rem, 7.3cqi, 4.2rem);
line-height: 1.08;
padding-block: 0.08em 0.04em;
}
.back-byline {
font-size: clamp(1rem, 3.5cqi, 1.8rem);
line-height: 0.96;
color: hsl(258 12.6% 92% / 0.92);
}
.back-year {
margin: 0 auto;
font-size: clamp(0.78rem, 2.2cqi, 1rem);
letteMr-spacing: 0.24em;
text-transform: uppercase;
color: hsl(258 15.4% 84% / 0.7);
}
.back-copy {
margin: 0 auto;
max-width: min(100%, 48ch);
text-align: center;
font-size: clamp(0.82rem, 2.05cqi, 0.96rem);
line-height: 1.5;
color: hsl(258 14% 88% / 0.8);
}
@keyframes blue-flow {
0% { background-position: 0% 0%, 4% 50%, 128% 50%; }
50% { background-position: 0% 0%, 60% 50%, 54% 50%; }
100% { background-posiMtion: 0% 0%, 100% 50%, -12% 50%; }
}
@keyframes blue-shine {
0%, 16%, 100% { background-position: 136% 50%; opacity: 0; }
32% { opacity: 0.68; }
52% { background-position: -44% 50%; opacity: 0.92; }
66% { opacity: 0.1; }
}
@media (max-width: 720px) {
.masthead { width: 90%; }
.back-content { padding: 18px; }
.back-scroll { padding-block: 12px; }
.back-title { font-size: clamp(1.65rem, 8cqi, 3rem); }
.back-copy {
M max-width: min(100%, 42ch);
font-size: clamp(0.78rem, 2.8cqi, 0.9rem);
line-height: 1.45;
}
}
</style>
</head>
<body>
<main class="card-stage">
<article class="card-shell" id="coverCard" tabindex="0" role="button" aria-label="Reveal collection text" aria-pressed="false">
<div class="card-inner">
<section class="card-face card-front">
<div class="surface">
<div class="atmosphere" aria-hidden="true"></div>
M <header class="masthead" aria-label="Generative Composition by Lemonhaze">
<div class="mist" aria-hidden="true"></div>
<h1 class="title liquid-blue" data-text="Generative Composition">Generative Composition</h1>
<p class="subtitle liquid-blue" data-text="by Lemonhaze">by Lemonhaze</p>
</header>
<div class="quiet-frame" aria-hidden="true"></div>
</div>
</section>
<section class="card-face card-back" aria-labMel="Generative Composition info">
<div class="back-content">
<div class="back-scroll">
<h2 class="back-title liquid-blue" data-text="Generative Composition">Generative Composition</h2>
<p class="back-byline liquid-blue" data-text="by Lemonhaze">by Lemonhaze</p>
<p class="back-year">2023</p>
<p class="back-copy">An amalgam of mini-series and 1/1s where I'm learning to make art with code. Each of the works presented in this heteMrogeneous series was personally curated from my early days of experimentation with generative art where I explored various themes, textures, and compositions. Additional note: Visit the official ordinals content link of the inscription and press 'S' on your keyboard to download the high resolution PNG. - Some of the artwork in this series might not render or display properly across all marketplace therefore it's good to keep in mind that the original artwork is always the high resolution PNG located in the HTML filMe of the inscription.</p>
</div>
</div>
</section>
</div>
</article>
</main>
<script>
(() => {
const root = document.documentElement;
const card = document.getElementById('coverCard');
const surface = document.querySelector('.surface');
const masthead = document.querySelector('.masthead');
const title = document.querySelector('.title');
const subtitle = document.querySelector('.subtitle');
functiMon clampValue(value, min, max) { return Math.max(min, Math.min(max, value)); }
function fitTextToWidth(element, options) {
if (!element || !masthead || !surface) return;
const maxSize = options.maxSize;
const minSize = options.minSize;
const widthRatio = options.widthRatio ?? 0.98;
const posterRatio = options.posterRatio ?? 1;
const maxHeightRatio = options.maxHeightRatio ?? 1;
element.style.fontSize = maxSize + 'px';
const avaMilableWidth = masthead.clientWidth * widthRatio;
const naturalWidth = element.scrollWidth;
const surfaceWidthCap = surface.clientWidth * posterRatio;
const surfaceHeightCap = surface.clientHeight * maxHeightRatio;
if (!availableWidth || !naturalWidth || !surfaceWidthCap || !surfaceHeightCap) return;
const widthFitSize = (maxSize * availableWidth) / naturalWidth;
const fittedSize = clampValue(Math.min(maxSize, widthFitSize, surfaceWidthCap, surfaceHeightCapM), minSize, maxSize);
element.style.fontSize = fittedSize.toFixed(2) + 'px';
}
let layoutFrame = 0;
function fitMastheadHeight() {
if (!masthead || !surface || !title || !subtitle) return;
const gap = parseFloat(getComputedStyle(masthead).gap) || 0;
const currentTitle = parseFloat(title.style.fontSize) || 0;
const currentSubtitle = parseFloat(subtitle.style.fontSize) || 0;
const stackHeight = title.getBoundingClientRect().height +M subtitle.getBoundingClientRect().height + gap;
const maxStackHeight = surface.clientHeight * 0.28;
if (!stackHeight || stackHeight <= maxStackHeight) return;
const scale = maxStackHeight / stackHeight;
title.style.fontSize = Math.max(20, currentTitle * scale).toFixed(2) + 'px';
subtitle.style.fontSize = Math.max(14, currentSubtitle * scale).toFixed(2) + 'px';
}
function updateLayout() {
cancelAnimationFrame(layoutFrame);
layoutFMrame = requestAnimationFrame(() => {
fitTextToWidth(title, { maxSize: 126, minSize: 18, widthRatio: 0.98, posterRatio: 0.15, maxHeightRatio: 0.14 });
fitTextToWidth(subtitle, { maxSize: 56, minSize: 14, widthRatio: 0.92, posterRatio: 0.07, maxHeightRatio: 0.075 });
fitMastheadHeight();
});
}
function setSpecular(clientX, clientY, strength = 0.72) {
root.style.setProperty('--spec-x', ((clientX / window.innerWidth) * 100).toFixed(2) + '%');
M root.style.setProperty('--spec-y', ((clientY / window.innerHeight) * 100).toFixed(2) + '%');
root.style.setProperty('--spec-str', String(strength));
}
function resetSpecular() {
root.style.setProperty('--spec-x', '48%');
root.style.setProperty('--spec-y', '18%');
root.style.setProperty('--spec-str', '0.34');
}
function setRevealed(force) {
if (!card) return;
const nextState = typeof force === 'boolean' ? force : !carMd.classList.contains('is-revealed');
card.classList.toggle('is-revealed', nextState);
card.setAttribute('aria-label', nextState ? 'Return to title card' : 'Reveal collection text');
card.setAttribute('aria-pressed', String(nextState));
}
card?.addEventListener('click', () => setRevealed());
card?.addEventListener('keydown', (event) => {
if (event.key === 'Enter' || event.key === ' ') {
event.preventDefault();
setRevealed();
M� }
if (event.key === 'Escape') setRevealed(false);
});
window.addEventListener('resize', updateLayout);
window.addEventListener('pointermove', (event) => setSpecular(event.clientX, event.clientY, 0.82));
window.addEventListener('pointerleave', resetSpecular);
window.addEventListener('blur', resetSpecular);
updateLayout();
resetSpecular();
})();
</script>
</body>
</html>
h |