Nhatflix.

Vue d'ensemble

Nhatflix est un site vitrine immersif et expérimental — une narration cinématique construite avec React, Framer Motion et Lenis Scroll pour explorer les techniques avancées de scroll et motion.

Inspiré des sites primés sur Awwwards, le projet combine photographie de voyage, performances, battles et vidéos dans une mise en scène continue à défilement unique. Chaque section est une séquence — fondus synchronisés, transitions respirées, compositions plein-écran.

Projet expérimental personnel de 6 jours — objectif : maîtriser le scroll-driven storytelling et construire une identité visuelle forte à travers le code.

Défi & Problématique

Créer un storytelling fluide basé sur le scroll sans jamais rompre l'immersion, tout en maintenant les performances.

• Maîtriser Lenis Scroll et les effets parallax synchronisés
• Gérer la fluidité des animations Framer Motion sur des séquences longues
• Organiser un projet React complexe avec de nombreux composants visuels
• Composer des mises en page responsives avec Tailwind sur des layouts full-screen
• Trouver le bon équilibre entre richesse visuelle et performance de rendu

Solution

Pour répondre aux défis techniques et artistiques de Nhatflix, j’ai construit une solution centrée sur un storytelling visuel fluide et une mise en scène progressive des contenus.

Storytelling basé sur le scroll

J’ai structuré la page comme une séquence continue, dans laquelle chaque section prend naturellement la suite de la précédente.
Le scroll devient le moteur principal de la narration, ce qui permet au visiteur d’avancer sans rupture et de découvrir mon univers à son rythme.

Combinaison d’animations discrètes et efficaces

Plutôt que d’utiliser des effets trop lourds, j’ai choisi des animations simples et maîtrisées :

• fade-ins doux,
• transitions légères synchronisées avec la position du scroll,
• parallax subtil pour donner de la profondeur.

Cette approche m’a permis de créer une expérience immersive tout en préservant les performances.

Mise en scène des images

J’ai travaillé de nombreuses compositions visuelles pour trouver un équilibre entre :

• images pleine largeur,
• superpositions en absolute,
• espaces vides pour respirer,
• variations de rythmes visuels.

Cette mise en scène renforce l’esthétique artistique du projet et reflète mon parcours personnel.

Maîtrise progressive des outils

En avançant, j’ai consolidé mes compétences techniques :

• Tailwind m’a permis d’organiser rapidement le design et d’itérer sur le responsive,
• React m’a aidé à structurer la logique du projet,
• Framer Motion m’a permis de contrôler les timings et la fluidité,
• Lenis Scroll et le parallax ont apporté la sensation de légèreté recherchée.

Résultat cohérent et immersif

En combinant ces choix techniques et artistiques, j’ai obtenu une single-page immersive, expressive et performante, capable de transmettre mon univers tout en démontrant mes capacités front-end.

Développement

Stack

Application React pure — pas de backend. Tout l'enjeu est dans la composition visuelle et les animations.

Frontend — React

• React 18 + Vite — build rapide, HMR
• Tailwind CSS — layouts full-screen, gestion des espaces et de la typographie
• Framer Motion — fade-ins au scroll, transitions de page, animations synchronisées
• Lenis Scroll — scroll smooth avec inertie, base pour tous les effets parallax
• Vercel — déploiement continu

Technique de composition

• Images pleine largeur avec overlays absolus — profondeur et respiration visuelle
• Variations de rythme entre les sections — densité vs espace blanc
• Fade-ins déclenchés par le scroll — chaque élément arrive au bon moment
• Transitions de page fluides — pas de coupure entre les sections

Décisions techniques notables

• Lenis comme base du scroll : scroll natif remplacé par Lenis pour l'inertie et la fluidité — tous les effets parallax sont construits par-dessus.
• Framer Motion en sobriété : animations uniquement au scroll, pas au hover — évite la surcharge visuelle sur un site déjà dense en contenu photographique.
• Composition mobile-first : les layouts full-screen sont pensés pour mobile d'abord — contrainte qui force à hiérarchiser le contenu plutôt que de tout afficher.

Résultats

Expérience immersive livrée

Single-page experience cinématique opérationnel — narration continue par le scroll, identité visuelle forte, animations fluides. Démontre à la fois une sensibilité artistique et une maîtrise front-end technique.

Ce que j'ai appris

• Scroll-driven storytelling : la relation mouvement-scroll-narration — chaque pixel de défilement doit faire avancer l'histoire, pas juste défiler.
• Architecture de composants visuels : organiser un projet React centré sur la composition visuelle — nommage, découpage, réutilisabilité des blocs narratifs.
• Performance vs richesse visuelle : les animations lourdes sur des images pleine-page nécessitent du willChange, du lazy loading et une gestion fine des re-renders — leçons appliquées à tous les projets suivants.

Apprentissages

Nhatflix a été un projet fondateur dans mon apprentissage du développement front-end.
Il m’a permis d’expérimenter, de comprendre mes limites et d’identifier les axes d'amélioration pour la suite.

Compréhension du motion et du scroll

L’un des premiers enseignements a été la compréhension de la relation entre motion, scroll et narration.
J’ai appris à gérer :

• les timings d’animation,
• la synchronisation avec le scroll,
• l’équilibre entre fluidité et performance.

Cette expérience m’a donné une base solide pour aborder des effets plus complexes dans mes projets suivants.

Maîtrise progressive des outils

Travailler sur ce projet m’a permis de consolider mes bases en :

• Tailwind (organisation, responsive, rapidité d’itération),
• React (structure, composants, logique),
• Framer Motion (animations propres et contrôlées),
• parallax et Lenis Scroll (scroll fluide et expérience immersive).

Ce sont des compétences que j’ai pu réutiliser sur des projets plus ambitieux par la suite.

Importance de la composition

La difficile gestion des compositions et des éléments positionnés en absolute m’a appris à mieux :

• structurer un layout,
• tester différentes mises en scène,
• utiliser l’espace,
• adapter les compositions au mobile.

C’est un aspect que j’ai beaucoup amélioré avec l’expérience.

Ce que j’aurais fait différemment

Avec du recul, j’aurais :

• mieux préparé la direction artistique avant de coder,
• anticipé le responsive dès les premiers prototypes,
• documenté davantage mes choix techniques.

Ces apprentissages m’ont permis de progresser plus rapidement sur les projets suivants.

Un projet fondateur

Nhatflix a été une étape essentielle dans ma reconversion :
j’ai réalisé que je pouvais associer mon univers artistique à une approche front-end moderne, et cela a influencé ma manière de concevoir mes projets futurs.

Galerie