4. La vitesse du temps

La vitesse du temps

🎬 Référence cinéma : Le montage comme rythme

Le montage cinématographique crée le rythme d’un film. Dans Mad Max: Fury Road, les scènes d’action utilisent des coupes rapides pour créer l’urgence. Dans 2001: A Space Odyssey, Kubrick utilise des plans longs pour installer la contemplation.

Au cinéma, le réalisateur impose son rythme. Sur le web, votre vitesse de défilement devient le tempo de l’histoire.

Scrollez lentement, et l’histoire devient méditative, contemplative. Scrollez rapidement, et elle devient frénétique, anxieuse. Vous êtes le métronome de votre propre récit.

---

✨ Expérience interactive

Une journée dans la vie d’une personne. Votre vitesse de scroll contrôle le tempo de la narration. Essayez de scroller à différentes vitesses.

Expérimentez avec le rythme

• Scrollez très lentement : observez la version contemplative
• Scrollez rapidement : ressentez l’urgence
• Faites des pauses : le temps s’arrête avec vous
• Scrollez en arrière : revenez dans le passé

---

🎭 Analyse narrative

Ce que vous venez d’expérimenter

Vous avez vécu plusieurs versions de la même journée :

• Scroll lent : contemplation, détails, respiration, poésie
• Scroll rapide : stress, superficialité, rush, anxiété
• Pauses : moments de réflexion, suspense
• Retour en arrière : nostalgie, regret, révision

Même contenu, mais votre rythme de lecture a créé des émotions radicalement différentes.

Ce que le web permet

Au cinéma : Le monteur décide du tempo. Les plans durent le temps qu’il a choisi.

Sur le web : Vous êtes le chef d’orchestre. Vous décidez du tempo de votre expérience. Chaque spectateur crée son propre rythme narratif.

Variations narratives possibles

🏃 Course contre la montre

Plus vous scrollez vite, plus le danger se rapproche. Votre vitesse devient la mécanique du suspense.

📖 Livre vivant

La vitesse de lecture influence l’histoire elle-même. Lire vite = fin précipitée. Lire lentement = détails cachés révélés.

🎼 Visualiseur musical

Une chanson dont le playback est synchronisé au scroll. Vous contrôlez la timeline musicale.

🌅 Cycle temporel

Du matin au soir. Votre vitesse de scroll fait passer les heures. Arrêtez-vous pour contempler un moment précis.

---

📝 Le scénario interactif

Ingrédients de l’histoire

// La vidéo qui raconte la journée
const video = document.querySelector('#video-journee');

// Éléments de texte qui changent selon le rythme
const narration = document.querySelector('#narration');
const ambiance = document.querySelector('#ambiance-audio');

// Mémoire du scroll
let dernierePosition = 0;
let derniereVitesse = 0;
let dernierTemps = Date.now();

// États émotionnels selon le rythme
const etatsRythmiques = {
  contemplatif: {
    texte: "Le temps s'étire. Chaque détail compte. Vous prenez le temps de voir.",
    filtre: "saturate(1.2) brightness(1.1)",
    musique: "lente"
  },
  normal: {
    texte: "Une journée comme les autres. Le temps passe.",
    filtre: "saturate(1) brightness(1)",
    musique: "normale"
  },
  presse: {
    texte: "Tout va trop vite. Vous manquez des choses. L'urgence vous étouffe.",
    filtre: "saturate(0.7) brightness(0.9) blur(1px)",
    musique: "rapide"
  }
};

Le scénario

// QUAND le spectateur défile la page
window.addEventListener('scroll', () => {

  // Capturer la position actuelle
  const positionActuelle = window.scrollY;
  const tempsActuel = Date.now();

  // Calculer la vitesse de défilement
  const distance = positionActuelle - dernierePosition;
  const duree = tempsActuel - dernierTemps;
  const vitesse = Math.abs(distance / duree); // pixels par milliseconde

  // Mettre à jour la mémoire
  dernierePosition = positionActuelle;
  dernierTemps = tempsActuel;
  derniereVitesse = vitesse;

  // SYNCHRONISER LA VIDÉO AU SCROLL
  // La position de scroll contrôle la position dans la vidéo
  const hauteurTotale = document.body.scrollHeight - window.innerHeight;
  const progression = positionActuelle / hauteurTotale; // de 0 à 1

  // Appliquer cette progression à la vidéo
  video.currentTime = progression * video.duration;

  // EMBRANCHEMENT NARRATIF : adapter selon la vitesse
  if (vitesse < 0.1) {
    // Scroll très lent : contemplation
    appliquerEtat(etatsRythmiques.contemplatif);
    video.playbackRate = 0.5; // ralentir la vidéo

  } else if (vitesse < 0.5) {
    // Scroll normal : flux naturel
    appliquerEtat(etatsRythmiques.normal);
    video.playbackRate = 1;

  } else {
    // Scroll rapide : stress
    appliquerEtat(etatsRythmiques.presse);
    video.playbackRate = 1.5; // accélérer la vidéo
  }

  // SI le spectateur scrolle vers le haut (retour en arrière)
  if (distance < 0) {
    narration.textContent = "Vous revenez en arrière. Revivre. Regretter ?";
    video.style.filter = "sepia(0.3)"; // effet de mémoire
  }
});

