Eerie Journey

Inspiration

Eerie Journey started as a small Halloween experiment: blend atmospheric storytelling with lightweight web interactivity so people can share short, spooky experiences that run in any browser. We wanted something playable, sharable, and quick to iterate on during the hackathon.

What it does

Eerie Journey is a single-page web experience built with Next.js that delivers a short, eerie narrative with polished visuals and subtle interactions. It focuses on mood and pacing — ambient audio, animated visuals, and interactive choices guide the user through a brief, branching scene meant to evoke a sense of suspense.

How we built it

• Framework: Next.js (app router) and React for UI composition.
• Styling: global CSS and PostCSS for lightweight, performant styles.

Challenges we ran into

• Balancing atmosphere with performance: subtle animations and audio can tax slower devices, so we optimized by reducing animation complexity and lazy-loading non-critical assets.
• Timing and synchronization: aligning audio, animations, and user interactions required careful testing and small tweaks to delays and easing.
• Time constraints: as with most hacks, we had to prioritize a single polished scene over many rough ones.

Accomplishments that we're proud of

• A cohesive, polished first scene that conveys the intended mood.
• A responsive layout that works across desktop and mobile browsers.
• Reusable component abstractions that make adding new scenes straightforward.
• Deployment-ready app using modern Next.js conventions — simple to share and iterate on.

What we learned

• Practical lessons on the Next.js app router and how to structure small interactive experiences with React components.
• The importance of progressive enhancement: ensuring the experience remains meaningful when advanced features (like audio or complex animations) are unavailable.
• Fast iteration techniques: using small JSON-driven scene definitions lets us change pacing and content without touching component logic.

What's next for Eerie Journey

• Add more scenes and branching paths to increase replayability.
• Improve accessibility and fallbacks for audio/animation-heavy parts.
• Add an editor or simple JSON schema UI so contributors can author scenes without code.
• Gather user feedback and polish pacing, asset delivery, and mobile performance.

Built With

• nextjs
• react-spring/parallax
• tailwind