소개 페이지를 스킬 전체 경로로 다시 만들고, 배운 것을 스킬에 반영
방향을 글래스로 바꿀 때 2단계 재결정을 하고도 전체 경로로 올리지 않았다.
레퍼런스 없이 재질만 갈아끼운 결과가 스위스 미니멀 뼈대에 유리를 바른
페이지였고, design.md 는 초판 결정을 그대로 담고 있었다. 0단계부터 다시 돌았다.
1단계 — 레퍼런스 3개를 computed style 까지 실측
R1 zed.dev 컨테이너 1120px 과 전체폭이 교대 · radius 2px 621회
R2 lusion.co 3D 는 액자 안, 텍스트는 액자 밖 · 배경 흰색 · h1 36px
R3 Codrops DOM 이 구조를 소유하고 WebGL 은 uniform 만 만진다
2단계 — 프리셋 swiss-minimal → dark-instrument, 컨셉 "검사대 위의 물체"
유리는 액자에만 남긴다(헤더 · 검사대 · 명령창)
4단계 — 히어로 재구성. 캔버스를 배경에서 빼 액자 안으로, 텍스트는 밖으로
판독기가 통과한 게이트를 표시한다(값이 바뀔 때만 DOM 을 쓴다)
파이프라인을 2열로 열어 625px → 1113px
5단계에서 실제로 걸린 것
게이트 3 radius 4종 → 2종 (3px / 14px, pill 제거)
게이트 1 base.css 토큰 밖 rgb() 7곳 → 토큰
게이트 7 헤더 English 2.59:1 → ink 로 상향
카운트 히어로 h1 4줄 → 2줄
셰이더 판이 정면이라 프레넬이 구조적으로 0. 법선을 굽히고 UV 로 테두리
셰이더 gl_FragCoord 를 렌더 타겟 크기로 나눠 UV 가 1 을 넘고 있었다
수치 페이지가 실은 "타입 단계 5단계"가 실측 9종이었다. lang 속성이
스케일을 재정의해 링크 하나가 16px 로 새고 있었다
측정 대비 스크립트가 반투명 배경을 불투명으로 계산했다. 알파 합성으로 교정
스킬 반영
three.md §0-A 배치 원리(3D 는 액자 안) · 프레넬 0 함정 · gl_FragCoord 함정
preflight.md 대비 측정 시 알파 합성. 검사 도구가 틀리면 통과도 의미가 없다
최종: 하드 게이트 12/12, 대비 실패 0, 320px 오버플로 0, 테스트 22개 통과
This commit is contained in:
Yun Chan
parent
eb3ca69b5d
commit
9648d1d82a
15 changed files with 576 additions and 306 deletions
|
|
@ -8,9 +8,9 @@ interface Props {
|
|||
const { command, copyLabel, copiedLabel, note } = Astro.props;
|
||||
---
|
||||
|
||||
{/* 셸 안에 코어. 명령어는 기계의 부품처럼 앉는다 */}
|
||||
<div class="cmd-shell shell">
|
||||
<div class="cmd core">
|
||||
{/* 명령어를 담는 액자. 유리를 쓰는 세 자리 중 하나다 */}
|
||||
<div class="cmd-shell frame">
|
||||
<div class="cmd">
|
||||
<code class="cmd-text">{command}</code>
|
||||
<button type="button" class="cmd-copy" data-copy={command} data-copied={copiedLabel}>
|
||||
<span class="cmd-copy-label">{copyLabel}</span>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,5 @@
|
|||
---
|
||||
import { Image } from "astro:assets";
|
||||
import CopyCommand from "./CopyCommand.astro";
|
||||
import shotCoffee from "../assets/shots/shot-coffee.png";
|
||||
import type { Content } from "../i18n/content";
|
||||
|
||||
interface Props {
|
||||
|
|
@ -11,157 +9,199 @@ interface Props {
|
|||
const { c, ui } = Astro.props;
|
||||
---
|
||||
|
||||
{/*
|
||||
구조는 R2(lusion.co) 실측에서 왔다.
|
||||
3D 를 가장 잘 쓰는 스튜디오가 텍스트를 3D 위에 얹지 않는다.
|
||||
액자 안은 3D, 액자 밖은 글자. 그래서 대비 문제가 생기지 않고
|
||||
h1 이 36px 이어도 히어로가 압도적이다 — 힘이 타이포가 아니라 물체에서 나온다.
|
||||
|
||||
이전 판은 정반대였다. 캔버스를 배경 전체에 깔고 그 위에 7rem 짜리
|
||||
헤드라인을 얹었다. 판 여섯 장은 흐린 얼룩이 됐고, 글자는 대비를
|
||||
얻으려고 글로우를 깔아야 했다. 둘 다 소리치다 둘 다 죽었다.
|
||||
*/}
|
||||
<section class="full hero">
|
||||
{/* 배경. WebGL 이 없으면 아래 그라디언트가 그대로 결과물이다 */}
|
||||
<div class="hero-bg" aria-hidden="true">
|
||||
<div class="hero-fallback"></div>
|
||||
<canvas id="hero-canvas" class="hero-canvas"></canvas>
|
||||
</div>
|
||||
<div class="hero-head">
|
||||
<h1 class="hero-title">{c.h1}</h1>
|
||||
|
||||
<div class="hero-grid">
|
||||
<div class="hero-copy">
|
||||
<h1 class="hero-title">{c.h1}</h1>
|
||||
<div class="hero-aside">
|
||||
<p class="lead hero-lead">{c.lead}</p>
|
||||
|
||||
<div class="hero-cta">
|
||||
<CopyCommand
|
||||
command={c.install}
|
||||
copyLabel={ui.copy}
|
||||
copiedLabel={ui.copied}
|
||||
note={c.installNote}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<CopyCommand
|
||||
command={c.install}
|
||||
copyLabel={ui.copy}
|
||||
copiedLabel={ui.copied}
|
||||
note={c.installNote}
|
||||
/>
|
||||
<p class="hero-links">
|
||||
{c.links.map((l) => <a class="link-grow" href={l.href}>{l.label}</a>)}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 가짜 목업이 아니라 이 스킬로 실제로 만든 페이지다 */}
|
||||
<figure class="hero-proof par-slow">
|
||||
<div class="shell">
|
||||
<div class="core">
|
||||
<Image
|
||||
src={shotCoffee}
|
||||
alt={c.proofAlt}
|
||||
widths={[520, 900, 1280]}
|
||||
sizes="(max-width: 960px) 88vw, 44vw"
|
||||
loading="eager"
|
||||
fetchpriority="high"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<figcaption>{c.proofCaption}</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
<figure class="hero-stage">
|
||||
<div class="stage-frame">
|
||||
{/* WebGL 이 없으면 이 그라디언트가 그대로 결과물이다 */}
|
||||
<div class="stage-fallback" aria-hidden="true"></div>
|
||||
<canvas id="hero-canvas" class="stage-canvas" aria-label={c.stage.alt} role="img"></canvas>
|
||||
|
||||
{/* 계기판이니 판정을 읽어준다. 3D 가 장식이 아니라 상태 표시가 된다 */}
|
||||
<p class="stage-readout" aria-hidden="true">
|
||||
<span class="ro-key">{c.stage.gate}</span>
|
||||
<span class="ro-val" id="ro-gate">01</span>
|
||||
<span class="ro-sep">/</span>
|
||||
<span class="ro-total">06</span>
|
||||
<span class="ro-state" id="ro-state">{c.stage.pass}</span>
|
||||
</p>
|
||||
</div>
|
||||
<figcaption>{c.stage.caption}</figcaption>
|
||||
</figure>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.hero {
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
display: grid;
|
||||
grid-template-columns: subgrid;
|
||||
padding-block: calc(var(--space-8) + var(--space-3)) var(--space-8);
|
||||
min-height: min(92dvh, 60rem);
|
||||
align-content: center;
|
||||
overflow: clip;
|
||||
grid-column: full;
|
||||
padding-block: calc(var(--space-6) + var(--space-4)) var(--space-7);
|
||||
}
|
||||
|
||||
.hero-bg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
/* ---- 액자 밖: 글자 -------------------------------------- */
|
||||
.hero-head {
|
||||
max-width: 1180px;
|
||||
margin-inline: auto;
|
||||
padding-inline: var(--space-4);
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
|
||||
gap: var(--space-6);
|
||||
align-items: start;
|
||||
margin-bottom: var(--space-5);
|
||||
}
|
||||
.hero-fallback,
|
||||
.hero-canvas {
|
||||
|
||||
.hero-title {
|
||||
/* 7rem 을 버렸다. 액자가 주인공이면 헤드라인은 물러난다.
|
||||
두 줄을 넘기지 않는 폭이다(카운트 규칙: 히어로 헤드라인 <= 2줄) */
|
||||
font-size: clamp(var(--step-2), 1.1rem + 2.4vw, var(--step-4));
|
||||
line-height: 1.12;
|
||||
letter-spacing: var(--tracking-display);
|
||||
max-width: 18ch;
|
||||
margin: 0;
|
||||
}
|
||||
[lang="en"] .hero-title { max-width: 20ch; line-height: 1.04; }
|
||||
|
||||
.hero-aside { display: grid; gap: var(--space-3); align-content: start; }
|
||||
.hero-lead {
|
||||
margin: 0;
|
||||
max-width: 30em;
|
||||
color: var(--ink);
|
||||
opacity: 0.82;
|
||||
}
|
||||
.hero-links {
|
||||
display: flex;
|
||||
gap: var(--space-4);
|
||||
margin: 0;
|
||||
font-size: var(--step-0);
|
||||
color: var(--ink-muted);
|
||||
}
|
||||
|
||||
/* ---- 액자 안: 물체 -------------------------------------- */
|
||||
.hero-stage {
|
||||
margin: 0;
|
||||
max-width: 1400px;
|
||||
margin-inline: auto;
|
||||
padding-inline: var(--space-4);
|
||||
}
|
||||
|
||||
.stage-frame {
|
||||
position: relative;
|
||||
aspect-ratio: 16 / 5.5;
|
||||
border: 1px solid var(--glass-edge);
|
||||
border-radius: var(--radius-frame);
|
||||
background: var(--surface-sunken);
|
||||
box-shadow: var(--glass-hi), var(--shadow-3);
|
||||
overflow: clip;
|
||||
isolation: isolate;
|
||||
}
|
||||
|
||||
.stage-fallback,
|
||||
.stage-canvas {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
.hero-fallback {
|
||||
/* 광원이 화면 밖으로 번지되 페이지 폭은 늘리지 않는다 */
|
||||
transform: scale(1.15);
|
||||
.stage-fallback {
|
||||
background:
|
||||
radial-gradient(46vw 40vw at 22% 18%,
|
||||
color-mix(in oklab, var(--accent) 40%, transparent), transparent 66%),
|
||||
radial-gradient(40vw 38vw at 82% 30%,
|
||||
color-mix(in oklab, var(--glow-2) 32%, transparent), transparent 64%);
|
||||
filter: blur(28px);
|
||||
radial-gradient(58% 76% at 26% 22%,
|
||||
color-mix(in oklab, var(--accent) 34%, transparent), transparent 68%),
|
||||
radial-gradient(52% 70% at 80% 64%,
|
||||
color-mix(in oklab, var(--glow-2) 30%, transparent), transparent 66%);
|
||||
}
|
||||
.hero-canvas { opacity: 0; transition: opacity 1.2s var(--ease-soft); }
|
||||
.hero-canvas.is-live { opacity: 1; }
|
||||
.stage-canvas { opacity: 0; transition: opacity 1.2s var(--ease-soft); }
|
||||
.stage-canvas.is-live { opacity: 1; }
|
||||
|
||||
.hero-grid {
|
||||
grid-column: full;
|
||||
max-width: 1180px;
|
||||
width: 100%;
|
||||
margin-inline: auto;
|
||||
padding-inline: var(--space-4);
|
||||
display: grid;
|
||||
gap: var(--space-6);
|
||||
align-items: center;
|
||||
grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
/* 히어로는 이 페이지에서 가장 큰 소리다 */
|
||||
max-width: 11ch;
|
||||
}
|
||||
[lang="en"] .hero-title { max-width: 14ch; }
|
||||
|
||||
.hero-lead {
|
||||
max-width: 26em;
|
||||
margin-block: var(--space-4) var(--space-5);
|
||||
color: var(--ink);
|
||||
opacity: 0.82;
|
||||
}
|
||||
.hero-cta { max-width: 32em; }
|
||||
.hero-links {
|
||||
.stage-readout {
|
||||
position: absolute;
|
||||
left: var(--space-3);
|
||||
bottom: var(--space-3);
|
||||
margin: 0;
|
||||
display: flex;
|
||||
gap: var(--space-4);
|
||||
margin-top: var(--space-4);
|
||||
font-size: var(--step-0);
|
||||
color: var(--ink-muted);
|
||||
align-items: baseline;
|
||||
gap: 0.5ch;
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--step--1);
|
||||
font-variant-numeric: tabular-nums;
|
||||
letter-spacing: var(--tracking-label);
|
||||
color: var(--ink);
|
||||
/* 캔버스 위에 얹는 유일한 글자다. 판독 가능해야 하므로 바탕을 깐다 */
|
||||
padding: 0.35em 0.7em;
|
||||
border-radius: var(--radius-sm);
|
||||
background: color-mix(in oklab, var(--surface-sunken) 82%, transparent);
|
||||
border: 1px solid var(--line);
|
||||
}
|
||||
.ro-key { color: var(--ink-muted); }
|
||||
.ro-val { color: var(--accent); }
|
||||
.ro-sep, .ro-total { color: var(--ink-muted); }
|
||||
.ro-state {
|
||||
margin-left: 0.8ch;
|
||||
padding-left: 0.8ch;
|
||||
border-left: 1px solid var(--line-strong);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.hero-proof { margin: 0; }
|
||||
.hero-proof .shell {
|
||||
box-shadow: var(--glass-hi), var(--shadow-3);
|
||||
transform: rotate(-1.1deg);
|
||||
}
|
||||
.hero-proof .core { overflow: hidden; line-height: 0; }
|
||||
.hero-proof :global(img) {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
aspect-ratio: 4 / 3;
|
||||
object-fit: cover;
|
||||
object-position: top center;
|
||||
}
|
||||
figcaption {
|
||||
margin-top: var(--space-3);
|
||||
font-size: var(--step-0);
|
||||
color: var(--ink-muted);
|
||||
max-width: var(--measure);
|
||||
}
|
||||
|
||||
@media (max-width: 960px) {
|
||||
.hero-grid { grid-template-columns: 1fr; }
|
||||
.hero-proof .shell { transform: none; }
|
||||
.hero { min-height: 0; }
|
||||
@media (max-width: 900px) {
|
||||
.hero-head { grid-template-columns: 1fr; gap: var(--space-5); }
|
||||
.stage-frame { aspect-ratio: 4 / 3; }
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
// 유리 판이 뒤의 빛을 실제로 굴절시킨다. 렌더 타겟 한 장으로 만든 굴절이라
|
||||
// transmission 재질보다 훨씬 싸다. 자세한 이유는 lib/hero-scene.ts 주석에.
|
||||
// 판 여섯 장이 깊이 축에 서 있고 카메라가 스크롤에 맞춰 통과한다.
|
||||
// 굴절은 렌더 타겟 한 장으로 만든다 — transmission 재질보다 훨씬 싸다.
|
||||
import { mountHeroScene } from "../lib/hero-scene";
|
||||
|
||||
const canvas = document.getElementById("hero-canvas") as HTMLCanvasElement | null;
|
||||
const gateEl = document.getElementById("ro-gate");
|
||||
const stateEl = document.getElementById("ro-state");
|
||||
const passWord = stateEl?.textContent ?? "";
|
||||
|
||||
if (canvas) {
|
||||
mountHeroScene({ canvas, accentVar: "--accent", glowVar: "--glow-2" });
|
||||
let lastGate = -1;
|
||||
mountHeroScene({
|
||||
canvas,
|
||||
accentVar: "--accent",
|
||||
glowVar: "--glow-2",
|
||||
// 프레임마다 DOM 을 쓰지 않는다. 값이 바뀔 때만 쓴다.
|
||||
onGate(index, total) {
|
||||
if (index === lastGate) return;
|
||||
lastGate = index;
|
||||
if (gateEl) gateEl.textContent = String(index + 1).padStart(2, "0");
|
||||
if (stateEl) stateEl.textContent = index + 1 >= total ? passWord : "···";
|
||||
},
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -86,7 +86,7 @@ const { c } = Astro.props;
|
|||
width: 100%;
|
||||
margin-inline: auto;
|
||||
padding: var(--space-5) var(--space-4);
|
||||
border-radius: var(--radius-shell);
|
||||
border-radius: var(--radius-frame);
|
||||
overflow: hidden;
|
||||
}
|
||||
.stage-fallback,
|
||||
|
|
@ -131,7 +131,7 @@ const { c } = Astro.props;
|
|||
/* 필터를 먹일 대상. 같은 도형에 서로 다른 재질을 입힌다 */
|
||||
.swatch {
|
||||
aspect-ratio: 4 / 3;
|
||||
border-radius: var(--radius-md);
|
||||
border-radius: var(--radius-sm);
|
||||
overflow: hidden;
|
||||
background:
|
||||
repeating-linear-gradient(
|
||||
|
|
|
|||
|
|
@ -19,24 +19,27 @@ const { c } = Astro.props;
|
|||
<h2 id="pipeline-h" class="reveal">{c.h2}</h2>
|
||||
<p class="lead pipeline-lead reveal">{c.lead}</p>
|
||||
|
||||
<div class="brief glass reveal"><div class="brief-core">
|
||||
<div class="brief reveal"><div class="brief-core">
|
||||
<span class="brief-label">{c.briefLabel}</span>
|
||||
<p class="brief-text">{c.brief}</p>
|
||||
</div></div>
|
||||
|
||||
<ol role="list" class="spine">
|
||||
{
|
||||
c.stages.map((s) => (
|
||||
<li class="stop reveal">
|
||||
<h3 class="stop-name">{s.name}</h3>
|
||||
<p class="stop-does">{s.does}</p>
|
||||
<p class:list={["stop-becomes", { mono: s.mono }]}>{s.becomes}</p>
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ol>
|
||||
|
||||
<p class="after muted reveal">{c.after}</p>
|
||||
<div class="full spine-wrap">
|
||||
<ol role="list" class="spine">
|
||||
{
|
||||
c.stages.map((s) => (
|
||||
<li class="stop reveal">
|
||||
<div class="stop-head">
|
||||
<h3 class="stop-name">{s.name}</h3>
|
||||
<p class="stop-does">{s.does}</p>
|
||||
</div>
|
||||
<p class:list={["stop-becomes", { mono: s.mono }]}>{s.becomes}</p>
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ol>
|
||||
<p class="after muted reveal">{c.after}</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
|
|
@ -44,6 +47,15 @@ const { c } = Astro.props;
|
|||
margin-bottom: var(--space-6);
|
||||
}
|
||||
|
||||
/* 스파인은 페이지의 본체다. main 칼럼(561px)에 가두면
|
||||
페이지에서 가장 긴 섹션이 가장 좁아진다.
|
||||
R1(zed.dev) 실측: 컨테이너 1120px 과 전체폭이 교대한다. */
|
||||
.spine-wrap {
|
||||
max-width: 1180px;
|
||||
margin-inline: auto;
|
||||
padding-inline: var(--space-4);
|
||||
}
|
||||
|
||||
.brief { margin-bottom: var(--space-2); }
|
||||
.brief-core { padding: var(--space-4); }
|
||||
.brief-label {
|
||||
|
|
@ -80,7 +92,12 @@ const { c } = Astro.props;
|
|||
.stop {
|
||||
position: relative;
|
||||
padding-block: var(--space-4);
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
|
||||
gap: var(--space-5);
|
||||
align-items: start;
|
||||
}
|
||||
.stop-head { min-width: 0; }
|
||||
.stop + .stop {
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
|
|
@ -105,7 +122,8 @@ const { c } = Astro.props;
|
|||
}
|
||||
.stop-does {
|
||||
color: var(--ink-muted);
|
||||
margin-bottom: var(--space-3);
|
||||
margin: 0;
|
||||
max-width: 34ch;
|
||||
}
|
||||
|
||||
/* 브리프가 이 단계에서 무엇이 됐는가 — 변화가 순서를 만든다 */
|
||||
|
|
@ -131,6 +149,14 @@ const { c } = Astro.props;
|
|||
|
||||
.after {
|
||||
margin-top: var(--space-5);
|
||||
max-width: var(--measure);
|
||||
}
|
||||
|
||||
@media (max-width: 780px) {
|
||||
.stop {
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
}
|
||||
|
||||
/* 스크롤 진입 페이드를 넣었다가 뺐다.
|
||||
|
|
|
|||
|
|
@ -65,7 +65,7 @@ const { c } = Astro.props;
|
|||
top: calc(var(--space-4) + 0.55em);
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 999px;
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--accent);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -18,11 +18,9 @@ const shots = [shotCoffee, shotSaas];
|
|||
{
|
||||
c.items.map((item, i) => (
|
||||
<figure class:list={["work", "reveal", i === 0 ? "par-slow" : "par-fast"]} style={`--reveal-delay:${i * 90}ms`}>
|
||||
<div class="shell zoom-in">
|
||||
<div class="core">
|
||||
<Image src={shots[i]!} alt={item.alt} widths={[480, 860, 1200]}
|
||||
sizes="(max-width: 820px) 92vw, 44vw" loading="lazy" />
|
||||
</div>
|
||||
<div class="frame zoom-in">
|
||||
<Image src={shots[i]!} alt={item.alt} widths={[480, 860, 1200]}
|
||||
sizes="(max-width: 820px) 92vw, 44vw" loading="lazy" />
|
||||
</div>
|
||||
<figcaption>
|
||||
<span class="work-caption">{item.caption}</span>
|
||||
|
|
@ -50,10 +48,10 @@ const shots = [shotCoffee, shotSaas];
|
|||
.work:nth-child(2) { margin-top: var(--space-7); }
|
||||
|
||||
.work { margin: 0; }
|
||||
.work .shell { box-shadow: var(--glass-hi), var(--shadow-3); }
|
||||
.work:nth-child(1) .shell { transform: rotate(-0.5deg); }
|
||||
.work:nth-child(2) .shell { transform: rotate(0.7deg); }
|
||||
.work .core { overflow: hidden; line-height: 0; }
|
||||
.work .frame { box-shadow: var(--glass-hi), var(--core-hi), var(--shadow-3); }
|
||||
.work:nth-child(1) .frame { transform: rotate(-0.5deg); }
|
||||
.work:nth-child(2) .frame { transform: rotate(0.7deg); }
|
||||
|
||||
.work :global(img) {
|
||||
width: 100%; height: auto; display: block;
|
||||
aspect-ratio: 16 / 11;
|
||||
|
|
@ -72,6 +70,6 @@ const shots = [shotCoffee, shotSaas];
|
|||
@media (max-width: 820px) {
|
||||
.cascade { grid-template-columns: 1fr; }
|
||||
.work:nth-child(2) { margin-top: 0; }
|
||||
.work .shell { transform: none; }
|
||||
.work .frame { transform: none; }
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -15,11 +15,11 @@ const { c } = Astro.props;
|
|||
|
||||
{/* 주장을 글로 하지 않고 실물로 보여준다. 두 문단의 차이는 word-break 한 줄뿐이다 */}
|
||||
<div class="demo reveal">
|
||||
<div class="demo-col glass"><div class="demo-inner">
|
||||
<div class="demo-col"><div class="demo-inner">
|
||||
<p class="demo-label muted mono">{c.demoLabels[0]}</p>
|
||||
<p lang="ko" class="demo-text demo-default">{c.demoText}</p>
|
||||
</div></div>
|
||||
<div class="demo-col glass"><div class="demo-inner">
|
||||
<div class="demo-col"><div class="demo-inner">
|
||||
<p class="demo-label muted mono">{c.demoLabels[1]}</p>
|
||||
<p lang="ko" class="demo-text demo-keepall">{c.demoText}</p>
|
||||
</div></div>
|
||||
|
|
|
|||
|
|
@ -35,8 +35,12 @@ export interface Content {
|
|||
install: string;
|
||||
installNote: string;
|
||||
links: { label: string; href: string }[];
|
||||
proofAlt: string;
|
||||
proofCaption: string;
|
||||
stage: {
|
||||
alt: string;
|
||||
caption: string;
|
||||
gate: string;
|
||||
pass: string;
|
||||
};
|
||||
};
|
||||
pipeline: {
|
||||
eyebrow: string;
|
||||
|
|
@ -174,9 +178,12 @@ export const ko: Content = {
|
|||
{ label: "저장소", href: "https://git.chanpaca.net/yunchan/designpaca" },
|
||||
{ label: "npm", href: "https://www.npmjs.com/package/designpaca" },
|
||||
],
|
||||
proofAlt:
|
||||
"designpaca 로 만든 커피 구독 랜딩. 헤드라인은 취향은 형용사가 아니라 좌표입니다 이고, 옆에 원두 3종의 수치표가 있다.",
|
||||
proofCaption: "이 스킬로 만든 페이지. 브리프 한 줄에서 시작했다.",
|
||||
stage: {
|
||||
alt: "유리판 여섯 장이 깊이 방향으로 나란히 서 있다. 스크롤하면 카메라가 판을 하나씩 통과하고, 통과한 판은 뒤로 물러난다.",
|
||||
caption: "판 하나가 단계 하나다. 통과 조건을 채우지 못하면 다음 판으로 가지 않는다.",
|
||||
gate: "게이트",
|
||||
pass: "통과",
|
||||
},
|
||||
},
|
||||
pipeline: {
|
||||
eyebrow: "여섯 단계",
|
||||
|
|
@ -241,12 +248,12 @@ export const ko: Content = {
|
|||
"문장을 다듬는 것으로 해결되는 것은 문장뿐이다. radius 어휘 수, 반투명 패널 개수, 타입 단계 수는 그대로 남는다. 그래서 이 페이지 자신의 형태 수치를 공개한다. 결과가 나쁘게 나와도 그대로 싣는다.",
|
||||
items: [
|
||||
{ label: "히어로까지 JS", value: "0.6%", note: "예산 50KB 중 실제로 쓴 비율", feature: true },
|
||||
{ label: "하드 게이트", value: "12/12", note: "8개는 정적 검사, 4개는 320px 실렌더", feature: true },
|
||||
{ label: "three.js 추가분", value: "185KB", note: "재료 섹션이 가까워질 때만 받는다. 초기 번들에는 없다" },
|
||||
{ label: "하드 게이트", value: "12/12", note: "정적 검사와 320px · 1440px 실렌더 양쪽", feature: true },
|
||||
{ label: "three.js 추가분", value: "184KB", note: "검사대가 화면에 들어올 때만 받는다. 초기 번들에는 없다" },
|
||||
{ label: "슬롭 지문", value: "0건", note: "9개 패턴 grep" },
|
||||
{ label: "radius 어휘", value: "2종", note: "10px, 20px. 셸은 파생값" },
|
||||
{ label: "반투명 패널", value: "5개", note: "29개까지 늘렸다가 걷어냈다. 유리는 정말 떠 있어야 하는 것에만 남겼다" },
|
||||
{ label: "타입 단계", value: "5단계", note: "디스플레이는 스케일 밖" },
|
||||
{ label: "radius 어휘", value: "2종", note: "3px 과 14px. 알약 모양을 없앴다" },
|
||||
{ label: "반투명 패널", value: "2개", note: "29개까지 늘렸다가 걷어냈다. 유리는 무언가를 담는 액자에만 남겼다" },
|
||||
{ label: "타입 단계", value: "6단계", note: "토큰에 정의된 수. 디스플레이는 스케일 밖이고, 최대 글자는 본문의 5.6배" },
|
||||
{ label: "폰트 패밀리", value: "2개", note: "언어판마다 자기 것만 받는다" },
|
||||
{ label: "강조색", value: "1개", note: "라이트와 다크는 같은 색의 대응값" },
|
||||
{ label: "첫 인터랙션", value: "미측정", note: "배포 후 Lighthouse 로 잰다" },
|
||||
|
|
@ -301,8 +308,28 @@ export const ko: Content = {
|
|||
caught: "본문 컬럼이 960px. 우리가 정한 한 줄 길이는 561px",
|
||||
fixed: "그리드의 본문 폭을 토큰에 묶었다. 스킬 문서의 예시 코드도 같이 고쳤다.",
|
||||
},
|
||||
{
|
||||
caught: "방향을 바꾸면서 이 스킬의 1단계를 건너뛰었다",
|
||||
fixed:
|
||||
"재질을 유리로 바꾸라는 요청은 2단계 방향 재결정이고, 그때는 전체 경로로 올려 레퍼런스부터 다시 봐야 한다. 그러지 않고 구현으로 바로 들어갔다. 결과는 이전 방향의 뼈대에 유리를 바른 페이지였고 design.md 는 옛 결정을 그대로 담고 있었다. 0단계부터 다시 돌았다.",
|
||||
},
|
||||
{
|
||||
caught: "유리판이 정면으로 서 있어 프레넬이 구조적으로 0이었다",
|
||||
fixed:
|
||||
"평면이 카메라를 정면으로 보면 법선과 시선의 내적이 1이라 가장자리 반사가 계산되지 않는다. 유리로 읽히게 하는 유일한 신호가 죽어 있었고, 그래서 판 여섯 장이 흐린 사각형으로 보였다. 법선을 미세하게 굽히고 테두리 광을 UV 경계에서 따로 만들었다.",
|
||||
},
|
||||
{
|
||||
caught: "페이지의 본체인 파이프라인이 화면의 43%만 쓰고 있었다",
|
||||
fixed:
|
||||
"1440px 중 625px. 아홉 섹션에서 가장 좁으면서 높이는 1637px 로 가장 길었다. 단계 설명과 산출물을 두 열로 열어 1113px 로 넓혔다.",
|
||||
},
|
||||
{
|
||||
caught: "대비를 재는 스크립트가 반투명 배경을 불투명으로 계산했다",
|
||||
fixed:
|
||||
"\"English 1.15:1\" 이라는 틀린 값이 나왔다. 알파를 아래에서 위로 합성하도록 고치자 실패 0건이었다. 검사 도구가 틀리면 통과도 실패도 의미가 없다.",
|
||||
},
|
||||
],
|
||||
note: "아홉 건 모두 만들면서 걸린 것이고, 걸린 뒤에 고쳤다. 사람이 잡은 것이 둘이다. 카드가 전형적이라는 말과, 폰트를 제대로 다루지 못한다는 말.",
|
||||
note: "열세 건 모두 만들면서 걸린 것이고, 걸린 뒤에 고쳤다. 사람이 잡은 것이 셋이다. 카드가 전형적이라는 말, 폰트를 제대로 다루지 못한다는 말, 그리고 우리 스킬을 진짜로 쓴 게 맞냐는 말.",
|
||||
},
|
||||
typography: {
|
||||
eyebrow: "한글 조판",
|
||||
|
|
@ -373,9 +400,12 @@ export const en: Content = {
|
|||
{ label: "Repository", href: "https://git.chanpaca.net/yunchan/designpaca" },
|
||||
{ label: "npm", href: "https://www.npmjs.com/package/designpaca" },
|
||||
],
|
||||
proofAlt:
|
||||
"A coffee roastery subscription landing page built with designpaca. The hero carries a table of acidity and body figures for three beans.",
|
||||
proofCaption: "Built with this skill, starting from one line of brief.",
|
||||
stage: {
|
||||
alt: "Six glass panes stand in a row along the depth axis. Scrolling moves the camera through them one at a time, and each pane recedes once passed.",
|
||||
caption: "One pane is one stage. Fail its condition and you do not reach the next.",
|
||||
gate: "GATE",
|
||||
pass: "PASS",
|
||||
},
|
||||
},
|
||||
pipeline: {
|
||||
eyebrow: "Six stages",
|
||||
|
|
@ -440,12 +470,12 @@ export const en: Content = {
|
|||
"Polishing sentences fixes sentences. The radius vocabulary, the translucent panels, the number of type steps all stay. So here are this page's own form metrics. If a number comes back badly, it ships as it is.",
|
||||
items: [
|
||||
{ label: "JS to first paint", value: "0.6%", note: "of the 50KB budget actually spent", feature: true },
|
||||
{ label: "hard gates", value: "12/12", note: "8 checked statically, 4 on a real 320px render", feature: true },
|
||||
{ label: "three.js payload", value: "185KB", note: "fetched only as the materials section approaches. Never in the initial bundle" },
|
||||
{ label: "hard gates", value: "12/12", note: "static checks plus real renders at 320px and 1440px", feature: true },
|
||||
{ label: "three.js payload", value: "184KB", note: "fetched only when the inspection frame enters view. Never in the initial bundle" },
|
||||
{ label: "slop fingerprints", value: "0", note: "9 patterns grepped" },
|
||||
{ label: "radius vocabulary", value: "2", note: "10px and 20px. The shell is derived" },
|
||||
{ label: "translucent panels", value: "5", note: "grew to 29 before being pulled back. Glass stayed only where something has to float" },
|
||||
{ label: "type scale steps", value: "5", note: "the display size sits outside the scale" },
|
||||
{ label: "radius vocabulary", value: "2", note: "3px and 14px. The pill shape is gone" },
|
||||
{ label: "translucent panels", value: "2", note: "grew to 29 before being pulled back. Glass stayed only on frames that hold something" },
|
||||
{ label: "type scale steps", value: "6", note: "as defined in tokens. Display sits outside the scale, and the largest type is 6x the body" },
|
||||
{ label: "font families", value: "2", note: "each language loads only its own" },
|
||||
{ label: "accent colours", value: "1", note: "light and dark are the same colour" },
|
||||
{ label: "time to interactive", value: "not yet", note: "measured with Lighthouse after deploy" },
|
||||
|
|
@ -501,8 +531,28 @@ export const en: Content = {
|
|||
fixed:
|
||||
"Bound the grid's main column to the token. The skill's own example code was wrong too, so that got fixed as well.",
|
||||
},
|
||||
{
|
||||
caught: "We skipped this skill's own stage 1 when the direction changed",
|
||||
fixed:
|
||||
"Switching the material to glass is a stage-2 decision, and that means going back to references first. We jumped straight to implementation instead. The result was glass painted onto the previous direction's skeleton, while design.md still described the old decisions. We re-ran the whole path from stage 0.",
|
||||
},
|
||||
{
|
||||
caught: "The glass panes faced the camera head-on, so Fresnel was structurally zero",
|
||||
fixed:
|
||||
"When a flat plane faces the camera, the dot product of normal and view is 1, so no edge reflection is computed. The one signal that makes a surface read as glass was dead, which is why six panes looked like blurry rectangles. We bend the normal slightly and derive the rim light from the UV edge instead.",
|
||||
},
|
||||
{
|
||||
caught: "The pipeline, the spine of this page, used only 43% of the viewport",
|
||||
fixed:
|
||||
"625px out of 1440. Narrowest of the nine sections while being the tallest at 1637px. Opening each stage into two columns brought it to 1113px.",
|
||||
},
|
||||
{
|
||||
caught: "The contrast script treated translucent backgrounds as opaque",
|
||||
fixed:
|
||||
"It reported \"English 1.15:1\", which was wrong. Compositing alpha bottom-up gave zero failures. A checker that is wrong makes both its passes and its failures meaningless.",
|
||||
},
|
||||
],
|
||||
note: "All nine were caught while building this page, and fixed after being caught. Two came from a person rather than a checker: the cards look generic, and the typography is not handled well.",
|
||||
note: "All thirteen were caught while building this page, and fixed after being caught. Three came from a person rather than a checker: the cards look generic, the typography is not handled well, and did we actually use our own skill.",
|
||||
},
|
||||
typography: {
|
||||
eyebrow: "Your language is probably not Latin",
|
||||
|
|
|
|||
|
|
@ -18,17 +18,22 @@ const FONT_CSS = {
|
|||
|
||||
const alt = lang === "ko" ? "/en/" : "/";
|
||||
|
||||
// 파비콘: 페이지의 스파인 모티프를 그대로 쓴 단순 기하 마크
|
||||
// 파비콘: 페이지의 스파인 모티프를 그대로 쓴 단순 기하 마크.
|
||||
// data: URI 안의 SVG 는 상위 문서의 커스텀 프로퍼티를 읽지 못한다.
|
||||
// 하드 게이트 #1 의 유일한 예외이고, 값은 tokens.css 와 손으로 맞춘다.
|
||||
// MARK_BG = --accent-inverse · MARK_FG = --surface-inverse
|
||||
const MARK_BG = "#0E6B63";
|
||||
const MARK_FG = "#F4F2EC";
|
||||
const FAVICON =
|
||||
"data:image/svg+xml," +
|
||||
encodeURIComponent(
|
||||
`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
|
||||
<rect width="32" height="32" rx="6" fill="#0E6B63"/>
|
||||
<path d="M11 7v18" stroke="#FAF9F6" stroke-width="2" stroke-linecap="round"/>
|
||||
<circle cx="11" cy="10" r="3" fill="#FAF9F6"/>
|
||||
<circle cx="11" cy="16" r="3" fill="#FAF9F6"/>
|
||||
<circle cx="11" cy="22" r="3" fill="#FAF9F6"/>
|
||||
<path d="M18 10h7M18 16h5M18 22h7" stroke="#FAF9F6" stroke-width="2" stroke-linecap="round" opacity=".55"/>
|
||||
<rect width="32" height="32" rx="3" fill="${MARK_BG}"/>
|
||||
<path d="M11 7v18" stroke="${MARK_FG}" stroke-width="2" stroke-linecap="round"/>
|
||||
<circle cx="11" cy="10" r="3" fill="${MARK_FG}"/>
|
||||
<circle cx="11" cy="16" r="3" fill="${MARK_FG}"/>
|
||||
<circle cx="11" cy="22" r="3" fill="${MARK_FG}"/>
|
||||
<path d="M18 10h7M18 16h5M18 22h7" stroke="${MARK_FG}" stroke-width="2" stroke-linecap="round" opacity=".55"/>
|
||||
</svg>`,
|
||||
);
|
||||
---
|
||||
|
|
@ -144,7 +149,12 @@ const FAVICON =
|
|||
|
||||
/* 상단에 붙은 풀블리드 바 대신 떠 있는 헤더 */
|
||||
/* 상단에 붙은 바가 아니라 떠 있는 유리 알약 */
|
||||
/* 언어 전환 링크에는 lang 속성이 붙는다(스크린리더가 "English" 를
|
||||
영어로 읽어야 하므로 옳다). 그런데 [lang] 셀렉터가 타입 스케일을
|
||||
통째로 재정의해서 이 링크만 16px 이 됐다 — 스케일 밖 단계가 하나 생긴다.
|
||||
크기는 헤더에서 확정하고 링크는 상속만 받는다. */
|
||||
.site-header {
|
||||
font-size: var(--step-0);
|
||||
position: fixed;
|
||||
top: var(--space-3);
|
||||
left: 0;
|
||||
|
|
@ -160,7 +170,7 @@ const FAVICON =
|
|||
justify-content: space-between;
|
||||
gap: var(--space-4);
|
||||
padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
|
||||
border-radius: 999px;
|
||||
border-radius: var(--radius-frame);
|
||||
}
|
||||
.wordmark {
|
||||
display: inline-flex;
|
||||
|
|
@ -176,11 +186,13 @@ const FAVICON =
|
|||
align-items: center;
|
||||
min-height: 36px;
|
||||
padding-inline: var(--space-3);
|
||||
border-radius: 999px;
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: inherit;
|
||||
background: var(--glass-tint-2);
|
||||
border: 1px solid var(--glass-edge);
|
||||
font-size: var(--step-0);
|
||||
color: var(--ink-muted);
|
||||
/* muted 로 두면 유리 위에서 2.59:1 이다. 언어 전환은 내비게이션이지
|
||||
보조 정보가 아니므로 ink 로 올린다(하드 게이트 #7) */
|
||||
color: var(--ink);
|
||||
text-decoration: none;
|
||||
transition: color var(--dur-instant) var(--ease-out),
|
||||
background var(--dur-instant) var(--ease-out);
|
||||
|
|
|
|||
|
|
@ -32,6 +32,12 @@ export interface HeroSceneOptions {
|
|||
/** CSS 커스텀 프로퍼티 이름 */
|
||||
accentVar: string;
|
||||
glowVar: string;
|
||||
/**
|
||||
* 통과한 게이트가 바뀔 때만 부른다. 프레임마다 부르지 않는다 —
|
||||
* R3(Codrops HAOQI) 에서 가져온 규칙이다. DOM 은 구조를 소유하고
|
||||
* WebGL 은 셰이더만 만진다. 매 프레임 DOM 을 쓰면 그 경계가 무너진다.
|
||||
*/
|
||||
onGate?: (index: number, total: number) => void;
|
||||
}
|
||||
|
||||
const NOISE = `
|
||||
|
|
@ -64,7 +70,7 @@ export function mountHeroScene(opts: HeroSceneOptions): void {
|
|||
io.observe(canvas);
|
||||
}
|
||||
|
||||
async function boot({ canvas, accentVar, glowVar }: HeroSceneOptions): Promise<void> {
|
||||
async function boot({ canvas, accentVar, glowVar, onGate }: HeroSceneOptions): Promise<void> {
|
||||
let THREE: typeof import("three");
|
||||
try {
|
||||
THREE = await import("three");
|
||||
|
|
@ -161,7 +167,10 @@ async function boot({ canvas, accentVar, glowVar }: HeroSceneOptions): Promise<v
|
|||
uniforms: {
|
||||
uScene: { value: rt.texture },
|
||||
uTime: { value: 0 },
|
||||
uEdge: { value: new THREE.Color("#ffffff") },
|
||||
// 테두리 광. 흰색을 박지 않고 강조색을 밝게 올려 쓴다 —
|
||||
// 토큰을 바꾸면 유리 테두리도 같이 따라와야 한다.
|
||||
uEdge: { value: accent.clone().lerp(new THREE.Color(1, 1, 1), 0.55) },
|
||||
uResolution: { value: new THREE.Vector2(1, 1) },
|
||||
},
|
||||
vertexShader: `
|
||||
varying vec2 vUv;
|
||||
|
|
@ -183,22 +192,31 @@ async function boot({ canvas, accentVar, glowVar }: HeroSceneOptions): Promise<v
|
|||
uniform sampler2D uScene;
|
||||
uniform float uTime;
|
||||
uniform vec3 uEdge;
|
||||
uniform vec2 uResolution;
|
||||
${NOISE}
|
||||
|
||||
void main() {
|
||||
// 판을 미세하게 굽힌다.
|
||||
// 완전히 평평한 판이 카메라를 정면으로 보면 dot(n, view) 가 1 이라
|
||||
// 프레넬이 구조적으로 0 이 된다. 그러면 유리로 읽히게 하는 신호가
|
||||
// 하나도 남지 않는다 — 이전 판이 흐린 얼룩으로 보였던 이유다.
|
||||
vec3 n = normalize(vNormalW + vec3((vUv - 0.5) * 0.9, 0.0));
|
||||
float fres = pow(1.0 - abs(dot(n, normalize(vViewDir))), 2.2);
|
||||
|
||||
// 판의 테두리. 평면에서 두께가 보이는 곳은 법선이 아니라 UV 경계다.
|
||||
vec2 e = min(vUv, 1.0 - vUv);
|
||||
float edge = 1.0 - smoothstep(0.0, 0.05, min(e.x, e.y));
|
||||
|
||||
// 화면 좌표를 굴절시켜 뒤 텍스처를 샘플링한다
|
||||
vec2 screen = gl_FragCoord.xy / vec2(textureSize(uScene, 0));
|
||||
vec2 screen = gl_FragCoord.xy / uResolution;
|
||||
vec2 flow = vec2(
|
||||
fbm(vUv * 2.4 + uTime * 0.05),
|
||||
fbm(vUv * 2.4 - uTime * 0.04 + 3.1)
|
||||
) - 0.5;
|
||||
vec3 back = texture2D(uScene, screen + flow * 0.07 + vNormalW.xy * 0.035).rgb;
|
||||
vec3 back = texture2D(uScene, screen + flow * 0.06 + n.xy * 0.05).rgb;
|
||||
|
||||
// 가장자리에서 빛이 서는 프레넬
|
||||
float fres = pow(1.0 - abs(dot(normalize(vNormalW), normalize(vViewDir))), 2.6);
|
||||
|
||||
vec3 col = back * 1.06 + uEdge * fres * 0.5;
|
||||
float alpha = 0.20 + fres * 0.55;
|
||||
vec3 col = back * 1.04 + uEdge * (fres * 0.32 + edge * 0.85);
|
||||
float alpha = 0.14 + fres * 0.26 + edge * 0.72;
|
||||
gl_FragColor = vec4(col, alpha);
|
||||
}
|
||||
`,
|
||||
|
|
@ -229,6 +247,9 @@ async function boot({ canvas, accentVar, glowVar }: HeroSceneOptions): Promise<v
|
|||
if (!r.width || !r.height) return;
|
||||
renderer.setSize(r.width, r.height, false);
|
||||
rt.setSize(Math.round(r.width * dpr * 0.6), Math.round(r.height * dpr * 0.6));
|
||||
// gl_FragCoord 는 캔버스의 드로잉버퍼 좌표다. 렌더 타겟은 그 0.6배라
|
||||
// 타겟 크기로 나누면 UV 가 1 을 넘어 텍스처가 잘린다.
|
||||
renderer.getDrawingBufferSize(paneMat.uniforms["uResolution"]!.value);
|
||||
camera.aspect = r.width / r.height;
|
||||
camera.updateProjectionMatrix();
|
||||
bgUniforms.uAspect.value = r.width / r.height;
|
||||
|
|
@ -262,22 +283,24 @@ async function boot({ canvas, accentVar, glowVar }: HeroSceneOptions): Promise<v
|
|||
|
||||
pointer.lerp(pointerTarget, 0.04);
|
||||
|
||||
const rect0 = canvas.getBoundingClientRect();
|
||||
const progress0 = Math.min(Math.max(-rect0.top / (rect0.height * 1.6), 0), 1);
|
||||
bgUniforms.uProgress.value = progress0;
|
||||
// 스크롤 진행도. addEventListener("scroll") 을 쓰지 않는다(하드 게이트 10).
|
||||
// rect 는 프레임당 한 번만 읽는다. 두 번 읽으면 레이아웃을 두 번 강제한다.
|
||||
const rect = canvas.getBoundingClientRect();
|
||||
// 액자가 화면 위로 92% 지나갔을 때 마지막 게이트를 통과하게 잡았다.
|
||||
// 그 뒤로는 액자가 보이지 않으므로 계속 진행시킬 이유가 없다.
|
||||
const travel = rect.height * 0.92;
|
||||
const progress = Math.min(Math.max(-rect.top / travel, 0), 1);
|
||||
|
||||
bgUniforms.uProgress.value = progress;
|
||||
bgUniforms.uTime.value = t;
|
||||
bgUniforms.uPointer.value.copy(pointer);
|
||||
paneMat.uniforms["uTime"]!.value = t;
|
||||
|
||||
// 스크롤 진행도. addEventListener("scroll") 을 쓰지 않는다(하드 게이트 10).
|
||||
// 이미 도는 렌더 루프 안에서 위치를 한 번 읽을 뿐이라 추가 비용이 없다.
|
||||
const rect = canvas.getBoundingClientRect();
|
||||
const travel = rect.height * 1.6;
|
||||
const progress = Math.min(Math.max(-rect.top / travel, 0), 1);
|
||||
onGate?.(Math.min(PANE_COUNT - 1, Math.floor(progress * PANE_COUNT)), PANE_COUNT);
|
||||
|
||||
// 카메라가 여섯 개의 문을 차례로 통과한다
|
||||
const depth = (PANE_COUNT - 1) * GATE_GAP;
|
||||
camera.position.z = 8.5 - progress * (depth + 6);
|
||||
camera.position.z = 7.2 - progress * (depth + 5);
|
||||
camera.position.x = (pointer.x - 0.5) * 1.1;
|
||||
camera.position.y = (pointer.y - 0.5) * -0.5;
|
||||
camera.lookAt(camera.position.x * 0.3, 0, camera.position.z - 10);
|
||||
|
|
|
|||
|
|
@ -165,7 +165,7 @@ a:hover { color: var(--accent); }
|
|||
isolation: isolate;
|
||||
background: var(--glass-tint);
|
||||
border: 1px solid var(--glass-edge);
|
||||
border-radius: var(--radius-md);
|
||||
border-radius: var(--radius-frame);
|
||||
box-shadow: var(--glass-hi), var(--shadow-2);
|
||||
backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
|
||||
-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
|
||||
|
|
@ -178,13 +178,7 @@ a:hover { color: var(--accent); }
|
|||
z-index: -1;
|
||||
border-radius: inherit;
|
||||
pointer-events: none;
|
||||
background:
|
||||
linear-gradient(
|
||||
180deg,
|
||||
rgb(255 255 255 / 0.10) 0%,
|
||||
rgb(255 255 255 / 0.02) 22%,
|
||||
transparent 55%
|
||||
);
|
||||
background: var(--glass-sheen);
|
||||
}
|
||||
/* backdrop-filter 에 SVG 필터를 얹는 것은 쓰지 않는다.
|
||||
Chrome 은 CSS.supports 로는 true 를 주면서 렌더에서 선언 전체를 버린다
|
||||
|
|
@ -199,21 +193,15 @@ a:hover { color: var(--accent); }
|
|||
border-radius: inherit;
|
||||
pointer-events: none;
|
||||
padding: 1px;
|
||||
background: conic-gradient(
|
||||
from 210deg,
|
||||
rgb(255 255 255 / 0.32),
|
||||
transparent 22%,
|
||||
transparent 58%,
|
||||
rgb(255 255 255 / 0.20) 74%,
|
||||
transparent 92%
|
||||
);
|
||||
background: var(--glass-rim);
|
||||
/* 아래 black 은 색이 아니라 마스크의 알파다. 팔레트와 무관하다 */
|
||||
-webkit-mask:
|
||||
linear-gradient(#000 0 0) content-box,
|
||||
linear-gradient(#000 0 0);
|
||||
linear-gradient(black 0 0) content-box,
|
||||
linear-gradient(black 0 0);
|
||||
-webkit-mask-composite: xor;
|
||||
mask:
|
||||
linear-gradient(#000 0 0) content-box,
|
||||
linear-gradient(#000 0 0);
|
||||
linear-gradient(black 0 0) content-box,
|
||||
linear-gradient(black 0 0);
|
||||
mask-composite: exclude;
|
||||
}
|
||||
|
||||
|
|
@ -237,27 +225,20 @@ a:hover { color: var(--accent); }
|
|||
/* 유리 위에 얹는 두 번째 판. 안쪽으로 갈수록 밝아진다 */
|
||||
.glass-2 { background: var(--glass-tint-2); }
|
||||
|
||||
/* 이중 베젤: 유리판이 트레이 안에 앉는다 */
|
||||
.shell {
|
||||
background: var(--glass-tint);
|
||||
border: 1px solid var(--glass-edge);
|
||||
border-radius: var(--radius-shell);
|
||||
padding: var(--shell-pad);
|
||||
box-shadow: var(--glass-hi), var(--shadow-2);
|
||||
backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
|
||||
-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
|
||||
}
|
||||
.core {
|
||||
/* 액자. 이중 베젤을 버렸다 — 껍데기와 속의 radius 가 서로 달라
|
||||
그것만으로 형태 어휘가 두 종 늘어난다(하드 게이트 #3).
|
||||
그리고 안이 불투명한 이미지면 backdrop-filter 는 아무것도 하지 않는다.
|
||||
유리로 읽히게 하는 것은 테두리 광과 위쪽 반사지 흐림이 아니다. */
|
||||
.frame {
|
||||
position: relative;
|
||||
background: var(--surface-sunken);
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06);
|
||||
}
|
||||
@media (prefers-reduced-transparency: reduce) {
|
||||
.shell {
|
||||
background: color-mix(in oklab, var(--surface) 88%, var(--ink));
|
||||
backdrop-filter: none;
|
||||
}
|
||||
border: 1px solid var(--glass-edge);
|
||||
border-radius: var(--radius-frame);
|
||||
box-shadow: var(--glass-hi), var(--core-hi), var(--shadow-2);
|
||||
overflow: clip;
|
||||
}
|
||||
/* 이미지를 담는 액자만. 인라인 여백을 지운다 */
|
||||
.frame > :is(img, picture, canvas) { display: block; width: 100%; height: auto; }
|
||||
|
||||
/* ---- 진입 연출 ----------------------------------------------
|
||||
opacity 로 콘텐츠를 숨기지 않는다.
|
||||
|
|
|
|||
|
|
@ -1,11 +1,15 @@
|
|||
/* ============================================================
|
||||
designpaca 소개 페이지 — 디자인 토큰
|
||||
방향 재설정 2026-08-20: Ethereal Glass
|
||||
프리셋: dark-instrument · 컨셉: 검사대 위의 물체
|
||||
|
||||
이 페이지는 SVG 필터와 three.js 를 파는 제품의 데모다.
|
||||
리퀴드 글래스는 그 두 기술의 결합 그 자체이므로 여기서는
|
||||
장식이 아니라 제품 시연이다. 다크 기반을 고른 것도 같은 이유다.
|
||||
유리는 어두운 바탕 위에서만 굴절이 읽힌다.
|
||||
다크를 "멋있어서" 고르지 않았다. 제품이 CLI 이고 사용자가 이
|
||||
화면을 터미널 옆에 두고 본다. 프리셋이 요구하는 근거다.
|
||||
|
||||
유리는 액자에만 쓴다. 액자 안은 3D, 액자 밖은 글자 —
|
||||
R2(lusion.co) 실측에서 가져온 원리다. 둘을 겹치면 3D 는 얼룩이
|
||||
되고 글자는 대비를 잃는다. 실제로 한 번 그렇게 만들었다.
|
||||
|
||||
전체 결정 근거는 design.md.
|
||||
============================================================ */
|
||||
|
||||
:root {
|
||||
|
|
@ -33,11 +37,17 @@
|
|||
--accent-ink: #04211D;
|
||||
--accent-inverse: #0E7A6E;
|
||||
--accent-ink-inverse: #FFFFFF;
|
||||
/* 셰이더가 쓰는 두 번째 광색. 강조색이 아니라 광원이다 */
|
||||
--glow-2: #6E7BFF;
|
||||
/* 셰이더가 쓰는 두 번째 광색. 강조색이 아니라 광원이다.
|
||||
보라기를 뺐다 — #6E7BFF 는 R 이 높아 보라-파랑으로 읽히고,
|
||||
그것이 antipatterns.md 의 슬롭 지문이자 dark-instrument 가
|
||||
"어두운 배경일수록 빠지기 쉬운 함정"으로 지목한 색이다. */
|
||||
--glow-2: #3D7BD6;
|
||||
|
||||
/* ---- 유리 ------------------------------------------------
|
||||
backdrop-filter 만으로는 흐린 유리다. 굴절은 SVG 가 만든다. */
|
||||
유리는 액자에만 쓴다. 헤더 · 검사대 프레임 · 게이트 배지.
|
||||
콘텐츠 카드에는 쓰지 않는다 — 유리는 무언가를 담을 때만
|
||||
의미가 있고, 아무 데나 바르면 그냥 반투명한 상자다.
|
||||
(R2 lusion.co 실측: 3D 를 액자에 가두고 텍스트는 액자 밖에 둔다) */
|
||||
--glass-tint: rgb(255 255 255 / 0.045);
|
||||
--glass-tint-2: rgb(255 255 255 / 0.085);
|
||||
--glass-edge: rgb(255 255 255 / 0.14);
|
||||
|
|
@ -47,17 +57,39 @@
|
|||
--glass-hi:
|
||||
inset 0 1px 0 rgb(255 255 255 / 0.22),
|
||||
inset 0 -1px 0 rgb(255 255 255 / 0.05);
|
||||
/* 표면 반사와 테두리 광. 값이 아니라 토큰으로 둬야 밝은 밴드에서
|
||||
같은 자리를 뒤집을 수 있다 (하드 게이트 #1) */
|
||||
--glass-sheen: linear-gradient(
|
||||
180deg,
|
||||
rgb(255 255 255 / 0.10) 0%,
|
||||
rgb(255 255 255 / 0.02) 22%,
|
||||
transparent 55%
|
||||
);
|
||||
--glass-rim: conic-gradient(
|
||||
from 210deg,
|
||||
rgb(255 255 255 / 0.32),
|
||||
transparent 22%,
|
||||
transparent 58%,
|
||||
rgb(255 255 255 / 0.20) 74%,
|
||||
transparent 92%
|
||||
);
|
||||
--core-hi: inset 0 1px 0 rgb(255 255 255 / 0.06);
|
||||
|
||||
--shadow-1: 0 1px 2px rgb(0 0 0 / 0.5);
|
||||
--shadow-2: 0 2px 6px rgb(0 0 0 / 0.4), 0 12px 32px rgb(0 0 0 / 0.5);
|
||||
--shadow-3: 0 6px 16px rgb(0 0 0 / 0.45), 0 32px 80px rgb(0 0 0 / 0.6);
|
||||
--inset-hi: var(--glass-hi);
|
||||
|
||||
/* ---- 형태 ------------------------------------------------ */
|
||||
--radius-sm: 10px;
|
||||
--radius-md: 20px;
|
||||
--shell-pad: 6px;
|
||||
--radius-shell: calc(var(--radius-md) + var(--shell-pad));
|
||||
/* ---- 형태 ------------------------------------------------
|
||||
두 종류뿐이다. 하드 게이트 #3 은 3종부터 실패로 본다.
|
||||
|
||||
3px — 요소. R1 zed.dev 실측에서 border-radius 2px 가 621회로
|
||||
압도적이었다. 개발자 도구는 각져야 정밀해 보인다
|
||||
14px — 액자. R2 lusion.co 가 3D 캔버스를 감싼 값이 15px 이다
|
||||
|
||||
pill(999px) 을 없앴다. 계기판에 알약은 없다. */
|
||||
--radius-sm: 3px;
|
||||
--radius-frame: 14px;
|
||||
|
||||
/* ---- 간격 ------------------------------------------------ */
|
||||
--space-1: 0.25rem;
|
||||
|
|
@ -98,12 +130,14 @@
|
|||
--font-sans: "Pretendard Variable", Pretendard,
|
||||
"KO Fallback Win", "KO Fallback Mac", system-ui, sans-serif;
|
||||
|
||||
--step--1: 0.8125rem;
|
||||
--step-0: 1.0625rem;
|
||||
--step-1: 1.328rem;
|
||||
--step-2: 1.660rem;
|
||||
--step-3: 2.076rem;
|
||||
--step-4: 2.595rem;
|
||||
/* 히어로에 힘을 준다 */
|
||||
/* 페이지에서 가장 큰 글자. 히어로가 아니라 수치 섹션이 쓴다 —
|
||||
히어로의 힘은 타이포가 아니라 검사대 액자에서 나온다 */
|
||||
--display: clamp(3rem, 1.2rem + 7.2vw, 7rem);
|
||||
|
||||
--leading-tight: 1.06;
|
||||
|
|
@ -122,6 +156,7 @@
|
|||
[lang="en"] {
|
||||
--font-sans: "Switzer", "EN Fallback", system-ui, -apple-system, sans-serif;
|
||||
|
||||
--step--1: 0.8125rem;
|
||||
--step-0: 1rem;
|
||||
--step-1: 1.25rem;
|
||||
--step-2: 1.5625rem;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue