The full first run
Let the splash finish, walk through onboarding and the three permission requests, create an account, verify with 123456 and land on the dashboard.
Interactive prototype
The entire app, running here
A working iPhone 17 Pro Max simulation built in HTML, CSS and vanilla JavaScript. Every screen is reachable, every flow completes, and your progress persists between visits.
Suggested paths
Four ways to explore it
The AR loop
Press S to open the scanner. Watch the marker lock, the plane detect, and the workbench anchor — then drag the frequency slider.
Pass a phase
Open Phase 1, run the experiment until the target locks, then take the quiz. Score 60% or more and Phase 2 unlocks in front of you.
Reach the certificate
Clear all four quizzes to trigger the completion sequence: confetti, the certificate card and a verification ID generated on the spot.
Under the hood
No framework. No build step.
The prototype is a small state store, a screen router and a set of screen factories — all ES modules, all loaded straight from the file system. It runs on Hostinger's static hosting with nothing to install and nothing to compile.
-
State — an observable store persisted to
localStorage, so progress survives a refresh. - Router — a screen stack with push, pop, replace and modal presentation, each with its own iOS transition.
-
Screens — factory functions returning a node plus optional
onMountandonUnmounthooks. - Waveforms — one shared 2D canvas runner that pauses whenever a scene scrolls out of view.
// Push a screen with an iOS-style slide transition
export const api = {
go(name, params = {}, mode = 'push') {
const entry = build(name, params);
const current = stack[stack.length - 1];
const t = TRANSITIONS[mode];
attach(entry, t.enter);
if (current) detach(current, t.exit);
stack.push(entry);
emit();
},
back() {
if (stack.length < 2) return;
const current = stack.pop();
attach(stack.at(-1), 'screen--enter-pop');
detach(current, 'screen--exit-pop');
emit();
}
};32+
screens
0
dependencies
6
transition types
Ready for the real thing?
The prototype maps one-to-one onto the Unity build. The handoff page has the conversion path and the importable package.