Project: VR Timeline


Colleen Hutson, Ronak Nisher, Juhi Desai, Akash Agrawal, Hongyi Ma, Kamaria Hardy


A virtual reality timeline experience that allows a user to go beyond the event.


The open source tool Timeline JS allows a user to create a timeline about anything.  Using a Google Sheets template the user provides the tool with the dates, event titles, and pictures.  Timeline JS then creates a clean, organized, functional timeline.  Our challenge was to take this two-dimensional timeline and bring it to life in a virtual reality environment.  We were tasked with implementing an intuitive experience that would provide the user with more information and images than the desktop Timeline JS version.


Upon launching the application the user becomes immersed in a new learning experience
  • Gaze Triggered Buttons:  all buttons with the application are triggered by the user’s gaze.  The user must stare at a button for approximately 5 seconds to “click” it
  • Help Screen: at the launch screen the user may select the help screen that will instructions on how to interact with the timeline
  • Ease Scrolling: the user scrolls through the time by simply looking to the left or to the right.  The further the user looks to the left or right the quicker they scroll through the timeline.
  • Event Buttons: each timeline event is represented with a button and to learn more about a particular event the user triggers it with their gaze
  • Information Panels: upon selecting an event button a panel above and below are set based on that event
    • Some Additional Information: Above the timeline the user will be provided with a brief description of the event and a single image
    • More Additional Information: Below the timeline the user will be provided with additional background on the event and/or extra images
  • More Timelines: the user has the capability of switching to different timelines


  • Currently each timeline must be individually created.  If we can incorporate the Timeline JS excel template into the application, we can improve the efficiency of creating additional timelines and possibly allow each user to individualize what timelines he/she can view
  • In the world of design a world event or economic crisis can have an impact on the design and construction of products.  If we can identify the implications such an event or crisis had on production we can connect the two timelines and allow the user to see how current events influenced product development.