Add branded display animation and custom display solutions to platform row
This commit is contained in:
Matt Batchelder
@@ -12,7 +12,7 @@
|
||||
<!-- wp:oribi/platform-section {"label":"Our Devices","heading":"Commercial-Grade Hardware, Consumer-Level Simplicity","lead":"No IT degree required. Our players are designed to be set up in minutes and forgotten about for years."} -->
|
||||
<!-- wp:oribi/platform-row {"heading":"Works With Your Existing Screens","description":"Our player devices connect to any screen with an HDMI port — no proprietary hardware required. Already have displays? Plug in and go. Need a full setup? We offer bundled player-and-display packages too.","btnText":"Get a Quote","btnUrl":"/contact","tvStick":true} /-->
|
||||
<!-- wp:oribi/platform-row {"heading":"Never Goes Dark","description":"Every player caches content locally. If your internet connection drops, your displays continue running seamlessly with the latest synced content. When connectivity returns, new content pulls down automatically — no manual steps, no reboots.","btnText":"See Features","btnUrl":"/features","reversed":true,"neverGoesDark":true} /-->
|
||||
<!-- wp:oribi/platform-row {"heading":"Locked Down by Default","description":"Secure boot, encrypted storage, and encrypted communications come standard on every device. Remote management lets you monitor, update, and troubleshoot from anywhere. Firmware updates roll out over the air with zero downtime.","btnText":"Learn More","btnUrl":"/about"} /-->
|
||||
<!-- wp:oribi/platform-row {"heading":"Custom Display Solutions","description":"Create a polished, on-brand experience with our Custom Display Platform. Seamlessly integrated with your interactive signage, it ensures your logo and branding appear consistently across every screen — reinforcing recognition at every touchpoint. Ideal for businesses looking to elevate their presence and deliver a professional, cohesive visual identity.","btnText":"Get a Quote","btnUrl":"/contact","brandedAnim":true} /-->
|
||||
<!-- /wp:oribi/platform-section -->
|
||||
|
||||
<!-- wp:oribi/feature-section {"variant":"alt","label":"Device Specifications","heading":"What\u0027s Inside Every Player","lead":"Purpose-built components selected for reliability, performance, and silent operation in any environment.","columns":3} -->
|
||||
|
||||
@@ -5011,3 +5011,317 @@ p:last-child { margin-bottom: 0; }
|
||||
.ngd-cloud__path { stroke: #4CAF50; opacity: .8; }
|
||||
.ngd-signal__dots { opacity: 1; }
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════
|
||||
BRANDED DISPLAY ANIMATION (.platform-visual.has-branded)
|
||||
Sequence (8 s loop per screen, staggered by 0.5 s):
|
||||
0 – 25 % : Boot splash — logo fades in centred on dark screen
|
||||
25 – 40 % : Transition — logo shrinks to header, brand bar grows
|
||||
40 – 90 % : Content — UI blocks slide in beneath brand header
|
||||
90 – 100% : Reset — fade out, loop
|
||||
═══════════════════════════════════════════════════════════ */
|
||||
|
||||
/* ── Wrapper overrides ─────────────────────────────────────── */
|
||||
.platform-visual.has-branded {
|
||||
background: none !important;
|
||||
border: none !important;
|
||||
border-radius: 0;
|
||||
aspect-ratio: unset;
|
||||
padding: 0;
|
||||
overflow: visible;
|
||||
position: relative;
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
/* ── Stage ─────────────────────────────────────────────────── */
|
||||
.bd-stage {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 420px;
|
||||
aspect-ratio: 4/3;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
/* ── Shared device styles ─────────────────────────────────── */
|
||||
.bd-device {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
.bd-device__body {
|
||||
background: #111;
|
||||
border: 3px solid #111;
|
||||
border-radius: 5px;
|
||||
outline: 1px solid #000;
|
||||
padding: 2px;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
position: relative;
|
||||
box-shadow: 0 10px 32px rgba(0,0,0,.50);
|
||||
}
|
||||
.bd-device__screen {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 2px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background:
|
||||
repeating-linear-gradient(
|
||||
180deg,
|
||||
transparent, transparent 3px,
|
||||
rgba(0,0,0,.08) 3px, rgba(0,0,0,.08) 4px
|
||||
),
|
||||
linear-gradient(135deg, #0c1016 0%, #151c28 60%, #0c1016 100%);
|
||||
}
|
||||
.bd-device__label {
|
||||
font-size: 10px;
|
||||
color: rgba(255,255,255,.45);
|
||||
margin-top: 6px;
|
||||
letter-spacing: .5px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* ── Tablet (portrait kiosk) ──────────────────────────────── */
|
||||
.bd-device--tablet .bd-device__body {
|
||||
width: 80px;
|
||||
height: 120px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.bd-device--tablet .bd-device__screen { border-radius: 4px; }
|
||||
.bd-device--tablet { animation-delay: 0s; }
|
||||
|
||||
/* ── Wall display (wide landscape) ────────────────────────── */
|
||||
.bd-device--wall .bd-device__body {
|
||||
width: 180px;
|
||||
height: 108px;
|
||||
}
|
||||
.bd-mount {
|
||||
width: 6px;
|
||||
height: 18px;
|
||||
background: #222;
|
||||
margin-top: -1px;
|
||||
border-radius: 0 0 2px 2px;
|
||||
}
|
||||
.bd-device--wall { animation-delay: 0.5s; }
|
||||
|
||||
/* ── Monitor on stand ─────────────────────────────────────── */
|
||||
.bd-device--monitor .bd-device__body {
|
||||
width: 120px;
|
||||
height: 80px;
|
||||
}
|
||||
.bd-stand {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-top: -1px;
|
||||
}
|
||||
.bd-stand__stem {
|
||||
width: 6px;
|
||||
height: 14px;
|
||||
background: #222;
|
||||
}
|
||||
.bd-stand__base {
|
||||
width: 36px;
|
||||
height: 5px;
|
||||
background: #222;
|
||||
border-radius: 0 0 4px 4px;
|
||||
}
|
||||
.bd-device--monitor { animation-delay: 1s; }
|
||||
|
||||
/* ── Boot splash overlay ──────────────────────────────────── */
|
||||
.bd-splash {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 2;
|
||||
animation: bd-splash 8s ease-in-out infinite;
|
||||
}
|
||||
.bd-device--wall .bd-splash { animation-delay: 0.5s; }
|
||||
.bd-device--monitor .bd-splash { animation-delay: 1s; }
|
||||
|
||||
.bd-splash__logo {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
background: #4CAF50;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 0 20px rgba(76,175,80,.5), 0 0 50px rgba(76,175,80,.15);
|
||||
animation: bd-logo-pulse 8s ease-in-out infinite;
|
||||
}
|
||||
.bd-device--wall .bd-splash__logo {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
animation-delay: 0.5s;
|
||||
}
|
||||
.bd-device--monitor .bd-splash__logo {
|
||||
animation-delay: 1s;
|
||||
}
|
||||
|
||||
/* ── Branded UI chrome ────────────────────────────────────── */
|
||||
.bd-ui {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0;
|
||||
opacity: 0;
|
||||
z-index: 1;
|
||||
animation: bd-ui-show 8s ease-in-out infinite;
|
||||
}
|
||||
.bd-device--wall .bd-ui { animation-delay: 0.5s; }
|
||||
.bd-device--monitor .bd-ui { animation-delay: 1s; }
|
||||
|
||||
/* Brand header bar */
|
||||
.bd-ui__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 4px 5px;
|
||||
background: rgba(76,175,80,.15);
|
||||
border-bottom: 1px solid rgba(76,175,80,.25);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.bd-ui__logo {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: #4CAF50;
|
||||
border-radius: 3px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.bd-ui__brand-bar {
|
||||
flex: 1;
|
||||
height: 4px;
|
||||
background: rgba(76,175,80,.4);
|
||||
border-radius: 2px;
|
||||
max-width: 50px;
|
||||
animation: bd-bar-grow 8s ease-in-out infinite;
|
||||
}
|
||||
.bd-device--wall .bd-ui__brand-bar { animation-delay: 0.5s; }
|
||||
.bd-device--monitor .bd-ui__brand-bar { animation-delay: 1s; }
|
||||
|
||||
/* Content area */
|
||||
.bd-ui__content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
padding: 6px 5px;
|
||||
animation: bd-content-slide 8s ease-in-out infinite;
|
||||
}
|
||||
.bd-device--wall .bd-ui__content { animation-delay: 0.5s; }
|
||||
.bd-device--monitor .bd-ui__content { animation-delay: 1s; }
|
||||
|
||||
.bd-ui__block {
|
||||
border-radius: 2px;
|
||||
}
|
||||
.bd-ui__block--txt {
|
||||
height: 4px;
|
||||
background: rgba(255,255,255,.18);
|
||||
}
|
||||
.bd-ui__block--short {
|
||||
width: 60%;
|
||||
}
|
||||
.bd-ui__block--img {
|
||||
flex: 1;
|
||||
min-height: 16px;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(76,175,80,.10) 0%,
|
||||
rgba(76,175,80,.05) 100%
|
||||
);
|
||||
border: 1px solid rgba(76,175,80,.12);
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════
|
||||
KEYFRAMES (8 s cycle)
|
||||
═══════════════════════════════════════════════════════════ */
|
||||
|
||||
/* Splash: visible 0–30%, fades out 30–40%, hidden rest */
|
||||
@keyframes bd-splash {
|
||||
0% { opacity: 0; }
|
||||
5% { opacity: 1; }
|
||||
25% { opacity: 1; }
|
||||
35% { opacity: 0; }
|
||||
100% { opacity: 0; }
|
||||
}
|
||||
|
||||
/* Logo pulse glow during splash */
|
||||
@keyframes bd-logo-pulse {
|
||||
0%, 25% { transform: scale(1); box-shadow: 0 0 20px rgba(76,175,80,.5), 0 0 50px rgba(76,175,80,.15); }
|
||||
12% { transform: scale(1.08); box-shadow: 0 0 28px rgba(76,175,80,.7), 0 0 60px rgba(76,175,80,.25); }
|
||||
35%, 100% { transform: scale(0.6); opacity: 0; }
|
||||
}
|
||||
|
||||
/* UI chrome: hidden 0–28%, fades in 28–38%, visible until 88%, fades out */
|
||||
@keyframes bd-ui-show {
|
||||
0%, 28% { opacity: 0; }
|
||||
38% { opacity: 1; }
|
||||
88% { opacity: 1; }
|
||||
96%, 100% { opacity: 0; }
|
||||
}
|
||||
|
||||
/* Brand bar grows in from 0 width */
|
||||
@keyframes bd-bar-grow {
|
||||
0%, 30% { transform: scaleX(0); transform-origin: left; }
|
||||
42% { transform: scaleX(1); transform-origin: left; }
|
||||
88% { transform: scaleX(1); }
|
||||
96%, 100% { transform: scaleX(0); }
|
||||
}
|
||||
|
||||
/* Content blocks slide up into view */
|
||||
@keyframes bd-content-slide {
|
||||
0%, 35% { opacity: 0; transform: translateY(10px); }
|
||||
48% { opacity: 1; transform: translateY(0); }
|
||||
88% { opacity: 1; transform: translateY(0); }
|
||||
96%, 100% { opacity: 0; transform: translateY(4px); }
|
||||
}
|
||||
|
||||
/* ── Scanline sweep (reuses da-scan) ───────────────────────── */
|
||||
.bd-device__screen::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, transparent, rgba(76,175,80,.18), transparent);
|
||||
animation: da-scan 4s linear infinite;
|
||||
pointer-events: none;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
/* ── Responsive ─────────────────────────────────────────────── */
|
||||
@media (max-width: 900px) {
|
||||
.bd-stage { max-width: 360px; gap: 12px; }
|
||||
.bd-device--tablet .bd-device__body { width: 64px; height: 96px; }
|
||||
.bd-device--wall .bd-device__body { width: 148px; height: 88px; }
|
||||
.bd-device--monitor .bd-device__body { width: 96px; height: 64px; }
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.bd-stage { max-width: 300px; gap: 8px; }
|
||||
.bd-device--tablet .bd-device__body { width: 52px; height: 78px; }
|
||||
.bd-device--wall .bd-device__body { width: 120px; height: 72px; }
|
||||
.bd-device--monitor .bd-device__body { width: 78px; height: 52px; }
|
||||
.bd-device__label { font-size: 8px; }
|
||||
.bd-stand__base { width: 28px; }
|
||||
}
|
||||
|
||||
/* ── Reduced-motion overrides ───────────────────────────────── */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.bd-splash,
|
||||
.bd-splash__logo,
|
||||
.bd-ui,
|
||||
.bd-ui__brand-bar,
|
||||
.bd-ui__content,
|
||||
.bd-device__screen::after { animation: none !important; }
|
||||
/* Static fallback: show branded UI */
|
||||
.bd-splash { opacity: 0; }
|
||||
.bd-ui { opacity: 1; }
|
||||
.bd-ui__brand-bar { transform: scaleX(1); }
|
||||
.bd-ui__content { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
@@ -557,6 +557,7 @@ add_action( 'init', function () {
|
||||
'tvStick' => [ 'type' => 'boolean', 'default' => false ],
|
||||
'cameraAnim' => [ 'type' => 'boolean', 'default' => false ],
|
||||
'neverGoesDark'=> [ 'type' => 'boolean', 'default' => false ],
|
||||
'brandedAnim' => [ 'type' => 'boolean', 'default' => false ],
|
||||
],
|
||||
'supports' => $block_supports,
|
||||
'render_callback' => 'oribi_render_platform_row',
|
||||
@@ -1647,6 +1648,75 @@ function oribi_render_platform_row( $a ) {
|
||||
|
||||
$visual_html = $ngd;
|
||||
$visual_cls = 'platform-visual has-ngd';
|
||||
} elseif ( ! empty( $a['brandedAnim'] ) ) {
|
||||
/* ── Custom Display Solutions: branded screens cascade animation ── */
|
||||
$bd = '<div class="bd-stage" aria-hidden="true">';
|
||||
|
||||
/* ── Screen 1: Tablet (portrait kiosk) ── */
|
||||
$bd .= '<div class="bd-device bd-device--tablet">';
|
||||
$bd .= '<div class="bd-device__body">';
|
||||
$bd .= '<div class="bd-device__screen">';
|
||||
$bd .= '<div class="bd-splash">';
|
||||
$bd .= '<div class="bd-splash__logo"></div>';
|
||||
$bd .= '</div>';
|
||||
$bd .= '<div class="bd-ui">';
|
||||
$bd .= '<div class="bd-ui__header"><div class="bd-ui__logo"></div><div class="bd-ui__brand-bar"></div></div>';
|
||||
$bd .= '<div class="bd-ui__content">';
|
||||
$bd .= '<div class="bd-ui__block bd-ui__block--img"></div>';
|
||||
$bd .= '<div class="bd-ui__block bd-ui__block--txt"></div>';
|
||||
$bd .= '<div class="bd-ui__block bd-ui__block--txt bd-ui__block--short"></div>';
|
||||
$bd .= '</div>';
|
||||
$bd .= '</div>';
|
||||
$bd .= '</div>';
|
||||
$bd .= '</div>';
|
||||
$bd .= '<span class="bd-device__label">Kiosk</span>';
|
||||
$bd .= '</div>';
|
||||
|
||||
/* ── Screen 2: Wide wall-mount (landscape) ── */
|
||||
$bd .= '<div class="bd-device bd-device--wall">';
|
||||
$bd .= '<div class="bd-device__body">';
|
||||
$bd .= '<div class="bd-device__screen">';
|
||||
$bd .= '<div class="bd-splash">';
|
||||
$bd .= '<div class="bd-splash__logo"></div>';
|
||||
$bd .= '</div>';
|
||||
$bd .= '<div class="bd-ui">';
|
||||
$bd .= '<div class="bd-ui__header"><div class="bd-ui__logo"></div><div class="bd-ui__brand-bar"></div></div>';
|
||||
$bd .= '<div class="bd-ui__content">';
|
||||
$bd .= '<div class="bd-ui__block bd-ui__block--txt"></div>';
|
||||
$bd .= '<div class="bd-ui__block bd-ui__block--img"></div>';
|
||||
$bd .= '<div class="bd-ui__block bd-ui__block--txt bd-ui__block--short"></div>';
|
||||
$bd .= '</div>';
|
||||
$bd .= '</div>';
|
||||
$bd .= '</div>';
|
||||
$bd .= '</div>';
|
||||
$bd .= '<div class="bd-mount"></div>';
|
||||
$bd .= '<span class="bd-device__label">Wall Display</span>';
|
||||
$bd .= '</div>';
|
||||
|
||||
/* ── Screen 3: Monitor on stand ── */
|
||||
$bd .= '<div class="bd-device bd-device--monitor">';
|
||||
$bd .= '<div class="bd-device__body">';
|
||||
$bd .= '<div class="bd-device__screen">';
|
||||
$bd .= '<div class="bd-splash">';
|
||||
$bd .= '<div class="bd-splash__logo"></div>';
|
||||
$bd .= '</div>';
|
||||
$bd .= '<div class="bd-ui">';
|
||||
$bd .= '<div class="bd-ui__header"><div class="bd-ui__logo"></div><div class="bd-ui__brand-bar"></div></div>';
|
||||
$bd .= '<div class="bd-ui__content">';
|
||||
$bd .= '<div class="bd-ui__block bd-ui__block--txt"></div>';
|
||||
$bd .= '<div class="bd-ui__block bd-ui__block--txt bd-ui__block--short"></div>';
|
||||
$bd .= '<div class="bd-ui__block bd-ui__block--img"></div>';
|
||||
$bd .= '</div>';
|
||||
$bd .= '</div>';
|
||||
$bd .= '</div>';
|
||||
$bd .= '</div>';
|
||||
$bd .= '<div class="bd-stand"><div class="bd-stand__stem"></div><div class="bd-stand__base"></div></div>';
|
||||
$bd .= '<span class="bd-device__label">Reception</span>';
|
||||
$bd .= '</div>';
|
||||
|
||||
$bd .= '</div>'; /* bd-stage */
|
||||
$visual_html = $bd;
|
||||
$visual_cls = 'platform-visual has-branded';
|
||||
} elseif ( ! empty( $a['cameraAnim'] ) ) {
|
||||
$ca = '<div class="cam-stage" aria-hidden="true">';
|
||||
|
||||
|
||||
Reference in New Issue
Block a user