{"id":14,"date":"2026-09-12T20:53:42","date_gmt":"2026-09-12T20:53:42","guid":{"rendered":"https:\/\/turnerdesign.com\/?page_id=14"},"modified":"2026-09-12T21:50:16","modified_gmt":"2026-09-12T21:50:16","slug":"turner-design","status":"publish","type":"page","link":"https:\/\/turnerdesign.com\/","title":{"rendered":"Turner Design"},"content":{"rendered":"\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Turner Design<\/title>\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=BioRhyme+Expanded:wght@200;300;400;700;800&#038;display=swap\" rel=\"stylesheet\">\n<style>\n  :root {\n    --headline-color: #ffffff;\n    --cursor-color: #000000;\n    --font-size: clamp(22px, 6vw, 43px);\n  }\n\n  * {\n    box-sizing: border-box;\n  }\n\n  html, body {\n    height: 100%;\n    margin: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: #0e1a2b url(\"https:\/\/turnerdesign.com\/wp-content\/uploads\/2026\/09\/flying-landscape-1.jpg\") center center \/ cover no-repeat fixed;\n    font-family: \"BioRhyme Expanded\", serif;\n    overflow-x: hidden;\n  }\n\n  .headline {\n    display: block;\n    font-size: var(--font-size);\n    font-weight: 400;\n    line-height: 1.2;\n    color: var(--headline-color);\n    text-align: center;\n    margin: 0;\n    padding: 0 20px;\n    max-width: 100%;\n  }\n\n  @media (max-width: 480px) {\n    html, body {\n      background-attachment: scroll;\n    }\n  }\n\n  .headline-outer {\n    position: relative;\n    display: inline-block;\n    vertical-align: bottom;\n  }\n\n  \/* The reveal wrapper is clipped \u2014 its width is animated by JS\n     from 0 up to the full text width (typing) and back to 0 (deleting).\n     Because the text itself is never added\/removed character by character,\n     letters can appear *partially* uncovered mid-sweep, matching the\n     smooth wipe seen in the real site. *\/\n  .reveal-wrapper {\n    display: inline-block;\n    overflow: hidden;\n    white-space: nowrap;\n    vertical-align: bottom;\n    width: 0;\n  }\n\n  .reveal-text {\n    display: inline-block;\n    white-space: nowrap;\n  }\n\n  \/* cursor rides the edge of the reveal wrapper, positioned via JS\n     to stay in sync every animation frame *\/\n  .cursor {\n    display: none;\n  }\n<\/style>\n<\/head>\n<body>\n\n<h1 class=\"headline\">\n  <span class=\"headline-outer\">\n    <span class=\"reveal-wrapper\" id=\"revealWrapper\"><span class=\"reveal-text\" id=\"revealText\"><\/span><\/span><span class=\"cursor\" id=\"cursor\"><\/span>\n  <\/span>\n<\/h1>\n\n<script>\n\/*\n  Recreates Elementor's Animated Headline \u2014 Rotating style, \"Typing\" animation\n  as a CLIP\/WIPE reveal, not a character-by-character typewriter.\n\n  Mechanism:\n  - The full phrase is rendered at all times inside #revealText (never\n    partially built up as a string).\n  - #revealWrapper clips it with overflow:hidden and an animated width.\n  - A requestAnimationFrame loop drives that width from 0 -> full text width\n    (typing) and full width -> 0 (deleting), so the sweep is continuous and\n    can reveal\/hide the middle of a letter mid-frame \u2014 matching the smooth\n    wipe seen in the real animation, not discrete per-character jumps.\n  - The cursor bar's `left` position is updated every frame to match the\n    wrapper's current width, so it always sits right at the reveal edge.\n*\/\n\nconst PHRASES = [\n  \"[ REBUILDING ]\",\n  \"> BACK SOON <\",\n  \"have a great day\"\n];\n\nconst MS_PER_CHAR_TYPE = 50;    \/\/ matches measured ~50ms\/char typing speed\nconst MS_PER_CHAR_DELETE = 55;  \/\/ matches measured ~55ms\/char deleting speed\nconst MIN_DURATION = 300;       \/\/ floor so short phrases don't snap instantly\nconst PAUSE_AFTER_TYPE = 2500;  \/\/ hold on full phrase\nconst PAUSE_AFTER_DELETE = 400; \/\/ pause on empty before next phrase\nconst INFINITE_LOOP = true;\n\nconst wrapperEl = document.getElementById('revealWrapper');\nconst textEl = document.getElementById('revealText');\nconst cursorEl = document.getElementById('cursor');\n\nlet phraseIndex = 0;\n\nfunction animateWidth(fromWidth, toWidth, duration) {\n  return new Promise(resolve => {\n    const start = performance.now();\n    function step(now) {\n      const t = Math.min((now - start) \/ duration, 1);\n      const eased = t; \/\/ linear sweep, matches the observed constant-speed wipe\n      const val = fromWidth + (toWidth - fromWidth) * eased;\n      wrapperEl.style.width = val + 'px';\n      cursorEl.style.left = val + 'px';\n      if (t < 1) {\n        requestAnimationFrame(step);\n      } else {\n        resolve();\n      }\n    }\n    requestAnimationFrame(step);\n  });\n}\n\nfunction wait(ms) {\n  return new Promise(resolve => setTimeout(resolve, ms));\n}\n\nasync function runCycle() {\n  while (true) {\n    const phrase = PHRASES[phraseIndex];\n    textEl.textContent = phrase;\n\n    \/\/ measure the phrase's natural rendered width\n    const fullWidth = textEl.offsetWidth;\n\n    \/\/ type in: sweep open from 0 to fullWidth\n    const typeDuration = Math.max(MIN_DURATION, phrase.length * MS_PER_CHAR_TYPE);\n    await animateWidth(0, fullWidth, typeDuration);\n\n    \/\/ hold on the complete phrase\n    await wait(PAUSE_AFTER_TYPE);\n\n    \/\/ delete: sweep closed from fullWidth back to 0\n    const deleteDuration = Math.max(MIN_DURATION, phrase.length * MS_PER_CHAR_DELETE);\n    await animateWidth(fullWidth, 0, deleteDuration);\n\n    await wait(PAUSE_AFTER_DELETE);\n\n    phraseIndex++;\n    if (phraseIndex >= PHRASES.length) {\n      if (!INFINITE_LOOP) return;\n      phraseIndex = 0;\n    }\n  }\n}\n\ndocument.fonts.ready.then(runCycle);\n<\/script>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Turner Design<\/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-14","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Turner Design - Turner Design<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/turnerdesign.com\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Turner Design - Turner Design\" \/>\n<meta property=\"og:description\" content=\"Turner Design\" \/>\n<meta property=\"og:url\" content=\"https:\/\/turnerdesign.com\/\" \/>\n<meta property=\"og:site_name\" content=\"Turner Design\" \/>\n<meta property=\"article:modified_time\" content=\"2026-09-12T21:50:16+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/turnerdesign.com\\\/\",\"url\":\"https:\\\/\\\/turnerdesign.com\\\/\",\"name\":\"Turner Design - Turner Design\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/turnerdesign.com\\\/#website\"},\"datePublished\":\"2026-09-12T20:53:42+00:00\",\"dateModified\":\"2026-09-12T21:50:16+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/turnerdesign.com\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/turnerdesign.com\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/turnerdesign.com\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/turnerdesign.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Turner Design\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/turnerdesign.com\\\/#website\",\"url\":\"https:\\\/\\\/turnerdesign.com\\\/\",\"name\":\"Turner Design\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/turnerdesign.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Turner Design - Turner Design","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/turnerdesign.com\/","og_locale":"en_US","og_type":"article","og_title":"Turner Design - Turner Design","og_description":"Turner Design","og_url":"https:\/\/turnerdesign.com\/","og_site_name":"Turner Design","article_modified_time":"2026-09-12T21:50:16+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/turnerdesign.com\/","url":"https:\/\/turnerdesign.com\/","name":"Turner Design - Turner Design","isPartOf":{"@id":"https:\/\/turnerdesign.com\/#website"},"datePublished":"2026-09-12T20:53:42+00:00","dateModified":"2026-09-12T21:50:16+00:00","breadcrumb":{"@id":"https:\/\/turnerdesign.com\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/turnerdesign.com\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/turnerdesign.com\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/turnerdesign.com\/"},{"@type":"ListItem","position":2,"name":"Turner Design"}]},{"@type":"WebSite","@id":"https:\/\/turnerdesign.com\/#website","url":"https:\/\/turnerdesign.com\/","name":"Turner Design","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/turnerdesign.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/turnerdesign.com\/index.php?rest_route=\/wp\/v2\/pages\/14","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/turnerdesign.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/turnerdesign.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/turnerdesign.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/turnerdesign.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=14"}],"version-history":[{"count":4,"href":"https:\/\/turnerdesign.com\/index.php?rest_route=\/wp\/v2\/pages\/14\/revisions"}],"predecessor-version":[{"id":21,"href":"https:\/\/turnerdesign.com\/index.php?rest_route=\/wp\/v2\/pages\/14\/revisions\/21"}],"wp:attachment":[{"href":"https:\/\/turnerdesign.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=14"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}