Free

OTT Offline Sync – Amethyst Cinematic

<div class="fp-streaming-media-cloud-local-download-ui">
    <div class="fp-streaming-media-cloud-local-download-ui-stage">
        
        <div class="fp-streaming-media-cloud-local-download-ui-card">
            
            <div class="fp-streaming-media-cloud-local-download-ui-thumb fp-cascade-1">
                <div class="fp-streaming-media-cloud-local-download-ui-thumb-play">
                    <svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
                </div>
            </div>

            <div class="fp-streaming-media-cloud-local-download-ui-meta fp-cascade-2">
                <h3 class="fp-streaming-media-cloud-local-download-ui-title">Oppenheimer</h3>
                <p class="fp-streaming-media-cloud-local-download-ui-subtitle">IMAX Enhanced • 6.8 GB</p>
            </div>

            <div class="fp-streaming-media-cloud-local-download-ui-sync-area fp-cascade-3">
                <div class="fp-streaming-media-cloud-local-download-ui-icon">
                    <svg viewBox="0 0 24 24"><path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96z"/></svg>
                </div>

                <div class="fp-streaming-media-cloud-local-download-ui-track" id="fp-streaming-media-cloud-local-download-ui-track">
                </div>

                <div class="fp-streaming-media-cloud-local-download-ui-icon">
                    <div class="fp-streaming-media-cloud-local-download-ui-ring"></div>
                    <svg viewBox="0 0 24 24"><path d="M17 1.01L7 1c-1.1 0-2 .9-2 2v18c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V3c0-1.1-.9-1.99-2-1.99zM17 19H7V5h10v14z"/></svg>
                </div>
            </div>

            <div class="fp-streaming-media-cloud-local-download-ui-progress-container fp-cascade-4">
                <div class="fp-streaming-media-cloud-local-download-ui-progress-header">
                    <span class="fp-streaming-media-cloud-local-download-ui-status-text" id="fp-streaming-media-cloud-local-download-ui-status">SYNCING TO DEVICE...</span>
                    <span class="fp-streaming-media-cloud-local-download-ui-pct" id="fp-streaming-media-cloud-local-download-ui-pct">0%</span>
                </div>
                <div class="fp-streaming-media-cloud-local-download-ui-progress-bar">
                    <div class="fp-streaming-media-cloud-local-download-ui-progress-fill" id="fp-streaming-media-cloud-local-download-ui-bar"></div>
                </div>
            </div>

        </div>

    </div>
</div>

.fp-streaming-media-cloud-local-download-ui {
    --fp-container-width: 100%;
    --fp-max-width: 500px;
    --fp-aspect-ratio: 1 / 1;

    --fp-primary-color: #ffffff;      
    --fp-secondary-color: #f4f4f6;    
    --fp-muted-color: #0f0f0f;        
    --fp-soft-color: #e5e5e5;         
    --fp-background-color: transparent;

    --fp-info-color: #9b59b6;         
    --fp-warning-color: #8e44ad;      
    --fp-danger-color: #2c1635;       
    --fp-accent-color: #5b2c6f;       

    width: var(--fp-container-width);
    max-width: var(--fp-max-width);
    margin: 0 auto;
    position: relative;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--fp-muted-color);
    background-color: var(--fp-background-color);
    box-sizing: border-box;
}

.fp-streaming-media-cloud-local-download-ui-stage {
    width: 100%;
    aspect-ratio: var(--fp-aspect-ratio);
    background: var(--fp-primary-color);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-sizing: border-box;
    border-radius: 12px;
    border: 1px solid var(--fp-soft-color);
}

.fp-streaming-media-cloud-local-download-ui-stage::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, transparent 0%, rgba(91, 44, 111, 0.15) 100%);
    opacity: 0;
    transition: opacity 1s ease;
    pointer-events: none;
    z-index: 1;
}

.fp-streaming-media-cloud-local-download-ui-card {
    position: relative;
    z-index: 10;
    width: 85%;
    height: 85%;
    max-width: 380px;
    max-height: 400px;
    background: var(--fp-primary-color);
    border-radius: 16px;
    padding: 24px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 16px 40px rgba(15, 15, 15, 0.08);
    border: 1px solid var(--fp-soft-color);
    animation: fp-streaming-media-cloud-local-download-ui-breathe 6s ease-in-out infinite;
    transition: box-shadow 0.4s ease, border-color 0.4s ease;
}

