MIRA (miraOS)
DESCRIPTION
Digital Environment — Interactive Product
DURATION
Mar 2026 - Apr 2026
MY ROLE
- Overall UI/UX design and visual art direction grounded in the system concept and brand identity.
- Next.js 16 / React 19 full-stack build and component optimisation.
- WebGL/GLSL shader work and GSAP-driven immersive environment and sequence interaction.
- Behavioural signal collection and state system design on Supabase.
TECH
Next.js 16 (App Router) · React 19 · TypeScript · Tailwind CSS
WebGL · GLSL Shader · Canvas · GSAP
Supabase · Resend · pdf.js
Vercel
Project Purpose
"A contained system. An environment for quiet encounter." miraOS is a digital environment that declines to analyse the person using it. It offers a small daily space in which someone might notice their own patterns, on the premise that attention and clear thinking are becoming scarce assets in the AI era. Rather than making the user faster, the system is built to hold them still — and to protect that inner resource by refusing every convention that would otherwise accelerate them.
Scope
- · Immersive Interactive Web Design & Full-Stack Development
- · WebGL Shader Environment Layer
- · GSAP Sequence Interaction Design
- · Behavioural Signal State System
Key Technical Features
WebGL Shader Environment
- · GLSL shaders render a fluid environment in real time, so the screen behaves as a breathing environment layer rather than a static image.
- · Shader parameters are tuned so colour, light, motion and spatial depth shift gradually — never abruptly.
Daily Ritual Sequence
- · A fixed flow — Presence, Recognition, Orientation, Five Options, Mirror, Writing, Exit — transitions cinematically under GSAP.
- · The sequence is designed so attention moves off the interface and onto the user's own perception.
Behavioural State System
- · Interaction signals — pacing, stillness, consistency — are collected and reduced to a single internal value representing the user's current rhythm.
- · That value is smoothed across days rather than reacting to a single session, so change arrives slowly and can be trusted.
Ambient Sound & Atmosphere
- · Colour shifts, motion, openness and contraction of the space, and ambient sound tone all adjust subtly against the state value.
- · Each visit is slightly different from the last, without ever announcing that it is.
Design Points
Quiet Minimalism
An off-white ground and restrained serif typography — "miraOS — ENVIRONMENT layer" — produce a still, meditative register that makes the slogan literal rather than decorative.
Slow Motion & Negative Space
Slow transitions and extreme negative space replace fast feedback. Where a typical interface accelerates the user, this one is composed to decelerate them deliberately.
Living Environment
Colour, light and sound evolve with the user's rhythm, making the environment organic rather than scripted — no two visits resolve identically.