{"id":27,"date":"2026-07-13T11:41:33","date_gmt":"2026-07-13T11:41:33","guid":{"rendered":"https:\/\/threadevoke.com\/?page_id=27"},"modified":"2026-07-13T12:10:34","modified_gmt":"2026-07-13T12:10:34","slug":"coming-soon","status":"publish","type":"page","link":"https:\/\/threadevoke.com\/","title":{"rendered":"Coming Soon"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n \t\t
\n\t\t\t\t\t\n\n\n\n\nThread Evoke \u2014 Something Heavyweight Is Coming<\/title>\n<meta name=\"description\" content=\"Thread Evoke \u2014 India's boldest streetwear. New drop dropping soon. Get notified the second we go live.\" \/>\n\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=Big+Shoulders+Display:wght@700;800;900&family=Space+Mono:wght@400;700&family=Manrope:wght@400;500;700;800&display=swap\" rel=\"stylesheet\">\n\n<style>\n :root{\n --ink:#131110;\n --canvas:#1c1916;\n --bone:#f4efe3;\n --bone-dim:#d9d2c2;\n --thread:#e8432b;\n --brass:#c9a227;\n --line: rgba(244,239,227,0.16);\n --line-on-bone: rgba(19,17,16,0.16);\n --shadow: 0 30px 70px rgba(0,0,0,0.55);\n }\n\n *{ box-sizing:border-box; }\n html,body{ height:100%; }\n body{\n margin:0;\n min-height:100vh;\n position:relative;\n background:\n radial-gradient(ellipse at 50% -10%, rgba(232,67,43,0.14), transparent 55%),\n radial-gradient(ellipse at 90% 110%, rgba(201,162,39,0.10), transparent 50%),\n repeating-linear-gradient(45deg, rgba(255,255,255,0.025) 0 2px, transparent 2px 5px),\n var(--ink);\n color:var(--bone);\n font-family:'Manrope', sans-serif;\n display:flex;\n flex-direction:column;\n align-items:center;\n justify-content:center;\n padding: clamp(20px, 5vw, 56px) 16px;\n overflow-x:hidden;\n transition: background .4s ease;\n }\n\n .sr-only{\n position:absolute; width:1px; height:1px; padding:0; margin:-1px;\n overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;\n }\n\n \/* ---------- Ambient background labels ---------- *\/\n .ambient{ position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; }\n .floaty{\n position:absolute; font-family:'Space Mono', monospace; font-size:11px;\n letter-spacing:0.16em; text-transform:uppercase; color:var(--bone);\n opacity:0.07; white-space:nowrap;\n }\n .floaty.f1{ top:8%; left:6%; --r:-8deg; }\n .floaty.f2{ top:14%; right:5%; --r:6deg; }\n .floaty.f3{ bottom:12%; left:5%; --r:5deg; }\n .floaty.f4{ bottom:8%; right:6%; --r:-6deg; }\n .floaty.f5{ top:46%; left:2%; transform:rotate(-90deg); transform-origin:left center; }\n .floaty:not(.f5){ transform: rotate(var(--r)); }\n\n @media (prefers-reduced-motion: no-preference){\n .floaty.f1{ animation: drift 9s ease-in-out infinite; }\n .floaty.f2{ animation: drift 11s ease-in-out infinite 1s; }\n .floaty.f3{ animation: drift 10s ease-in-out infinite .5s; }\n .floaty.f4{ animation: drift 8.5s ease-in-out infinite 1.4s; }\n }\n @keyframes drift{\n 0%,100%{ transform: translateY(0) rotate(var(--r,0deg)); }\n 50%{ transform: translateY(-12px) rotate(var(--r,0deg)); }\n }\n\n \/* ---------- Hang tag scene ---------- *\/\n .tag-wrap{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; width:100%; }\n\n .hang{\n position:relative; width:100%; max-width:440px;\n transform-origin: top center;\n animation: swing 7s ease-in-out infinite;\n }\n @media (prefers-reduced-motion: reduce){ .hang{ animation:none; } }\n @keyframes swing{ 0%,100%{ transform: rotate(-0.6deg); } 50%{ transform: rotate(0.6deg); } }\n\n .tag-string{\n position:absolute; top:-34px; left:50%; transform:translateX(-50%);\n width:2px; height:36px;\n background: repeating-linear-gradient(to bottom, var(--bone-dim) 0 6px, transparent 6px 10px);\n opacity:0.8;\n }\n .grommet{\n position:absolute; top:14px; left:50%; transform:translateX(-50%);\n width:16px; height:16px; border-radius:50%;\n background: var(--ink);\n box-shadow: inset 0 0 0 3px var(--bone), 0 0 0 1.5px var(--brass);\n z-index:2;\n }\n\n \/* ---------- Flip mechanics (with mouse-tilt on the scene) ---------- *\/\n .flip-scene{\n position:relative; width:100%;\n perspective: 1600px;\n transition: transform .25s ease-out;\n }\n .flip-card{\n position:relative; width:100%; height:100%;\n transition: transform .7s cubic-bezier(.2,.8,.2,1);\n transform-style: preserve-3d;\n }\n .flip-card.flipped{ transform: rotateY(180deg); }\n\n .flip-face{\n position:absolute; inset:0; width:100%; height:100%;\n background: var(--bone); color: var(--ink);\n border-radius:18px; box-shadow: var(--shadow);\n backface-visibility: hidden; -webkit-backface-visibility: hidden;\n padding: clamp(32px, 6vw, 48px) clamp(24px, 6vw, 40px) clamp(28px, 5vw, 34px);\n display:flex; flex-direction:column;\n }\n .flip-back{ transform: rotateY(180deg); }\n\n \/* ---------- Load-in reveal ---------- *\/\n .reveal{ opacity:0; transform:translateY(14px); animation: riseIn .6s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: calc(var(--d,0) * 90ms + 150ms); }\n @keyframes riseIn{ to{ opacity:1; transform:translateY(0); } }\n @media (prefers-reduced-motion: reduce){ .reveal{ animation:none; opacity:1; transform:none; } }\n\n .tag-head{ text-align:center; padding-top:14px; }\n .logo{ max-width:128px; width:100%; height:auto; display:block; margin:0 auto 14px; }\n\n .eyebrow{\n margin:0; font-family:'Space Mono', monospace; font-size:11px;\n letter-spacing:0.18em; text-transform:uppercase; color:var(--thread);\n font-weight:700; text-align:center;\n }\n\n .headline{\n margin: 16px 0 0; text-align:center; font-family:'Big Shoulders Display', sans-serif;\n font-weight:900; text-transform:uppercase; line-height:0.92; letter-spacing:0.01em;\n font-size: clamp(32px, 7.5vw, 44px);\n }\n .headline span{ color: var(--thread); }\n .headline.small{ font-size: clamp(22px, 5.5vw, 28px); line-height:1.05; }\n\n .sub{ text-align:center; margin: 12px auto 0; max-width: 34ch; font-size:14px; line-height:1.55; color: rgba(19,17,16,0.72); }\n\n .stitch-divider{ border:none; border-top: 2px dashed var(--line-on-bone); margin: 18px 0; width:100%; }\n\n \/* ---------- Drop progress ---------- *\/\n .progress-label-row{\n display:flex; justify-content:space-between; align-items:baseline;\n margin-bottom:8px; font-family:'Space Mono',monospace; font-size:10.5px;\n letter-spacing:0.1em; text-transform:uppercase; color: rgba(19,17,16,0.55);\n }\n .progress-pct{ color: var(--thread); font-weight:700; }\n .progress-track{ position:relative; height:8px; border-radius:999px; background: rgba(19,17,16,0.08); overflow:hidden; }\n .progress-fill{\n position:absolute; inset:0; width:0%; border-radius:999px;\n background-color: var(--thread);\n background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.35) 0 9px, transparent 9px 18px);\n background-size:26px 26px;\n transition: width 1.3s cubic-bezier(.2,.8,.2,1);\n animation: stripeMove 1s linear infinite;\n }\n @keyframes stripeMove{ from{ background-position:0 0; } to{ background-position:26px 0; } }\n @media (prefers-reduced-motion: reduce){ .progress-fill{ animation:none; transition:none; } }\n\n .progress-stages{\n display:flex; justify-content:space-between; margin-top:8px;\n font-family:'Space Mono',monospace; font-size:8.5px; letter-spacing:0.06em;\n text-transform:uppercase; color: rgba(19,17,16,0.32);\n }\n .progress-stages .done{ color: var(--ink); font-weight:700; }\n .progress-stages .current{ color: var(--thread); font-weight:700; }\n\n \/* ---------- Notify form ---------- *\/\n .notify-form{ display:flex; gap:8px; }\n .notify-form input[type=\"email\"]{\n flex:1; min-width:0; padding:13px 14px; border-radius:8px;\n border:1.5px solid var(--line-on-bone); background: rgba(19,17,16,0.03);\n color: var(--ink); font-family:'Manrope', sans-serif; font-size:14px;\n outline:none; transition: border-color .15s ease;\n }\n .notify-form input[type=\"email\"]::placeholder{ color: rgba(19,17,16,0.4); }\n .notify-form input[type=\"email\"]:focus{ border-color: var(--thread); }\n .notify-form button{\n flex-shrink:0; padding:13px 18px; border-radius:8px; border:none;\n background: var(--thread); color: var(--bone);\n font-family:'Space Mono', monospace; font-weight:700; font-size:12.5px;\n letter-spacing:0.06em; cursor:pointer;\n transition: transform .12s ease, filter .15s ease;\n }\n .notify-form button:hover{ filter:brightness(0.92); }\n .notify-form button:active{ transform: scale(0.96); }\n .notify-form button:focus-visible,\n .notify-form input:focus-visible,\n .socials a:focus-visible,\n .swatch:focus-visible,\n .flip-btn:focus-visible{ outline: 2px solid var(--thread); outline-offset: 2px; }\n\n .form-msg{ min-height:16px; margin:8px 0 0; text-align:center; font-size:12.5px; color:#2f7a4f; font-weight:700; }\n .form-msg.error{ color: var(--thread); }\n\n .waitlist-count{\n text-align:center; margin: 8px 0 0; font-size:11.5px;\n color: rgba(19,17,16,0.5); font-family:'Manrope', sans-serif;\n }\n .waitlist-count strong{ color: var(--ink); font-weight:800; }\n\n \/* ---------- Swatch picker ---------- *\/\n .swatch-label{\n margin:0 0 10px; text-align:center; font-family:'Space Mono', monospace;\n font-size:10.5px; letter-spacing:0.14em; text-transform:uppercase; color: rgba(19,17,16,0.5);\n }\n .swatches{ display:flex; justify-content:center; gap:12px; }\n .swatch{\n width:26px; height:26px; border-radius:50%; border:2px solid transparent;\n background: var(--sw); padding:0; cursor:pointer;\n transition: transform .12s ease, border-color .12s ease;\n }\n .swatch:hover{ transform: scale(1.15); }\n .swatch.active{ border-color: var(--ink); box-shadow: 0 0 0 2px var(--bone), 0 0 0 3.5px var(--ink); }\n\n \/* ---------- Flip button ---------- *\/\n .flip-btn{\n display:block; margin: 2px auto 0; background:none; border: 1.5px solid var(--ink);\n color: var(--ink); font-family:'Space Mono', monospace; font-weight:700; font-size:11.5px;\n letter-spacing:0.08em; text-transform:uppercase; padding:11px 20px; border-radius:999px;\n cursor:pointer; transition: background .15s ease, color .15s ease, transform .12s ease;\n }\n .flip-btn:hover{ background: var(--ink); color: var(--bone); }\n .flip-btn:active{ transform: scale(0.97); }\n #flipBtn{ animation: nudge 3.4s ease-in-out infinite; }\n @keyframes nudge{ 0%,80%,100%{ transform:scale(1); } 88%{ transform:scale(1.045); } 94%{ transform:scale(1); } }\n @media (prefers-reduced-motion: reduce){ #flipBtn{ animation:none; } }\n\n .story-text{ text-align:center; font-size:14px; line-height:1.65; color: rgba(19,17,16,0.75); max-width:36ch; margin: 6px auto 0; }\n\n .care-label{\n display:flex; flex-wrap:wrap; justify-content:center; gap:6px 14px;\n font-family:'Space Mono', monospace; font-size:9.5px; letter-spacing:0.08em;\n text-transform:uppercase; color: rgba(19,17,16,0.55); text-align:center;\n }\n\n \/* ---------- Socials ---------- *\/\n .socials{ display:flex; justify-content:center; gap:10px; margin-top:auto; padding-top:20px; }\n .socials a{\n display:inline-flex; align-items:center; justify-content:center;\n min-width:56px; height:34px; padding:0 14px; border-radius:999px;\n background: var(--ink); color: var(--bone); text-decoration:none;\n font-family:'Space Mono', monospace; font-weight:700; font-size:11px; letter-spacing:0.1em;\n transition: background .15s ease, transform .12s ease;\n }\n .socials a:hover{ background:#2a2622; transform: translateY(-1px); }\n\n \/* ---------- Footer ---------- *\/\n .site-footer{\n margin-top:28px; text-align:center; color: rgba(244,239,227,0.55);\n font-family:'Space Mono', monospace; font-size:10.5px; letter-spacing:0.05em;\n max-width:440px; padding:0 12px; position:relative; z-index:1;\n }\n .site-footer p{ margin:4px 0; }\n\n \/* ---------- Thread-snip burst ---------- *\/\n .thread-burst{ position:fixed; inset:0; pointer-events:none; z-index:50; }\n .thread-bit{ position:absolute; width:3px; height:13px; border-radius:2px; opacity:0.95; animation: threadFly 850ms ease-out forwards; }\n @keyframes threadFly{ 0%{ transform: translate(0,0) rotate(0deg); opacity:1; } 100%{ transform: translate(var(--tx), var(--ty)) rotate(var(--tr)); opacity:0; } }\n @media (prefers-reduced-motion: reduce){ .thread-bit{ display:none; } }\n\n @media (max-width:360px){ .notify-form{ flex-direction:column; } }\n<\/style>\n<\/head>\n<body>\n\n <div class=\"ambient\" aria-hidden=\"true\">\n <span class=\"floaty f1\">Est. India<\/span>\n <span class=\"floaty f2\">Oversized Fit<\/span>\n <span class=\"floaty f3\">GSM 180–300<\/span>\n <span class=\"floaty f4\">Made For Streets<\/span>\n <span class=\"floaty f5\">Wear Your Story<\/span>\n <\/div>\n\n <div class=\"tag-wrap\">\n <div class=\"hang\" id=\"hang\">\n <div class=\"tag-string\" aria-hidden=\"true\"><\/div>\n <div class=\"grommet\" aria-hidden=\"true\"><\/div>\n\n <div class=\"flip-scene\" id=\"flipScene\">\n <div class=\"flip-card\" id=\"flipCard\">\n\n <!-- FRONT -->\n <div class=\"flip-face flip-front\" id=\"flipFront\">\n <header class=\"tag-head reveal\" style=\"--d:0\">\n <img decoding=\"async\" class=\"logo\" src=\"https:\/\/threadevoke.com\/wp-content\/uploads\/2026\/07\/logo.png\" alt=\"Thread Evoke logo\" \/>\n <p class=\"eyebrow\">Est. India \u00b7 Streetwear Co.<\/p>\n <\/header>\n\n <h1 class=\"headline reveal\" style=\"--d:1\">Something<br><span>Heavyweight<\/span><br>Is Coming<\/h1>\n <p class=\"sub reveal\" style=\"--d:2\">New drop. New site. Same obsession with fit, fabric & finish. Be first to know when we go live.<\/p>\n\n <hr class=\"stitch-divider\" aria-hidden=\"true\" \/>\n\n <div class=\"reveal\" style=\"--d:3\">\n <div class=\"progress-label-row\">\n <span>Drop Progress<\/span>\n <span class=\"progress-pct\" id=\"progressPct\">0%<\/span>\n <\/div>\n <div class=\"progress-track\" role=\"img\" aria-label=\"Production progress toward launch\">\n <div class=\"progress-fill\" id=\"progressFill\"><\/div>\n <\/div>\n <div class=\"progress-stages\">\n <span class=\"done\">Fabric<\/span>\n <span class=\"done\">Prints<\/span>\n <span class=\"current\">Stitching<\/span>\n <span>Packed<\/span>\n <span>Live<\/span>\n <\/div>\n <\/div>\n\n <hr class=\"stitch-divider\" aria-hidden=\"true\" \/>\n\n <div class=\"reveal\" style=\"--d:4\">\n <form class=\"notify-form\" id=\"notifyForm\" novalidate>\n <label for=\"email\" class=\"sr-only\">Email address<\/label>\n <input type=\"email\" id=\"email\" name=\"email\" placeholder=\"you@email.com\" required \/>\n <button type=\"submit\">NOTIFY ME<\/button>\n <\/form>\n <p class=\"form-msg\" id=\"formMsg\" aria-live=\"polite\"><\/p>\n <p class=\"waitlist-count\"><strong id=\"waitlistNum\">0<\/strong> people already waiting for the drop<\/p>\n <\/div>\n\n <hr class=\"stitch-divider\" aria-hidden=\"true\" \/>\n\n <div class=\"reveal\" style=\"--d:5\">\n <p class=\"swatch-label\">Pick your thread<\/p>\n <div class=\"swatches\" role=\"radiogroup\" aria-label=\"Accent color\">\n <button type=\"button\" class=\"swatch active\" style=\"--sw:#e8432b\" data-color=\"#e8432b\" role=\"radio\" aria-checked=\"true\" aria-label=\"Rust red\"><\/button>\n <button type=\"button\" class=\"swatch\" style=\"--sw:#5b6b45\" data-color=\"#5b6b45\" role=\"radio\" aria-checked=\"false\" aria-label=\"Olive green\"><\/button>\n <button type=\"button\" class=\"swatch\" style=\"--sw:#7a2331\" data-color=\"#7a2331\" role=\"radio\" aria-checked=\"false\" aria-label=\"Maroon\"><\/button>\n <button type=\"button\" class=\"swatch\" style=\"--sw:#2b3a67\" data-color=\"#2b3a67\" role=\"radio\" aria-checked=\"false\" aria-label=\"Indigo\"><\/button>\n <button type=\"button\" class=\"swatch\" style=\"--sw:#c9a227\" data-color=\"#c9a227\" role=\"radio\" aria-checked=\"false\" aria-label=\"Brass gold\"><\/button>\n <\/div>\n <\/div>\n\n <hr class=\"stitch-divider reveal\" style=\"--d:6\" aria-hidden=\"true\" \/>\n\n <button type=\"button\" class=\"flip-btn reveal\" style=\"--d:6\" id=\"flipBtn\" aria-controls=\"flipCard\" aria-expanded=\"false\">See The Story →<\/button>\n\n <div class=\"socials reveal\" style=\"--d:7\">\n <a href=\"https:\/\/www.instagram.com\/official_thread_evoke\/\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"Thread Evoke on Instagram\">IG<\/a>\n <a href=\"https:\/\/www.facebook.com\/profile.php?id=61585652366428\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"Thread Evoke on Facebook\">FB<\/a>\n <\/div>\n <\/div>\n\n <!-- BACK -->\n <div class=\"flip-face flip-back\" id=\"flipBack\">\n <p class=\"eyebrow\">The Story<\/p>\n <h2 class=\"headline small\">Made For The<br><span>Streets<\/span> + The Grind<\/h2>\n <p class=\"story-text\">Thread Evoke is India’s home for heavyweight, statement streetwear — 300GSM hoodies built for the cold, 180GSM tees built for the grind. We obsess over fabric, fit and finish so you don’t have to.<\/p>\n\n <hr class=\"stitch-divider\" aria-hidden=\"true\" \/>\n\n <div class=\"care-label\">\n <span>Fit: Oversized<\/span>\n <span>GSM: 180–300<\/span>\n <span>Made for: Streets + Gym<\/span>\n <span>Status: Loading<\/span>\n <\/div>\n\n <hr class=\"stitch-divider\" aria-hidden=\"true\" \/>\n\n <button type=\"button\" class=\"flip-btn\" id=\"backBtn\" aria-controls=\"flipCard\">← Back To Front<\/button>\n\n <div class=\"socials\">\n <a href=\"https:\/\/www.instagram.com\/official_thread_evoke\/\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"Thread Evoke on Instagram\">IG<\/a>\n <a href=\"https:\/\/www.facebook.com\/profile.php?id=61585652366428\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"Thread Evoke on Facebook\">FB<\/a>\n <\/div>\n <\/div>\n\n <\/div>\n <\/div>\n <\/div>\n\n <footer class=\"site-footer\">\n <p>180–300GSM heavyweight cotton · Wear your story.<\/p>\n <p>© <span id=\"year\"><\/span> Thread Evoke. All rights reserved.<\/p>\n <\/footer>\n <\/div>\n\n<script>\n document.getElementById('year').textContent = new Date().getFullYear();\n\n const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n\n \/\/ ---------- Flip card ----------\n const flipCard = document.getElementById('flipCard');\n const flipScene = document.getElementById('flipScene');\n const front = document.getElementById('flipFront');\n const back = document.getElementById('flipBack');\n const flipBtn = document.getElementById('flipBtn');\n const backBtn = document.getElementById('backBtn');\n\n function syncFlipHeight(){\n const h = Math.max(front.scrollHeight, back.scrollHeight);\n flipScene.style.height = h + 'px';\n }\n function updateFaceState(){\n const flipped = flipCard.classList.contains('flipped');\n front.toggleAttribute('inert', flipped);\n front.setAttribute('aria-hidden', String(flipped));\n back.toggleAttribute('inert', !flipped);\n back.setAttribute('aria-hidden', String(!flipped));\n flipBtn.setAttribute('aria-expanded', String(flipped));\n }\n function toggleFlip(){\n flipCard.classList.toggle('flipped');\n updateFaceState();\n }\n flipBtn.addEventListener('click', toggleFlip);\n backBtn.addEventListener('click', toggleFlip);\n\n window.addEventListener('load', syncFlipHeight);\n window.addEventListener('resize', syncFlipHeight);\n if (document.fonts && document.fonts.ready){ document.fonts.ready.then(syncFlipHeight); }\n syncFlipHeight();\n updateFaceState();\n\n \/\/ ---------- Cursor tilt (fine-pointer desktops only) ----------\n const canTilt = window.matchMedia('(hover: hover) and (pointer: fine)').matches && !prefersReduced;\n if (canTilt){\n const hangEl = document.getElementById('hang');\n hangEl.addEventListener('mousemove', (e) => {\n const rect = flipScene.getBoundingClientRect();\n const dx = (e.clientX - (rect.left + rect.width \/ 2)) \/ (rect.width \/ 2);\n const dy = (e.clientY - (rect.top + rect.height \/ 2)) \/ (rect.height \/ 2);\n flipScene.style.transform = `rotateX(${(dy * -6).toFixed(2)}deg) rotateY(${(dx * 6).toFixed(2)}deg)`;\n });\n hangEl.addEventListener('mouseleave', () => {\n flipScene.style.transform = 'rotateX(0deg) rotateY(0deg)';\n });\n }\n\n \/\/ ---------- Drop progress (count-up on load) ----------\n \/\/ \ud83d\udd27 EDIT THIS: set to your real production progress percentage\n const TARGET_PERCENT = 68;\n function animateProgress(){\n const fill = document.getElementById('progressFill');\n const pct = document.getElementById('progressPct');\n if (prefersReduced){ fill.style.width = TARGET_PERCENT + '%'; pct.textContent = TARGET_PERCENT + '%'; return; }\n let start = null;\n const duration = 1200;\n function step(ts){\n if (!start) start = ts;\n const p = Math.min((ts - start) \/ duration, 1);\n const eased = 1 - Math.pow(1 - p, 3);\n const val = Math.round(eased * TARGET_PERCENT);\n pct.textContent = val + '%';\n fill.style.width = val + '%';\n if (p < 1) requestAnimationFrame(step);\n }\n requestAnimationFrame(step);\n }\n\n \/\/ ---------- Waitlist counter (count-up on load) ----------\n \/\/ \ud83d\udd27 EDIT THIS: replace with your real subscriber count once the form is wired up.\n \/\/ Showing a fabricated number here long-term is a dark pattern \u2014 swap this for\n \/\/ a live count from your backend as soon as you have one.\n const WAITLIST_COUNT = 214;\n function animateWaitlist(){\n const el = document.getElementById('waitlistNum');\n if (prefersReduced){ el.textContent = WAITLIST_COUNT.toLocaleString(); return; }\n let start = null;\n const duration = 1200;\n function step(ts){\n if (!start) start = ts;\n const p = Math.min((ts - start) \/ duration, 1);\n const eased = 1 - Math.pow(1 - p, 3);\n el.textContent = Math.round(eased * WAITLIST_COUNT).toLocaleString();\n if (p < 1) requestAnimationFrame(step);\n }\n requestAnimationFrame(step);\n }\n\n window.addEventListener('load', () => {\n setTimeout(animateProgress, 250);\n setTimeout(animateWaitlist, 400);\n });\n\n \/\/ ---------- Color swatches ----------\n const swatches = document.querySelectorAll('.swatch');\n swatches.forEach(sw => {\n sw.addEventListener('click', () => {\n document.documentElement.style.setProperty('--thread', sw.dataset.color);\n swatches.forEach(s => { s.classList.remove('active'); s.setAttribute('aria-checked','false'); });\n sw.classList.add('active');\n sw.setAttribute('aria-checked','true');\n });\n });\n\n \/\/ ---------- Thread-snip success burst ----------\n function burstThreads(x, y){\n if (prefersReduced) return;\n const colors = [getComputedStyle(document.documentElement).getPropertyValue('--thread').trim(), '#c9a227', '#131110', '#f4efe3'];\n const container = document.createElement('div');\n container.className = 'thread-burst';\n document.body.appendChild(container);\n for (let i = 0; i < 16; i++){\n const bit = document.createElement('span');\n bit.className = 'thread-bit';\n const angle = Math.random() * Math.PI * 2;\n const dist = 55 + Math.random() * 85;\n bit.style.setProperty('--tx', (Math.cos(angle) * dist).toFixed(0) + 'px');\n bit.style.setProperty('--ty', (Math.sin(angle) * dist - 35).toFixed(0) + 'px');\n bit.style.setProperty('--tr', (Math.random() * 360 - 180).toFixed(0) + 'deg');\n bit.style.left = x + 'px';\n bit.style.top = y + 'px';\n bit.style.background = colors[i % colors.length];\n container.appendChild(bit);\n }\n setTimeout(() => container.remove(), 950);\n }\n\n \/\/ ---------- Notify form ----------\n \/\/ This currently just gives the visitor confirmation in the browser.\n \/\/ To actually collect emails, point this at your own endpoint \u2014\n \/\/ e.g. a small PHP script, a Google Form, Mailchimp, or a WordPress plugin's REST route.\n \/\/\n \/\/ Example (uncomment and edit once you have an endpoint):\n \/\/ fetch('\/subscribe.php', {\n \/\/ method: 'POST',\n \/\/ headers: { 'Content-Type': 'application\/json' },\n \/\/ body: JSON.stringify({ email })\n \/\/ });\n\n const form = document.getElementById('notifyForm');\n const msg = document.getElementById('formMsg');\n\n form.addEventListener('submit', function(e){\n e.preventDefault();\n const emailInput = document.getElementById('email');\n const email = emailInput.value.trim();\n const valid = \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/.test(email);\n\n if (!valid){\n msg.textContent = \"That doesn't look like a valid email.\";\n msg.classList.add('error');\n return;\n }\n\n msg.classList.remove('error');\n msg.textContent = \"\u2713 You're on the list. We'll email you the second we drop.\";\n const btn = form.querySelector('button');\n const rect = btn.getBoundingClientRect();\n burstThreads(rect.left + rect.width \/ 2, rect.top + rect.height \/ 2);\n\n emailInput.value = '';\n btn.textContent = 'ADDED \u2713';\n setTimeout(() => { btn.textContent = 'NOTIFY ME'; }, 2200);\n });\n<\/script>\n\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Thread Evoke \u2014 Something Heavyweight Is Coming Est. India Oversized Fit GSM 180–300 Made For Streets Wear Your Story Est. […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-27","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/threadevoke.com\/index.php?rest_route=\/wp\/v2\/pages\/27","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/threadevoke.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/threadevoke.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/threadevoke.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/threadevoke.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=27"}],"version-history":[{"count":13,"href":"https:\/\/threadevoke.com\/index.php?rest_route=\/wp\/v2\/pages\/27\/revisions"}],"predecessor-version":[{"id":44,"href":"https:\/\/threadevoke.com\/index.php?rest_route=\/wp\/v2\/pages\/27\/revisions\/44"}],"wp:attachment":[{"href":"https:\/\/threadevoke.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=27"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}