yunchan/designpaca
1
0
Fork 0
Code Issues Pull requests Projects Releases 5 Packages Wiki Activity Actions

feat(site): rework 19 marketing showcases for composition diversity
Some checks are pending
ci / build (push) Waiting to run
Details

Browse source 
Measured convergence before: split hero 13/19, top-bar nav 19/19,
one-line notice footer 14/19, body Pretendard 17/21, 10 similarity
pairs above 0.78. Each showcase got a pre-assigned hero family, nav
form, footer form, type pair, background, accent hue, radius, motion
grammar and material from outputs/rework-2026-10-06/plan.md; direction
cards and the chosen reason are recorded in every design.md.

After: 0 similarity warnings, 19 distinct display faces, 7 hero
families, 5 nav forms, 5 footer forms, no scroll reveals, 5 showcases
with SVG filter materials. Example contact values replace bracket
placeholders under the existing fictional-brand notices. Thumbnails,
OG images, card copy and three e2e assertions updated; dead CSS in
dure-enrollment and hannam-jari removed; similarity.mjs learns the new
font families.
This commit is contained in:
Yun Chan 2026-10-06 16:55:50 +09:00
parent 88c11682b1
commit 8e3cdb0d3b
296 changed files with 19131 additions and 17538 deletions
Download patch file Download diff file Expand all files Collapse all files

336
apps/site/public/work/synapse-bci/index.html
View file

