Onde estou?
A therapeutic visual-search game guided by breathing, built in React, TypeScript and Canvas, with heart-rate sensor biofeedback.
- TypeScript
- React
- Canvas
- Vite
- Web Bluetooth
- Styled Components
This project is covered by confidentiality. The page describes only the technical nature of the work, with no internal details, data or proprietary code.
About the project
Onde estou? (“Where am I?”) is a therapeutic visual-search game in which the player looks for objects in an illustrated scene.
The experience combines visual search, touch interaction and breathing biofeedback, using data from a heart-rate sensor to shape the dynamics of each match.
The game was built to run in the browser and is integrated into Self’s therapeutic platform.
Key technical challenges
- Building an interactive experience with Canvas.
- Procedural placement of objects while respecting visual composition rules.
- A perspective system for positioning and sizing the elements.
- Difficulty control based on the visual characteristics of the scene.
- Reproducible matches through deterministic pseudo-random generation.
- Interaction optimized for touchscreen devices.
- Zooming and panning across very large scenes.
- Web Bluetooth integration to receive physiological data.
- Real-time biofeedback processing.
- Working with or without a connected sensor.
- Integrating the game with the platform’s portal.
Authoring tools
Besides the game, I built internal tools to make creating and maintaining scenes easier.
The editor lets you position and resize elements, configure scene properties, validate the composition and run preview matches.
This turns part of content creation into configurable data, reducing the need for manual code changes for every new scene.
Architecture
The main scene is rendered with Canvas, while React manages the interface around the game, such as menus, the HUD and auxiliary screens.
The game logic was separated from rendering to ease maintenance and let the generation, difficulty and interaction rules evolve independently.
Biofeedback
The game can receive data from a heart-rate sensor through Web Bluetooth or from the platform hosting the experience.
The physiological data is processed into a biofeedback level used during the match.
When the sensor is unavailable, the game has an alternative mode that keeps the experience working.
What this project demonstrates
This project combines game development, procedural generation, Canvas, authoring tools, touch interaction, physiological processing and Bluetooth hardware integration.
The main challenge was creating varied, reproducible matches without losing control over the visual composition and the player’s experience.
Confidential project. The information presented has been deliberately limited to general technical aspects, without exposing code, user data or internal product details.
Project in development.