{"id":673,"date":"2024-07-24T11:58:42","date_gmt":"2024-07-24T11:58:42","guid":{"rendered":"https:\/\/framesfocus.com\/?page_id=673"},"modified":"2025-08-04T16:46:51","modified_gmt":"2025-08-04T16:46:51","slug":"vfx-projects","status":"publish","type":"page","link":"https:\/\/framesfocus.com\/index.php\/vfx-projects\/","title":{"rendered":"vfx projects"},"content":{"rendered":"\n<div class=\"wp-block-group alignfull has-global-padding is-layout-constrained wp-container-core-group-is-layout-12243e0f wp-block-group-is-layout-constrained wp-container-1 is-position-sticky\"><\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column fade-in-image is-layout-flow wp-block-column-is-layout-flow\">\t\t\t<div class='wp-block-vbb-video-bg  alignfull' id='vbbVideoBG-db34e423-3'>\r\n\t\t\t\t<style>\r\n\t\t\t\t\t#vbbVideoBG-db34e423-3{\r\n\t\t\t\tmin-height: 700px;\r\n\t\t\t}\r\n\t\t\t#vbbVideoBG-db34e423-3 .vbbVideoContent{\r\n\t\t\t\tjustify-content: center;\r\n\t\t\t\ttext-align: center;\r\n\t\t\t\tmin-height: 700px;\r\n\t\t\t\tpadding: 0px 0px;\r\n\t\t\t}\r\n\t\t\t#vbbVideoBG-db34e423-3 .vbbVideoOverlay{\r\n\t\t\t\tbackground: rgba(0, 0, 0, 0.45);\r\n\t\t\t}\t\t\t\t<\/style>\r\n\r\n\t\t\t\t<video autoplay muted loop playsinline class='vbbVideoPlayer' poster='http:\/\/framesfocus.com\/wp-content\/uploads\/2024\/07\/amilliondays-cropped-3.jpg'>\r\n\t\t\t\t\t<source src='' type='video\/mp4' \/>\r\n\r\n\t\t\t\t\tYour browser does not support HTML5 video.\r\n\t\t\t\t<\/video>\r\n\r\n\t\t\t\t<div class='vbbVideoOverlay'><\/div>\r\n\r\n\t\t\t\t<div class='vbbVideoContent'>\r\n\t\t\t\t\t\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flow wp-block-buttons-is-layout-flow\">\n<div class=\"wp-block-button has-custom-width wp-block-button__width-50\" id=\"https:\/\/framesfocus.com\/index.php\/services\/\"><a class=\"wp-block-button__link has-text-color has-background has-custom-font-size wp-element-button\" href=\"https:\/\/framesfocus.com\/index.php\/a-million-days\/\" style=\"color:#fff;background-color:#00000026;font-size:clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.234), 17px)\">A MILLION DAYS<\/a><\/div>\n<\/div>\n\n\t\t\t\t<\/div>\r\n\t\t\t<\/div>\r\n\t\r\n\t\t\t<\/div>\n\n\n\n<div class=\"wp-block-column fade-in-image is-layout-flow wp-block-column-is-layout-flow\">\t\t\t<div class='wp-block-vbb-video-bg  alignfull' id='vbbVideoBG-9186382d-b'>\r\n\t\t\t\t<style>\r\n\t\t\t\t\t#vbbVideoBG-9186382d-b{\r\n\t\t\t\tmin-height: 700px;\r\n\t\t\t}\r\n\t\t\t#vbbVideoBG-9186382d-b .vbbVideoContent{\r\n\t\t\t\tjustify-content: center;\r\n\t\t\t\ttext-align: center;\r\n\t\t\t\tmin-height: 700px;\r\n\t\t\t\tpadding: 0px 0px;\r\n\t\t\t}\r\n\t\t\t#vbbVideoBG-9186382d-b .vbbVideoOverlay{\r\n\t\t\t\tbackground: rgba(0, 0, 0, 0.45);\r\n\t\t\t}\t\t\t\t<\/style>\r\n\r\n\t\t\t\t<video autoplay muted loop playsinline class='vbbVideoPlayer' poster='http:\/\/framesfocus.com\/wp-content\/uploads\/2024\/07\/56feqf.jpg'>\r\n\t\t\t\t\t<source src='' type='video\/mp4' \/>\r\n\r\n\t\t\t\t\tYour browser does not support HTML5 video.\r\n\t\t\t\t<\/video>\r\n\r\n\t\t\t\t<div class='vbbVideoOverlay'><\/div>\r\n\r\n\t\t\t\t<div class='vbbVideoContent'>\r\n\t\t\t\t\t\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flow wp-block-buttons-is-layout-flow\">\n<div class=\"wp-block-button has-custom-width wp-block-button__width-50\"><a class=\"wp-block-button__link has-text-color has-background has-custom-font-size wp-element-button\" href=\"https:\/\/framesfocus.com\/index.php\/star-wars-boba-fett\/\" style=\"color:#fff;background-color:#00000026;font-size:clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.234), 17px)\">STAR WARS<br>BOBA FETT<\/a><\/div>\n<\/div>\n\n\t\t\t\t<\/div>\r\n\t\t\t<\/div>\r\n\t\r\n\t\t\t<\/div>\n\n\n\n<div class=\"wp-block-column fade-in-image is-layout-flow wp-block-column-is-layout-flow\">\t\t\t<div class='wp-block-vbb-video-bg  alignfull' id='vbbVideoBG-8b883981-3'>\r\n\t\t\t\t<style>\r\n\t\t\t\t\t#vbbVideoBG-8b883981-3{\r\n\t\t\t\tmin-height: 700px;\r\n\t\t\t}\r\n\t\t\t#vbbVideoBG-8b883981-3 .vbbVideoContent{\r\n\t\t\t\tjustify-content: center;\r\n\t\t\t\ttext-align: center;\r\n\t\t\t\tmin-height: 700px;\r\n\t\t\t\tpadding: 0px 0px;\r\n\t\t\t}\r\n\t\t\t#vbbVideoBG-8b883981-3 .vbbVideoOverlay{\r\n\t\t\t\tbackground: #000000b3;\r\n\t\t\t}\t\t\t\t<\/style>\r\n\r\n\t\t\t\t<video autoplay muted loop playsinline class='vbbVideoPlayer' poster='http:\/\/framesfocus.com\/wp-content\/uploads\/2025\/08\/movie_poster_t.jpg'>\r\n\t\t\t\t\t<source src='' type='video\/mp4' \/>\r\n\r\n\t\t\t\t\tYour browser does not support HTML5 video.\r\n\t\t\t\t<\/video>\r\n\r\n\t\t\t\t<div class='vbbVideoOverlay'><\/div>\r\n\r\n\t\t\t\t<div class='vbbVideoContent'>\r\n\t\t\t\t\t\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flow wp-block-buttons-is-layout-flow\">\n<div class=\"wp-block-button has-custom-width wp-block-button__width-50\"><a class=\"wp-block-button__link has-text-color has-background has-custom-font-size wp-element-button\" style=\"color:#fff;background-color:#00000026;font-size:clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.234), 17px)\">upcoming<\/a><\/div>\n<\/div>\n\n\t\t\t\t<\/div>\r\n\t\t\t<\/div>\r\n\t\r\n\t\t\t<\/div>\n\n\n\n<div class=\"wp-block-column fade-in-image is-layout-flow wp-block-column-is-layout-flow\">\t\t\t<div class='wp-block-vbb-video-bg  alignfull' id='vbbVideoBG-641cb2c3-8'>\r\n\t\t\t\t<style>\r\n\t\t\t\t\t#vbbVideoBG-641cb2c3-8{\r\n\t\t\t\tmin-height: 700px;\r\n\t\t\t}\r\n\t\t\t#vbbVideoBG-641cb2c3-8 .vbbVideoContent{\r\n\t\t\t\tjustify-content: center;\r\n\t\t\t\ttext-align: center;\r\n\t\t\t\tmin-height: 700px;\r\n\t\t\t\tpadding: 0px 0px;\r\n\t\t\t}\r\n\t\t\t#vbbVideoBG-641cb2c3-8 .vbbVideoOverlay{\r\n\t\t\t\tbackground: #000000b3;\r\n\t\t\t}\t\t\t\t<\/style>\r\n\r\n\t\t\t\t<video autoplay muted loop playsinline class='vbbVideoPlayer' poster=''>\r\n\t\t\t\t\t<source src='' type='video\/mp4' \/>\r\n\r\n\t\t\t\t\tYour browser does not support HTML5 video.\r\n\t\t\t\t<\/video>\r\n\r\n\t\t\t\t<div class='vbbVideoOverlay'><\/div>\r\n\r\n\t\t\t\t<div class='vbbVideoContent'>\r\n\t\t\t\t\t\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flow wp-block-buttons-is-layout-flow\">\n<div class=\"wp-block-button has-custom-width wp-block-button__width-50\"><a class=\"wp-block-button__link has-text-color has-background has-custom-font-size wp-element-button\" style=\"color:#fff;background-color:#00000026;font-size:clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.234), 17px)\">upcoming<\/a><\/div>\n<\/div>\n\n\t\t\t\t<\/div>\r\n\t\t\t<\/div>\r\n\t\r\n\t\t\t<\/div>\n<\/div>\n\n\n<p><!DOCTYPE html><br \/>\n<html lang=\"en\"><br \/>\n<head><br \/>\n    <meta charset=\"UTF-8\"><br \/>\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><\/p>\n<style>\n        body {<br \/>\n            margin: 0;<br \/>\n            font-family: Arial, sans-serif;<br \/>\n        }<\/p>\n<p>        .side-panel {<br \/>\n            height: 100%;<br \/>\n            width: 250px;<br \/>\n            position: absolute;<br \/>\n            top: 0;<br \/>\n            left: -218px; \/* Adjusted to show 32px *\/<br \/>\n            background-color: rgba(0, 0, 0, 0.5);<br \/>\n            overflow-x: hidden;<br \/>\n            transition: left 0.5s;<br \/>\n            z-index: 6;<br \/>\n        }<br \/>\n        .side-panel.open {<br \/>\n            left: 0;<br \/>\n        }<br \/>\n        .side-panel a {<br \/>\n            text-decoration: none;<br \/>\n            font-size: 9px;<br \/>\n            color: white;<br \/>\n            transition: 0.3s;<br \/>\n        }<br \/>\n        .side-panel a:hover {<br \/>\n            color: #f1f1f1;<br \/>\n        }<br \/>\n        .toggle-btn {<br \/>\n            font-size: 20px;<br \/>\n            cursor: pointer;<br \/>\n            background-color: #111;<br \/>\n            color: white;<br \/>\n            padding: 10px 15px;<br \/>\n            border: none;<br \/>\n            position: fixed;<br \/>\n            top: 50%;<br \/>\n            left: 32px; \/* Initial position corresponding to the visible part of the panel *\/<br \/>\n            transform: translateY(-50%);<br \/>\n            transition: left 0.5s;<br \/>\n            z-index: 7;<br \/>\n        }<br \/>\n        .toggle-btn.move-right {<br \/>\n            left: 282px; \/* Adjusted to account for the panel width and visible portion *\/<br \/>\n        }<br \/>\n        .title-container-bg {<br \/>\n            position: absolute; \/* Change to fixed positioning *\/<br \/>\n            bottom: 0;<\/p>\n<p>            width: 100%;<br \/>\n            \/*height: 130px;*\/<br \/>\n            \/*background-color: rgba(0, 0, 0, 0.29);  *\/\/*Black background with 29% opacity *\/<br \/>\n            z-index: 6; \/* Ensure it's above other content but below the toggle button *\/<br \/>\n           \/* display: flex;*\/<br \/>\n        }<br \/>\n        .title-container {<br \/>\n            position: relative; \/* Change to fixed positioning<br \/>\n            bottom: 0;<br \/>\n            left: 28px;  Adjusted to match the panel<br \/>\n            width: calc(100% + 218px);  Full width plus panel width<br \/>\n            height: 130px;<br \/>\n            background-color: rgba(0, 0, 0, 0.29);  Black background with 29% opacity *\/<br \/>\n            z-index: 6; \/* Ensure it's above other content but below the toggle button *\/<br \/>\n            display: flex;<br \/>\n            align-items: center;<br \/>\n            \/*transition: left 0.5s; Smooth transition *\/<br \/>\n        }<br \/>\n        .title-container.open {<br \/>\n            left: 252px; \/* Adjusted to match the panel when open *\/<br \/>\n        }<br \/>\n        .title-text {<br \/>\n            font-size:195px;<br \/>\n            color: rgba(51, 145, 186, 0.1); \/* Color #3391ba with 30% opacity *\/<br \/>\n            margin: 0;<br \/>\nheight:100%;<br \/>\n\/*margin-bottom:68px;*\/<br \/>\n        }<br \/>\n        .main-content {<br \/>\n            padding: 16px;<br \/>\n        }<\/p>\n<p>        .social-icons {<br \/>\n            margin: 10px;<br \/>\n            font-size: 10px;<br \/>\n        }<br \/>\n        .social-icons a {<br \/>\n            color: #7a7a7a;<br \/>\n            text-decoration: none;<br \/>\n        }<br \/>\n        .social-icons a:hover {<br \/>\n            color: #a9a9a9;<br \/>\n        }<br \/>\n        .description {<br \/>\nfont-size: 10px;<br \/>\nmargin: 0 10px;<br \/>\n}<br \/>\n    <\/style>\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n<\/head><br \/>\n<body><\/p>\n<div class=\"title-container-bg\">\n<div id=\"titleContainer\" class=\"title-container\">\n<h3 id=\"titleText\" class=\"title-text\">VFX<\/h3>\n<\/div>\n<\/div>\n<p><script><br \/>\n    document.addEventListener('DOMContentLoaded', function () {<br \/>\n        const sidePanel = document.getElementById(\"sidePanel\");<br \/>\n        const toggleBtn = document.getElementById(\"toggleBtn\");<br \/>\n        const titleContainer = document.getElementById(\"titleContainer\");<\/p>\n<p>        toggleBtn.addEventListener('click', function () {<br \/>\n            if (sidePanel.classList.contains(\"open\")) {<br \/>\n                sidePanel.classList.remove(\"open\");<br \/>\n                toggleBtn.innerHTML = \"<\";\n                toggleBtn.classList.remove(\"move-right\");\n                titleContainer.classList.remove(\"open\");\n            } else {\n                sidePanel.classList.add(\"open\");\n                toggleBtn.innerHTML = \"<\";\n                toggleBtn.classList.add(\"move-right\");\n                titleContainer.classList.add(\"open\");\n            }\n        });\n    });\n<\/script><\/p>\n<p><\/body><br \/>\n<\/html><\/p>\n<style>\n.fullvideo{z-index:50;}<br \/>\n.fade-in-image {<br \/>\nopacity: 0;<br \/>\ntransition: opacity 2s ease-in-out; \/* Default transition duration *\/<br \/>\n}<br \/>\n<\/style>\n<p>    <script><br \/>\n        window.onload = function() {<br \/>\n            const images = document.querySelectorAll('.fade-in-image');<br \/>\n            images.forEach(image => {<br \/>\n                image.style.opacity = 1;<br \/>\n            });<br \/>\n        };<br \/>\n    <\/script><\/p>","protected":false},"excerpt":{"rendered":"<p>VFX<\/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-673","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/framesfocus.com\/index.php\/wp-json\/wp\/v2\/pages\/673","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/framesfocus.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/framesfocus.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/framesfocus.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/framesfocus.com\/index.php\/wp-json\/wp\/v2\/comments?post=673"}],"version-history":[{"count":34,"href":"https:\/\/framesfocus.com\/index.php\/wp-json\/wp\/v2\/pages\/673\/revisions"}],"predecessor-version":[{"id":866,"href":"https:\/\/framesfocus.com\/index.php\/wp-json\/wp\/v2\/pages\/673\/revisions\/866"}],"wp:attachment":[{"href":"https:\/\/framesfocus.com\/index.php\/wp-json\/wp\/v2\/media?parent=673"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}