夢 -ヴェイパーウェーブ- 2.0

HighlightsFeatures

• Windowed interface

  Modeled on how an operating system works: every section is its own window you can interact with.

• Radio

  A music player built on the browser’s native Audio API, with track controls so you can listen while you browse.

• Three languages

  The system language switches between Traditional Chinese, Simplified Chinese and English.

Behind the ScenesChallenges

1. 01 Keeping windows inside the viewport

   The problem

   Dragging a window means working out its position against the screen edges so it can’t be dragged out of view.

   The fix

   Used AI to help derive the boundary math and tune the parameters, reducing the risk of calculation errors. interact.js handles the low-level dragging details that are easy to overlook.

2. 02 Windows misplaced after the browser is resized

   The problem

   When the browser is resized, windows that aren’t recalculated can’t position themselves correctly at the new size, which causes unpredictable errors while dragging.

   The fix

   A debounce waits until the user stops resizing, then :key recreates each window centered on screen so the user can drag it back. Users rarely keep resizing, so this is simpler and more reliable than scaling positions proportionally.

3. 03 Bringing the clicked window to the front

   The problem

   Like a real operating system, whichever window is clicked should move to the top.

   The fix

   Track the highest z-index in use and give a clicked window that value plus one. The z-index limit is 2147483647, which normal use will practically never reach.