I-013 Interaction medium

Blueprint Product Spotlight ブループリント・プロダクトスポットライト

Architectural cybernetic product blueprint rendered purely with CSS and SVG vectors, featuring dimension lines, coordinates, and pulsing interactive inspection nodes. 外部画像なしのCSSとSVGだけで緻密に描いた製品設計図。寸法線やパルス点滅するホットスポットを備える。

ライブデモ Live Demo

SPEC NO. 904-TX

SONIC CORE TRANSDUCER

LAT: 35.6762 / GRID: 88-ALPHATOLERANCE 0.02MM

CORE COMPONENTREF #01

Beryllium Diaphragm

Ultra-rigid 40mm dome tuned for hyper-linear high-frequency response up to 48kHz.

概要・用途・特徴Overview, Usage & Features

何ができるかWhat it does

Architectural cybernetic product blueprint rendered purely with CSS and SVG vectors, featuring dimension lines, coordinates, and pulsing interactive inspection nodes.

外部画像なしのCSSとSVGだけで緻密に描いた製品設計図。寸法線やパルス点滅するホットスポットを備える。

どこで使うかWhere to use

Portfolio, product showcase, landing page.

ポートフォリオ、製品紹介、ランディングページ。

特徴Key features

Architectural cybernetic product blueprint rendered purely with CSS and SVG vectors, featuring dimension lines, coordinates, and pulsing interactive inspection nodes.

外部画像なしのCSSとSVGだけで緻密に描いた製品設計図。寸法線やパルス点滅するホットスポットを備える。

調整可能パラメータ Adjustable Parameters

Parameter	Default	Description
`--bp-cyan`	`#38bdf8`	Change this CSS custom property to match your brand color.

実装コード Implementation Code