// Séquence pour appliquer un état émotionnel
function appliquerEtat(etat) {
  narration.textContent = etat.texte;
  video.style.filter = etat.filtre;

  // Changer l'ambiance sonore
  changerAmbiance(etat.musique);
}

// Changer la musique d'ambiance selon le rythme
function changerAmbiance(type) {
  if (type === "lente") {
    ambiance.playbackRate = 0.8;
    ambiance.volume = 0.3;
  } else if (type === "normale") {
    ambiance.playbackRate = 1;
    ambiance.volume = 0.5;
  } else if (type === "rapide") {
    ambiance.playbackRate = 1.3;
    ambiance.volume = 0.7;
  }
}

Décryptage narratif

Ce code est un chef d’orchestre :

1. Mesure du tempo : calcul de la vitesse de scroll
2. Synchronisation : position de scroll = position dans la vidéo
3. Adaptation : le rythme du spectateur change le rythme du récit
4. Réversibilité : scroll arrière = retour dans le temps

Équivalent After Effects :

• scrollY = position sur la timeline
• progression * duration = expression linear() pour mapper une valeur à une autre
• playbackRate = Time Stretch dans Premiere/AE
• La vitesse de scroll = vélocité d’animation (vitesse de changement)

---

🎨 Variations créatives

Exercice 1 : Points de basculement narratifs

Créez des “chapitres” qui se déclenchent à certaines positions de scroll :

window.addEventListener('scroll', () => {
  const progression = window.scrollY / (document.body.scrollHeight - window.innerHeight);

  // EMBRANCHEMENTS selon la progression
  if (progression < 0.25) {
    // Chapitre 1 : Le matin
    document.querySelector('#chapitre').textContent = "Matin - 7h00";
    ambiance.src = "matin.mp3";

  } else if (progression < 0.5) {
    // Chapitre 2 : Midi
    document.querySelector('#chapitre').textContent = "Midi - 12h30";
    ambiance.src = "midi.mp3";

  } else if (progression < 0.75) {
    // Chapitre 3 : Après-midi
    document.querySelector('#chapitre').textContent = "Après-midi - 16h00";
    ambiance.src = "apres-midi.mp3";

  } else {
    // Chapitre 4 : Soir
    document.querySelector('#chapitre').textContent = "Soir - 21h00";
    ambiance.src = "soir.mp3";
  }
});

Exercice 2 : Parallaxe narratif

Différents éléments scrollent à des vitesses différentes, créant de la profondeur narrative :

window.addEventListener('scroll', () => {
  const position = window.scrollY;

  // Les éléments de premier plan scrollent normalement
  document.querySelector('#premier-plan').style.transform =
    `translateY(${position * 1}px)`;

  // Les éléments d'arrière-plan scrollent plus lentement (effet de profondeur)
  document.querySelector('#arriere-plan').style.transform =
    `translateY(${position * 0.5}px)`;

  // Les pensées du personnage scrollent plus vite (intériorité agitée)
  document.querySelector('#pensees').style.transform =
    `translateY(${position * 1.5}px)`;
});

Exercice 3 : Défilement infini avec boucle

Créez une histoire qui boucle indéfiniment :

window.addEventListener('scroll', () => {
  const progression = window.scrollY / (document.body.scrollHeight - window.innerHeight);

  // Quand on arrive à la fin, boucler la vidéo
  if (progression >= 0.98) {
    video.currentTime = 0;

    // Message poétique
    document.querySelector('#narration').textContent =
      "Encore une journée. Comme hier. Comme demain.";
  }
});

---

🎬 Aller plus loin : Vidéo scrubbing avancé

Effet de ralenti/accéléré en temps réel

Créez une vidéo qui réagit instantanément à votre vitesse de scroll :

let frameActuelle = 0;

