From 6b8b6b2328f42cf0cf0b548d5df2fd261f1600b9 Mon Sep 17 00:00:00 2001 From: Matt Batchelder Date: Sat, 21 Feb 2026 17:55:50 -0500 Subject: [PATCH] Sync: implement camera animation rendering function and refactor platform row logic --- theme/assets/css/main.css | 25 ++++++---- theme/blocks/index.php | 102 +++++++++++++++++++------------------- 2 files changed, 65 insertions(+), 62 deletions(-) diff --git a/theme/assets/css/main.css b/theme/assets/css/main.css index b0aa6b1..85f3979 100644 --- a/theme/assets/css/main.css +++ b/theme/assets/css/main.css @@ -3812,6 +3812,9 @@ p:last-child { margin-bottom: 0; } Photo camera (left) + product scene (centre) + VHS camcorder on tripod (right) ══════════════════════════════════════════════════════════════════════════════ */ .platform-visual.has-camera { + --cam-cycle: 9s; + --cam-rec-cycle: 1.4s; + --cam-lens-cycle: 4s; background: none !important; border: none !important; border-radius: 0; @@ -3864,20 +3867,20 @@ p:last-child { margin-bottom: 0; } display: block; border-radius: 8px; } -.cam-subject--1 { animation: cam-subject-1 9s ease-in-out infinite; } +.cam-subject--1 { animation: cam-subject-1 var(--cam-cycle) ease-in-out infinite; } .cam-subject--1::before { width: 40px; height: 58px; background: linear-gradient(135deg, #064e3b 0%, #4ade80 100%); box-shadow: 0 0 18px rgba(74,222,128,.4); } -.cam-subject--2 { animation: cam-subject-2 9s ease-in-out infinite; } +.cam-subject--2 { animation: cam-subject-2 var(--cam-cycle) ease-in-out infinite; } .cam-subject--2::before { width: 32px; height: 68px; background: linear-gradient(160deg, #78350f 0%, #fbbf24 100%); border-radius: 6px 6px 12px 12px; box-shadow: 0 0 18px rgba(251,191,36,.35); } -.cam-subject--3 { animation: cam-subject-3 9s ease-in-out infinite; } +.cam-subject--3 { animation: cam-subject-3 var(--cam-cycle) ease-in-out infinite; } .cam-subject--3::before { width: 74px; height: 50px; background: linear-gradient(135deg, #1e1b4b 0%, #818cf8 100%); @@ -3891,7 +3894,7 @@ p:last-child { margin-bottom: 0; } background: #fff; opacity: 0; pointer-events: none; - animation: cam-flash-pulse 9s linear infinite; + animation: cam-flash-pulse var(--cam-cycle) linear infinite; } /* CRT scanlines from the video cam */ .cam-vid-overlay { @@ -3940,7 +3943,7 @@ p:last-child { margin-bottom: 0; } top: 2px; left: 4px; right: 4px; bottom: 2px; background: #c8c870; border-radius: 1px; - animation: pc-flash-glow 9s linear infinite; + animation: pc-flash-glow var(--cam-cycle) linear infinite; } /* Top strip */ .pc-top { @@ -3964,7 +3967,7 @@ p:last-child { margin-bottom: 0; } border-radius: 50%; border: 2px solid var(--color-border); box-shadow: 0 0 0 1px rgba(255,255,255,.15), inset 0 1px 0 rgba(255,255,255,.1); - animation: pc-shutter 9s linear infinite; + animation: pc-shutter var(--cam-cycle) linear infinite; transform-origin: center; } .pc-viewfinder { @@ -4052,9 +4055,9 @@ p:last-child { margin-bottom: 0; } height: 38px; border-radius: 1px; } -.pc-print--1 { left: 0; top: 0; transform-origin: bottom center; animation: pc-print-1 9s linear infinite; } -.pc-print--2 { left: 18px; top: 0; transform-origin: bottom center; animation: pc-print-2 9s linear infinite; } -.pc-print--3 { left: 36px; top: 0; transform-origin: bottom center; animation: pc-print-3 9s linear infinite; } +.pc-print--1 { left: 0; top: 0; transform-origin: bottom center; animation: pc-print-1 var(--cam-cycle) linear infinite; } +.pc-print--2 { left: 18px; top: 0; transform-origin: bottom center; animation: pc-print-2 var(--cam-cycle) linear infinite; } +.pc-print--3 { left: 36px; top: 0; transform-origin: bottom center; animation: pc-print-3 var(--cam-cycle) linear infinite; } .pc-print--1 .pc-print__img { background: linear-gradient(135deg, #064e3b, #4ade80); } .pc-print--2 .pc-print__img { background: linear-gradient(160deg, #78350f, #fbbf24); } .pc-print--3 .pc-print__img { background: linear-gradient(135deg, #1e1b4b, #818cf8); } @@ -4124,7 +4127,7 @@ p:last-child { margin-bottom: 0; } display: flex; align-items: center; justify-content: center; - animation: vc-lens-zoom 4s ease-in-out infinite; + animation: vc-lens-zoom var(--cam-lens-cycle) ease-in-out infinite; } .vc-lens-tip { width: 26px; height: 26px; @@ -4168,7 +4171,7 @@ p:last-child { margin-bottom: 0; } border-radius: 50%; background: #ef4444; box-shadow: 0 0 8px #ef4444, 0 0 16px rgba(239,68,68,.4); - animation: vc-rec-blink 1.4s ease-in-out infinite; + animation: vc-rec-blink var(--cam-rec-cycle) ease-in-out infinite; } /* Eyepiece — extends RIGHT */ .vc-eyepiece { diff --git a/theme/blocks/index.php b/theme/blocks/index.php index 1b5ad02..975f179 100644 --- a/theme/blocks/index.php +++ b/theme/blocks/index.php @@ -1356,6 +1356,56 @@ function oribi_render_platform_section( $a, $content ) { } /* ── Platform Row (child - renders one service row) ────────────────────────── */ +function oribi_render_camera_animation() { + return <<<'HTML' + +HTML; +} + function oribi_render_platform_row( $a ) { $rev = ! empty( $a['reversed'] ) ? ' reverse' : ''; $img_id = ! empty( $a['imgId'] ) ? intval( $a['imgId'] ) : 0; @@ -1742,57 +1792,7 @@ function oribi_render_platform_row( $a ) { $visual_html = $bd; $visual_cls = 'platform-visual has-branded'; } elseif ( ! empty( $a['cameraAnim'] ) ) { - $ca = ''; // cam-stage - $visual_html = $ca; + $visual_html = oribi_render_camera_animation(); $visual_cls = 'platform-visual has-camera'; /* ── Gallery TV Slideshow ───────────────────────────────── */