AR Mural Experience

<!-- Content Only (Hero is managed by template) --> <p>&nbsp;</p> <!-- Discontinued Alert --> <div class="row justify-content-center mb-5" data-aos="fade-down"> <div class="col-lg-8 text-center"> <div class="alert alert-danger d-inline-flex align-items-center px-4 py-3 rounded-pill border border-danger bg-danger bg-opacity-25 text-white shadow-lg" role="alert"><strong>Note:</strong>&nbsp;This project is preserved for archival purposes. Meta has officially discontinued Spark AR.</div> </div> </div> <!-- 1. Concept & Demo --> <div class="row justify-content-center mb-5"> <div class="col-lg-10"> <div class="p-5 border border-secondary bg-black bg-opacity-50 rounded-4 shadow-lg" data-aos="fade-up"> <div class="row align-items-center"> <div class="col-md-6 mb-4 mb-md-0"> <h2 class="h3 fw-bold text-white mb-3">Bringing Art to Life</h2> <p class="text-white-50 leading-relaxed">By selecting a specific section of the physical artwork as a tracker, I overlaid interactive falling peaches, floating particle effects, and lo-fi audio to create a peaceful, digital layer on top of the physical world.</p> </div> <div class="col-md-6 text-center"> <div class="rounded-4 overflow-hidden shadow-lg border border-secondary position-relative"><img class="img-fluid w-100" src="https://i.ibb.co/6R85gnq/AR-Mural.gif" alt="AR Demo"> <div class="position-absolute bottom-0 start-0 w-100 p-2 bg-black bg-opacity-50 text-white small">Live Demo</div> </div> </div> </div> </div> </div> </div> <!-- 2. The Platform: Spark AR (Updated Visuals) --> <h3 class="fw-bold text-white mb-4 text-center mt-5" data-aos="fade-up">The Platform</h3> <div class="row justify-content-center mb-5" data-aos="fade-up"> <div class="col-lg-10"> <div class="rounded-4 overflow-hidden border border-secondary bg-white bg-opacity-05 shadow-lg"> <div class="row g-0"><!-- Left: Identity --> <div class="col-md-4 bg-black bg-opacity-50 p-5 d-flex flex-column align-items-center justify-content-center text-center border-end border-secondary"><img class="rounded-circle shadow-lg mb-4" style="width: 120px; height: 120px; border: 3px solid rgba(255,255,255,0.1);" src="https://pbs.twimg.com/profile_images/1580342305160052737/-2VsBizT.jpg" alt="Spark AR Logo"> <h4 class="fw-bold text-white">Meta Spark Studio</h4> <span class="badge bg-danger bg-opacity-25 text-white border border-danger px-3 py-2 mt-2 rounded-pill">Discontinued</span> <p class="text-white-50 small mt-3 mb-0 font-monospace">v181.0 &bull; 2017-2025</p> </div> <!-- Right: Analysis --> <div class="col-md-8 p-5"> <div class="mb-4"> <h5 class="fw-bold text-white mb-3">The Workspace</h5> <p class="text-white-50 mb-3">Spark AR provided a powerful node-based <strong>Patch Editor</strong> for visual scripting and supported JavaScript for advanced logic. It allowed creators to build complex world interactions without deep engine knowledge.</p> <!-- Screenshot of Program --> <div class="rounded-3 overflow-hidden border border-secondary shadow-sm mt-3"><img class="img-fluid w-100 opacity-75" src="https://assets.content.technologyadvice.com/637146766351085402_703682ab1f.webp" alt="Spark AR Interface"></div> </div> <div class="mt-4 pt-4 border-top border-secondary border-opacity-25"> <h5 class="fw-bold text-white mb-2">Why it Failed</h5> <p class="text-white-50 small mb-0">Meta pivoted resources toward AI and mixed-reality hardware (Quest), shutting down the open third-party ecosystem. This project stands as a testament to the "Golden Era" of social AR.</p> </div> </div> </div> </div> </div> </div> <!-- 3. Original Artwork (Modal Trigger) --> <div class="row justify-content-center mb-5" data-aos="zoom-in"> <div class="col-lg-10 text-center"> <p class="text-white-50 mb-3 small text-uppercase tracking-widest">Original Mural Artwork</p> <div class="d-inline-block position-relative rounded-4 overflow-hidden border border-secondary shadow-lg group cursor-pointer" data-bs-toggle="modal" data-bs-target="#imageModal"><img class="img-fluid" style="max-width: 450px;" src="https://i.ibb.co/4V1Ls5G/Mural-Edit.png" alt="Original Mural"> <!-- Explicit Hover Overlay --> <div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center bg-black bg-opacity-60 opacity-0 group-hover-opacity transition-all duration-300"> <div class="text-center"><br><span class="text-white fw-bold border border-white px-3 py-1 rounded-pill backdrop-blur desktop-only">Click to Enlarge</span></div> </div> <!-- Mobile Hint --> <div class="position-absolute bottom-0 start-0 w-100 p-2 bg-black bg-opacity-70 text-white small d-md-none">Tap to Zoom</div> </div> </div> </div> <!-- Image Modal --> <div id="imageModal" class="modal fade" style="z-index: 1055;" tabindex="-1" aria-hidden="true"> <div class="modal-dialog modal-xl modal-dialog-centered"> <div class="modal-content border-0 bg-transparent shadow-none"> <div class="modal-body p-0 text-center position-relative"><button class="btn-close btn-close-white position-absolute top-0 end-0 m-3 z-index-10 bg-black rounded-circle p-2 shadow-lg" type="button" data-bs-dismiss="modal" aria-label="Close"></button> <img class="img-fluid rounded-4 shadow-lg border border-secondary" style="max-height: 90vh;" src="https://i.ibb.co/4V1Ls5G/Mural-Edit.png" alt="Full Size Mural"></div> </div> </div> </div>

