Burst Style システム構成

Burst Style システム構成 An architecture diagram generated by Archify. 訪問者 · ブラウザ · Architecture component 訪問者 ブラウザ Client Components · Three.js演出 + Zustand (useTransitionStore) · Architecture component Client Components Three.js演出 + Zustand (useTransitionStore) /api/contact · Vercel Function · Architecture component /api/contact Vercel Function Cloudflare Turnstile · スパム検証 · Architecture component Cloudflare Turnstile スパム検証 Formspree · 問い合わせ通知転送 · Architecture component Formspree 問い合わせ通知転送 Resend API · 自動返信メール (HTML) · Architecture component Resend API 自動返信メール (HTML) ページ読み込み → 3D演出・ドア遷移 ①お問い合わせフォーム送信 ②スパム検証 (siteverify) ③通知を転送 (fire-and-forget) ④自動返信メール送信（宇宙船コンソール風HTML） Legend Frontend Backend Security External

クライアント体験

  • • ドアが閉まる→router.pushで遷移→遷移先でドアが開く、をZustandの1状態(phase)で同期
  • • Three.js(Earth/Moon/StarBackground/SpaceWarpField等)で宇宙船内部を演出

コンタクトAPIの処理順序

  • • ①フォーム送信 → ②Turnstileでスパム検証 → ③Formspreeへ通知転送 → ④Resendで自動返信
  • • 自動返信メールは宇宙船コンソールを模したHTMLデザイン