// hifi-hero-abstracts.jsx — abstract hero illustration alternatives
// Three options, all in the same fresh-green tonal range, more abstract /
// graphic than the literal mountain landscape.
// ───────────────────────────────────────────────────────────
// Option 1 — "Sunrise Arcs"
// Concentric arcs rising from a horizon, with a soft sun and a thin path.
// Reads as: 朝日・始まり・前へ進む
// ───────────────────────────────────────────────────────────
function HeroArcs({ width = 560, height = 480 }) {
return (
);
}
// ───────────────────────────────────────────────────────────
// Option 2 — "Soft Shapes"
// Overlapping organic blobs in green tones, with a small accent dot.
// Reads as: 重なり・つながり・やわらかさ
// ───────────────────────────────────────────────────────────
function HeroShapes({ width = 560, height = 480 }) {
return (
);
}
// ───────────────────────────────────────────────────────────
// Option 3 — "Topo Lines"
// Topographic contour lines, very abstract / geo-data feeling.
// Reads as: 道筋・等高線・テクノロジー × 自然
// ───────────────────────────────────────────────────────────
function HeroTopo({ width = 560, height = 480 }) {
// Concentric topographic ovals, each slightly offset
const rings = [
{ rx: 240, ry: 170, cx: 290, cy: 280, sw: 1.6, op: .85, c: '#306b3a' },
{ rx: 210, ry: 145, cx: 290, cy: 278, sw: 1.4, op: .75, c: '#467548' },
{ rx: 180, ry: 122, cx: 288, cy: 275, sw: 1.3, op: .7, c: '#5a8a55' },
{ rx: 150, ry: 100, cx: 285, cy: 271, sw: 1.2, op: .65, c: '#6b9461' },
{ rx: 120, ry: 80, cx: 281, cy: 266, sw: 1.1, op: .6, c: '#84a578' },
{ rx: 92, ry: 62, cx: 277, cy: 260, sw: 1.1, op: .55, c: '#a8c39e' },
{ rx: 66, ry: 44, cx: 273, cy: 253, sw: 1, op: .5, c: '#bcd8b8' },
{ rx: 42, ry: 28, cx: 269, cy: 245, sw: 1, op: .5, c: '#cfe0c8' },
];
return (
);
}
// ───────────────────────────────────────────────────────────
// Option 4 — "Two Circles"
// Two overlapping circles. The overlap is the relationship — a small
// dot inside marks the meeting point. Minimal, line-led, lots of breath.
// Reads as: 二者が重なりあう／関係性の中心
// ───────────────────────────────────────────────────────────
function HeroTwoCircles({ width = 560, height = 480 }) {
return (
);
}
// ───────────────────────────────────────────────────────────
// Option 5 — "Thread"
// Two anchor points connected by a single hand-drawn thread that
// loops and weaves. Animated dash so it feels "being drawn".
// Reads as: 糸を結ぶ・一本ずつ・丁寧に編む
// ───────────────────────────────────────────────────────────
function HeroThread({ width = 560, height = 480, showEcho = true }) {
// C centered around (290, 240), drawn as a 270° arc opening to the right.
// 4 anchors sit on the C — visible from the start; the thread passes through
// each one as it draws.
const cx = 290, cy = 240, r = 150;
const anchors = [
{ x: 365, y: 110, fill: '#306b3a' }, // 1. top opening (start)
{ x: 184, y: 134, fill: '#467548' }, // 2. upper-left
{ x: 184, y: 346, fill: '#6b9461' }, // 3. lower-left
{ x: 365, y: 370, fill: '#7ab26a' }, // 4. bottom opening (end)
];
// Main arc — a clean "C" using a single SVG arc command.
// large-arc-flag=1 (we sweep > 180°), sweep-flag=0 (counter-clockwise on
// screen, i.e. through the left side).
const cPath =
`M ${anchors[0].x} ${anchors[0].y} ` +
`A ${r} ${r} 0 1 0 ${anchors[3].x} ${anchors[3].y}`;
// Echo arc — slightly smaller, dashed, sits inside the main C.
const echoR = r - 14;
const echoPath =
`M ${cx + echoR * Math.cos(-Math.PI / 3)} ${cy + echoR * Math.sin(-Math.PI / 3)} ` +
`A ${echoR} ${echoR} 0 1 0 ` +
`${cx + echoR * Math.cos(Math.PI / 3)} ${cy + echoR * Math.sin(Math.PI / 3)}`;
return (
);
}
// ───────────────────────────────────────────────────────────
// Option 6 — "Ripples Meet"
// Two sets of concentric ripples, originating from left and right,
// expanding until they overlap in the middle.
// Reads as: 互いに響き合う・歩み寄り・共鳴
// ───────────────────────────────────────────────────────────
function HeroRipples({ width = 560, height = 480 }) {
const left = { cx: 160, cy: 260 };
const right = { cx: 400, cy: 260 };
const radii = [
{ r: 30, sw: 1.8, op: .95 },
{ r: 60, sw: 1.6, op: .8 },
{ r: 95, sw: 1.4, op: .65 },
{ r: 135, sw: 1.2, op: .5 },
{ r: 180, sw: 1.1, op: .35 },
{ r: 230, sw: 1, op: .22 },
];
return (
);
}
Object.assign(window, { HeroTwoCircles, HeroThread, HeroRipples });