Burst Style
Overview
Burst Style merges heavy visual storytelling with solid engineering. Three.js and motion sell the space journey; Zustand syncs the hangar-door transition with Next.js navigation so the door closes, the route changes, and the interior opens as one beat. Behind the scenes: Turnstile spam protection, Formspree forwarding, and a Resend auto-reply styled like a ship console so the vibe continues after submit.
Challenges & Solutions
[PROBLEM_1] Seamless transitions & state
Global transition state aligns CSS door animation with `router.push` timing so navigation feels like one continuous scene, not a hard reload.
[PROBLEM_2] Narrative contact flow
Contact is part of the story: verify with Turnstile, notify via Formspree, auto-reply via Resend with on-brand HTML.
[PROBLEM_3] Performance vs. visuals
Particles plus video cost GPU budget. Reduced unnecessary rerenders and gate the boot sequence with session storage so repeat visits stay smooth.
Future Improvements
Richer interaction
Explore scroll- and pointer-driven reactions in the 3D backdrop beyond ambient motion.
Internationalization
English/Japanese site copy and locale toggle are live; more polish and project-level translations can follow.
Tech Stack
- Framework: Next.js 16 (App Router)
- 3D Library: Three.js / @react-three/fiber
- State Management: Zustand
- Backend: Next.js API Routes
- Security: Cloudflare Turnstile
- Email: Resend API
- Asset: Video & Generated AI Images