FocusTrack

A remote-first practice studio for learning small physical skills. A lesson alternates between a READ instruction, a complete WATCH movement, and an INSPECT image that stays on screen until the learner is ready. Continuous playback, replay, captions, step selection, local resume, practice reports, and checkpoints are included.

Open the learner app or compare the designs. The learner now includes a skippable remote guide, bounded page scrolling, Page up/Page down/Back to top controls, and isolated dialogs with restored focus. The public learner, Vega package, and separate Android TV APK use the same four-lesson snapshot. Fire TV delivery and Windows instructions distinguish Silk, Fire OS/Android, and Vega.

The local learner and Creator Studio are functional. All four bundled clips now play through on the official Vega virtual device using VP8/Opus WebM. Every learner-facing still uses reviewed photographic artwork, including a corrected guitar hand based on a real reference. See platform evidence and acceptance status for verification and remaining limits. Local installable packages are in dist/, with checksums in dist/SHA256SUMS. Physical Fire TV playback has not been tested.

The E minor lesson now shows middle-finger placement first, then ring-finger placement, with separate five-second photographic video guides and pause/replay points. “Hear the Em chord” plays an acoustic reference strum. Completing the two guitar lessons unlocks First chord, Steady strummer, and Guitar basics badges in the Practice notebook. These record completion; reported practice remains separate.

Newly earned badges open a centered celebration with the app's mint and gold colors, a brief badge reveal, expanding rings, and confetti that shoots outward from the screen's midpoint before falling away. Select or Back dismisses it; reduced motion keeps it static. Repeating a completed lesson does not automatically celebrate again. Earned badges in Practice can be selected to replay the celebration.

Ribbon Flow, option 3 from the loading comparison, is the opening animation. A shaded jade ribbon with gold edges moves while the app loads; Home opens as soon as it is ready. The learner website reuses the native artwork. Reduced motion uses a still pose. The shared design preview's “Preview opening” button uses the same ribbon design.

The learner layout scales across 720p, 1080p, and 4K, with TV-safe control margins, proportional text and focus rings, and contained lesson imagery. The ribbon artwork covers Vega's documented 1080p pixel density. Browser checks cover all three resolutions and a 4K output profile using a 1080p CSS viewport at 2× density; native verification uses the 1080p Vega simulator. Physical 4K TV execution remains untested. See resolution evidence.

Run locally

Clone mgraves-centrix/focustrack. Use Node.js 24 or later. FFmpeg and ffprobe must be on PATH for media uploads and the server test suite. Run commands from the repository root. Replace /Users/mattgraves/Development/focustrack in the examples with your checkout's absolute path.

npm --prefix /Users/mattgraves/Development/focustrack ci
npm --prefix /Users/mattgraves/Development/focustrack start

Open the learner or Creator Studio. The server listens only on loopback. Arrow keys move focus, Enter selects, and Escape represents remote Back. These keyboard checks supplement actual target remote testing.

Three lessons ship in the seed catalog: an E minor guitar shape and strum, exposure compensation on a Nikon Z50, and a cold-water coffee bloom rehearsal. Their motion diagrams, audio, photographic stills, sources, and limitations are documented in content provenance. They teach a specific action and do not assess the learner's physical technique.

The fourth exercise, four steady downstrokes, is supplied as an unpublished source under content/drafts/. Use the authoring workflow to create and publish it through the interface. Drafts, uploads, and publication history are stored locally under .runtime/; they are not committed or sent to a cloud service.

content/published.json separately records the four reviewed published versions for reproducible delivery. The default bundle uses this snapshot; a fresh Creator Studio still begins with the three seed lessons above. Creator remains a local authoring service.

Verify

npm --prefix /Users/mattgraves/Development/focustrack test
node /Users/mattgraves/Development/focustrack/node_modules/@playwright/test/cli.js install chromium
npm --prefix /Users/mattgraves/Development/focustrack run test:browser -- creator.spec.mjs --workers=1
npm --prefix /Users/mattgraves/Development/focustrack run test:browser -- learner.spec.mjs layout.spec.mjs guitar-basics.spec.mjs celebration.spec.mjs tv-resolution.spec.mjs remote.spec.mjs startup.spec.mjs playback.spec.mjs --workers=1

Keep the local server running for both browser commands. Run the creator suite first: it publishes the fourth lesson required by the learner and badge tests. These tests change local lesson history and write screenshots, so use a disposable checkout and its server for an isolated run. Core and server tests create their own temporary runtimes. Browser evidence is distinct from the official simulator record.

Package for Vega

The official Vega SDK and virtual device setup, verified commands, package paths, and playback verification are recorded in platform setup. Generate a fresh, validated offline asset directory:

npm --prefix /Users/mattgraves/Development/focustrack run bundle
# Include the currently published creator catalog, with the local server running:
npm --prefix /Users/mattgraves/Development/focustrack run bundle -- --published

The command reports an OS temporary directory containing the learner and only its referenced media. It leaves the existing target package unchanged. Follow the platform delivery instructions to incorporate these assets and build. The packaged learner uses a bundled catalog and local media; it needs no hosted API or account.

Project map

• core/: strict lesson schema, player transitions, and durable progress rules.
• web/: learner rendering, remote focus navigation, and local storage.
• creator/ and server/: local authoring UI, validation, reviewed media uploads, publication, and history.
• content/ and media/: lesson definitions, original media, and provenance.
• platform/: official Vega WebView wrapper and device evidence.
• android-tv/: separate Android TV/Fire OS development APK, secure offline WebView, and native lifecycle tests.
• tests/: core, server, asset, layout, and browser acceptance checks.
• docs/design-options/: interactive palette, badge, celebration, and three-dimensional loading previews. Compare the published designs or the three 3D loading alternatives. Local preview setup is in MOTION.md.

Code is MIT licensed. Lesson media carries its separate licenses and attribution in media/LICENSE.txt. The repository is public as required by the hackathon rules. GitHub publication does not register or submit the project to Devpost; those actions remain pending.