+ +

)} {/* CTA row spanning full width: left Mission/MAKIMA, right Login */} diff --git a/frontend/src/components/TypewriterRotator.tsx b/frontend/src/components/TypewriterRotator.tsx new file mode 100644 index 0000000..4cd89fa --- /dev/null +++ b/frontend/src/components/TypewriterRotator.tsx @@ -0,0 +1,84 @@ +import React, { useEffect, useRef, useState } from 'react' + +/** + * TypewriterRotator + * + * Cycles through a list of phrases with a typing-and-deleting effect. + * Designed for the soryu landing hero — sits inside a centred container, + * so the caller controls position and the component just renders text. + * + * Honours `prefers-reduced-motion` by rendering the first phrase only, + * statically. + */ + +interface TypewriterRotatorProps { + phrases: string[] + /** ms per character while typing */ + typeMs?: number + /** ms per character while deleting */ + deleteMs?: number + /** ms to hold a fully-typed phrase before deleting */ + holdMs?: number + /** ms to wait after deletion before the next phrase types in */ + gapMs?: number + className?: string +} + +export function TypewriterRotator({ + phrases, + typeMs = 55, + deleteMs = 28, + holdMs = 2200, + gapMs = 320, + className, +}: TypewriterRotatorProps) { + const [text, setText] = useState('') + const [index, setIndex] = useState(0) + const [phase, setPhase] = useState<'typing' | 'holding' | 'deleting' | 'gap'>('typing') + const reduceMotion = useRef( + typeof window !== 'undefined' && + window.matchMedia && + window.matchMedia('(prefers-reduced-motion: reduce)').matches, + ) + + useEffect(() => { + if (reduceMotion.current) { + setText(phrases[0] ?? '') + return + } + const current = phrases[index % phrases.length] ?? '' + let timer: number + + if (phase === 'typing') { + if (text.length < current.length) { + timer = window.setTimeout(() => setText(current.slice(0, text.length + 1)), typeMs) + } else { + timer = window.setTimeout(() => setPhase('holding'), 0) + } + } else if (phase === 'holding') { + // Skip the hold-then-delete cycle entirely if there's only one phrase + if (phrases.length <= 1) return + timer = window.setTimeout(() => setPhase('deleting'), holdMs) + } else if (phase === 'deleting') { + if (text.length > 0) { + timer = window.setTimeout(() => setText(current.slice(0, text.length - 1)), deleteMs) + } else { + timer = window.setTimeout(() => setPhase('gap'), 0) + } + } else if (phase === 'gap') { + timer = window.setTimeout(() => { + setIndex((i) => (i + 1) % phrases.length) + setPhase('typing') + }, gapMs) + } + + return () => window.clearTimeout(timer) + }, [text, phase, index, phrases, typeMs, deleteMs, holdMs, gapMs]) + + return ( + + {text} + + ) +} diff --git a/frontend/src/styles/heisei.css b/frontend/src/styles/heisei.css index 356080e..4017f83 100644 --- a/frontend/src/styles/heisei.css +++ b/frontend/src/styles/heisei.css @@ -37,13 +37,29 @@ body { background: var(--hz-night); color: var(--hz-ink); } /* Reset the legacy 120px top offset (was matched to the old 120px header). New header is 72px / 56px on mobile, so claim the full remaining viewport. */ .modern-landing-page { + position: fixed !important; top: 72px !important; - height: calc(100vh - 72px) !important; + left: 0 !important; + right: 0 !important; + width: 100vw !important; + height: calc(100dvh - 72px) !important; + margin-top: 0 !important; + min-height: 0 !important; + overflow: hidden !important; } @media (max-width: 768px) { .modern-landing-page { top: 56px !important; - height: calc(100vh - 56px) !important; + height: calc(100dvh - 56px) !important; + } + /* Body fallback so any rounding gap shows the same dusk gradient + instead of a flash of system-default white */ + body { + background: + radial-gradient(140% 70% at 50% 100%, rgba(232, 184, 122, 0.20) 0%, transparent 55%), + radial-gradient(120% 80% at 50% 0%, rgba(74, 58, 107, 0.55) 0%, transparent 60%), + linear-gradient(180deg, #0b1124 0%, #1a2548 35%, #3d3358 65%, #6b4d63 88%, #c87a8a 100%) !important; + background-attachment: fixed; } } @@ -303,27 +319,75 @@ body { background: var(--hz-night); color: var(--hz-ink); } opacity: 0.65; } .modern-landing-page.manga-style .hero::after { - content: '低遅延ストリーミング · LOW-LATENCY OBSERVABILITY'; + /* Replaced by the React TypewriterRotator component */ + display: none; +} + +/* Typewriter tagline — sits where the old static ::after lived */ +.hero-tagline { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-family: 'Noto Sans JP', 'Inter', sans-serif; - font-size: 11px; + font-size: 12px; font-weight: 400; letter-spacing: 0.3em; color: var(--hz-amber); - opacity: 0.75; + opacity: 0.92; white-space: nowrap; text-shadow: 0 0 12px rgba(232, 184, 122, 0.35); + text-align: center; + pointer-events: none; + max-width: 92%; + overflow: hidden; + text-overflow: ellipsis; + user-select: none; +} +.hero-tagline .tw-text { display: inline; } +.hero-tagline .tw-caret { + display: inline-block; + width: 8px; + height: 1.05em; + margin-left: 4px; + vertical-align: -0.18em; + background: var(--hz-amber); + box-shadow: 0 0 8px rgba(232, 184, 122, 0.45); + animation: hz-caret-blink 1s steps(1) infinite; +} +@keyframes hz-caret-blink { + 0%, 50% { opacity: 1; } + 51%, 100% { opacity: 0; } +} +@media (max-width: 768px) { + .hero-tagline { + font-size: 10px; + letter-spacing: 0.22em; + white-space: normal; /* allow wrap on narrow phones */ + line-height: 1.6; + max-width: 86%; + } + .hero-tagline .tw-caret { width: 6px; } +} +@media (prefers-reduced-motion: reduce) { + .hero-tagline .tw-caret { animation: none; opacity: 1; } } /* ---------------------------------------------------------------- 7. Mission / Makima screens — Heisei magazine column ---------------------------------------------------------------- */ +/* Move the accent rule + indent onto the wrapper so headline, image, + and body share one consistent column edge */ .mission-screen { gap: 20px; + padding-left: 18px; + border-left: 2px solid var(--hz-amber); + max-width: 720px; +} +.mission-screen.makima-screen { + border-left-color: var(--hz-mag); + gap: 14px; } .mission-headline { @@ -337,9 +401,9 @@ body { background: var(--hz-night); color: var(--hz-ink); } white-space: normal; text-overflow: clip; overflow: visible; - max-width: 56ch; - border-left: 2px solid var(--hz-amber); - padding-left: 18px; + margin: 0; + padding-left: 0; /* rule + indent now live on .mission-screen */ + border-left: 0; } .mission-image { @@ -350,6 +414,8 @@ body { background: var(--hz-night); color: var(--hz-ink); } 0 0 0 1px var(--hz-line); filter: saturate(0.85) brightness(0.92); height: clamp(180px, 36vh, 360px); + width: 100%; + display: block; } .mission-paragraph { @@ -359,14 +425,15 @@ body { background: var(--hz-night); color: var(--hz-ink); } line-height: 1.75; color: rgba(240, 234, 223, 0.86); letter-spacing: 0.01em; + margin: 0; max-width: 60ch; } +.mission-paragraph + .mission-paragraph { margin-top: 4px; } /* Makima panel — tactical accent */ .makima-headline { color: var(--hz-ink); letter-spacing: 0.04em; - border-left-color: var(--hz-mag); } .makima-badge { background: rgba(217, 106, 138, 0.10); @@ -377,6 +444,10 @@ body { background: var(--hz-night); color: var(--hz-ink); } font-size: 10px; letter-spacing: 0.22em; border-radius: 2px; + align-self: start; + justify-self: start; /* don't stretch across the grid column */ + width: max-content; + padding: 4px 10px; } .makima-logo { border: 0; -- cgit v1.2.3