{"id":310,"date":"2026-03-08T01:20:14","date_gmt":"2026-03-08T01:20:14","guid":{"rendered":"https:\/\/lynnheemsbergen.com\/?page_id=310"},"modified":"2026-03-08T01:20:14","modified_gmt":"2026-03-08T01:20:14","slug":"landing-v6","status":"publish","type":"page","link":"https:\/\/lynnheemsbergen.com\/","title":{"rendered":"Landing V6"},"content":{"rendered":"\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:wght@500;600&#038;display=swap\" rel=\"stylesheet\">\n\n<style>\nhtml,body{\n  margin:0!important;\n  padding:0!important;\n  width:100%!important;\n  height:100%!important;\n  background:#080706!important;\n  overflow:hidden!important;\n}\n\n.entry-title,.page-title,.wp-block-post-title{\n  display:none!important;\n}\n\n.wp-site-blocks,\n.wp-block-group,\n.wp-block-post-content,\n.entry-content,\n.site-content,\n.content-area,\n#content,\nmain,\narticle{\n  margin:0!important;\n  padding:0!important;\n  max-width:none!important;\n  background:transparent!important;\n}\n\n\/* stage *\/\n#stage{\n  position:fixed;\n  inset:0;\n  width:100vw;\n  height:100vh;\n  background:#080706;\n  overflow:hidden;\n  z-index:1;\n}\n\n\/* loader *\/\n#loader{\n  position:fixed;\n  inset:0;\n  width:100vw;\n  height:100vh;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  background:#080706;\n  z-index:999999;\n  pointer-events:none;\n  opacity:1;\n  transition:opacity .8s ease;\n}\n\n#loader.hide{\n  opacity:0;\n}\n\n#titleWrap{\n  display:inline-flex;\n  align-items:baseline;\n  gap:.16em;\n  white-space:nowrap;\n  padding:0 14px;\n}\n\n#title{\n  font-family:\"Playfair Display\",serif;\n  font-weight:500;\n  color:#f4f0ea;\n  text-transform:uppercase;\n  letter-spacing:.22em;\n  font-size:48px;\n  line-height:1;\n  white-space:nowrap;\n  text-shadow:0 14px 50px rgba(0,0,0,.65);\n}\n\n@media(max-width:600px){\n  #title{\n    font-size:20px;\n    letter-spacing:.12em;\n  }\n}\n\n#cursor{\n  width:2px;\n  height:1em;\n  background:#f4f0ea;\n  display:inline-block;\n  opacity:0;\n  margin-left:.06em;\n  vertical-align:baseline;\n  flex:0 0 auto;\n}\n\n@keyframes blink{\n  0%,40%{opacity:1}\n  50%,100%{opacity:0}\n}\n#cursor.blink{\n  animation:blink .6s step-end 2;\n}\n\n\/* hero always full-bleed *\/\n#hero{\n  position:absolute;\n  inset:0;\n  width:100%;\n  height:100%;\n  object-fit:cover;\n  object-position:center 24%;\n  opacity:0;\n  transform:scale(1.02);\n  will-change:opacity,transform;\n  filter:\n    contrast(102%)\n    brightness(.90)\n    saturate(.88)\n    sepia(.06);\n}\n\n@media (max-width:600px){\n  #hero{\n    object-position:center 20%;\n  }\n}\n\n@media (orientation:landscape){\n  #hero{\n    object-position:center 30%;\n  }\n}\n\n#stage.live #hero{\n  animation:fade 2.6s ease forwards, breathe 34s ease-in-out infinite;\n}\n\n@keyframes fade{\n  from{opacity:0}\n  to{opacity:1}\n}\n\n@keyframes breathe{\n  0%{transform:scale(1.02)}\n  35%{transform:scale(1.03) translate(-.08%,.06%)}\n  70%{transform:scale(1.035) translate(.08%,-.06%)}\n  100%{transform:scale(1.02)}\n}\n\n\/* overlays *\/\n.layer{\n  position:absolute;\n  inset:0;\n  pointer-events:none;\n  opacity:0;\n  transition:opacity .8s ease;\n}\n#stage.live .layer{\n  opacity:1;\n}\n\n#spot{\n  background:radial-gradient(circle at 50% 36%, rgba(255,243,230,.055), transparent 46%);\n}\n\n#vig{\n  background:radial-gradient(circle, transparent 40%, rgba(0,0,0,.58));\n}\n\n#grain{\n  background-image:\n    repeating-linear-gradient(\n      0deg,\n      rgba(255,255,255,.013) 0px,\n      rgba(255,255,255,.013) 1px,\n      transparent 1px,\n      transparent 3px\n    ),\n    repeating-linear-gradient(\n      90deg,\n      rgba(255,255,255,.009) 0px,\n      rgba(255,255,255,.009) 1px,\n      transparent 1px,\n      transparent 4px\n    );\n  mix-blend-mode:overlay;\n  opacity:0;\n}\n#stage.live #grain{\n  opacity:.07;\n}\n\n#tone{\n  background:\n    radial-gradient(circle at 20% 80%, rgba(186,124,82,.08), transparent 36%),\n    radial-gradient(circle at 82% 18%, rgba(210,176,120,.05), transparent 34%);\n  mix-blend-mode:screen;\n  opacity:0;\n}\n#stage.live #tone{\n  opacity:.55;\n}\n\n\/* ui *\/\n#ui{\n  position:fixed;\n  left:0;\n  right:0;\n  bottom:calc(26px + env(safe-area-inset-bottom));\n  display:flex;\n  justify-content:center;\n  z-index:60;\n  opacity:0;\n  transition:opacity .9s ease;\n}\n#stage.live #ui{\n  opacity:1;\n}\n\n#stack{\n  display:flex;\n  flex-direction:column;\n  align-items:center;\n  text-align:center;\n  gap:14px;\n}\n\n#links{\n  display:flex;\n  gap:16px;\n  font-family:\"Playfair Display\",serif;\n  font-size:12px;\n  font-weight:500;\n  letter-spacing:.18em;\n  text-transform:uppercase;\n  white-space:nowrap;\n  line-height:16px;\n}\n\n#links a{\n  color:rgba(255,255,255,.68);\n  text-decoration:none;\n}\n\n#links a+a::before{\n  content:\"\u2022\";\n  margin-right:16px;\n  color:rgba(255,255,255,.28);\n}\n\n#sub{\n  font-family:\"Playfair Display\",serif;\n  font-size:12px;\n  font-weight:500;\n  letter-spacing:.24em;\n  text-transform:uppercase;\n  color:rgba(255,255,255,.56);\n  text-align:center;\n}\n\n#sub::before{\n  content:\"\";\n  display:block;\n  width:140px;\n  height:1px;\n  margin:0 auto 14px;\n  background:rgba(255,255,255,.22);\n}\n\n#wave{\n  display:flex;\n  justify-content:center;\n  gap:4px;\n  margin-top:2px;\n  opacity:.18;\n  height:14px;\n  align-items:flex-end;\n}\n\n#wave span{\n  width:2px;\n  height:12px;\n  background:#fff;\n  border-radius:2px;\n  transform-origin:bottom;\n  transform:scaleY(.22);\n  animation:wave 4.8s ease-in-out infinite;\n}\n\n#wave span:nth-child(3n){animation-delay:-.35s}\n#wave span:nth-child(4n){animation-delay:-.55s}\n\n@keyframes wave{\n  0%,100%{transform:scaleY(.22)}\n  50%{transform:scaleY(.72)}\n}\n\n@media (max-width:420px){\n  #links{\n    gap:12px;\n    font-size:11px;\n    letter-spacing:.12em;\n  }\n  #links a+a::before{\n    margin-right:12px;\n  }\n}\n<\/style>\n\n<div id=\"loader\">\n  <div id=\"titleWrap\">\n    <span id=\"title\">LH<\/span>\n    <span id=\"cursor\"><\/span>\n  <\/div>\n<\/div>\n\n<div id=\"stage\">\n  <img id=\"hero\"\n    src=\"https:\/\/lynnheemsbergen.com\/wp-content\/uploads\/2026\/03\/Ontwerp-zonder-titel-1.png\"\n    alt=\"Lynn Heemsbergen\"\n    loading=\"eager\"\n    decoding=\"async\">\n\n  <div class=\"layer\" id=\"spot\"><\/div>\n  <div class=\"layer\" id=\"vig\"><\/div>\n  <div class=\"layer\" id=\"grain\"><\/div>\n  <div class=\"layer\" id=\"tone\"><\/div>\n\n  <div id=\"ui\">\n    <div id=\"stack\">\n      <div id=\"links\">\n        <a href=\"https:\/\/instagram.com\/lynnheemsbergen\" target=\"_blank\" rel=\"noopener\">Instagram<\/a>\n        <a href=\"https:\/\/www.tiktok.com\/@lynnheemsbergen?_r=1&#038;_t=ZG-94QD1x5ouPI\" target=\"_blank\" rel=\"noopener\">TikTok<\/a>\n        <a href=\"mailto:management@lynnheemsbergen.com\">Management<\/a>\n      <\/div>\n\n      <div id=\"sub\">New music in progress<\/div>\n\n      <div id=\"wave\">\n        <span><\/span><span><\/span><span><\/span><span><\/span><span><\/span>\n        <span><\/span><span><\/span><span><\/span><span><\/span><span><\/span>\n        <span><\/span><span><\/span><span><\/span><span><\/span><span><\/span>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div>\n\n<script>\n(function(){\n  const restText = \"YNN HEEMSBERGEN\";\n\n  const loader = document.getElementById(\"loader\");\n  const stage = document.getElementById(\"stage\");\n  const title = document.getElementById(\"title\");\n  const cursor = document.getElementById(\"cursor\");\n  const hero = document.getElementById(\"hero\");\n\n  if(!loader || !stage || !title || !cursor || !hero) return;\n\n  const safety = setTimeout(() => {\n    loader.classList.add(\"hide\");\n    stage.classList.add(\"live\");\n    setTimeout(() => {\n      if(loader && loader.parentNode) loader.parentNode.removeChild(loader);\n    }, 900);\n  }, 11000);\n\n  hero.onerror = () => {\n    loader.classList.add(\"hide\");\n    stage.classList.add(\"live\");\n    setTimeout(() => {\n      if(loader && loader.parentNode) loader.parentNode.removeChild(loader);\n    }, 900);\n  };\n\n  title.textContent = \"LH\";\n  cursor.classList.remove(\"blink\");\n  cursor.style.opacity = \"0\";\n\n  const holdLH = 1700;\n  const holdCursor = 750;\n  const holdAfterDelete = 300;\n  const typeSpeed = 170;\n  const holdAfterTyping = 1900;\n\n  setTimeout(() => {\n    cursor.style.opacity = \"1\";\n\n    setTimeout(() => {\n      title.textContent = \"L\";\n\n      setTimeout(() => {\n        let i = 0;\n\n        const typer = setInterval(() => {\n          title.textContent += restText.charAt(i);\n          i++;\n\n          if(i >= restText.length){\n            clearInterval(typer);\n\n            setTimeout(() => {\n              cursor.classList.add(\"blink\");\n            }, 350);\n\n            setTimeout(() => {\n              clearTimeout(safety);\n              loader.classList.add(\"hide\");\n              stage.classList.add(\"live\");\n\n              \/\/ remove loader entirely so LH can never remain behind image\n              setTimeout(() => {\n                if(loader && loader.parentNode) loader.parentNode.removeChild(loader);\n              }, 900);\n\n            }, holdAfterTyping);\n          }\n        }, typeSpeed);\n\n      }, holdAfterDelete);\n\n    }, holdCursor);\n\n  }, holdLH);\n})();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>LH Instagram TikTok Management New music in progress<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-310","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/lynnheemsbergen.com\/index.php?rest_route=\/wp\/v2\/pages\/310","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lynnheemsbergen.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/lynnheemsbergen.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/lynnheemsbergen.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lynnheemsbergen.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=310"}],"version-history":[{"count":1,"href":"https:\/\/lynnheemsbergen.com\/index.php?rest_route=\/wp\/v2\/pages\/310\/revisions"}],"predecessor-version":[{"id":311,"href":"https:\/\/lynnheemsbergen.com\/index.php?rest_route=\/wp\/v2\/pages\/310\/revisions\/311"}],"wp:attachment":[{"href":"https:\/\/lynnheemsbergen.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=310"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}