TimeWitness

Inspiration

History textbooks often feel dry, static, and disconnected from the real emotion of past events. Students end up memorizing dates instead of understanding human journeys. We were inspired to build TimeWitness to transform static web text and historical events into dynamic, first-person visual narratives that make learning feel like witnessing history firsthand.

What it does

TimeWitness takes any historical figure or event (such as Chhatrapati Shivaji Maharaj, Rani Lakshmibai, Napoleon, or Cleopatra) and automatically generates a personalized, 5-scene visual narrative journey: Origin → Rise → Defining Moment → Triumph → Legacy.

Key capabilities include:

Immersive Storytelling: Generates dramatic, second-person narrative scripts ("You are standing inside Raigad Fort in 1674...").
Cinematic Visuals: Generates era-accurate visual scenes enhanced with documentary-style slow pan and zoom (Ken Burns motion effect).
Voice Narration: Provides real-time text-to-speech audio narration across multiple languages.
Talk to History: Enables users to chat directly with an interactive AI persona of the historical figure after completing the journey.

How we built it

Frontend: Built with Next.js 14, React, Tailwind CSS, and Framer Motion for smooth documentary motion transitions.
AI Engine: Powered by the Google Gemini API (using strict JSON mode) for scene orchestration, prompt creation, and real-time persona simulation.
Audio Layer: Integrated Web Speech API for zero-latency text-to-speech narration and dynamic Q&A interaction.

Challenges we ran into

Structured JSON Output: Designing LLM system prompts to consistently return valid, strictly formatted JSON containing historical facts, visual generation prompts, and scene metadata.
Video-like Experience without Video Rendering: Implementing dynamic CSS/Framer Motion pan-and-zoom animations on static artwork to simulate video motion without the rendering latency of video generation engines.
Asynchronous Team Collaboration: Coordinating code integration across members from different colleges using isolated Git feature branches and GitHub Pull Requests.

Accomplishments that we're proud of

Successfully built a multimodal engine that converts simple text search queries into complete visual and audio journeys in seconds.
Created a responsive UI with smooth pan-zoom image effects that mimic high-budget historical documentaries without heavy server rendering.

What we learned

Advanced prompt engineering techniques for structured data generation and persona execution using the Gemini API.
Optimizing frontend motion performance with Framer Motion to prevent UI lag during live scene transitions.
Efficient team workflow management for hackathons using GitHub Projects and asynchronous task logs.

What's next for TimeWitness

Real-time Voice Interactions: Upgrading the "Talk to History" feature with real-time voice-to-voice conversational AI.
Regional Vernacular Expansion: Adding native multi-language voice narration support for Hindi, Marathi, Tamil, and other regional languages.
360/VR Scene Support: Integrating WebXR to allow learners to step directly inside 360-degree generated historical environments.