A personal website built around phone movement and spatial UI

À propos de A personal website built around phone movement and spatial UI

Le site personnel de Marco Lavielle, accessible à l’adresse marcolavielle.com, se présente comme une vitrine expérimentale et interactive exploitant le mouvement du téléphone ainsi qu’une interface utilisateur dite « spatiale ». Plutôt qu’un simple portfolio statique, ce projet repousse les limites de la navigation web mobile en utilisant les capteurs de l’appareil – gyroscope, accéléromètre – pour créer une expérience immersive où le déplacement physique du téléphone remplace les gestes tactiles traditionnels. L’interface s’adapte en temps réel à l’orientation et à la position de l’appareil, offrant ainsi une navigation qui se rapproche d’une réalité augmentée légère, sans application dédiée.

Conçu à la fois comme une démonstration technique et un outil de réflexion sur l’avenir des interfaces, ce site s’adresse aux développeurs, designers d’interaction et passionnés de technologies immersives. Il n’est pas commercialisé en tant que produit fini, mais plutôt comme un prototype fonctionnel qui illustre les possibilités offertes par les API de capteurs mobiles et le design spatial. Bien que son créateur ne le présente pas explicitement comme un « outil IA », l’intelligence artificielle pourrait être utilisée en amont pour générer ou optimiser certains éléments de l’interface, comme la disposition des contenus ou les animations réactives – mais le site lui-même repose avant tout sur du code JavaScript et des bibliothèques de détection de mouvement.

Fonctionnalités principales

• Navigation par mouvement du téléphone : L’interface réagit à l’inclinaison, à la rotation et au déplacement de l’appareil. Par exemple, pencher le téléphone vers la gauche fait défiler le contenu dans cette direction, créant une métaphore naturelle de « fenêtre virtuelle ».

• Interface spatiale tridimensionnelle : Les éléments visuels (textes, images, liens) sont disposés dans un espace 3D. L’utilisateur explore cet espace en bougeant physiquement son téléphone, comme s’il regardait autour de lui dans une scène virtuelle.

• Génération de contenu adaptable : Le site utilise un système de mise en page qui s’ajuste dynamiquement en fonction des mouvements détectés. L’IA potentielle intervient pour suggérer ou générer des variations de contenu selon le contexte d’usage (ex. afficher plus d’informations si l’utilisateur s’attarde sur une zone).

• Intégration des capteurs mobiles : Appel aux API JavaScript DeviceOrientationEvent et DeviceMotionEvent pour capter l’orientation et l’accélération. Compatible avec la plupart des navigateurs mobiles modernes (iOS Safari, Chrome Android).

• Expérience mobile-first : L’ensemble du site est optimisé pour un usage sur téléphone. L’interface spatiale n’est pas conçue pour un écran desktop, ce qui renforce l’immersion mobile.

• Possibilité d’itérer rapidement : Le code source étant probablement léger et modulaire, il est facile d’ajouter ou de modifier des zones spatiales sans reconstruction lourde.

• Démonstration de concepts : Chaque section du site (projets, biographie, contact) peut être pensée comme une « pièce » virtuelle que l’on explore par le mouvement.

Tarification

Le site personnel de Marco Lavielle est accessible gratuitement en ligne. Aucun abonnement ni achat n’est requis pour parcourir l’expérience spatiale. Toutefois, si l’on considère ce projet comme un outil que d’autres pourraient utiliser pour créer leur propre interface similaire, des frais indirects peuvent exister :

• Hébergement du code source : Si vous souhaitez cloner le dépôt GitHub ou utiliser une version commercialisable, des frais d’hébergement (≈ 10 $ CA/mois pour un petit serveur) peuvent s’appliquer.
• Licences de bibliothèques : Certaines bibliothèques JavaScript tierces utilisées (par exemple Three.js pour la 3D) sont gratuites, mais des versions premium ou des plugins additionnels pourraient coûter ≈ 15 $ CA/mois.
• Services de détection IA : Si l’IA générative est intégrée pour personnaliser l’expérience, l’utilisation d’API comme OpenAI ou Google Cloud Vision peut engendrer des coûts variables (≈ 0,02 $ CA par requête).

En l’état actuel, aucune grille tarifaire officielle n’est publiée pour ce site personnel. Pour un usage professionnel ou dérivé, il est conseillé de contacter le créateur directement.

Cas d’utilisation

• Portfolio créatif immersif : Un designer ou un artiste peut utiliser une interface similaire pour présenter son travail d’une manière inédite, en invitant le visiteur à « se déplacer » dans ses créations.

• Prototypage d’expériences mobiles spatiales : Les développeurs d’applications de réalité augmentée ou de jeux mobiles peuvent s’inspirer de cette démonstration pour tester des mécaniques de navigation par mouvement avant de coder leur propre application.

• Support pédagogique : Enseignement des API de capteurs, du design d’interaction et de la 3D dans le navigateur. Le site sert de référence concrète pour expliquer les concepts d’UI spatiale.

• Vitrine événementielle : Un événement ou un produit peut être présenté via une interface où chaque rotation du téléphone révèle une information différente, engageant physiquement l’utilisateur.

• Galeries ou portfolios de photographie : Le mouvement permet de « regarder autour » d’un espace virtuel, idéal pour des visites immobilières ou des expositions artistiques légères.

• Tests utilisateurs : Les chercheurs en UX peuvent utiliser ce type d’interface pour évaluer la courbe d’apprentissage de la navigation gestuelle non tactile.

Notre avis

Points forts : L’originalité et l’innovation sont indéniables. Ce site repense la navigation mobile en exploitant des capteurs souvent sous-utilisés. L’expérience est fluide sur les appareils récents, et l’absence de téléchargement d’application en fait une démonstration immédiatement accessible. L’approche « mobile-first spatiale » pourrait préfigurer des interfaces futures, notamment avec l’essor des lunettes connectées et de la réalité mixte. La génération de contenu adaptative, si elle est réellement pilotée par une IA, offre une personnalisation prometteuse.

Points faibles : Le site reste une expérience de niche. La navigation par mouvement n’est pas intuitive pour tous les utilisateurs ; certains peuvent ressentir une désorientation ou préférer le tactile traditionnel. La compatibilité est limitée aux appareils récents (iOS 13+, Android 8+), et l’expérience est difficile à reproduire sur ordinateur sans téléphone. L’absence de documentation publique et de licence claire freine la réutilisation par d’autres développeurs. Enfin, si l’IA n’est qu’un prétexte ou un ajout mineur, l’outil n’est pas vraiment un « outil IA » au sens strict.

Public cible : Développeurs front-end curieux, designers d’interaction, créateurs de contenu immersif, étudiants en technologies web. Moins adapté aux entreprises cherchant une solution commerciale clé en main.

Alternatives : Pour des expériences spatiales mobiles plus abouties, on peut regarder du côté de A-Frame (framework VR web), Three.js avec des contrôles d’orientation, ou encore Babylon.js. Pour une génération IA de contenu adapté au mouvement, Wix ADI ou Hostinger AI Builder offrent des assistants, mais sans la dimension spatiale.

Verdict : Un projet fascinant qui mérite d’être exploré par toute personne s’intéressant à l’avenir des interfaces. Il ne remplace pas un constructeur de site traditionnel, mais il inspire une nouvelle façon d’interagir avec le web mobile. En l’état, son prix (gratuit) est un atout pour la découverte. Une version plus aboutie, avec une IA réellement générative, pourrait devenir un outil de prototypage incontournable.