{"id":2,"date":"2026-03-22T17:29:50","date_gmt":"2026-03-22T17:29:50","guid":{"rendered":"https:\/\/manyfacecreative.com\/?page_id=2"},"modified":"2026-04-15T15:57:23","modified_gmt":"2026-04-15T15:57:23","slug":"test","status":"publish","type":"page","link":"https:\/\/manyfacecreative.com\/","title":{"rendered":"Sample Page"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2\" class=\"elementor elementor-2\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c50fcb7 e-flex e-con-boxed e-con e-parent\" data-id=\"c50fcb7\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a647484 elementor-widget elementor-widget-html\" data-id=\"a647484\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n  .fw-tilt-card-wrap {\n    width: 75%;\n  }\n\n  .fw-tilt-card {\n    --fw-transition: 220ms cubic-bezier(.2,.7,.2,1);\n    --fw-yellow: #ffb900;\n    --fw-title-color: #ffffff;\n    --fw-btn-text: #ffb900;\n\n    position: relative;\n    display: block;\n    width: 100%;\n    aspect-ratio: 16 \/ 9;\n    text-decoration: none;\n    perspective: 1400px;\n    -webkit-perspective: 1400px;\n    overflow: visible;\n  }\n\n  .fw-tilt-scene {\n    position: relative;\n    width: 100%;\n    height: 100%;\n    overflow: visible;\n    transform-style: preserve-3d;\n    -webkit-transform-style: preserve-3d;\n    will-change: transform;\n    transition: transform var(--fw-transition);\n    background: #111;\n  }\n\n  .fw-tilt-layer {\n    position: absolute;\n    inset: 0;\n  }\n\n  .fw-tilt-bg,\n  .fw-tilt-video-wrap {\n    transform: translateZ(0);\n    -webkit-transform: translateZ(0);\n  }\n\n  .fw-tilt-bg img,\n  .fw-tilt-video {\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    display: block;\n  }\n\n  .fw-tilt-bg img {\n    z-index: 1;\n    transform: scale(1.01);\n    transition: opacity 260ms ease;\n  }\n\n  .fw-tilt-video-wrap {\n    z-index: 2;\n  }\n\n  .fw-tilt-video {\n    opacity: 0;\n    transition: opacity 260ms ease;\n    pointer-events: none;\n    transform: scale(1.04);\n  }\n\n  .fw-tilt-card:hover .fw-tilt-video,\n  .fw-tilt-card.is-hovering .fw-tilt-video {\n    opacity: 1;\n  }\n\n  .fw-tilt-card:hover .fw-tilt-bg img,\n  .fw-tilt-card.is-hovering .fw-tilt-bg img {\n    opacity: .22;\n  }\n\n  .fw-tilt-front {\n    z-index: 4;\n    transform: translate3d(0px, 0px, 140px);\n    -webkit-transform: translate3d(0px, 0px, 140px);\n    will-change: transform;\n    transition: transform var(--fw-transition);\n    pointer-events: none;\n  }\n\n  .fw-tilt-title {\n    position: absolute;\n    left: 6.5%;\n    top: 49%;\n    transform: translateY(-50%);\n    margin: 0;\n    color: var(--fw-title-color);\n    font-size: clamp(34px, 5.8vw, 88px);\n    line-height: .95;\n    font-weight: 900;\n    letter-spacing: 0;\n    text-transform: uppercase;\n    text-wrap: balance;\n    max-width: 62%;\n    pointer-events: auto;\n  }\n\n  .fw-tilt-btn {\n    position: absolute;\n    left: 6.5%;\n    top: 66%;\n    width: clamp(180px, 17vw, 230px);\n    aspect-ratio: 193.5 \/ 61;\n    display: block;\n    text-decoration: none;\n    pointer-events: auto;\n    overflow: visible;\n  }\n\n  .fw-tilt-btn svg {\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n    overflow: visible;\n  }\n\n  .fw-tilt-btn .fw-btn-outline {\n    z-index: 2;\n  }\n\n  .fw-tilt-btn .fw-btn-fill {\n    z-index: 1;\n  }\n\n  .fw-tilt-btn .fw-btn-fill-shape {\n    transform-box: fill-box;\n    transform-origin: left center;\n    transform: scaleX(0.32);\n    transition: transform 280ms cubic-bezier(.2,.7,.2,1);\n  }\n\n  .fw-tilt-card:hover .fw-btn-fill-shape,\n  .fw-tilt-card.is-hovering .fw-btn-fill-shape {\n    transform: scaleX(1);\n  }\n\n  .fw-tilt-btn .fw-tilt-btn-label {\n    position: absolute;\n    inset: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--fw-btn-text);\n    font-size: clamp(14px, 1.1vw, 18px);\n    font-weight: 800;\n    letter-spacing: .08em;\n    text-transform: uppercase;\n    z-index: 3;\n    transition: color 280ms cubic-bezier(.2,.7,.2,1);\n  }\n\n  .fw-tilt-card:hover .fw-tilt-btn-label,\n  .fw-tilt-card.is-hovering .fw-tilt-btn-label {\n    color: #111;\n  }\n\n  .fw-tilt-btn .fw-tilt-btn-arrow {\n    position: absolute;\n    left: 11%;\n    top: 50%;\n    transform: translateY(-50%);\n    width: 15%;\n    height: auto;\n    fill: #111;\n    z-index: 3;\n  }\n\n  .fw-tilt-mid {\n    z-index: 5;\n    overflow: visible;\n    will-change: transform;\n    transition: transform var(--fw-transition);\n    pointer-events: none;\n    transform: translate3d(0px, 0px, 140px);\n    -webkit-transform: translate3d(0px, 0px, 140px);\n  }\n\n  .fw-tilt-logo {\n    position: absolute;\n    right: -1%;\n    bottom: -4%;\n    width: clamp(170px, 23vw, 330px);\n    max-width: 34%;\n    height: auto;\n    display: block;\n    transform-origin: center center;\n    filter: drop-shadow(0 22px 34px rgba(0,0,0,.34));\n  }\n\n  .fw-tilt-card:focus-visible {\n    outline: 2px solid var(--fw-yellow);\n    outline-offset: 4px;\n  }\n\n  @media (max-width: 1024px) {\n    .fw-tilt-title {\n      max-width: 70%;\n      font-size: clamp(28px, 6vw, 62px);\n    }\n\n    .fw-tilt-btn {\n      top: 68%;\n      width: clamp(160px, 26vw, 220px);\n    }\n\n    .fw-tilt-logo {\n      width: clamp(130px, 24vw, 240px);\n      max-width: 35%;\n    }\n  }\n\n  @media (max-width: 767px) {\n    .fw-tilt-card {\n      perspective: none;\n      -webkit-perspective: none;\n      aspect-ratio: 4 \/ 5;\n    }\n\n    .fw-tilt-scene,\n    .fw-tilt-mid,\n    .fw-tilt-front {\n      transform: none !important;\n      -webkit-transform: none !important;\n    }\n\n    .fw-tilt-title {\n      left: 7%;\n      top: 44%;\n      max-width: 74%;\n      font-size: clamp(26px, 9vw, 46px);\n    }\n\n    .fw-tilt-btn {\n      left: 7%;\n      top: 58%;\n      width: 180px;\n    }\n\n    .fw-tilt-logo {\n      right: -2%;\n      bottom: -2%;\n      width: 38%;\n      max-width: none;\n    }\n\n    .fw-tilt-bg img {\n      opacity: .18;\n    }\n\n    .fw-tilt-video {\n      opacity: 1;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .fw-tilt-scene,\n    .fw-tilt-mid,\n    .fw-tilt-front,\n    .fw-tilt-video,\n    .fw-tilt-bg img,\n    .fw-btn-fill-shape,\n    .fw-tilt-btn-label {\n      transition: none !important;\n    }\n  }\n<\/style>\n\n<div class=\"fw-tilt-card-wrap\">\n  <a class=\"fw-tilt-card\" href=\"YOUR_LINK_URL\" aria-label=\"View Ain't No Fire Like Regret project\">\n    <div class=\"fw-tilt-scene\">\n\n      <div class=\"fw-tilt-layer fw-tilt-bg\">\n        <img decoding=\"async\"\n          src=\"https:\/\/manyfacecreative.com\/wp-content\/uploads\/2026\/04\/IMG_5253.jpg\"\n          alt=\"Ain't No Fire Like Regret poster image\"\n          loading=\"eager\"\n        >\n      <\/div>\n\n      <div class=\"fw-tilt-layer fw-tilt-video-wrap\">\n        <video\n          class=\"fw-tilt-video\"\n          muted\n          loop\n          playsinline\n          preload=\"metadata\"\n        >\n          <source src=\"https:\/\/manyfacecreative.com\/wp-content\/uploads\/2026\/04\/de4beac923014209a5e379ea7ec0535d.mov\" type=\"video\/mp4\">\n        <\/video>\n      <\/div>\n\n      <div class=\"fw-tilt-layer fw-tilt-front\">\n        <h2 class=\"fw-tilt-title\">AIN'T NO FIRE LIKE REGRET<\/h2>\n\n        <span class=\"fw-tilt-btn\" aria-hidden=\"true\">\n          <svg class=\"fw-btn-fill\" viewBox=\"0 0 193.501 61\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n            <polygon\n              class=\"fw-btn-fill-shape\"\n              fill=\"#ffb900\"\n              points=\"0.501,60.499 0.501,13.247 13.094,0.5 191.501,0.5 191.501,47.241 178.403,60.499\">\n            <\/polygon>\n          <\/svg>\n\n          <svg class=\"fw-btn-outline\" viewBox=\"0 0 193.501 61\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n            <polygon\n              fill=\"none\"\n              stroke=\"#ffb900\"\n              stroke-width=\"2\"\n              stroke-miterlimit=\"10\"\n              points=\"0.501,60.499 0.501,13.247 13.094,0.5 191.501,0.5 191.501,47.241 178.403,60.499\">\n            <\/polygon>\n          <\/svg>\n\n          <svg class=\"fw-tilt-btn-arrow\" viewBox=\"0 0 30 10\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n            <polygon points=\"30,5.02 20.696,0 20.696,4.08 0,4.08 0,5.96 20.696,5.96 20.696,10\"><\/polygon>\n          <\/svg>\n\n          <span class=\"fw-tilt-btn-label\">Discover<\/span>\n        <\/span>\n      <\/div>\n\n      <div class=\"fw-tilt-layer fw-tilt-mid\">\n        <img decoding=\"async\"\n          class=\"fw-tilt-logo\"\n          src=\"https:\/\/manyfacecreative.com\/wp-content\/uploads\/2026\/03\/cropped-ManyfaceMusicVectorLogo-scaled-2.png\"\n          alt=\"\"\n          loading=\"lazy\"\n        >\n      <\/div>\n\n    <\/div>\n  <\/a>\n<\/div>\n\n<script>\n(function () {\n  const cards = document.querySelectorAll('.fw-tilt-card');\n\n  cards.forEach((card) => {\n    const scene = card.querySelector('.fw-tilt-scene');\n    const video = card.querySelector('.fw-tilt-video');\n    const front = card.querySelector('.fw-tilt-front');\n    const mid = card.querySelector('.fw-tilt-mid');\n\n    if (!scene || !front || !mid) return;\n\n    const isTouch = window.matchMedia('(hover: none), (pointer: coarse)').matches;\n\n    if (isTouch) {\n      if (video) {\n        video.play().catch(() => {});\n      }\n      return;\n    }\n\n    let rafId = null;\n\n    const resetTransforms = () => {\n      scene.style.transform = 'rotateX(0deg) rotateY(0deg) scale(1)';\n      front.style.transform = 'translate3d(0px, 0px, 140px)';\n      mid.style.transform = 'translate3d(0px, 0px, 140px)';\n    };\n\n    const playVideo = () => {\n      if (!video) return;\n      video.play().catch(() => {});\n    };\n\n    const pauseVideo = () => {\n      if (!video) return;\n      video.pause();\n      try {\n        video.currentTime = 0;\n      } catch (e) {}\n    };\n\n    card.addEventListener('mouseenter', () => {\n      card.classList.add('is-hovering');\n      playVideo();\n    });\n\n    card.addEventListener('mouseleave', () => {\n      card.classList.remove('is-hovering');\n      if (rafId) cancelAnimationFrame(rafId);\n      resetTransforms();\n      pauseVideo();\n    });\n\n    card.addEventListener('mousemove', (e) => {\n      if (rafId) cancelAnimationFrame(rafId);\n\n      rafId = requestAnimationFrame(() => {\n        const rect = card.getBoundingClientRect();\n        const x = e.clientX - rect.left;\n        const y = e.clientY - rect.top;\n\n        const px = (x \/ rect.width) - 0.5;\n        const py = (y \/ rect.height) - 0.5;\n\n        const rotateX = py * -8;\n        const rotateY = px * 8;\n\n        const planeX = px * -32;\n        const planeY = py * -32;\n\n        scene.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale(1.01)`;\n        front.style.transform = `translate3d(${planeX}px, ${planeY}px, 140px)`;\n        mid.style.transform = `translate3d(${planeX}px, ${planeY}px, 140px)`;\n      });\n    });\n\n    resetTransforms();\n  });\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>AIN&#8217;T NO FIRE LIKE REGRET Discover<\/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-2","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/manyfacecreative.com\/index.php?rest_route=\/wp\/v2\/pages\/2","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/manyfacecreative.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/manyfacecreative.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/manyfacecreative.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/manyfacecreative.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2"}],"version-history":[{"count":5,"href":"https:\/\/manyfacecreative.com\/index.php?rest_route=\/wp\/v2\/pages\/2\/revisions"}],"predecessor-version":[{"id":95,"href":"https:\/\/manyfacecreative.com\/index.php?rest_route=\/wp\/v2\/pages\/2\/revisions\/95"}],"wp:attachment":[{"href":"https:\/\/manyfacecreative.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}