{"id":1527,"date":"2025-10-15T14:02:41","date_gmt":"2025-10-15T14:02:41","guid":{"rendered":"https:\/\/studiolrth.com\/?page_id=1527"},"modified":"2026-04-21T07:49:06","modified_gmt":"2026-04-21T07:49:06","slug":"212_hertz","status":"publish","type":"page","link":"https:\/\/studiolrth.com\/en\/212_hertz\/","title":{"rendered":"212 Hertz"},"content":{"rendered":"<section class=\"wp-block-group alignwide has-global-padding is-content-justification-left is-layout-constrained wp-container-core-group-is-layout-fc05645d wp-block-group-is-layout-constrained\" style=\"margin-top:0px;padding-top:6rem;padding-right:1rem;padding-bottom:4.5rem;padding-left:1rem;font-size:clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 0.464), 1.13rem);font-style:normal;font-weight:400;line-height:1.4\">\n<div class=\"wp-block-group alignfull has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<style>\n\n.type-container {\n\n  max-width: 900px;\n\n  margin: 120px auto;\n\n  color: #fff;\n\n  font-family: \"Helvetica Neue\", Arial, sans-serif;\n\n  font-size: clamp(32px, 4vw, 70px);\n\n  line-height: 1.9;\n\n  letter-spacing: 0.05em;\n\n  text-align: center;\n\n  font-weight: 200;\n\n}\n\n.type-block {\n\n  margin-bottom: 1.2em;\n\n}\n\n.type-line {\n\n  min-height: 1.9em;\n\n}\n\n\/* Curseur-bloc blanc *\/\n\n.type-caret {\n\n  display: inline-block;\n\n  width: 0.45em;\n\n  height: 0.82em;\n\n  background: #fff;\n\n  margin-left: 0.08em;\n\n  vertical-align: -0.08em;\n\n  opacity: 0.9;\n\n  animation: caretBlink 1.1s steps(1) infinite;\n\n}\n\n@keyframes caretBlink {\n\n  0%, 55% { opacity: 0.9; }\n\n  56%, 100% { opacity: 0; }\n\n}\n\n\/* Sections Gutenberg *\/\n\n.reveal-section {\n\n  display: none;\n\n  opacity: 0;\n\n  transform: translateY(60px);\n\n  transition: all 1.5s ease;\n\n}\n\n.reveal-section.visible {\n\n  opacity: 1;\n\n  transform: translateY(0);\n\n}\n\n\/* Interactions Bleu \/ Rouge *\/\n\n.blue-trigger,\n\n.red-trigger {\n\n  cursor: pointer;\n\n  transition: opacity 0.3s ease;\n\n}\n\n.blue-trigger:hover,\n\n.red-trigger:hover {\n\n  opacity: 0.6;\n\n}\n\n.blue-flash,\n\n.red-flash {\n\n  position: fixed;\n\n  inset: 0;\n\n  opacity: 0;\n\n  pointer-events: none;\n\n  transition: opacity 0.35s ease;\n\n  z-index: 9998;\n\n}\n\n.blue-flash {\n\n  background: rgba(0, 80, 255, 0.14);\n\n}\n\n.red-flash {\n\n  background: rgba(255, 40, 40, 0.14);\n\n}\n\n.blue-flash.active,\n\n.red-flash.active {\n\n  opacity: 1;\n\n}\n\n\/* Bouton retour haut *\/\n\n#backToTop {\n\n  position: fixed;\n\n  bottom: 30px;\n\n  right: 30px;\n\n  width: 44px;\n\n  height: 44px;\n\n  border: 1px solid rgba(255,255,255,0.35);\n\n  border-radius: 50%;\n\n  background: rgba(255,255,255,0.05);\n\n  color: white;\n\n  font-size: 18px;\n\n  cursor: pointer;\n\n  opacity: 0;\n\n  pointer-events: none;\n\n  transition: all 0.4s ease;\n\n  backdrop-filter: blur(6px);\n\n  z-index: 9999;\n\n}\n\n#backToTop.visible {\n\n  opacity: 1;\n\n  pointer-events: auto;\n\n}\n\n#backToTop:hover {\n\n  background: rgba(255,255,255,0.15);\n\n  transform: scale(1.05);\n\n}\n\n<\/style>\n\n<div class=\"type-container\" id=\"text\"><\/div>\n\n<div id=\"blueFlash\" class=\"blue-flash\"><\/div>\n\n<div id=\"redFlash\" class=\"red-flash\"><\/div>\n\n<button id=\"backToTop\">\u2191<\/button>\n\n<script>\n\nconst lang = document.documentElement.lang || \"fr\";\n\nconst texts = {\n\n  fr: [\n\n    [\"Ceci n\u2019est pas une image,\", \"mais un mouvement de lumi\u00e8re,\"],\n\n    [\"car lumi\u00e8re est vie,\", \"essentiel.\"],\n\n    [\"Deux vibrations,\", \"deux perceptions\u2026\"],\n\n    [\"Bleu\"],\n\n    [\"Rouge\"]\n\n  ],\n\n  en: [\n\n    [\"This is not an image,\", \"but a movement of light,\"],\n\n    [\"because light is life,\", \"essential.\"],\n\n    [\"Two vibrations,\", \"two perceptions\u2026\"],\n\n    [\"Blue\"],\n\n    [\"Red\"]\n\n  ]\n\n};\n\nconst blocks = texts[lang.startsWith(\"en\") ? \"en\" : \"fr\"];\n\nconst textEl = document.getElementById(\"text\");\n\nconst blueFlash = document.getElementById(\"blueFlash\");\n\nconst redFlash = document.getElementById(\"redFlash\");\n\nconst baseSpeed = 210;\n\nlet blockIndex = 0;\n\nlet lineIndex = 0;\n\nlet wordIndex = 0;\n\nlet currentBlockEl = null;\n\nlet currentLineEl = null;\n\nlet caretEl = null;\n\nfunction revealSection(id) {\n\n  const section = document.getElementById(id);\n\n  if (!section) return;\n\n  section.style.display = \"block\";\n\n  setTimeout(() => {\n\n    section.classList.add(\"visible\");\n\n  }, 50);\n\n}\n\nfunction nextDelay(word) {\n\n  let delay = baseSpeed + Math.random() * 120;\n\n  if (word.endsWith(\",\") || word.endsWith(\".\")) delay += 350;\n\n  if (word.endsWith(\"\u2026\")) delay += 700;\n\n  return delay;\n\n}\n\nfunction ensureBlockAndLine() {\n\n  if (!currentBlockEl) {\n\n    currentBlockEl = document.createElement(\"div\");\n\n    currentBlockEl.className = \"type-block\";\n\n    textEl.appendChild(currentBlockEl);\n\n  }\n\n  if (!currentLineEl) {\n\n    currentLineEl = document.createElement(\"div\");\n\n    currentLineEl.className = \"type-line\";\n\n    currentBlockEl.appendChild(currentLineEl);\n\n  }\n\n  if (!caretEl) {\n\n    caretEl = document.createElement(\"span\");\n\n    caretEl.className = \"type-caret\";\n\n  }\n\n  currentLineEl.appendChild(caretEl);\n\n}\n\nfunction placeCaretAtEnd() {\n\n  if (!caretEl || !currentLineEl) return;\n\n  currentLineEl.appendChild(caretEl);\n\n}\n\nfunction bindBlueInteraction() {\n\n  const blueWord = document.querySelector(\".blue-trigger\");\n\n  if (!blueWord || blueWord.dataset.bound === \"true\") return;\n\n  blueWord.dataset.bound = \"true\";\n\n  blueWord.addEventListener(\"click\", () => {\n\n    blueFlash.classList.add(\"active\");\n\n    setTimeout(() => {\n\n      blueFlash.classList.remove(\"active\");\n\n    }, 350);\n\n  });\n\n}\n\nfunction bindRedInteraction() {\n\n  const redWord = document.querySelector(\".red-trigger\");\n\n  if (!redWord || redWord.dataset.bound === \"true\") return;\n\n  redWord.dataset.bound = \"true\";\n\n  redWord.addEventListener(\"click\", () => {\n\n    redFlash.classList.add(\"active\");\n\n    setTimeout(() => {\n\n      redFlash.classList.remove(\"active\");\n\n    }, 350);\n\n  });\n\n}\n\nfunction appendWord(word) {\n\n  if (word === \"Bleu\" || word === \"Blue\") {\n\n    const span = document.createElement(\"span\");\n\n    span.className = \"blue-trigger\";\n\n    span.textContent = word;\n\n    currentLineEl.appendChild(span);\n\n    bindBlueInteraction();\n\n  } else if (word === \"Rouge\" || word === \"Red\") {\n\n    const span = document.createElement(\"span\");\n\n    span.className = \"red-trigger\";\n\n    span.textContent = word;\n\n    currentLineEl.appendChild(span);\n\n    bindRedInteraction();\n\n  } else {\n\n    currentLineEl.appendChild(document.createTextNode(word));\n\n  }\n\n}\n\nfunction typeNextWord() {\n\n  if (blockIndex >= blocks.length) {\n\n    return;\n\n  }\n\n  const currentBlock = blocks[blockIndex];\n\n  const currentLine = currentBlock[lineIndex];\n\n  const words = currentLine.split(\" \");\n\n  const word = words[wordIndex];\n\n  ensureBlockAndLine();\n\n  if (caretEl.parentNode) {\n\n    caretEl.parentNode.removeChild(caretEl);\n\n  }\n\n  if (wordIndex > 0) {\n\n    currentLineEl.appendChild(document.createTextNode(\" \"));\n\n  }\n\n  appendWord(word);\n\n  placeCaretAtEnd();\n\n  if (word === \"Bleu\" || word === \"Blue\") {\n\n    setTimeout(() => revealSection(\"bleu-section\"), 800);\n\n  }\n\n  if (word === \"Rouge\" || word === \"Red\") {\n\n    setTimeout(() => revealSection(\"rouge-section\"), 800);\n\n  }\n\n  wordIndex++;\n\n  if (wordIndex >= words.length) {\n\n    lineIndex++;\n\n    wordIndex = 0;\n\n    currentLineEl = null;\n\n    if (lineIndex < currentBlock.length) {\n\n      setTimeout(typeNextWord, 700);\n\n      return;\n\n    }\n\n    blockIndex++;\n\n    lineIndex = 0;\n\n    currentBlockEl = null;\n\n    currentLineEl = null;\n\n    if (blockIndex < blocks.length) {\n\n      setTimeout(typeNextWord, 1100);\n\n      return;\n\n    }\n\n    return;\n\n  }\n\n  setTimeout(typeNextWord, nextDelay(word));\n\n}\n\ntypeNextWord();\n\n\/* Bouton retour haut *\/\n\nconst btn = document.getElementById(\"backToTop\");\n\nwindow.addEventListener(\"scroll\", () => {\n\n  if (window.scrollY > 300) {\n\n    btn.classList.add(\"visible\");\n\n  } else {\n\n    btn.classList.remove(\"visible\");\n\n  }\n\n});\n\nbtn.addEventListener(\"click\", () => {\n\n  window.scrollTo({\n\n    top: 0,\n\n    behavior: \"smooth\"\n\n  });\n\n});\n\n<\/script>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"227\" src=\"https:\/\/studiolrth.com\/wp-content\/uploads\/2025\/01\/IMG_7010-scaled-e1776694728535-1024x227.jpeg\" alt=\"\" class=\"wp-image-2478\" srcset=\"https:\/\/studiolrth.com\/wp-content\/uploads\/2025\/01\/IMG_7010-scaled-e1776694728535-1024x227.jpeg 1024w, https:\/\/studiolrth.com\/wp-content\/uploads\/2025\/01\/IMG_7010-scaled-e1776694728535-300x66.jpeg 300w, https:\/\/studiolrth.com\/wp-content\/uploads\/2025\/01\/IMG_7010-scaled-e1776694728535-768x170.jpeg 768w, https:\/\/studiolrth.com\/wp-content\/uploads\/2025\/01\/IMG_7010-scaled-e1776694728535-1536x340.jpeg 1536w, https:\/\/studiolrth.com\/wp-content\/uploads\/2025\/01\/IMG_7010-scaled-e1776694728535-18x4.jpeg 18w, https:\/\/studiolrth.com\/wp-content\/uploads\/2025\/01\/IMG_7010-scaled-e1776694728535.jpeg 1907w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"227\" src=\"https:\/\/studiolrth.com\/wp-content\/uploads\/2025\/01\/IMG_7010-scaled-e1776694728535-1024x227.jpeg\" alt=\"\" class=\"wp-image-2478\" srcset=\"https:\/\/studiolrth.com\/wp-content\/uploads\/2025\/01\/IMG_7010-scaled-e1776694728535-1024x227.jpeg 1024w, https:\/\/studiolrth.com\/wp-content\/uploads\/2025\/01\/IMG_7010-scaled-e1776694728535-300x66.jpeg 300w, https:\/\/studiolrth.com\/wp-content\/uploads\/2025\/01\/IMG_7010-scaled-e1776694728535-768x170.jpeg 768w, https:\/\/studiolrth.com\/wp-content\/uploads\/2025\/01\/IMG_7010-scaled-e1776694728535-1536x340.jpeg 1536w, https:\/\/studiolrth.com\/wp-content\/uploads\/2025\/01\/IMG_7010-scaled-e1776694728535-18x4.jpeg 18w, https:\/\/studiolrth.com\/wp-content\/uploads\/2025\/01\/IMG_7010-scaled-e1776694728535.jpeg 1907w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n<\/section>","protected":false},"excerpt":{"rendered":"<p>\u2191<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"om_disable_all_campaigns":false,"footnotes":""},"class_list":["post-1527","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/studiolrth.com\/en\/wp-json\/wp\/v2\/pages\/1527","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/studiolrth.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/studiolrth.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/studiolrth.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/studiolrth.com\/en\/wp-json\/wp\/v2\/comments?post=1527"}],"version-history":[{"count":174,"href":"https:\/\/studiolrth.com\/en\/wp-json\/wp\/v2\/pages\/1527\/revisions"}],"predecessor-version":[{"id":2483,"href":"https:\/\/studiolrth.com\/en\/wp-json\/wp\/v2\/pages\/1527\/revisions\/2483"}],"wp:attachment":[{"href":"https:\/\/studiolrth.com\/en\/wp-json\/wp\/v2\/media?parent=1527"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}