<div class="demo-stage bp-root"><div class="bp-stage"><div class="bp-header"><div class="bp-title-group"><span class="bp-schema-id">SPEC NO. 904-TX</span><h2 class="bp-schema-name">SONIC CORE TRANSDUCER</h2></div><div class="bp-grid-meta"><span class="bp-coord">LAT: 35.6762 / GRID: 88-ALPHA</span><span class="bp-status-pill">TOLERANCE 0.02MM</span></div></div><div class="bp-canvas"><svg class="bp-svg" viewBox="0 0 500 240" aria-hidden="true"><circle cx="250" cy="120" r="85" fill="none" stroke="rgba(56,189,248,0.2)" stroke-width="1"/><circle cx="250" cy="120" r="70" fill="none" stroke="rgba(56,189,248,0.4)" stroke-dasharray="4 4"/><circle cx="250" cy="120" r="45" fill="none" stroke="#38bdf8" stroke-width="1.5"/><circle cx="250" cy="120" r="18" fill="rgba(56,189,248,0.15)" stroke="#38bdf8" stroke-width="2"/><line x1="80" y1="120" x2="420" y2="120" stroke="rgba(56,189,248,0.3)" stroke-width="1" stroke-dasharray="2 4"/><line x1="250" y1="20" x2="250" y2="220" stroke="rgba(56,189,248,0.3)" stroke-width="1" stroke-dasharray="2 4"/><line x1="165" y1="35" x2="335" y2="35" stroke="#38bdf8" stroke-width="1"/><line x1="165" y1="30" x2="165" y2="40" stroke="#38bdf8" stroke-width="1"/><line x1="335" y1="30" x2="335" y2="40" stroke="#38bdf8" stroke-width="1"/><text x="250" y="28" fill="#38bdf8" font-size="9" font-family="monospace" text-anchor="middle">DIM: 170.00 MM</text></svg><button type="button" aria-pressed="true" class="bp-node bp-node-1 bp-active" data-title="Beryllium Diaphragm" data-desc="Ultra-rigid 40mm dome tuned for hyper-linear high-frequency response up to 48kHz." data-tag="CORE COMPONENT" aria-label="Inspect Beryllium Diaphragm node"><span class="bp-pulse" aria-hidden="true"></span><span class="bp-dot"></span></button><button type="button" aria-pressed="false" class="bp-node bp-node-2" data-title="Neodymium Magnetic Flux Ring" data-desc="1.8 Tesla symmetrical motor circuit preventing voice coil saturation during peak transient loads." data-tag="MOTOR MATRIX" aria-label="Inspect Magnetic Flux Ring node"><span class="bp-pulse" aria-hidden="true"></span><span class="bp-dot"></span></button><button type="button" aria-pressed="false" class="bp-node bp-node-3" data-title="Acoustic Damping Chamber" data-desc="Chamber with micro-perforated acoustic labyrinth eliminating back-wave cavity resonance." data-tag="DAMPING HOUSING" aria-label="Inspect Acoustic Damping Chamber node"><span class="bp-pulse" aria-hidden="true"></span><span class="bp-dot"></span></button></div><div class="bp-inspector" aria-live="polite" aria-atomic="true"><div class="bp-inspector-header"><span class="bp-inspector-tag">CORE COMPONENT</span><span class="bp-inspector-id">REF #01</span></div><h4 class="bp-inspector-title">Beryllium Diaphragm</h4><p class="bp-inspector-desc">Ultra-rigid 40mm dome tuned for hyper-linear high-frequency response up to 48kHz.</p></div></div></div>
<script>
(() => { document.querySelectorAll('.bp-root').forEach((root) => { const nodes = root.querySelectorAll('.bp-node'); const tag = root.querySelector('.bp-inspector-tag'); const idEl = root.querySelector('.bp-inspector-id'); const title = root.querySelector('.bp-inspector-title'); const desc = root.querySelector('.bp-inspector-desc'); if (!nodes.length || !title || !desc) return; nodes.forEach((btn, idx) => { btn.addEventListener('click', () => { nodes.forEach((n) => { n.classList.remove('bp-active'); n.setAttribute('aria-pressed','false'); }); btn.setAttribute('aria-pressed','true'); btn.classList.add('bp-active'); if (title) title.textContent = btn.dataset.title || ''; if (desc) desc.textContent = btn.dataset.desc || ''; if (tag) tag.textContent = btn.dataset.tag || 'SPECIFICATION'; if (idEl) idEl.textContent = 'REF #0' + (idx + 1); }); }); }); })();
</script>

