TimeTrail

Create interactive hypermedia films with an agent, not just AI-generated video.

Comment

Inspiration

TimeTrail is a browser-local interactive film studio where WebMCP agents can build and edit structured timelines, media, chapters, cards, annotations, quizzes, and branches while the human remains in control of the project. Agent changes remain editable and can be reviewed before becoming part of the approved timeline.

AI can generate text, images, audio, and video remarkably quickly.

But many creative AI workflows end with a problem:

The AI generates the artifact, and then the user loses structured control over it.

I wanted to explore a different model.

Instead of having an agent return a finished interactive video, what if the application exposed the actual editing primitives to the agent?

That would let AI accelerate creation while preserving the normal editing workflow.

That idea became TimeTrail.

What I Built

TimeTrail is a browser-local studio for building interactive films and hypermedia experiences.

Projects can contain:

  • Video clips
  • Images
  • Generated cards
  • Chapters
  • Timed context
  • Sources
  • Captions
  • Hotspots
  • Quizzes
  • Branches
  • Maps
  • Charts
  • Checklists
  • Persistent information panels
  • Multiple screens
  • Different player layouts

The application includes a dedicated Studio for creation and a dedicated Player for experiencing the final project.

Projects remain structured and editable instead of becoming a single opaque generated file.

How WebMCP Is Used

TimeTrail exposes creative editing operations through WebMCP.

Agents can help:

  • Create projects
  • Create screens
  • Build storyboards
  • Add clips
  • Add generated cards
  • Add chapters
  • Add annotations
  • Add quizzes
  • Add conditional branches
  • Edit timing
  • Update cues
  • Search for usable media
  • Populate project metadata
  • Inspect the timeline
  • Review a project
  • Prepare corrections
  • Control supported playback workflows

This means a user can begin broadly:

Create an interactive Apollo 11 experience.

Then refine precisely:

Find the Moon landing section and add a fact card explaining the Lunar Module.

The agent operates on the existing structured project instead of regenerating the entire experience.

Human + Agent Collaboration

I did not want the agent to silently rewrite a creative project.

TimeTrail therefore includes a proposal workflow.

Agent-created changes can be assembled as a proposed revision.

The user can inspect the changes before accepting them into the approved project.

That creates a workflow where the agent can move quickly without removing human creative control.

The person remains the editor.

The agent becomes a collaborator capable of performing large amounts of structured editing work.

How I Built It

TimeTrail uses Vue, Pinia, Vue Router, IndexedDB, OPFS where available, Zod, WebMCP, and FrameTrail.

FrameTrail provides part of the interactive playback foundation and runs in a same-origin integration.

TimeTrail converts its own structured project data into compatible resources and annotations for the player.

Projects, revisions, proposals, and most metadata stay browser-local.

Local asset bytes can use OPFS with IndexedDB fallback.

TimeTrail can also work with imported:

  • Video
  • Audio
  • Images
  • PDFs
  • VTT captions
  • SRT captions
  • Existing TimeTrail projects
  • Supported FrameTrail project data

It can search sources such as NASA and Wikimedia Commons and retain attribution and source information.

Projects can be exported in several forms, including structured project files and portable interactive experiences.

Challenges I Faced

The most difficult problem was giving an agent significant creative power without turning the application into a one-shot generator.

That led to the proposal and approval model.

Another challenge was coordinating browser-local media, playback state, portable project formats, timelines, annotations, and provenance without requiring a backend.

Integrating an existing open-source hypervideo system while keeping the TimeTrail domain model clean was another significant architectural challenge.

What I Learned

The project reinforced that WebMCP is not limited to transactional workflows.

It can also become an interface for structured creative software.

Once an editor has clear domain operations, the same primitives can support:

  • normal UI interactions
  • WebMCP
  • testing
  • undo/redo
  • validation
  • documentation

The result is much more controllable than one-shot AI generation.

What's Next

I would like to extend TimeTrail with additional media services, richer generation pipelines, more interactive component types, collaborative sharing, and more sophisticated agent-assisted editing.

The long-term goal is a creative workspace where people can move fluidly between:

"Build this for me"

and

"Change exactly this one thing."

Built With

  • frametrail
  • html5-video
  • indexeddb
  • javascript
  • nasa-api
  • netlify
  • opfs
  • pinia
  • playwright
  • typescript
  • vite
  • vue-3
  • vue-router
  • vue.js
  • w3c-annotations
  • webmcp
  • wikimedia
  • zod
Share this project:

Updates

Submission history