@ -1,244 +1,187 @@
<!doctype html>
<html lang="en">
<html lang="ko">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Synapse BCI Lab · Neural Interface Study</title>
<title>Synapse BCI Lab · 신경 인터페이스 연구 개념서</title>
<meta
name="description"
content="An illustrative neural-interface study showing how simulated signals, reporting fields, and research commitments can be communicated."
/>
<meta property="og:title" content="Synapse BCI Lab · Neural Interface Study" />
<meta
property="og:description"
content="An illustrative interface concept with simulated signals and no clinical results."
content="64채널 표면 전극 연구에서 기록할 신호와 기록하지 않을 신호, 데이터 권리, 보고 항목을 정리한 신경 인터페이스 연구 개념서."
/>
<meta property="og:title" content="Synapse BCI Lab · 신경 인터페이스 연구 개념서" />
<meta property="og:description" content="64채널 표면 전극 연구의 동의 절차, 데이터 권리, 보고 항목을 정리한 연구 개념서." />
<meta property="og:type" content="website" />
<meta name="theme-color" content="#08090B" />
<meta property="og:image" content="./og.png" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="theme-color" content="#dbe5cb" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Sans+KR:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap"
href="https://fonts.googleapis.com/css2?family=Gowun+Batang:wght@400;700&family=Hahmlet:wght@400;600;700&display=swap"
/>
<link rel="stylesheet" href="./styles/main.css?v=20260912all" />
<link rel="stylesheet" href="./styles/main.css?v=20261006" />
<link
rel="icon"
href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%2308090B'/%3E%3Cpath d='M6 24l6-6 4 4 9-14' fill='none' stroke='%23D9A441' stroke-width='2'/%3E%3Cpath d='M19 8h6v6' fill='none' stroke='%23D9A441' stroke-width='2'/%3E%3C/svg%3E"
href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%23DBE5CB'/%3E%3Cpath d='M0 8h32M0 16h32M0 24h32M8 0v32M16 0v32M24 0v32' stroke='%23D88F7F' stroke-width='.6'/%3E%3Cpath d='M3 18h7l2-9 3 15 3-11 2 5h9' fill='none' stroke='%2317201A' stroke-width='2'/%3E%3C/svg%3E"
/>
</head>
<body>
<a class="skip" href="#main">Skip to main content</a>
<a class="skip" href="#main">본문으로 건너뛰기</a>
<header class="site-head">
<div class="wrap head-inner">
<a class="wordmark" href="#main">synapse<span class="wordmark-dot">·</span>bci</a>
<nav class="nav" aria-label="Sections">
<a href="#raster">Raster</a>
<a href="#device">Device</a>
<a href="#numbers">Numbers</a>
<a href="#ethics">Ethics</a>
</nav>
<a class="wordmark" href="#main">Synapse BCI Lab<span>연구 개념서</span></a>
</div>
</header>
<div class="scope-note">
<p class="wrap">개념 페이지입니다. 임상시험·참여자·실제 기기가 없으며, 아래 기록지의 신호는 시뮬레이션입니다.</p>
</div>
<main id="main">
<section class="hero" aria-labelledby="hero-h">
<div class="wrap hero-grid">
<div class="hero-text">
<p class="hero-kicker reveal">Illustrative μECoG concept · simulated signal display</p>
<h1 id="hero-h" class="reveal" style="--delay: 60ms">
A signal interface,<br />explained clearly
</h1>
<p class="lead reveal" style="--delay: 120ms">
This page illustrates how a neural-interface study could describe
signals, reporting, and safeguards. It is not a clinical device,
a trial, or evidence of performance. The raster is simulated and
contains no participant data.
</p>
<dl class="trial-register reveal" style="--delay: 150ms">
<div>
<dt>study status</dt>
<dd>illustrative concept · no trial</dd>
</div>
<div>
<dt>reporting</dt>
<dd>no clinical outcomes reported</dd>
</div>
<div>
<dt>raster source</dt>
<dd>simulated signal · no participant data</dd>
</div>
</dl>
<div class="hero-actions reveal" style="--delay: 180ms">
<a class="btn" href="#numbers">See the reporting format</a>
<a class="link-quiet" href="#ethics">Read the research principles</a>
</div>
</div>
<figure class="raster-frame reveal" style="--delay: 140ms">
<figcaption class="raster-head">
<span>SPIKE RASTER · 64 CH · SIMULATED</span>
<span>2.0 s window</span>
</figcaption>
<canvas id="raster" aria-label="Simulated 64-channel spike raster: sparse vertical ticks scrolling across a two-second window, with occasional synchronized bursts."></canvas>
<div class="raster-legend">
<span class="legend-tick" aria-hidden="true"></span>
<span>each tick — one detected spike · bursts are channel-sync events</span>
</div>
</figure>
<section class="title-block" aria-labelledby="hero-h">
<div class="doc">
<p class="doc-id">연구 개념서 SYN-64 · 2026년 10월판</p>
<h1 id="hero-h">신호 기록 전에<br />동의부터 받습니다</h1>
<p class="lead">
64채널 표면 전극으로 기록할 신호와 기록하지 않을 신호, 기록을 볼 수 있는 사람과
보관 기간을 먼저 정리했습니다. 신호 기록 예시는 그 아래에 있습니다.
</p>
<nav class="toc" aria-labelledby="toc-h">
<h2 id="toc-h" class="toc-title">차례</h2>
<ol class="toc-list">
<li><a href="#recorder"><span class="toc-no">그림 1</span><span class="toc-name">64채널 스파이크 기록지</span></a></li>
<li><a href="#device"><span class="toc-no">제1장</span><span class="toc-name">뇌를 뚫지 않는 표면 전극</span></a></li>
<li><a href="#numbers"><span class="toc-no">제2장</span><span class="toc-name">보고서 필수 항목</span></a></li>
<li><a href="#ethics"><span class="toc-no">제3장</span><span class="toc-name">기록하기 전에 정하는 세 가지</span></a></li>
</ol>
</nav>
</div>
</section>
<figure id="recorder" class="recorder">
<canvas id="raster" aria-label="시뮬레이션한 64채널 스파이크 기록지: 붉은 눈금 위에 검은 세로 눈금이 2초 창을 따라 흘러가고, 가끔 여러 채널이 함께 튀는 동기 발화가 지나갑니다."></canvas>
<figcaption class="wrap">
<span><b>그림 1</b> · 64채널 스파이크 기록 · 시뮬레이션</span>
<span>눈금 하나 = 검출된 스파이크 하나 · 세로로 겹친 줄 = 채널 동기 발화 · 2초 창</span>
</figcaption>
</figure>
<section id="device" class="section" aria-labelledby="device-h">
<div class="wrap two">
<figure class="two-photo reveal">
<div class="doc">
<div class="article-head">
<span class="article-no">제1장</span>
<h2 id="device-h">뇌를 뚫지 않는 표면 전극</h2>
</div>
<p>
SYN-64는 뇌를 뚫지 않고 표면에 얹는 얇은 전극판입니다. 신호 품질보다 먼저
전극이 닿는 조직, 접촉 기간, 제거한 뒤 남는 물질을 확인합니다.
</p>
<figure class="plate">
<img
src="./assets/chip-macro.webp"
alt="Illustrative neural-interface concept plate with dense gold traces and a micro-electrode grid at one edge"
alt="금색 배선이 촘촘한 신경 인터페이스 개념 판, 한쪽 끝에 미세 전극 격자가 보이는 참고 이미지"
width="900"
height="1200"
loading="lazy"
/>
<figcaption>SYN-64 concept plate · illustrative reference image</figcaption>
<figcaption>그림 2 · SYN-64 개념 판 — 오른쪽 아래 금색 격자가 전극 64개 자리</figcaption>
</figure>
<div class="two-text">
<h2 id="device-h">Surface interface,<br />explained</h2>
<p>
The SYN-64 is an illustrative surface-interface concept. It helps
explain the questions a real device page must answer about contact,
tissue interaction, and user safety; it does not describe an
implant available for study or care.
</p>
<p class="muted">
The image is a constructed reference for this concept, not a
clinical product photograph or a surgical instruction.
</p>
</div>
</div>
</section>
<section id="numbers" class="section band" aria-labelledby="numbers-h">
<div class="wrap">
<h2 id="numbers-h" class="reveal">Reporting fields, not results</h2>
<div class="table-wrap reveal" style="--delay: 80ms">
<table>
<caption class="sr-only">
Illustrative research reporting fields — metric, reported value, and condition
</caption>
<section id="numbers" class="section" aria-labelledby="numbers-h">
<div class="doc">
<div class="article-head">
<span class="article-no">제2장</span>
<h2 id="numbers-h">보고서 필수 항목</h2>
</div>
<p>
아직 측정하지 않은 값은 비워 두고, 비워 둔 이유를 함께 적습니다.
</p>
<div class="table-wrap plate">
<table class="report-table">
<caption class="sr-only">연구 보고 항목 — 지표, 보고 값, 비워 둔 이유</caption>
<thead>
<tr>
<th scope="col">Metric</th>
<th scope="col" class="num">Value</th>
<th scope="col">Condition</th>
<th scope="col">지표</th>
<th scope="col" class="num">값</th>
<th scope="col">비워 둔 이유</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Decode latency</th>
<td class="num">—</td>
<td>No clinical result reported</td>
</tr>
<tr>
<th scope="row">Raw sampling</th>
<td class="num">—</td>
<td>No device specification reported</td>
</tr>
<tr>
<th scope="row">SNR</th>
<td class="num">—</td>
<td>No clinical measurement reported</td>
</tr>
<tr>
<th scope="row">Gesture classes</th>
<td class="num">—</td>
<td>No accuracy or participant result reported</td>
</tr>
<tr>
<th scope="row">Wireless link</th>
<td class="num">—</td>
<td>No system detail reported</td>
</tr>
<tr><th scope="row">해독 지연</th><td class="num">—</td><td>참여자 기록 없음</td></tr>
<tr><th scope="row">원신호 표본 주기</th><td class="num">—</td><td>기기 사양 미확정</td></tr>
<tr><th scope="row">신호 대 잡음비</th><td class="num">—</td><td>측정 안 함</td></tr>
<tr><th scope="row">동작 분류 수와 정확도</th><td class="num">—</td><td>참여자 기록 없음</td></tr>
<tr><th scope="row">무선 전송 방식</th><td class="num">—</td><td>시스템 설계 전</td></tr>
</tbody>
</table>
</div>
<p class="measure-note reveal" style="--delay: 140ms">
This table shows the fields a responsible report should identify.
It deliberately reports no clinical values, participant outcomes,
regulatory status, or device availability.
</p>
</div>
</section>
<section class="section plate" aria-label="Illustrative microelectrode layout reference image">
<figure class="plate-fig reveal">
<img
src="./assets/thread-array.webp"
alt="Illustrative gold-tipped microelectrode layout spreading across a dark reference stage"
width="1440"
height="810"
loading="lazy"
/>
<figcaption class="wrap">Illustrative electrode layout · reference image</figcaption>
</figure>
</section>
<section id="ethics" class="section" aria-labelledby="ethics-h">
<div class="wrap ethics-grid">
<h2 id="ethics-h">Research principles for a real study</h2>
<ul class="ethics-list">
<li class="reveal">
<h3>Signals are not advertising data</h3>
<p>
A real study should define purpose limits before data collection
and should not repurpose neural signals for advertising or profiling.
</p>
<div class="doc">
<div class="article-head">
<span class="article-no">제3장</span>
<h2 id="ethics-h">기록하기 전에 정하는 세 가지</h2>
</div>
<ol class="clauses">
<li>
<h3>연구 목적 외에는 쓰지 않습니다</h3>
<p>신경 신호는 광고·프로파일링에 쓰지 않습니다. 사용 범위는 수집 전에 문서로 정합니다.</p>
</li>
<li class="reveal" style="--delay: 80ms">
<h3>Withdrawal must be possible</h3>
<p>
A real protocol must explain withdrawal, support, and follow-up
before enrollment. This concept reports no participants or outcomes.
</p>
<li>
<h3>언제든 참여를 중단할 수 있습니다</h3>
<p>중단 방법, 중단 뒤 지원과 추적 관찰을 등록 전에 설명합니다. 그만둔 사람의 기록이 어떻게 처리되는지도 함께 적습니다.</p>
</li>
<li class="reveal" style="--delay: 160ms">
<h3>Data access needs a stated boundary</h3>
<p>
A real study must state how raw data is retained, who can access
it, and how publication separates aggregate findings from identity.
</p>
<li>
<h3>원자료 열람 권한을 밝힙니다</h3>
<p>원신호의 보관 기간, 열람 권한, 그리고 발표할 때 집계 결과와 신원을 어떻게 떼어 놓는지를 밝힙니다.</p>
</li>
</ul>
</ol>
</div>
</section>
<section class="section band contact" aria-labelledby="contact-h">
<div class="wrap contact-grid">
<h2 id="contact-h">About this concept</h2>
<p>
This is a design concept for explaining an emerging research area.
It does not recruit participants, accept data-access requests, or
provide medical or research services.
</p>
<a class="btn" href="#main">Return to the concept</a>
<section class="closing" aria-labelledby="closing-h">
<div class="doc">
<h2 id="closing-h">기록하지 않을 신호도<br />미리 정해 둡니다</h2>
<a class="back-link" href="#recorder">기록지로 돌아가기</a>
</div>
</section>
</main>
<footer class="site-foot">
<div class="wrap foot-inner">
<p>synapse bci · illustrative research concept</p>
<p class="foot-meta">no trial, clinical result, regulatory approval, or participant data</p>
<p>Synapse BCI Lab · 연구 개념서 SYN-64</p>
<p>designpaca 쇼케이스</p>
</div>
</footer>
<script>
// 기록지: 붉은 인쇄 눈금 위에 검은 잉크로 스파이크를 찍고 종이처럼 왼쪽으로 흘린다.
// 화면 밖이면 멈추고, 움직임 줄이기면 한 장만 그린다.
const canvas = document.getElementById("raster");
const reduced = matchMedia("(prefers-reduced-motion: reduce)").matches;
const CH = 64;
let ctx, w, h, dpr, running = false;
const PAPER = "#dbe5cb";
const GRID = "rgba(216, 143, 127, 0.55)";
const GRID_MAJOR = "rgba(196, 98, 80, 0.7)";
const INK = "rgba(23, 32, 26, 0.82)";
const INK_BURST = "rgba(163, 39, 28, 1)";
let ctx, w, h, dpr, running = false, feed = 0;
function paperColumn(x, width) {
ctx.fillStyle = PAPER;
ctx.fillRect(x, 0, width, h);
ctx.fillStyle = GRID;
for (let row = 0; row <= 8; row++) {
ctx.fillRect(x, Math.round((row * h) / 8), width, 1);
}
}
function fit() {
dpr = Math.min(devicePixelRatio || 1, 1.5);
@ -248,13 +191,14 @@
canvas.height = Math.round(h * dpr);
ctx = canvas.getContext("2d");
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
ctx.fillStyle = "#0b0d10";
ctx.fillRect(0, 0, w, h);
paperColumn(0, w);
for (let x = 0; x < w; x += 24) {
ctx.fillStyle = x % 120 === 0 ? GRID_MAJOR : GRID;
ctx.fillRect(x, 0, 1, h);
}
}
const rate = () => 0.02 + Math.random() * 0.05;
const GOLD = "rgba(235, 184, 78, 1)";
const GOLD_DIM = "rgba(217, 164, 65, 0.72)";
const rate = () => 0.015 + Math.random() * 0.04;
function column(x) {
const burst = Math.random() < 0.006;
@ -262,12 +206,12 @@
for (let ch = 0; ch < CH; ch++) {
const fire = burst ? Math.random() < 0.55 : Math.random() < rate();
if (!fire) continue;
ctx.strokeStyle = burst ? GOLD : GOLD_DIM;
ctx.lineWidth = burst ? 1.35 : 1;
ctx.strokeStyle = burst ? INK_BURST : INK;
ctx.lineWidth = burst ? 1.4 : 1;
ctx.beginPath();
const y = ch * rowH + rowH / 2;
ctx.moveTo(x, y - rowH * 0.36);
ctx.lineTo(x, y + rowH * 0.36);
ctx.moveTo(x, y - rowH * 0.38);
ctx.lineTo(x, y + rowH * 0.38);
ctx.stroke();
}
}
@ -275,9 +219,18 @@
function step() {
if (!running) return;
const dx = 2;
ctx.drawImage(canvas, 0, 0, canvas.width, canvas.height, -dx * dpr, 0, canvas.width, canvas.height);
ctx.fillStyle = "#0b0d10";
ctx.fillRect(w - dx - 1, 0, dx + 2, h);
// 장치 픽셀 단위로 옮긴다. 변환 행렬(dpr)을 그대로 두면 매 프레임 그림이
// dpr 배로 늘어나 고밀도 화면에서 기록지가 눈금색으로 번진다(390@2x 실측).
ctx.save();
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.drawImage(canvas, -Math.round(dx * dpr), 0);
ctx.restore();
paperColumn(w - dx - 1, dx + 2);
feed += dx;
if (feed % 24 < dx) {
ctx.fillStyle = feed % 120 < dx ? GRID_MAJOR : GRID;
ctx.fillRect(w - 1, 0, 1, h);
}
column(w - 1);
requestAnimationFrame(step);
}
@ -286,11 +239,14 @@
for (let x = 0; x < w; x += 3) column(x);
}
// 첫 장은 이미 기록된 종이로 시작한다. 빈 눈금만 보이는 구간을 두지 않는다.
fit();
addEventListener("resize", fit, { passive: true });
if (reduced) {
staticFrame();
addEventListener("resize", () => {
fit();
staticFrame();
} else {
}, { passive: true });
if (!reduced) {
const io = new IntersectionObserver((entries) => {
const on = entries[0].isIntersecting;
if (on && !running) {
@ -302,18 +258,6 @@
});
io.observe(canvas);
}
const io2 = new IntersectionObserver(
(entries) => {
for (const e of entries) {
if (!e.isIntersecting) continue;
e.target.classList.add("is-in");
io2.unobserve(e.target);
}
},
{ rootMargin: "0px 0px -8% 0px", threshold: 0.05 },
);
for (const el of document.querySelectorAll(".reveal")) io2.observe(el);
</script>
</body>
</html>