window.addEventListener('scroll', () => {
  const vitesse = calculerVitesse(); // fonction définie précédemment

  // SI le spectateur scrolle lentement
  if (vitesse < 0.1) {
    // Avancer la vidéo frame par frame (super ralenti)
    video.currentTime += 0.01; // 10ms par scroll

  } else if (vitesse > 1) {
    // Avancer par bonds (accéléré)
    video.currentTime += 0.5; // 500ms par scroll
  } else {
    // Avancement proportionnel à la vitesse
    video.currentTime += vitesse * 0.1;
  }

  // Ne pas dépasser la durée
  if (video.currentTime >= video.duration) {
    video.currentTime = video.duration - 0.1;
  }
});

Zones temporelles

Certaines sections de la page ralentissent ou accélèrent automatiquement le temps :

window.addEventListener('scroll', () => {
  const position = window.scrollY;

  // Zone 1 (0-500px) : temps normal
  if (position < 500) {
    video.playbackRate = 1;

  // Zone 2 (500-1000px) : ralenti (moment important)
  } else if (position < 1000) {
    video.playbackRate = 0.3;
    document.querySelector('#indication').textContent =
      "Le temps s'arrête. Ce moment est crucial.";

  // Zone 3 (1000-1500px) : accéléré (passage rapide)
  } else if (position < 1500) {
    video.playbackRate = 2;
    document.querySelector('#indication').textContent =
      "Les heures défilent. Rien d'important.";

  // Zone 4 (1500+) : retour à la normale
  } else {
    video.playbackRate = 1;
  }
});

Scrubbing bidirectionnel avec inertie

Ajouter un effet d’inertie (comme un tourner de roue) :

let vitesseInertie = 0;

window.addEventListener('scroll', () => {
  const vitesse = calculerVitesse();

  // Ajouter la vitesse actuelle à l'inertie
  vitesseInertie += vitesse * 0.1;

  // Appliquer la friction
  vitesseInertie *= 0.95;
});

// Boucle d'animation pour appliquer l'inertie
function boucleInertie() {
  // Avancer la vidéo selon l'inertie
  video.currentTime += vitesseInertie;

  // Continuer la boucle
  requestAnimationFrame(boucleInertie);
}

boucleInertie();

---

🎵 Design sonore rythmique

Musique adaptative

La musique change de couches selon votre vitesse :

// Trois couches musicales
const rythmeBasse = new Audio('base.mp3');
const rythmePercussions = new Audio('percussions.mp3');
const rythmeMelodie = new Audio('melodie.mp3');

// Toutes démarrent en même temps (synchronisées)
rythmeBasse.play();
rythmePercussions.play();
rythmeMelodie.play();

window.addEventListener('scroll', () => {
  const vitesse = calculerVitesse();

  // Ajuster les volumes selon la vitesse
  rythmeBasse.volume = 0.8; // toujours présente

  if (vitesse < 0.2) {
    // Lent : juste la base
    rythmePercussions.volume = 0;
    rythmeMelodie.volume = 0.3;

  } else if (vitesse < 0.6) {
    // Moyen : base + mélodie
    rythmePercussions.volume = 0.4;
    rythmeMelodie.volume = 0.6;

  } else {
    // Rapide : tout à fond
    rythmePercussions.volume = 0.8;
    rythmeMelodie.volume = 0.8;
  }

  // Synchroniser le tempo de tous les audio
  const tempoAjuste = 1 + (vitesse * 0.5);
  rythmeBasse.playbackRate = tempoAjuste;
  rythmePercussions.playbackRate = tempoAjuste;
  rythmeMelodie.playbackRate = tempoAjuste;
});

---

💡 Ce que vous avez appris

Le scroll comme tempo

Votre vitesse de défilement n’est pas qu’une action technique, c’est votre rythme de respiration dans l’histoire

Vidéo synchronisée

Lier scrollY à currentTime crée un contrôle manuel de la timeline, comme un scrubbing en post-production

Vitesse = émotion

Mesurer la vitesse d’interaction permet d’adapter le ton narratif en temps réel

Le spectateur-chef d'orchestre

Donner le contrôle du tempo crée des expériences narratives profondément personnelles

---

🎓 Synthèse : Vous avez le contrôle total

Vous venez de terminer les 4 expériences narratives. Récapitulons ce que vous maîtrisez maintenant :

1. Le regard

Mousemove : Votre regard guide l’émotion, vous êtes le cadreur

2. Le choix

Click + audio : Vos clics sont des décisions de montage, vous êtes le monteur

3. L'espace

Mouseenter/leave + vidéo : Votre parcours crée la chronologie, vous êtes l’explorateur

4. Le temps

Scroll + vidéo : Votre rythme devient le tempo, vous êtes le chef d’orchestre

➡️ Créez votre propre récit

Maintenant que vous comprenez les mécanismes, il est temps de créer votre propre expérience narrative interactive.

Créez votre récit →