.fp-streaming-media-cloud-local-download-ui-thumb {
    width: 100%;
    height: 120px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--fp-secondary-color) 0%, var(--fp-soft-color) 100%);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fp-streaming-media-cloud-local-download-ui-thumb::before {
    content: '4K HDR';
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: var(--fp-primary-color);
    background: var(--fp-muted-color);
    padding: 4px 8px;
    border-radius: 4px;
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
}

.fp-streaming-media-cloud-local-download-ui-thumb-play {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.fp-streaming-media-cloud-local-download-ui-thumb-play svg {
    width: 16px;
    height: 16px;
    fill: var(--fp-muted-color);
    margin-left: 2px;
}

.fp-streaming-media-cloud-local-download-ui-meta {
    text-align: center;
    margin-top: 16px;
}

.fp-streaming-media-cloud-local-download-ui-title {
    font-size: 1.1rem;
    font-weight: 900;
    color: var(--fp-muted-color);
    letter-spacing: -0.02em;
    margin: 0 0 4px 0;
    text-transform: uppercase;
}

.fp-streaming-media-cloud-local-download-ui-subtitle {
    font-size: 0.75rem;
    font-weight: 600;
    color: #666; 
    margin: 0;
}

.fp-streaming-media-cloud-local-download-ui-sync-area {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 24px 0;
    position: relative;
}

.fp-streaming-media-cloud-local-download-ui-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--fp-secondary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

.fp-streaming-media-cloud-local-download-ui-icon svg {
    width: 20px;
    height: 20px;
    fill: var(--fp-muted-color);
    transition: fill 0.3s ease;
}

.fp-streaming-media-cloud-local-download-ui-ring {
    position: absolute;
    inset: -4px;
    border: 1px dashed var(--fp-info-color);
    border-radius: 50%;
    animation: fp-streaming-media-cloud-local-download-ui-spin 4s linear infinite;
    opacity: 0.5;
}

.fp-streaming-media-cloud-local-download-ui-track {
    flex: 1;
    height: 2px;
    background: var(--fp-soft-color);
    margin: 0 12px;
    position: relative;
    overflow: hidden;
}

.fp-streaming-media-cloud-local-download-ui-particle {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 2px;
    background: var(--fp-warning-color);
    border-radius: 2px;
    box-shadow: 0 0 6px var(--fp-info-color);
}

.fp-streaming-media-cloud-local-download-ui-progress-container {
    margin-top: auto;
}

.fp-streaming-media-cloud-local-download-ui-progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.fp-streaming-media-cloud-local-download-ui-status-text {
    font-size: 0.65rem;
    font-weight: 800;
    color: var(--fp-muted-color);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.fp-streaming-media-cloud-local-download-ui-pct {
    font-size: 0.85rem;
    font-weight: 900;
    color: var(--fp-accent-color);
    font-variant-numeric: tabular-nums;
}

.fp-streaming-media-cloud-local-download-ui-progress-bar {
    width: 100%;
    height: 4px;
    background: var(--fp-soft-color);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}

.fp-streaming-media-cloud-local-download-ui-progress-fill {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 0%;
    background: var(--fp-accent-color);
    box-shadow: 0 0 10px var(--fp-info-color);
    transition: width 0.1s linear;
}

.fp-streaming-media-cloud-local-download-ui.fp-is-complete .fp-streaming-media-cloud-local-download-ui-stage::after {
    opacity: 1;
}

.fp-streaming-media-cloud-local-download-ui.fp-is-complete .fp-streaming-media-cloud-local-download-ui-card {
    border-color: var(--fp-accent-color);
    box-shadow: 0 0 40px rgba(91, 44, 111, 0.2);
    animation: none; 
}

.fp-streaming-media-cloud-local-download-ui.fp-is-complete .fp-cascade-1 { animation: fp-streaming-media-cloud-local-download-ui-dim 2.5s ease-in-out forwards 0s; }
.fp-streaming-media-cloud-local-download-ui.fp-is-complete .fp-cascade-2 { animation: fp-streaming-media-cloud-local-download-ui-dim 2.5s ease-in-out forwards 0.2s; }
.fp-streaming-media-cloud-local-download-ui.fp-is-complete .fp-cascade-3 { animation: fp-streaming-media-cloud-local-download-ui-dim 2.5s ease-in-out forwards 0.4s; }
.fp-streaming-media-cloud-local-download-ui.fp-is-complete .fp-cascade-4 { animation: fp-streaming-media-cloud-local-download-ui-dim 2.5s ease-in-out forwards 0.6s; }

.fp-streaming-media-cloud-local-download-ui.fp-is-complete .fp-streaming-media-cloud-local-download-ui-icon svg {
    fill: var(--fp-accent-color);
}

.fp-streaming-media-cloud-local-download-ui.fp-is-complete .fp-streaming-media-cloud-local-download-ui-ring {
    border-color: var(--fp-accent-color);
    border-style: solid;
    box-shadow: 0 0 15px var(--fp-info-color);
}

@keyframes fp-streaming-media-cloud-local-download-ui-breathe {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

@keyframes fp-streaming-media-cloud-local-download-ui-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes fp-streaming-media-cloud-local-download-ui-dim {
    0% { opacity: 1; filter: brightness(1); }
    30% { opacity: 0.2; filter: brightness(0.5); text-shadow: 0 0 10px var(--fp-accent-color); color: var(--fp-accent-color); }
    80% { opacity: 0.2; filter: brightness(0.5); text-shadow: 0 0 10px var(--fp-accent-color); color: var(--fp-accent-color); }
    100% { opacity: 1; filter: brightness(1); text-shadow: none; color: inherit; }
}

@media (max-width: 480px) {
    .fp-streaming-media-cloud-local-download-ui-card { width: 90%; height: 90%; padding: 20px; }
    .fp-streaming-media-cloud-local-download-ui-thumb { height: 100px; }
    .fp-streaming-media-cloud-local-download-ui-title { font-size: 0.95rem; }
    .fp-streaming-media-cloud-local-download-ui-icon { width: 40px; height: 40px; }
}

document.querySelectorAll('.fp-streaming-media-cloud-local-download-ui').forEach(root => {
    const track = root.querySelector('#fp-streaming-media-cloud-local-download-ui-track');
    const bar = root.querySelector('#fp-streaming-media-cloud-local-download-ui-bar');
    const pctText = root.querySelector('#fp-streaming-media-cloud-local-download-ui-pct');
    const statusText = root.querySelector('#fp-streaming-media-cloud-local-download-ui-status');

    const NUM_PARTICLES = 6;
    const particles = [];
    
    if (track) {
        for (let i = 0; i < NUM_PARTICLES; i++) {
            let p = document.createElement('div');
            p.className = 'fp-streaming-media-cloud-local-download-ui-particle';
            track.appendChild(p);
            
            particles.push({
                el: p,
                x: Math.random() * 100, 
                speed: 15 + Math.random() * 20 
            });
        }
    }

    let phase = 'syncing'; 
    let progress = 0;
    let timer = 0;
    let lastTime = performance.now();
    let animationFrameId;

    function fp_streaming_media_cloud_local_download_ui_loop(time) {
        if (document.visibilityState === "hidden") {
            lastTime = time;
            animationFrameId = requestAnimationFrame(fp_streaming_media_cloud_local_download_ui_loop);
            return;
        }

        let dt = time - lastTime;
        lastTime = time;
        timer += dt;

        if (phase === 'syncing') {
            progress += (dt / 1000) * 14; 
            
            if (progress >= 100) {
                progress = 100;
                phase = 'cinematic';
                timer = 0;
                
                root.classList.add('fp-is-complete');
                if (statusText) statusText.textContent = "READY FOR OFFLINE";
                
                particles.forEach(p => p.el.style.opacity = '0');
            }

            if (bar) bar.style.width = `${progress}%`;
            if (pctText) pctText.textContent = `${Math.floor(progress)}%`;

            particles.forEach(p => {
                p.x += p.speed * (dt / 1000);
                if (p.x > 100) p.x = -5; 
                p.el.style.left = `${p.x}%`;
            });

        } else if (phase === 'cinematic') {
            if (timer > 3500) {
                phase = 'syncing';
                progress = 0;
                timer = 0;
                
                root.classList.remove('fp-is-complete');
                if (statusText) statusText.textContent = "SYNCING TO DEVICE...";
                if (bar) bar.style.width = `0%`;
                if (pctText) pctText.textContent = `0%`;
                
                particles.forEach(p => p.el.style.opacity = '1');
            }
        }

        animationFrameId = requestAnimationFrame(fp_streaming_media_cloud_local_download_ui_loop);
    }

    animationFrameId = requestAnimationFrame(fp_streaming_media_cloud_local_download_ui_loop);

    const observer = new MutationObserver(() => {
        if (!document.body.contains(root)) {
            cancelAnimationFrame(animationFrameId);
            observer.disconnect();
        }
    });
    observer.observe(document.body, { childList: true, subtree: true });
});

Created by Digital Market Created: May 1, 2026 • Updated: May 1, 2026

Description

Let us look at the OTT Offline Sync Amethyst Cinematic component. This free UI asset offers a modular card system specifically engineered for the high bandwidth streaming media and OTT sector. We built this entirely from scratch to handle active video downloads and local storage management without the usual framework bloat. You get a sterile DOM structure that integrates cleanly into your existing mobile application or desktop video player architecture.

Streaming platforms process massive media files and require absolute reliability during local device synchronization. Heavy client side payloads completely ruin the user experience when viewers expect immediate visual feedback on their offline downloads. This component solves that bottleneck directly. By strictly avoiding external libraries like Tailwind, Bootstrap, or GSAP, it keeps your bundle size minimal. This ensures rapid rendering for developers who need to present active sync states to users on varied mobile networks or limited hardware environments.

Technical Architecture & Performance

Zero dependency codebase: Built strictly with pure HTML, CSS, and Vanilla JavaScript to keep your front end stack incredibly light.
Guaranteed performance metrics: Optimized to help your streaming software maintain 90 plus PageSpeed scores and pass Core Web Vitals easily.
Safely scoped CSS: All styling is strictly scoped to prevent any class name collisions when you drop these cards into a massive monolithic repository.
Sterile DOM markup: Features clean HTML with absolutely no unnecessary wrappers or deep nesting trees to parse.

Design & Aesthetic Impact

The visual direction utilizes rich Royal Amethyst tones to establish a premium and cinematic environment for the end user. This luxurious and highly readable aesthetic ensures visual clarity for subscribers managing local video libraries and dense download queues. For the interaction layer, we implemented a custom cascading fade in and out animation. This fluid visual transition provides clear feedback for active file syncing and offline availability updates without requiring heavy javascript animation scripts. The final result is a clean user interface that looks premium and functions perfectly for strict enterprise streaming platforms.

Enterprise Use Cases

Mobile streaming applications: Display active offline video downloads and storage capacity using the card grid so viewers can manage their local media quickly.
OTT subscriber dashboards: Build a fast rendering account page where customer support teams can organize and review massive datasets of user sync preferences within a lightweight interface.
Desktop media players: Create a responsive control layout for product teams to track active file transfers and display synced content libraries across multiple device ecosystems.

Technical Details

ElementCards
IndustryLegal
StyleCinematic Dark (Glow)
AnimationCascading Fade In/Out
ColorWhite

Report Issue

Highlights & Benefits

Copy-Paste Ready

Drop the code straight into your project without configuration.

Zero Dependencies

Built strictly with pure CSS & Vanilla JS for maximum speed.

ADA & WCAG Ready

Constructed with strict adherence to WCAG accessibility standards for perfect contrast and screen-reader support.

Sterile DOM Structure

Utilizes a highly optimized, clean DOM architecture ensuring lightning-fast render and maximum PageSpeed scores.

You need an active subscription or purchase to leave a review for this premium component.

OTT Offline Sync – Amethyst Cinematic

Category: UI Component

Description

Description

Technical Architecture & Performance

Zero dependency codebase: Built strictly with pure HTML, CSS, and Vanilla JavaScript to keep your front end stack incredibly light.
Guaranteed performance metrics: Optimized to help your streaming software maintain 90 plus PageSpeed scores and pass Core Web Vitals easily.
Safely scoped CSS: All styling is strictly scoped to prevent any class name collisions when you drop these cards into a massive monolithic repository.
Sterile DOM markup: Features clean HTML with absolutely no unnecessary wrappers or deep nesting trees to parse.

Design & Aesthetic Impact

Enterprise Use Cases

Mobile streaming applications: Display active offline video downloads and storage capacity using the card grid so viewers can manage their local media quickly.
OTT subscriber dashboards: Build a fast rendering account page where customer support teams can organize and review massive datasets of user sync preferences within a lightweight interface.
Desktop media players: Create a responsive control layout for product teams to track active file transfers and display synced content libraries across multiple device ecosystems.

OTT Offline Sync – Amethyst Cinematic

Description

Technical Architecture & Performance

Design & Aesthetic Impact

Enterprise Use Cases

Technical Details

Highlights & Benefits

OTT Offline Sync – Amethyst Cinematic

Description

Technical Architecture & Performance

Design & Aesthetic Impact

Enterprise Use Cases

Related products

Web3 Crypto Live Ticker – Deep Sapphire Minimalist

Creative Studio Upload Matrix – Mint Fresh Matte Neon

Machine Learning Neural Sync – Neon Cyan Cyberpunk

Esports CPU Gauge – Magenta Industrial Heavy