.bp-root{--bp-bg:#001529;--bp-cyan:#38bdf8;--bp-line:rgba(56,189,248,0.15);--bp-panel:rgba(2,30,59,0.75);display:flex;align-items:center;justify-content:center;min-height:380px;padding:24px 16px;background:var(--bp-bg);color:#e0f2fe;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;box-sizing:border-box;width:100%}.bp-root *,.bp-root *::before,.bp-root *::after{box-sizing:border-box}.bp-root .bp-stage{width:100%;max-width:680px;background-color:#001a33;background-image:linear-gradient(var(--bp-line) 1px,transparent 1px),linear-gradient(90deg,var(--bp-line) 1px,transparent 1px);background-size:24px 24px;border:1px solid rgba(56,189,248,0.35);border-radius:12px;padding:20px;position:relative;box-shadow:inset 0 0 60px rgba(0,21,41,0.8),0 20px 40px rgba(0,0,0,0.6)}.bp-root .bp-header{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:1px solid rgba(56,189,248,0.25);padding-bottom:12px;margin-bottom:16px}.bp-root .bp-schema-id{font-size:10px;color:var(--bp-cyan);letter-spacing:1.5px}.bp-root .bp-schema-name{font-size:16px;font-weight:900;margin:4px 0 0 0;letter-spacing:0.5px;color:#ffffff}.bp-root .bp-grid-meta{display:flex;flex-direction:column;align-items:flex-end;gap:4px}.bp-root .bp-coord{font-size:9px;color:#7dd3fc}.bp-root .bp-status-pill{font-size:9px;padding:2px 6px;background:rgba(56,189,248,0.12);border:1px solid rgba(56,189,248,0.4);color:var(--bp-cyan);border-radius:4px}.bp-root .bp-canvas{position:relative;width:100%;height:220px;display:flex;align-items:center;justify-content:center;margin-bottom:16px}.bp-root .bp-svg{width:100%;height:100%;max-height:220px}.bp-root .bp-node{position:absolute;width:24px;height:24px;background:transparent;border:none;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;transform:translate(-50%,-50%)}.bp-root .bp-node:focus-visible{outline:2px solid #ffffff;border-radius:50%}.bp-root .bp-dot{width:10px;height:10px;border-radius:50%;background:var(--bp-cyan);box-shadow:0 0 8px var(--bp-cyan)}.bp-root .bp-node.bp-active .bp-dot{background:#ffffff;box-shadow:0 0 12px #ffffff}.bp-root .bp-pulse{position:absolute;width:22px;height:22px;border-radius:50%;border:1px solid var(--bp-cyan);pointer-events:none}.bp-root .bp-node-1{top:50%;left:50%}.bp-root .bp-node-2{top:50%;left:36%}.bp-root .bp-node-3{top:50%;left:64%}.bp-root .bp-inspector{background:var(--bp-panel);border:1px solid rgba(56,189,248,0.3);border-radius:8px;padding:14px 16px;backdrop-filter:blur(6px)}.bp-root .bp-inspector-header{display:flex;justify-content:space-between;margin-bottom:6px}.bp-root .bp-inspector-tag{font-size:10px;color:var(--bp-cyan);font-weight:700;letter-spacing:1px}.bp-root .bp-inspector-id{font-size:10px;color:#7dd3fc}.bp-root .bp-inspector-title{font-size:14px;font-weight:700;color:#ffffff;margin:0 0 4px 0}.bp-root .bp-inspector-desc{font-size:11px;line-height:1.5;color:#bae6fd;margin:0}@media (max-width:540px){.bp-root .bp-header{flex-direction:column;gap:8px}.bp-root .bp-grid-meta{align-items:flex-start}}@media (prefers-reduced-motion: no-preference){.bp-root .bp-pulse{animation:bp-pulse-kf 2s cubic-bezier(0.25,1,0.5,1) infinite}}@keyframes bp-pulse-kf{0%{transform:scale(0.6);opacity:1}100%{transform:scale(2.2);opacity:0}}
@media not all and (prefers-reduced-motion: no-preference){.bp-root *{transition:none!important;animation:none!important}}

import { useState } from "react";
import "./I-013.css";
const specs = [{ "title": "Beryllium Diaphragm", "desc": "Ultra-rigid 40mm dome tuned for hyper-linear high-frequency response up to 48kHz.", "tag": "CORE COMPONENT" }, { "title": "Neodymium Magnetic Flux Ring", "desc": "1.8 Tesla symmetrical motor circuit preventing voice coil saturation during peak transient loads.", "tag": "MOTOR MATRIX" }, { "title": "Acoustic Damping Chamber", "desc": "Chamber with micro-perforated acoustic labyrinth eliminating back-wave cavity resonance.", "tag": "DAMPING HOUSING" }];
function BlueprintProductSpotlight() {
  const [selected, setSelected] = useState(0);
  return <div className="demo-stage bp-root"><div className="bp-stage"><div className="bp-header"><div className="bp-title-group"><span className="bp-schema-id">{"SPEC NO. 904-TX"}</span><h2 className="bp-schema-name">{"SONIC CORE TRANSDUCER"}</h2></div><div className="bp-grid-meta"><span className="bp-coord">{"LAT: 35.6762 / GRID: 88-ALPHA"}</span><span className="bp-status-pill">{"TOLERANCE 0.02MM"}</span></div></div><div className="bp-canvas"><svg className="bp-svg" viewBox="0 0 500 240" aria-hidden="true"><circle cx="250" cy="120" r="85" fill="none" stroke="rgba(56,189,248,0.2)" strokeWidth="1" /><circle cx="250" cy="120" r="70" fill="none" stroke="rgba(56,189,248,0.4)" strokeDasharray="4 4" /><circle cx="250" cy="120" r="45" fill="none" stroke="#38bdf8" strokeWidth="1.5" /><circle cx="250" cy="120" r="18" fill="rgba(56,189,248,0.15)" stroke="#38bdf8" strokeWidth="2" /><line x1="80" y1="120" x2="420" y2="120" stroke="rgba(56,189,248,0.3)" strokeWidth="1" strokeDasharray="2 4" /><line x1="250" y1="20" x2="250" y2="220" stroke="rgba(56,189,248,0.3)" strokeWidth="1" strokeDasharray="2 4" /><line x1="165" y1="35" x2="335" y2="35" stroke="#38bdf8" strokeWidth="1" /><line x1="165" y1="30" x2="165" y2="40" stroke="#38bdf8" strokeWidth="1" /><line x1="335" y1="30" x2="335" y2="40" stroke="#38bdf8" strokeWidth="1" /><text x="250" y="28" fill="#38bdf8" fontSize="9" fontFamily="monospace" textAnchor="middle">{"DIM: 170.00 MM"}</text></svg><button type="button" data-title="Beryllium Diaphragm" data-desc="Ultra-rigid 40mm dome tuned for hyper-linear high-frequency response up to 48kHz." data-tag="CORE COMPONENT" aria-label="Inspect Beryllium Diaphragm node" className={"bp-node bp-node-1" + (selected === 0 ? " bp-active" : "")} aria-pressed={selected === 0} onClick={() => setSelected(0)}><span className="bp-pulse" aria-hidden="true" /><span className="bp-dot" /></button><button type="button" data-title="Neodymium Magnetic Flux Ring" data-desc="1.8 Tesla symmetrical motor circuit preventing voice coil saturation during peak transient loads." data-tag="MOTOR MATRIX" aria-label="Inspect Magnetic Flux Ring node" className={"bp-node bp-node-2" + (selected === 1 ? " bp-active" : "")} aria-pressed={selected === 1} onClick={() => setSelected(1)}><span className="bp-pulse" aria-hidden="true" /><span className="bp-dot" /></button><button type="button" data-title="Acoustic Damping Chamber" data-desc="Chamber with micro-perforated acoustic labyrinth eliminating back-wave cavity resonance." data-tag="DAMPING HOUSING" aria-label="Inspect Acoustic Damping Chamber node" className={"bp-node bp-node-3" + (selected === 2 ? " bp-active" : "")} aria-pressed={selected === 2} onClick={() => setSelected(2)}><span className="bp-pulse" aria-hidden="true" /><span className="bp-dot" /></button></div><div className="bp-inspector" aria-live="polite" aria-atomic="true"><div className="bp-inspector-header"><span className="bp-inspector-tag">{specs[selected].tag}</span><span className="bp-inspector-id">{"REF #0" + (selected + 1)}</span></div><h4 className="bp-inspector-title">{specs[selected].title}</h4><p className="bp-inspector-desc">{specs[selected].desc}</p></div></div></div>;
}
export {
  BlueprintProductSpotlight as default
};

.bp-root{--bp-bg:#001529;--bp-cyan:#38bdf8;--bp-line:rgba(56,189,248,0.15);--bp-panel:rgba(2,30,59,0.75);display:flex;align-items:center;justify-content:center;min-height:380px;padding:24px 16px;background:var(--bp-bg);color:#e0f2fe;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;box-sizing:border-box;width:100%}.bp-root *,.bp-root *::before,.bp-root *::after{box-sizing:border-box}.bp-root .bp-stage{width:100%;max-width:680px;background-color:#001a33;background-image:linear-gradient(var(--bp-line) 1px,transparent 1px),linear-gradient(90deg,var(--bp-line) 1px,transparent 1px);background-size:24px 24px;border:1px solid rgba(56,189,248,0.35);border-radius:12px;padding:20px;position:relative;box-shadow:inset 0 0 60px rgba(0,21,41,0.8),0 20px 40px rgba(0,0,0,0.6)}.bp-root .bp-header{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:1px solid rgba(56,189,248,0.25);padding-bottom:12px;margin-bottom:16px}.bp-root .bp-schema-id{font-size:10px;color:var(--bp-cyan);letter-spacing:1.5px}.bp-root .bp-schema-name{font-size:16px;font-weight:900;margin:4px 0 0 0;letter-spacing:0.5px;color:#ffffff}.bp-root .bp-grid-meta{display:flex;flex-direction:column;align-items:flex-end;gap:4px}.bp-root .bp-coord{font-size:9px;color:#7dd3fc}.bp-root .bp-status-pill{font-size:9px;padding:2px 6px;background:rgba(56,189,248,0.12);border:1px solid rgba(56,189,248,0.4);color:var(--bp-cyan);border-radius:4px}.bp-root .bp-canvas{position:relative;width:100%;height:220px;display:flex;align-items:center;justify-content:center;margin-bottom:16px}.bp-root .bp-svg{width:100%;height:100%;max-height:220px}.bp-root .bp-node{position:absolute;width:24px;height:24px;background:transparent;border:none;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;transform:translate(-50%,-50%)}.bp-root .bp-node:focus-visible{outline:2px solid #ffffff;border-radius:50%}.bp-root .bp-dot{width:10px;height:10px;border-radius:50%;background:var(--bp-cyan);box-shadow:0 0 8px var(--bp-cyan)}.bp-root .bp-node.bp-active .bp-dot{background:#ffffff;box-shadow:0 0 12px #ffffff}.bp-root .bp-pulse{position:absolute;width:22px;height:22px;border-radius:50%;border:1px solid var(--bp-cyan);pointer-events:none}.bp-root .bp-node-1{top:50%;left:50%}.bp-root .bp-node-2{top:50%;left:36%}.bp-root .bp-node-3{top:50%;left:64%}.bp-root .bp-inspector{background:var(--bp-panel);border:1px solid rgba(56,189,248,0.3);border-radius:8px;padding:14px 16px;backdrop-filter:blur(6px)}.bp-root .bp-inspector-header{display:flex;justify-content:space-between;margin-bottom:6px}.bp-root .bp-inspector-tag{font-size:10px;color:var(--bp-cyan);font-weight:700;letter-spacing:1px}.bp-root .bp-inspector-id{font-size:10px;color:#7dd3fc}.bp-root .bp-inspector-title{font-size:14px;font-weight:700;color:#ffffff;margin:0 0 4px 0}.bp-root .bp-inspector-desc{font-size:11px;line-height:1.5;color:#bae6fd;margin:0}@media (max-width:540px){.bp-root .bp-header{flex-direction:column;gap:8px}.bp-root .bp-grid-meta{align-items:flex-start}}@media (prefers-reduced-motion: no-preference){.bp-root .bp-pulse{animation:bp-pulse-kf 2s cubic-bezier(0.25,1,0.5,1) infinite}}@keyframes bp-pulse-kf{0%{transform:scale(0.6);opacity:1}100%{transform:scale(2.2);opacity:0}}
@media not all and (prefers-reduced-motion: no-preference){.bp-root *{transition:none!important;animation:none!important}}

仕組みとカスタマイズHow It Works & Customization

仕組みHow it works

Scoped CSS creates the visual design; small vanilla JavaScript handlers update the local demo state.

スコープ化したCSSで描画し、Vanilla JavaScriptでデモ内の状態だけを更新します。

カスタマイズ方法Customization

Change this CSS custom property to match your brand color.

CSSカスタムプロパティでブランドカラーを変更できます。

注意点Caveats

The sample content is fictional. No external assets or libraries are required. Motion follows the operating system preference. Demo labels are English; surrounding documentation supports Japanese and English.

デモ内容は架空です。外部素材・ライブラリは不要。OSの動きを減らす設定に対応します。デモ内のラベルは英語、解説は日英対応です。

よくある質問 Frequently Asked Questions

Does this demo need external libraries? 外部ライブラリは必要ですか？