Studioluw | H\u00e9t Marketing Bureau voor het Westland<\/title>\n\n <script type=\"application\/ld+json\">\n {\n \"@context\": \"https:\/\/schema.org\",\n \"@type\": \"LocalBusiness\",\n \"name\": \"Studioluw | Marketing & World Building\",\n \"image\": \"https:\/\/studioluw.nl\/wp-content\/uploads\/2025\/12\/bitmap.png\",\n \"url\": \"https:\/\/studioluw.nl\/\",\n \"telephone\": \"0616472723\",\n \"address\": {\n \"@type\": \"PostalAddress\",\n \"streetAddress\": \"Korenmaat 10\",\n \"addressLocality\": \"Westland\",\n \"addressRegion\": \"Zuid-Holland\",\n \"postalCode\": \"2636JG\",\n \"addressCountry\": \"NL\"\n },\n \"openingHoursSpecification\": {\n \"@type\": \"OpeningHoursSpecification\",\n \"dayOfWeek\": [\n \"Monday\",\n \"Tuesday\",\n \"Wednesday\",\n \"Thursday\",\n \"Friday\"\n ],\n \"opens\": \"09:00\",\n \"closes\": \"17:00\"\n },\n \"priceRange\": \"$$$\"\n }\n <\/script>\n <style>\n \/* --- 1. ALGEMENE INSTELLINGEN & VARIABELEN --- *\/\n :root {\n --bg-color: #fcfcfc;\n --text-light: #d1d1d1;\n --text-dark: #111111;\n --accent: #FF4D4D;\n --spacing-unit: 8vw;\n --font-stack: 'Helvetica Neue', Helvetica, Arial, sans-serif;\n }\n\n html, body {\n margin: 0; padding: 0; background-color: var(--bg-color); color: var(--text-dark);\n font-family: var(--font-stack); overflow-x: hidden; cursor: none;\n }\n\n \/* --- FINALE MARGE FIX TEGEN DE ADMIN BAR GHOSTS --- *\/\n html { margin-top: 0 !important; }\n body { margin-top: 0 !important; padding-top: 0 !important; }\n\n \/* --- 2. NOISE TEXTUUR & CURSOR --- *\/\n .noise-overlay {\n position: fixed; top: 0; left: 0; width: 100%; height: 100%;\n pointer-events: none; z-index: 9999; opacity: 0.04;\n background: url('data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyBAMAAADsEZWCAAAAGFBMVEUAAAA5OTkAAABMTExERERmZmYzMzMyMjJ43I3xAAAACHRSTlMAMwAzuWNm7pm4UQ4AAABcSURBVDjLY2AYBaNgKLgJQhCVJAhCVJIgCFVJgiBUJQmCUJUkCEJVkiAIVUmCIFQlCYJQlSQIQlWSIAhVSYIgVCUJglCVJAhCVZIgCFVJgiBUJQmCUJUkCkJVEgYAATs2Tv\/42TwAAAAASUVORK5CYII=');\n }\n .cursor-dot, .cursor-outline {\n position: fixed; top: 0; left: 0; transform: translate(-50%, -50%);\n border-radius: 50%; pointer-events: none; z-index: 10000;\n }\n .cursor-dot { width: 6px; height: 6px; background-color: black; }\n .cursor-outline {\n width: 40px; height: 40px; border: 1px solid rgba(0,0,0,0.2);\n transition: width 0.3s ease, height 0.3s ease, background-color 0.3s ease, opacity 0.3s ease;\n }\n body.hover-text .cursor-outline { width: 60px; height: 60px; background-color: rgba(0,0,0,0.04); border-color: transparent; }\n body.hover-image .cursor-outline { width: 100px; height: 100px; background-color: var(--accent); border-color: transparent; opacity: 0.8; mix-blend-mode: multiply; }\n\n \/* --- 3. LOGO ANIMATIE CSS --- *\/\n .logo-container {\n width: 60px; \n height: 60px;\n margin-bottom: 20px; \/* Ruimte boven de H1 *\/\n }\n\n #studioluw-logo {\n display: block;\n width: 100%;\n height: 100%;\n transform-origin: 50% 50%; \/* Draait om het midden *\/\n transition: transform 1.5s ease-out; \n }\n\n \/* De snelle, onrustige animatie (de 'storm') *\/\n @keyframes stormy {\n 0% { transform: rotate(0deg); }\n 25% { transform: rotate(5deg); }\n 50% { transform: rotate(-8deg); }\n 75% { transform: rotate(2deg); }\n 100% { transform: rotate(-4deg); }\n }\n .storm {\n animation: stormy 0.2s infinite alternate; \n }\n\n \/* --- 4. DE REST VAN DE LAYOUT CSS (Footer, Gallery, etc.) --- *\/\n section { padding: 0 var(--spacing-unit); box-sizing: border-box; }\n .label { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.15em; color: #999; display: block; border-top: 1px solid #eaeaea; padding-top: 25px; margin-bottom: 30px; font-weight: 500; }\n .hero { height: 90vh; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; } \/* Aangepast naar flex-start *\/\n .brand-sub { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.3em; color: #999; margin-bottom: 20px; }\n .brand-statement {\n font-size: 11vw; line-height: 0.9; font-weight: 900; text-transform: uppercase; letter-spacing: -0.04em; margin: 0;\n background: linear-gradient(90deg, #FF4D4D, #4D79FF, #4DFFBF, #F2FF4D, #FF4D4D);\n background-size: 400% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;\n animation: gradientFlow 8s linear infinite;\n }\n @keyframes gradientFlow { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } }\n\n \/* [ ... REST VAN DE CSS ZONDER MODAL STIJL HIER ... ] *\/\n\n .about { padding-top: 10vh; padding-bottom: 10vh; max-width: 1400px; }\n .interactive-text { font-size: clamp(2rem, 4.5vw, 4rem); line-height: 1.25; font-weight: 400; color: var(--text-light); cursor: text; }\n .interactive-text span { transition: color 0.4s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); display: inline-block; }\n .interactive-text span:hover { color: var(--text-dark); transform: translateY(-8px); }\n .services-section { padding-bottom: 15vh; }\n .services-list { list-style: none; padding: 0; margin: 0; }\n .service-item { font-size: 4.5vw; font-weight: 700; letter-spacing: -0.02em; padding: 10px 0; cursor: default; transition: opacity 0.4s ease, filter 0.4s ease; color: #000; }\n .services-list:hover .service-item { opacity: 0.15; filter: blur(5px); }\n .services-list .service-item:hover { opacity: 1; filter: blur(0); }\n .gallery-section { padding: 5vh 0 15vh 0; overflow: hidden; }\n .gallery-container { display: flex; gap: 4vw; padding-left: var(--spacing-unit); padding-right: var(--spacing-unit); overflow-x: auto; padding-bottom: 40px; scrollbar-width: none; }\n .gallery-container::-webkit-scrollbar { display: none; }\n .gallery-item { min-width: 50vw; aspect-ratio: 16\/9; background-color: var(--bg-color); position: relative; overflow: hidden; border-radius: 4px; }\n .gallery-item img { width: 100%; height: 100%; object-fit: contain; transition: transform 1.2s cubic-bezier(0.16, 1, 0.32, 1), filter 0.5s ease; filter: grayscale(100%); }\n .gallery-item:hover img { transform: scale(1.05); filter: grayscale(0%); }\n .project-title {\n position: absolute; bottom: 30px; left: 30px; color: #fff; font-size: 1.8rem; font-weight: 600;\n text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; opacity: 0; transform: translateY(20px); transition: all 0.4s ease;\n }\n .gallery-item:hover .project-title { opacity: 1; transform: translateY(0); }\n .footer { height: 50vh; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 60px; }\n .cta-link { font-size: 9vw; font-weight: 800; text-decoration: none; color: #000; line-height: 1; border-bottom: 6px solid transparent; transition: border-color 0.3s ease; }\n .cta-link:hover { border-bottom-color: #000; }\n .footer-details { font-size: 0.75rem; line-height: 1.5; color: #999; opacity: 0.8; margin-top: 40px; }\n @media (max-width: 768px) {\n .hero-title { font-size: 16vw; } .interactive-text { font-size: 1.8rem; }\n .service-item { font-size: 8vw; } .gallery-item { min-width: 85vw; }\n }\n\n \/* --- MODAL STIJL --- *\/\n .modal-overlay {\n position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(8px);\n z-index: 20000; display: none; opacity: 0; transition: opacity 0.5s ease;\n }\n .modal-overlay.active { display: flex; justify-content: center; align-items: center; opacity: 1; }\n .contact-modal {\n background: var(--bg-color); padding: 50px 80px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);\n max-width: 600px; width: 90%; position: relative; border: 1px solid #eee;\n }\n .contact-modal h2 { font-size: 2.5rem; font-weight: 800; margin-bottom: 10px; letter-spacing: -0.05em; }\n .modal-sub { font-size: 1.1rem; color: #666; margin-bottom: 30px; }\n .close-btn { position: absolute; top: 20px; right: 20px; background: none; border: none; font-size: 2rem; cursor: pointer; color: #333; padding: 10px; line-height: 1; }\n .contact-modal input, .contact-modal textarea { width: 100%; padding: 15px; margin-bottom: 15px; border: 1px solid #ddd; box-sizing: border-box; font-size: 1rem; font-family: var(--font-stack); resize: vertical; transition: border-color 0.3s; }\n .contact-modal input:focus, .contact-modal textarea:focus { border-color: #000; outline: none; }\n .submit-btn { width: 100%; padding: 15px; background: #000; color: #fff; border: none; font-size: 1.2rem; font-weight: 700; cursor: pointer; transition: opacity 0.3s; text-transform: uppercase; margin-top: 10px; }\n .submit-btn:hover { opacity: 0.8; }\n @media (max-width: 768px) { .contact-modal { padding: 30px; } }\n\n \/* --- ADMIN BAR KILLER (LAST RESORT) --- *\/\n #wpadminbar { display: none !important; opacity: 0 !important; visibility: hidden !important; }\n .rank-math-notification-bar { display: none !important; }\n <\/style>\n<\/head>\n<body>\n\n <div class=\"noise-overlay\"><\/div>\n <div class=\"cursor-dot\"><\/div>\n <div class=\"cursor-outline\"><\/div>\n\n <section class=\"hero\">\n <div class=\"logo-container\">\n <svg id=\"studioluw-logo\" viewBox=\"0 0 100 100\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <path \n id=\"wind-line\"\n d=\"M 10 50 H 90\" \n fill=\"none\" \n stroke=\"#111\" \n stroke-width=\"5\" \n stroke-linecap=\"round\"\n \/>\n <\/svg>\n <\/div>\n <div class=\"brand-sub\">Studioluw<\/div>\n <h1 class=\"brand-statement\">We Create<br>Brands.<\/h1>\n <\/section>\n\n <section class=\"about\">\n <span class=\"label\">Manifesto<\/span>\n <p class=\"interactive-text\" id=\"textTarget\">\n In een wereld vol ruis, zoeken wij de stilte op. De luwte. Niet om ons te verstoppen, maar om te focussen. Bij Studioluw, het toonaangevende marketing bureau in het Westland, strippen we merken tot de essentie. Geen opsmuk, geen afleiding. Alleen puur karakter en strategisch design.\n <\/p>\n <\/section>\n\n <section class=\"services-section\">\n <span class=\"label\">Expertise<\/span>\n <ul class=\"services-list\">\n <li class=\"service-item\">Concept Development<\/li>\n <li class=\"service-item\">Brand Storytelling<\/li>\n <li class=\"service-item\">Digital World Building<\/li>\n <li class=\"service-item\">Content & Motion<\/li>\n <li class=\"service-item\">Growth Strategy<\/li>\n <\/ul>\n <\/section>\n\n <section class=\"gallery-section\">\n <div class=\"gallery-container\">\n <div class=\"gallery-item\">\n <img decoding=\"async\" src=\"https:\/\/studioluw.nl\/wp-content\/uploads\/2025\/11\/Scherm\u00adafbeelding-2025-11-27-om-07.52.49.png\" alt=\"Office Interior\">\n <div class=\"project-title\">TheSamuraiTrader.com<\/div>\n <\/div>\n <div class=\"gallery-item\">\n <img decoding=\"async\" src=\"https:\/\/studioluw.nl\/wp-content\/uploads\/2025\/11\/Cameraak-logo-Harry-svg.svg\" alt=\"Minimalist Building\">\n <div class=\"project-title\">Cameraak.nl<\/div>\n <\/div>\n <div class=\"gallery-item\">\n <img decoding=\"async\" src=\"https:\/\/studioluw.nl\/wp-content\/uploads\/2025\/10\/cc7a4c90-f8e2-4c2c-b67a-24e4804a34e2.png\" alt=\"Furniture Design\">\n <div class=\"project-title\">Bodyjob.nl<\/div>\n <\/div> \n <\/div>\n <\/section>\n\n <section class=\"footer\">\n <div>\n <span class=\"label\">Start een project<\/span>\n <a href=\"#\" class=\"cta-link\">Let’s Talk.<\/a> \n <\/div>\n \n <div class=\"footer-details\">\n <p>Studioluw Marketing & World Building<\/p>\n <p>Korenmaat 10<\/p>\n <p>2636JG WESTLAND<\/p>\n <\/div>\n <\/section>\n \n <div class=\"modal-overlay\" id=\"contactModal\">\n <div class=\"contact-modal\">\n <button class=\"close-btn\" id=\"closeModal\">\u00d7<\/button>\n <h2>Laten we iets moois cre\u00ebren.<\/h2>\n <p class=\"modal-sub\">Vul het formulier in. Wij reageren binnen 24 uur.<\/p>\n \n <form action=\"#\" method=\"POST\">\n <input type=\"text\" placeholder=\"Jouw Naam\" required>\n <input type=\"email\" placeholder=\"Jouw E-mailadres\" required>\n <textarea placeholder=\"Omschrijf het project kort...\" required><\/textarea>\n <button type=\"submit\" class=\"submit-btn cta-link hover-trigger\">Verstuur Aanvraag<\/button>\n <\/form>\n <\/div>\n <\/div>\n\n <script>\n \/\/ --- 1. MODAL OPEN\/SLUIT LOGICA (Ongewijzigd) ---\n const letstalkLink = document.querySelector('.cta-link');\n const modalOverlay = document.getElementById('contactModal');\n const closeModalBtn = document.getElementById('closeModal');\n\n \/\/ Functie voor het openen van de modal \n if (letstalkLink && modalOverlay) {\n letstalkLink.addEventListener('click', (e) => {\n e.preventDefault(); \n modalOverlay.classList.add('active');\n document.body.style.overflow = 'hidden';\n });\n }\n\n \/\/ Functie voor het sluiten van de modal\n if (closeModalBtn && modalOverlay) {\n closeModalBtn.addEventListener('click', () => {\n modalOverlay.classList.remove('active');\n document.body.style.overflow = '';\n });\n\n \/\/ Sluiten bij klikken buiten het formulier\n modalOverlay.addEventListener('click', (e) => {\n if (e.target === modalOverlay) {\n modalOverlay.classList.remove('active');\n document.body.style.overflow = '';\n }\n });\n }\n\n\n \/\/ --- 2. CURSOR TRACKING EN HOVER LOGICA (Ongewijzigd) ---\n const cursorDot = document.querySelector('.cursor-dot');\n const cursorOutline = document.querySelector('.cursor-outline');\n \n if (cursorDot && cursorOutline) {\n window.addEventListener('mousemove', (e) => {\n const posX = e.clientX;\n const posY = e.clientY;\n \n cursorDot.style.left = `${posX}px`;\n cursorDot.style.top = `${posY}px`;\n \n cursorOutline.animate({\n left: `${posX}px`,\n top: `${posY}px`\n }, { duration: 500, fill: \"forwards\" });\n });\n }\n\n const textElements = document.querySelectorAll('.interactive-text, .cta-link, .service-item');\n const imageElements = document.querySelectorAll('.gallery-item');\n\n textElements.forEach(el => {\n el.addEventListener('mouseenter', () => document.body.classList.add('hover-text'));\n el.addEventListener('mouseleave', () => document.body.classList.remove('hover-text'));\n });\n\n imageElements.forEach(el => {\n el.addEventListener('mouseenter', () => document.body.classList.add('hover-image'));\n el.addEventListener('mouseleave', () => document.body.classList.remove('hover-image'));\n });\n\n\n \/\/ --- 3. TEXT SPLITTER LOGICA (Ongewijzigd) ---\n const textTarget = document.getElementById('textTarget');\n if(textTarget) {\n const words = textTarget.innerText.split(' ');\n textTarget.innerHTML = '';\n \n words.forEach(word => {\n const span = document.createElement('span');\n span.innerText = word + ' ';\n textTarget.appendChild(span);\n });\n }\n\n \/\/ --- 4. LOGO ANIMATIE LOGICA (NIEUW: Physics) ---\n const logo = document.getElementById('studioluw-logo');\n const path = document.getElementById('wind-line');\n \/\/ De uiteindelijke gekromde vorm\n const finalPath = 'M 10 50 H 80 C 85 50, 90 55, 85 60'; \n\n \/\/ Hulppfuncties voor de overgang\n function applyLuwteCurl() {\n if (path) {\n path.style.transition = 'd 1s ease-out';\n path.setAttribute('d', finalPath);\n }\n }\n\n \/\/ FUNCTIE VOOR DYNAMISCHE STORM BEWEGING (Physics Simulatie)\n function startStormAnimation(startTime) {\n const duration = 3000; \/\/ 3 seconden storm\n const elapsed = Date.now() - startTime;\n \n if (elapsed < duration) {\n \/\/ Genereren van kleine, onvoorspelbare schuddingen\n const rotation = Math.sin(elapsed * 0.05) * 2 + (Math.random() * 5 - 2.5); \/\/ Sinus golf + Random Ruis\n const translateX = Math.random() * 3 - 1.5;\n const translateY = Math.random() * 3 - 1.5;\n \n \/\/ Pas de willekeurige beweging toe\n logo.style.transform = `rotate(${rotation.toFixed(2)}deg) translate(${translateX.toFixed(2)}px, ${translateY.toFixed(2)}px)`;\n \n \/\/ Vraag om de volgende frame (60 keer per seconde)\n requestAnimationFrame(() => startStormAnimation(startTime));\n } else {\n \/\/ Einde van de storm: laat de lijn rustig terugvallen\n logo.style.transform = 'rotate(0deg) translate(0px, 0px)'; \n \n \/\/ Wacht tot de rotatie is uitgedempt en pas dan de krul toe\n setTimeout(applyLuwteCurl, 1500); \n return;\n }\n }\n\n \/\/ START EXECUTIE\n if (logo && path) {\n \/\/ De animatie start zodra de DOM geladen is\n startStormAnimation(Date.now());\n }\n\n\n \/\/ --- 5. JAVASCRIPT GARANTIE: FORCEER VERWIJDERING ADMIN BAR (Ongewijzigd) ---\n window.addEventListener('load', function() {\n const adminBar = document.getElementById('wpadminbar');\n if (adminBar) {\n adminBar.remove(); \n }\n document.documentElement.style.cssText = 'margin-top: 0 !important;'; \n });\n<\/script>\n \n \/\/ — 2. CURSOR TRACKING EN HOVER LOGICA —\n const cursorDot = document.querySelector(‘.cursor-dot’);\n const cursorOutline = document.querySelector(‘.cursor-outline’);\n \n if (cursorDot && cursorOutline) {\n window.addEventListener(‘mousemove’, (e) => {\n const posX = e.clientX;\n const posY = e.clientY;\n cursorDot.style.left = `${posX}px`;\n cursorDot.style.top = `${posY}px`;\n cursorOutline.animate({\n left: `${posX}px`,\n top: `${posY}px`\n }, { duration: 500, fill: “forwards” });\n });\n }\n\n const textElements = document.querySelectorAll(‘.interactive-text, .cta-link, .service-item’);\n const imageElements = document.querySelectorAll(‘.gallery-item’);\n\n textElements.forEach(el => {\n el.addEventListener(‘mouseenter’, () => document.body.classList.add(‘hover-text’));\n el.addEventListener(‘mouseleave’, () => document.body.classList.remove(‘hover-text’));\n });\n\n imageElements.forEach(el => {\n el.addEventListener(‘mouseenter’, () => document.body.classList.add(‘hover-image’));\n el.addEventListener(‘mouseleave’, () => document.body.classList.remove(‘hover-image’));\n });\n\n\n \/\/ — 3. TEXT SPLITTER LOGICA —\n const textTarget = document.getElementById(’textTarget’);\n if(textTarget) {\n const words = textTarget.innerText.split(‘ ‘);\n textTarget.innerHTML = ”;\n \n words.forEach(word => {\n const span = document.createElement(‘span’);\n span.innerText = word + ‘ ‘;\n textTarget.appendChild(span);\n });\n }\n \n \/\/ — 4. LOGO ANIMATIE LOGICA (EXTREME PHYSICS UPGRADE) —\n const logo = document.getElementById(‘studioluw-logo’);\n const path = document.getElementById(‘wind-line’);\n const finalPath = ‘M 10 50 H 80 C 85 50, 90 55, 85 60’; \n\n function applyLuwteCurl() {\n if (path) {\n path.style.transition = ‘d 1s ease-out’;\n path.setAttribute(‘d’, finalPath);\n }\n }\n\n \/\/ FUNCTIE VOOR DYNAMISCHE STORM BEWEGING (NUCLEAIR)\n function startStormAnimation(startTime) {\n const duration = 3000; \/\/ 3 seconden storm\n const elapsed = Date.now() – startTime;\n \n if (elapsed < duration) {\n \/\/ NIEUW: Veel agressievere waarden voor rotatie en positie\n const rotation = Math.sin(elapsed * 0.05) * 10 + (Math.random() * 60 - 30); \/\/ Tot +\/- 30 graden\n const translateX = Math.random() * 30 - 15; \/\/ Tot +\/- 15px\n const translateY = Math.random() * 30 - 15; \/\/ Tot +\/- 15px\n \n \/\/ Pas de willekeurige, heftige beweging toe\n logo.style.transform = `rotate(${rotation.toFixed(2)}deg) translate(${translateX.toFixed(2)}px, ${translateY.toFixed(2)}px)`;\n \n requestAnimationFrame(() => startStormAnimation(startTime));\n } else {\n \/\/ Einde van de storm: laat de lijn rustig terugvallen\n logo.style.transform = ‘rotate(0deg) translate(0px, 0px)’; \n \n \/\/ Wacht tot de rotatie is uitgedempt en pas dan de krul toe\n setTimeout(applyLuwteCurl, 1500); \n return;\n }\n }\n\n \/\/ START EXECUTIE\n if (logo && path) {\n startStormAnimation(Date.now());\n }\n \/\/ [ … de rest van het script… ]\n\n \/\/ START EXECUTIE\n if (logo && path) {\n startStormAnimation(Date.now());\n }\n \/\/ [ … de rest van het script … ]\n \n \/\/ — 5. JAVASCRIPT GARANTIE: FORCEER VERWIJDERING ADMIN BAR —\n window.addEventListener(‘load’, function() {\n const adminBar = document.getElementById(‘wpadminbar’);\n if (adminBar) {\n adminBar.remove(); \n }\n document.documentElement.style.cssText = ‘margin-top: 0 !important;’; \n });\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Studioluw | H\u00e9t Marketing Bureau voor het Westland Studioluw We CreateBrands. Manifesto In een wereld vol ruis, zoeken wij de stilte op. De luwte. Niet om ons te verstoppen, maar om te focussen. Bij Studioluw, het toonaangevende marketing bureau in het Westland, strippen we merken tot de essentie. Geen opsmuk, geen afleiding. Alleen puur karakter […]<\/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-49","page","type-page","status-publish","hentry"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/jettdax.com\/index.php\/wp-json\/wp\/v2\/pages\/49","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jettdax.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/jettdax.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/jettdax.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jettdax.com\/index.php\/wp-json\/wp\/v2\/comments?post=49"}],"version-history":[{"count":8,"href":"https:\/\/jettdax.com\/index.php\/wp-json\/wp\/v2\/pages\/49\/revisions"}],"predecessor-version":[{"id":65,"href":"https:\/\/jettdax.com\/index.php\/wp-json\/wp\/v2\/pages\/49\/revisions\/65"}],"wp:attachment":[{"href":"https:\/\/jettdax.com\/index.php\/wp-json\/wp\/v2\/media?parent=49"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":49,"date":"2025-12-01T16:27:32","date_gmt":"2025-12-01T16:27:32","guid":{"rendered":"https:\/\/jettdax.com\/?page_id=49"},"modified":"2025-12-01T16:48:47","modified_gmt":"2025-12-01T16:48:47","slug":"101-2","status":"publish","type":"page","link":"https:\/\/jettdax.com\/index.php\/101-2\/","title":{"rendered":"101"},"content":{"rendered":"\n\n\n\n\n \n \n Studioluw | H\u00e9t Marketing Bureau voor het Westland<\/title>\n\n <script type=\"application\/ld+json\">\n {\n \"@context\": \"https:\/\/schema.org\",\n \"@type\": \"LocalBusiness\",\n \"name\": \"Studioluw | Marketing & World Building\",\n \"image\": \"https:\/\/studioluw.nl\/wp-content\/uploads\/2025\/12\/bitmap.png\",\n \"url\": \"https:\/\/studioluw.nl\/\",\n \"telephone\": \"0616472723\",\n \"address\": {\n \"@type\": \"PostalAddress\",\n \"streetAddress\": \"Korenmaat 10\",\n \"addressLocality\": \"Westland\",\n \"addressRegion\": \"Zuid-Holland\",\n \"postalCode\": \"2636JG\",\n \"addressCountry\": \"NL\"\n },\n \"openingHoursSpecification\": {\n \"@type\": \"OpeningHoursSpecification\",\n \"dayOfWeek\": [\n \"Monday\",\n \"Tuesday\",\n \"Wednesday\",\n \"Thursday\",\n \"Friday\"\n ],\n \"opens\": \"09:00\",\n \"closes\": \"17:00\"\n },\n \"priceRange\": \"$$$\"\n }\n <\/script>\n <style>\n \/* --- 1. ALGEMENE INSTELLINGEN & VARIABELEN --- *\/\n :root {\n --bg-color: #fcfcfc;\n --text-light: #d1d1d1;\n --text-dark: #111111;\n --accent: #FF4D4D;\n --spacing-unit: 8vw;\n --font-stack: 'Helvetica Neue', Helvetica, Arial, sans-serif;\n }\n\n html, body {\n margin: 0; padding: 0; background-color: var(--bg-color); color: var(--text-dark);\n font-family: var(--font-stack); overflow-x: hidden; cursor: none;\n }\n\n \/* --- FINALE MARGE FIX TEGEN DE ADMIN BAR GHOSTS --- *\/\n html { margin-top: 0 !important; }\n body { margin-top: 0 !important; padding-top: 0 !important; }\n\n \/* --- 2. NOISE TEXTUUR & CURSOR --- *\/\n .noise-overlay {\n position: fixed; top: 0; left: 0; width: 100%; height: 100%;\n pointer-events: none; z-index: 9999; opacity: 0.04;\n background: url('data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyBAMAAADsEZWCAAAAGFBMVEUAAAA5OTkAAABMTExERERmZmYzMzMyMjJ43I3xAAAACHRSTlMAMwAzuWNm7pm4UQ4AAABcSURBVDjLY2AYBaNgKLgJQhCVJAhCVJIgCFVJgiBUJQmCUJUkCEJVkiAIVUmCIFQlCYJQlSQIQlWSIAhVSYIgVCUJglCVJAhCVZIgCFVJgiBUJQmCUJUkCkJVEgYAATs2Tv\/42TwAAAAASUVORK5CYII=');\n }\n .cursor-dot, .cursor-outline {\n position: fixed; top: 0; left: 0; transform: translate(-50%, -50%);\n border-radius: 50%; pointer-events: none; z-index: 10000;\n }\n .cursor-dot { width: 6px; height: 6px; background-color: black; }\n .cursor-outline {\n width: 40px; height: 40px; border: 1px solid rgba(0,0,0,0.2);\n transition: width 0.3s ease, height 0.3s ease, background-color 0.3s ease, opacity 0.3s ease;\n }\n body.hover-text .cursor-outline { width: 60px; height: 60px; background-color: rgba(0,0,0,0.04); border-color: transparent; }\n body.hover-image .cursor-outline { width: 100px; height: 100px; background-color: var(--accent); border-color: transparent; opacity: 0.8; mix-blend-mode: multiply; }\n\n \/* --- 3. LOGO ANIMATIE CSS --- *\/\n .logo-container {\n width: 60px; \n height: 60px;\n margin-bottom: 20px; \/* Ruimte boven de H1 *\/\n }\n\n #studioluw-logo {\n display: block;\n width: 100%;\n height: 100%;\n transform-origin: 50% 50%; \/* Draait om het midden *\/\n transition: transform 1.5s ease-out; \n }\n\n \/* De snelle, onrustige animatie (de 'storm') *\/\n @keyframes stormy {\n 0% { transform: rotate(0deg); }\n 25% { transform: rotate(5deg); }\n 50% { transform: rotate(-8deg); }\n 75% { transform: rotate(2deg); }\n 100% { transform: rotate(-4deg); }\n }\n .storm {\n animation: stormy 0.2s infinite alternate; \n }\n\n \/* --- 4. DE REST VAN DE LAYOUT CSS (Footer, Gallery, etc.) --- *\/\n section { padding: 0 var(--spacing-unit); box-sizing: border-box; }\n .label { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.15em; color: #999; display: block; border-top: 1px solid #eaeaea; padding-top: 25px; margin-bottom: 30px; font-weight: 500; }\n .hero { height: 90vh; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; } \/* Aangepast naar flex-start *\/\n .brand-sub { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.3em; color: #999; margin-bottom: 20px; }\n .brand-statement {\n font-size: 11vw; line-height: 0.9; font-weight: 900; text-transform: uppercase; letter-spacing: -0.04em; margin: 0;\n background: linear-gradient(90deg, #FF4D4D, #4D79FF, #4DFFBF, #F2FF4D, #FF4D4D);\n background-size: 400% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;\n animation: gradientFlow 8s linear infinite;\n }\n @keyframes gradientFlow { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } }\n\n \/* [ ... REST VAN DE CSS ZONDER MODAL STIJL HIER ... ] *\/\n\n .about { padding-top: 10vh; padding-bottom: 10vh; max-width: 1400px; }\n .interactive-text { font-size: clamp(2rem, 4.5vw, 4rem); line-height: 1.25; font-weight: 400; color: var(--text-light); cursor: text; }\n .interactive-text span { transition: color 0.4s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); display: inline-block; }\n .interactive-text span:hover { color: var(--text-dark); transform: translateY(-8px); }\n .services-section { padding-bottom: 15vh; }\n .services-list { list-style: none; padding: 0; margin: 0; }\n .service-item { font-size: 4.5vw; font-weight: 700; letter-spacing: -0.02em; padding: 10px 0; cursor: default; transition: opacity 0.4s ease, filter 0.4s ease; color: #000; }\n .services-list:hover .service-item { opacity: 0.15; filter: blur(5px); }\n .services-list .service-item:hover { opacity: 1; filter: blur(0); }\n .gallery-section { padding: 5vh 0 15vh 0; overflow: hidden; }\n .gallery-container { display: flex; gap: 4vw; padding-left: var(--spacing-unit); padding-right: var(--spacing-unit); overflow-x: auto; padding-bottom: 40px; scrollbar-width: none; }\n .gallery-container::-webkit-scrollbar { display: none; }\n .gallery-item { min-width: 50vw; aspect-ratio: 16\/9; background-color: var(--bg-color); position: relative; overflow: hidden; border-radius: 4px; }\n .gallery-item img { width: 100%; height: 100%; object-fit: contain; transition: transform 1.2s cubic-bezier(0.16, 1, 0.32, 1), filter 0.5s ease; filter: grayscale(100%); }\n .gallery-item:hover img { transform: scale(1.05); filter: grayscale(0%); }\n .project-title {\n position: absolute; bottom: 30px; left: 30px; color: #fff; font-size: 1.8rem; font-weight: 600;\n text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; opacity: 0; transform: translateY(20px); transition: all 0.4s ease;\n }\n .gallery-item:hover .project-title { opacity: 1; transform: translateY(0); }\n .footer { height: 50vh; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 60px; }\n .cta-link { font-size: 9vw; font-weight: 800; text-decoration: none; color: #000; line-height: 1; border-bottom: 6px solid transparent; transition: border-color 0.3s ease; }\n .cta-link:hover { border-bottom-color: #000; }\n .footer-details { font-size: 0.75rem; line-height: 1.5; color: #999; opacity: 0.8; margin-top: 40px; }\n @media (max-width: 768px) {\n .hero-title { font-size: 16vw; } .interactive-text { font-size: 1.8rem; }\n .service-item { font-size: 8vw; } .gallery-item { min-width: 85vw; }\n }\n\n \/* --- MODAL STIJL --- *\/\n .modal-overlay {\n position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(8px);\n z-index: 20000; display: none; opacity: 0; transition: opacity 0.5s ease;\n }\n .modal-overlay.active { display: flex; justify-content: center; align-items: center; opacity: 1; }\n .contact-modal {\n background: var(--bg-color); padding: 50px 80px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);\n max-width: 600px; width: 90%; position: relative; border: 1px solid #eee;\n }\n .contact-modal h2 { font-size: 2.5rem; font-weight: 800; margin-bottom: 10px; letter-spacing: -0.05em; }\n .modal-sub { font-size: 1.1rem; color: #666; margin-bottom: 30px; }\n .close-btn { position: absolute; top: 20px; right: 20px; background: none; border: none; font-size: 2rem; cursor: pointer; color: #333; padding: 10px; line-height: 1; }\n .contact-modal input, .contact-modal textarea { width: 100%; padding: 15px; margin-bottom: 15px; border: 1px solid #ddd; box-sizing: border-box; font-size: 1rem; font-family: var(--font-stack); resize: vertical; transition: border-color 0.3s; }\n .contact-modal input:focus, .contact-modal textarea:focus { border-color: #000; outline: none; }\n .submit-btn { width: 100%; padding: 15px; background: #000; color: #fff; border: none; font-size: 1.2rem; font-weight: 700; cursor: pointer; transition: opacity 0.3s; text-transform: uppercase; margin-top: 10px; }\n .submit-btn:hover { opacity: 0.8; }\n @media (max-width: 768px) { .contact-modal { padding: 30px; } }\n\n \/* --- ADMIN BAR KILLER (LAST RESORT) --- *\/\n #wpadminbar { display: none !important; opacity: 0 !important; visibility: hidden !important; }\n .rank-math-notification-bar { display: none !important; }\n <\/style>\n<\/head>\n<body>\n\n <div class=\"noise-overlay\"><\/div>\n <div class=\"cursor-dot\"><\/div>\n <div class=\"cursor-outline\"><\/div>\n\n <section class=\"hero\">\n <div class=\"logo-container\">\n <svg id=\"studioluw-logo\" viewBox=\"0 0 100 100\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <path \n id=\"wind-line\"\n d=\"M 10 50 H 90\" \n fill=\"none\" \n stroke=\"#111\" \n stroke-width=\"5\" \n stroke-linecap=\"round\"\n \/>\n <\/svg>\n <\/div>\n <div class=\"brand-sub\">Studioluw<\/div>\n <h1 class=\"brand-statement\">We Create<br>Brands.<\/h1>\n <\/section>\n\n <section class=\"about\">\n <span class=\"label\">Manifesto<\/span>\n <p class=\"interactive-text\" id=\"textTarget\">\n In een wereld vol ruis, zoeken wij de stilte op. De luwte. Niet om ons te verstoppen, maar om te focussen. Bij Studioluw, het toonaangevende marketing bureau in het Westland, strippen we merken tot de essentie. Geen opsmuk, geen afleiding. Alleen puur karakter en strategisch design.\n <\/p>\n <\/section>\n\n <section class=\"services-section\">\n <span class=\"label\">Expertise<\/span>\n <ul class=\"services-list\">\n <li class=\"service-item\">Concept Development<\/li>\n <li class=\"service-item\">Brand Storytelling<\/li>\n <li class=\"service-item\">Digital World Building<\/li>\n <li class=\"service-item\">Content & Motion<\/li>\n <li class=\"service-item\">Growth Strategy<\/li>\n <\/ul>\n <\/section>\n\n <section class=\"gallery-section\">\n <div class=\"gallery-container\">\n <div class=\"gallery-item\">\n <img decoding=\"async\" src=\"https:\/\/studioluw.nl\/wp-content\/uploads\/2025\/11\/Scherm\u00adafbeelding-2025-11-27-om-07.52.49.png\" alt=\"Office Interior\">\n <div class=\"project-title\">TheSamuraiTrader.com<\/div>\n <\/div>\n <div class=\"gallery-item\">\n <img decoding=\"async\" src=\"https:\/\/studioluw.nl\/wp-content\/uploads\/2025\/11\/Cameraak-logo-Harry-svg.svg\" alt=\"Minimalist Building\">\n <div class=\"project-title\">Cameraak.nl<\/div>\n <\/div>\n <div class=\"gallery-item\">\n <img decoding=\"async\" src=\"https:\/\/studioluw.nl\/wp-content\/uploads\/2025\/10\/cc7a4c90-f8e2-4c2c-b67a-24e4804a34e2.png\" alt=\"Furniture Design\">\n <div class=\"project-title\">Bodyjob.nl<\/div>\n <\/div> \n <\/div>\n <\/section>\n\n <section class=\"footer\">\n <div>\n <span class=\"label\">Start een project<\/span>\n <a href=\"#\" class=\"cta-link\">Let’s Talk.<\/a> \n <\/div>\n \n <div class=\"footer-details\">\n <p>Studioluw Marketing & World Building<\/p>\n <p>Korenmaat 10<\/p>\n <p>2636JG WESTLAND<\/p>\n <\/div>\n <\/section>\n \n <div class=\"modal-overlay\" id=\"contactModal\">\n <div class=\"contact-modal\">\n <button class=\"close-btn\" id=\"closeModal\">\u00d7<\/button>\n <h2>Laten we iets moois cre\u00ebren.<\/h2>\n <p class=\"modal-sub\">Vul het formulier in. Wij reageren binnen 24 uur.<\/p>\n \n <form action=\"#\" method=\"POST\">\n <input type=\"text\" placeholder=\"Jouw Naam\" required>\n <input type=\"email\" placeholder=\"Jouw E-mailadres\" required>\n <textarea placeholder=\"Omschrijf het project kort...\" required><\/textarea>\n <button type=\"submit\" class=\"submit-btn cta-link hover-trigger\">Verstuur Aanvraag<\/button>\n <\/form>\n <\/div>\n <\/div>\n\n <script>\n \/\/ --- 1. MODAL OPEN\/SLUIT LOGICA (Ongewijzigd) ---\n const letstalkLink = document.querySelector('.cta-link');\n const modalOverlay = document.getElementById('contactModal');\n const closeModalBtn = document.getElementById('closeModal');\n\n \/\/ Functie voor het openen van de modal \n if (letstalkLink && modalOverlay) {\n letstalkLink.addEventListener('click', (e) => {\n e.preventDefault(); \n modalOverlay.classList.add('active');\n document.body.style.overflow = 'hidden';\n });\n }\n\n \/\/ Functie voor het sluiten van de modal\n if (closeModalBtn && modalOverlay) {\n closeModalBtn.addEventListener('click', () => {\n modalOverlay.classList.remove('active');\n document.body.style.overflow = '';\n });\n\n \/\/ Sluiten bij klikken buiten het formulier\n modalOverlay.addEventListener('click', (e) => {\n if (e.target === modalOverlay) {\n modalOverlay.classList.remove('active');\n document.body.style.overflow = '';\n }\n });\n }\n\n\n \/\/ --- 2. CURSOR TRACKING EN HOVER LOGICA (Ongewijzigd) ---\n const cursorDot = document.querySelector('.cursor-dot');\n const cursorOutline = document.querySelector('.cursor-outline');\n \n if (cursorDot && cursorOutline) {\n window.addEventListener('mousemove', (e) => {\n const posX = e.clientX;\n const posY = e.clientY;\n \n cursorDot.style.left = `${posX}px`;\n cursorDot.style.top = `${posY}px`;\n \n cursorOutline.animate({\n left: `${posX}px`,\n top: `${posY}px`\n }, { duration: 500, fill: \"forwards\" });\n });\n }\n\n const textElements = document.querySelectorAll('.interactive-text, .cta-link, .service-item');\n const imageElements = document.querySelectorAll('.gallery-item');\n\n textElements.forEach(el => {\n el.addEventListener('mouseenter', () => document.body.classList.add('hover-text'));\n el.addEventListener('mouseleave', () => document.body.classList.remove('hover-text'));\n });\n\n imageElements.forEach(el => {\n el.addEventListener('mouseenter', () => document.body.classList.add('hover-image'));\n el.addEventListener('mouseleave', () => document.body.classList.remove('hover-image'));\n });\n\n\n \/\/ --- 3. TEXT SPLITTER LOGICA (Ongewijzigd) ---\n const textTarget = document.getElementById('textTarget');\n if(textTarget) {\n const words = textTarget.innerText.split(' ');\n textTarget.innerHTML = '';\n \n words.forEach(word => {\n const span = document.createElement('span');\n span.innerText = word + ' ';\n textTarget.appendChild(span);\n });\n }\n\n \/\/ --- 4. LOGO ANIMATIE LOGICA (NIEUW: Physics) ---\n const logo = document.getElementById('studioluw-logo');\n const path = document.getElementById('wind-line');\n \/\/ De uiteindelijke gekromde vorm\n const finalPath = 'M 10 50 H 80 C 85 50, 90 55, 85 60'; \n\n \/\/ Hulppfuncties voor de overgang\n function applyLuwteCurl() {\n if (path) {\n path.style.transition = 'd 1s ease-out';\n path.setAttribute('d', finalPath);\n }\n }\n\n \/\/ FUNCTIE VOOR DYNAMISCHE STORM BEWEGING (Physics Simulatie)\n function startStormAnimation(startTime) {\n const duration = 3000; \/\/ 3 seconden storm\n const elapsed = Date.now() - startTime;\n \n if (elapsed < duration) {\n \/\/ Genereren van kleine, onvoorspelbare schuddingen\n const rotation = Math.sin(elapsed * 0.05) * 2 + (Math.random() * 5 - 2.5); \/\/ Sinus golf + Random Ruis\n const translateX = Math.random() * 3 - 1.5;\n const translateY = Math.random() * 3 - 1.5;\n \n \/\/ Pas de willekeurige beweging toe\n logo.style.transform = `rotate(${rotation.toFixed(2)}deg) translate(${translateX.toFixed(2)}px, ${translateY.toFixed(2)}px)`;\n \n \/\/ Vraag om de volgende frame (60 keer per seconde)\n requestAnimationFrame(() => startStormAnimation(startTime));\n } else {\n \/\/ Einde van de storm: laat de lijn rustig terugvallen\n logo.style.transform = 'rotate(0deg) translate(0px, 0px)'; \n \n \/\/ Wacht tot de rotatie is uitgedempt en pas dan de krul toe\n setTimeout(applyLuwteCurl, 1500); \n return;\n }\n }\n\n \/\/ START EXECUTIE\n if (logo && path) {\n \/\/ De animatie start zodra de DOM geladen is\n startStormAnimation(Date.now());\n }\n\n\n \/\/ --- 5. JAVASCRIPT GARANTIE: FORCEER VERWIJDERING ADMIN BAR (Ongewijzigd) ---\n window.addEventListener('load', function() {\n const adminBar = document.getElementById('wpadminbar');\n if (adminBar) {\n adminBar.remove(); \n }\n document.documentElement.style.cssText = 'margin-top: 0 !important;'; \n });\n<\/script>\n \n \/\/ — 2. CURSOR TRACKING EN HOVER LOGICA —\n const cursorDot = document.querySelector(‘.cursor-dot’);\n const cursorOutline = document.querySelector(‘.cursor-outline’);\n \n if (cursorDot && cursorOutline) {\n window.addEventListener(‘mousemove’, (e) => {\n const posX = e.clientX;\n const posY = e.clientY;\n cursorDot.style.left = `${posX}px`;\n cursorDot.style.top = `${posY}px`;\n cursorOutline.animate({\n left: `${posX}px`,\n top: `${posY}px`\n }, { duration: 500, fill: “forwards” });\n });\n }\n\n const textElements = document.querySelectorAll(‘.interactive-text, .cta-link, .service-item’);\n const imageElements = document.querySelectorAll(‘.gallery-item’);\n\n textElements.forEach(el => {\n el.addEventListener(‘mouseenter’, () => document.body.classList.add(‘hover-text’));\n el.addEventListener(‘mouseleave’, () => document.body.classList.remove(‘hover-text’));\n });\n\n imageElements.forEach(el => {\n el.addEventListener(‘mouseenter’, () => document.body.classList.add(‘hover-image’));\n el.addEventListener(‘mouseleave’, () => document.body.classList.remove(‘hover-image’));\n });\n\n\n \/\/ — 3. TEXT SPLITTER LOGICA —\n const textTarget = document.getElementById(’textTarget’);\n if(textTarget) {\n const words = textTarget.innerText.split(‘ ‘);\n textTarget.innerHTML = ”;\n \n words.forEach(word => {\n const span = document.createElement(‘span’);\n span.innerText = word + ‘ ‘;\n textTarget.appendChild(span);\n });\n }\n \n \/\/ — 4. LOGO ANIMATIE LOGICA (EXTREME PHYSICS UPGRADE) —\n const logo = document.getElementById(‘studioluw-logo’);\n const path = document.getElementById(‘wind-line’);\n const finalPath = ‘M 10 50 H 80 C 85 50, 90 55, 85 60’; \n\n function applyLuwteCurl() {\n if (path) {\n path.style.transition = ‘d 1s ease-out’;\n path.setAttribute(‘d’, finalPath);\n }\n }\n\n \/\/ FUNCTIE VOOR DYNAMISCHE STORM BEWEGING (NUCLEAIR)\n function startStormAnimation(startTime) {\n const duration = 3000; \/\/ 3 seconden storm\n const elapsed = Date.now() – startTime;\n \n if (elapsed < duration) {\n \/\/ NIEUW: Veel agressievere waarden voor rotatie en positie\n const rotation = Math.sin(elapsed * 0.05) * 10 + (Math.random() * 60 - 30); \/\/ Tot +\/- 30 graden\n const translateX = Math.random() * 30 - 15; \/\/ Tot +\/- 15px\n const translateY = Math.random() * 30 - 15; \/\/ Tot +\/- 15px\n \n \/\/ Pas de willekeurige, heftige beweging toe\n logo.style.transform = `rotate(${rotation.toFixed(2)}deg) translate(${translateX.toFixed(2)}px, ${translateY.toFixed(2)}px)`;\n \n requestAnimationFrame(() => startStormAnimation(startTime));\n } else {\n \/\/ Einde van de storm: laat de lijn rustig terugvallen\n logo.style.transform = ‘rotate(0deg) translate(0px, 0px)’; \n \n \/\/ Wacht tot de rotatie is uitgedempt en pas dan de krul toe\n setTimeout(applyLuwteCurl, 1500); \n return;\n }\n }\n\n \/\/ START EXECUTIE\n if (logo && path) {\n startStormAnimation(Date.now());\n }\n \/\/ [ … de rest van het script… ]\n\n \/\/ START EXECUTIE\n if (logo && path) {\n startStormAnimation(Date.now());\n }\n \/\/ [ … de rest van het script … ]\n \n \/\/ — 5. JAVASCRIPT GARANTIE: FORCEER VERWIJDERING ADMIN BAR —\n window.addEventListener(‘load’, function() {\n const adminBar = document.getElementById(‘wpadminbar’);\n if (adminBar) {\n adminBar.remove(); \n }\n document.documentElement.style.cssText = ‘margin-top: 0 !important;’; \n });\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Studioluw | H\u00e9t Marketing Bureau voor het Westland Studioluw We CreateBrands. Manifesto In een wereld vol ruis, zoeken wij de stilte op. De luwte. Niet om ons te verstoppen, maar om te focussen. Bij Studioluw, het toonaangevende marketing bureau in het Westland, strippen we merken tot de essentie. Geen opsmuk, geen afleiding. Alleen puur karakter […]<\/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-49","page","type-page","status-publish","hentry"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/jettdax.com\/index.php\/wp-json\/wp\/v2\/pages\/49","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jettdax.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/jettdax.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/jettdax.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jettdax.com\/index.php\/wp-json\/wp\/v2\/comments?post=49"}],"version-history":[{"count":8,"href":"https:\/\/jettdax.com\/index.php\/wp-json\/wp\/v2\/pages\/49\/revisions"}],"predecessor-version":[{"id":65,"href":"https:\/\/jettdax.com\/index.php\/wp-json\/wp\/v2\/pages\/49\/revisions\/65"}],"wp:attachment":[{"href":"https:\/\/jettdax.com\/index.php\/wp-json\/wp\/v2\/media?parent=49"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}