<!-- Content Only (Hero is managed by template) --> <p>&nbsp;</p> <!-- Discontinued Alert --> <div class="row justify-content-center mb-5" data-aos="fade-down"> <div class="col-lg-8 text-center"> <div class="alert alert-danger d-inline-flex align-items-center px-4 py-3 rounded-pill border border-danger bg-danger bg-opacity-25 text-white shadow-lg" role="alert"><strong>Note:</strong>&nbsp;This project is preserved for archival purposes. Meta has officially discontinued Spark AR.</div> </div> </div> <!-- 1. Concept & Demo --> <div class="row justify-content-center mb-5"> <div class="col-lg-10"> <div class="p-5 border border-secondary bg-black bg-opacity-50 rounded-4 shadow-lg" data-aos="fade-up"> <div class="row align-items-center"> <div class="col-md-6 mb-4 mb-md-0"> <h2 class="h3 fw-bold text-white mb-3">Bringing Art to Life</h2> <p class="text-white-50 leading-relaxed">By selecting a specific section of the physical artwork as a tracker, I overlaid interactive falling peaches, floating particle effects, and lo-fi audio to create a peaceful, digital layer on top of the physical world.</p> </div> <div class="col-md-6 text-center"> <div class="rounded-4 overflow-hidden shadow-lg border border-secondary position-relative"><img class="img-fluid w-100" src="https://i.ibb.co/6R85gnq/AR-Mural.gif" alt="AR Demo"> <div class="position-absolute bottom-0 start-0 w-100 p-2 bg-black bg-opacity-50 text-white small">Live Demo</div> </div> </div> </div> </div> </div> </div> <!-- 2. The Platform: Spark AR (Updated Visuals) --> <h3 class="fw-bold text-white mb-4 text-center mt-5" data-aos="fade-up">The Platform</h3> <div class="row justify-content-center mb-5" data-aos="fade-up"> <div class="col-lg-10"> <div class="rounded-4 overflow-hidden border border-secondary bg-white bg-opacity-05 shadow-lg"> <div class="row g-0"><!-- Left: Identity --> <div class="col-md-4 bg-black bg-opacity-50 p-5 d-flex flex-column align-items-center justify-content-center text-center border-end border-secondary"><img class="rounded-circle shadow-lg mb-4" style="width: 120px; height: 120px; border: 3px solid rgba(255,255,255,0.1);" src="https://pbs.twimg.com/profile_images/1580342305160052737/-2VsBizT.jpg" alt="Spark AR Logo"> <h4 class="fw-bold text-white">Meta Spark Studio</h4> <span class="badge bg-danger bg-opacity-25 text-white border border-danger px-3 py-2 mt-2 rounded-pill">Discontinued</span> <p class="text-white-50 small mt-3 mb-0 font-monospace">v181.0 &bull; 2017-2025</p> </div> <!-- Right: Analysis --> <div class="col-md-8 p-5"> <div class="mb-4"> <h5 class="fw-bold text-white mb-3">The Workspace</h5> <p class="text-white-50 mb-3">Spark AR provided a powerful node-based <strong>Patch Editor</strong> for visual scripting and supported JavaScript for advanced logic. It allowed creators to build complex world interactions without deep engine knowledge.</p> <!-- Screenshot of Program --> <div class="rounded-3 overflow-hidden border border-secondary shadow-sm mt-3"><img class="img-fluid w-100 opacity-75" src="https://assets.content.technologyadvice.com/637146766351085402_703682ab1f.webp" alt="Spark AR Interface"></div> </div> <div class="mt-4 pt-4 border-top border-secondary border-opacity-25"> <h5 class="fw-bold text-white mb-2">Why it Failed</h5> <p class="text-white-50 small mb-0">Meta pivoted resources toward AI and mixed-reality hardware (Quest), shutting down the open third-party ecosystem. This project stands as a testament to the "Golden Era" of social AR.</p> </div> </div> </div> </div> </div> </div> <!-- 3. Original Artwork (Modal Trigger) --> <div class="row justify-content-center mb-5" data-aos="zoom-in"> <div class="col-lg-10 text-center"> <p class="text-white-50 mb-3 small text-uppercase tracking-widest">Original Mural Artwork</p> <div class="d-inline-block position-relative rounded-4 overflow-hidden border border-secondary shadow-lg group cursor-pointer" data-bs-toggle="modal" data-bs-target="#imageModal"><img class="img-fluid" style="max-width: 450px;" src="https://i.ibb.co/4V1Ls5G/Mural-Edit.png" alt="Original Mural"> <!-- Explicit Hover Overlay --> <div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center bg-black bg-opacity-60 opacity-0 group-hover-opacity transition-all duration-300"> <div class="text-center"><br><span class="text-white fw-bold border border-white px-3 py-1 rounded-pill backdrop-blur desktop-only">Click to Enlarge</span></div> </div> <!-- Mobile Hint --> <div class="position-absolute bottom-0 start-0 w-100 p-2 bg-black bg-opacity-70 text-white small d-md-none">Tap to Zoom</div> </div> </div> </div> <!-- Image Modal --> <div id="imageModal" class="modal fade" style="z-index: 1055;" tabindex="-1" aria-hidden="true"> <div class="modal-dialog modal-xl modal-dialog-centered"> <div class="modal-content border-0 bg-transparent shadow-none"> <div class="modal-body p-0 text-center position-relative"><button class="btn-close btn-close-white position-absolute top-0 end-0 m-3 z-index-10 bg-black rounded-circle p-2 shadow-lg" type="button" data-bs-dismiss="modal" aria-label="Close"></button> <img class="img-fluid rounded-4 shadow-lg border border-secondary" style="max-height: 90vh;" src="https://i.ibb.co/4V1Ls5G/Mural-Edit.png" alt="Full Size Mural"></div> </div> </div> </div>