D
Digmarket. Preview
Navigation
Log in Sign up
Home › Free

FinTech Data Flow – Slate Blue Skeuomorphic

<div class="fp-fintech-data-flow-pipeline-ui">
    <div class="fp-fintech-data-flow-pipeline-ui-stage">
        <div class="fp-fintech-data-flow-pipeline-ui-grid"></div>

        <div class="fp-fintech-data-flow-pipeline-ui-layout">
            <div class="fp-fintech-data-flow-pipeline-ui-pipe-wrapper fp-fintech-data-flow-pipeline-ui-pipe-left">
                <div class="fp-fintech-data-flow-pipeline-ui-pipe fp-fintech-data-flow-pipeline-ui-pipe-left">
                    <div class="fp-fintech-data-flow-pipeline-ui-pipe-track">
                        <div class="fp-fintech-data-flow-pipeline-ui-flow-dot"></div>
                    </div>
                </div>
            </div>

            <div class="fp-fintech-data-flow-pipeline-ui-tank-wrapper">
                <div class="fp-fintech-data-flow-pipeline-ui-tank">
                    <div class="fp-fintech-data-flow-pipeline-ui-liquid-group">
                        <div class="fp-fintech-data-flow-pipeline-ui-wave fp-fintech-data-flow-pipeline-ui-wave-1"></div>
                        <div class="fp-fintech-data-flow-pipeline-ui-wave fp-fintech-data-flow-pipeline-ui-wave-2"></div>
                        <div class="fp-fintech-data-flow-pipeline-ui-wave fp-fintech-data-flow-pipeline-ui-wave-3"></div>
                    </div>
                    <div class="fp-fintech-data-flow-pipeline-ui-glass-reflection"></div>
                </div>
                <div class="fp-fintech-data-flow-pipeline-ui-readout">
                    <span class="fp-fintech-data-flow-pipeline-ui-label">Data Flow</span>
                    <span class="fp-fintech-data-flow-pipeline-ui-amount">$0.00</span>
                </div>
            </div>

            <div class="fp-fintech-data-flow-pipeline-ui-pipe-wrapper fp-fintech-data-flow-pipeline-ui-pipe-right">
                <div class="fp-fintech-data-flow-pipeline-ui-pipe fp-fintech-data-flow-pipeline-ui-pipe-right">
                    <div class="fp-fintech-data-flow-pipeline-ui-pipe-track">
                        <div class="fp-fintech-data-flow-pipeline-ui-flow-dot"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
.fp-fintech-data-flow-pipeline-ui {
    --fp-container-width: 100%;
    --fp-max-width: 500px;
    --fp-aspect-ratio: 1 / 1;

    --fp-primary-color: #ffffff;
    --fp-secondary-color: #f1f5f9;
    --fp-muted-color: #475569;
    --fp-soft-color: #e2e8f0;
    --fp-background-color: transparent;

    --fp-info-color: #64748b;
    --fp-warning-color: #94a3b8;
    --fp-danger-color: #cbd5e1;
    --fp-accent-color: #4a6b8c;

    --fp-wave-1: #8fa6c2;
    --fp-wave-2: #6b89ab;
    --fp-wave-3: #4a6b8c;

    width: var(--fp-container-width);
    max-width: var(--fp-max-width);
    margin: 0 auto;
    background-color: var(--fp-background-color);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.fp-fintech-data-flow-pipeline-ui-stage {
    width: 100%;
    aspect-ratio: var(--fp-aspect-ratio);
    background: var(--fp-primary-color);
    border-radius: 32px;
    box-shadow: 
        inset 0 0 0 1px var(--fp-soft-color), 
        0 20px 40px rgba(71, 85, 105, 0.08);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fp-fintech-data-flow-pipeline-ui-layout {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 24px;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
}

.fp-fintech-data-flow-pipeline-ui-grid {
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(to right, rgba(226, 232, 240, 0.4) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(226, 232, 240, 0.4) 1px, transparent 1px);
    background-size: 24px 24px;
    z-index: 1;
    mask-image: radial-gradient(circle at center, black 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(circle at center, black 30%, transparent 80%);
}

.fp-fintech-data-flow-pipeline-ui-pipe-wrapper {
    flex-grow: 1;
    height: 36px;
    position: relative;
    z-index: 2;
}

.fp-fintech-data-flow-pipeline-ui-pipe {
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, #f8fafc 0%, #cbd5e1 40%, #ffffff 60%, #94a3b8 100%);
    box-shadow: 
        0 8px 16px rgba(71, 85, 105, 0.1), 
        inset 0 2px 4px rgba(255, 255, 255, 0.9);
    position: relative;
}

.fp-fintech-data-flow-pipeline-ui-pipe-left {
    border-radius: 18px 0 0 18px;
    margin-right: -12px;
}

.fp-fintech-data-flow-pipeline-ui-pipe-right {
    border-radius: 0 18px 18px 0;
    margin-left: -12px;
}

.fp-fintech-data-flow-pipeline-ui-pipe-track {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    height: 14px;
    background: #e2e8f0;
    box-shadow: 
        inset 0 2px 6px rgba(71, 85, 105, 0.3), 
        inset 0 -1px 2px rgba(255, 255, 255, 0.6);
    overflow: hidden;
}

.fp-fintech-data-flow-pipeline-ui-pipe-left .fp-fintech-data-flow-pipeline-ui-pipe-track {
    border-radius: 7px 0 0 7px;
    margin-left: 12px;
}

.fp-fintech-data-flow-pipeline-ui-pipe-right .fp-fintech-data-flow-pipeline-ui-pipe-track {
    border-radius: 0 7px 7px 0;
    margin-right: 12px;
}

.fp-fintech-data-flow-pipeline-ui-flow-dot {
    position: absolute;
    top: 0;
    height: 100%;
    width: 45px;
    background: var(--fp-accent-color);
    box-shadow: 
        0 0 12px var(--fp-accent-color), 
        inset 0 0 6px rgba(255, 255, 255, 0.6);
    border-radius: 7px;
    opacity: 0;
}

.fp-fintech-data-flow-pipeline-ui-pipe-left .fp-fintech-data-flow-pipeline-ui-flow-dot {
    animation: fp-fintech-data-flow-pipeline-ui-flow-in 2.5s infinite ease-in-out;
}

.fp-fintech-data-flow-pipeline-ui-pipe-right .fp-fintech-data-flow-pipeline-ui-flow-dot {
    animation: fp-fintech-data-flow-pipeline-ui-flow-out 2.5s infinite ease-in-out 1.25s;
}

.fp-fintech-data-flow-pipeline-ui-tank-wrapper {
    width: min(220px, 50vw);
    height: min(220px, 50vw);
    flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffffff, #e2e8f0);
    box-shadow:
        12px 12px 24px rgba(71, 85, 105, 0.12),
        -12px -12px 24px #ffffff,
        inset 2px 2px 4px #ffffff,
        inset -2px -2px 6px rgba(71, 85, 105, 0.15);
    padding: 18px;
    position: relative;
    z-index: 3;
    animation: fp-fintech-data-flow-pipeline-ui-breathe 4s infinite ease-in-out;
    box-sizing: border-box;
}

.fp-fintech-data-flow-pipeline-ui-tank {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--fp-primary-color);
    box-shadow: 
        inset 8px 8px 16px rgba(71, 85, 105, 0.15), 
        inset -8px -8px 16px #ffffff,
        0 0 0 1px rgba(71, 85, 105, 0.05);
    position: relative;
    overflow: hidden;
    transform: translateZ(0);
}

.fp-fintech-data-flow-pipeline-ui-liquid-group {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: translateY(100%);
    will-change: transform;
}

.fp-fintech-data-flow-pipeline-ui-wave {
    position: absolute;
    width: 250%;
    height: 250%;
    left: -75%;
    top: 0;
    border-radius: 43%;
    transform-origin: 50% 50%;
}

.fp-fintech-data-flow-pipeline-ui-wave-1 {
    background: var(--fp-wave-1);
    animation: fp-fintech-data-flow-pipeline-ui-spin 7s infinite linear;
    opacity: 0.6;
    top: -15px;
}

.fp-fintech-data-flow-pipeline-ui-wave-2 {
    background: var(--fp-wave-2);
    animation: fp-fintech-data-flow-pipeline-ui-spin 9s infinite linear reverse;
    opacity: 0.8;
    top: -5px;
}

.fp-fintech-data-flow-pipeline-ui-wave-3 {
    background: var(--fp-wave-3);
    animation: fp-fintech-data-flow-pipeline-ui-spin 11s infinite linear;
    opacity: 1;
    box-shadow: inset 0 10px 20px rgba(0, 0, 0, 0.1);
}

.fp-fintech-data-flow-pipeline-ui-glass-reflection {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 40%, rgba(0,0,0,0.03) 100%);
    box-shadow: inset 0 4px 12px rgba(255,255,255,0.9);
    z-index: 10;
    pointer-events: none;
}

.fp-fintech-data-flow-pipeline-ui-readout {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(241, 245, 249, 0.85));
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 14px 24px;
    border-radius: 40px;
    box-shadow:
        0 10px 20px rgba(71, 85, 105, 0.15),
        inset 0 2px 4px #ffffff,
        inset 0 -2px 4px rgba(226, 232, 240, 0.6);
    border: 1px solid rgba(255, 255, 255, 1);
    z-index: 20;
    text-align: center;
    min-width: 140px;
}

.fp-fintech-data-flow-pipeline-ui-label {
    display: block;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--fp-muted-color);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 4px;
    opacity: 0.8;
}

.fp-fintech-data-flow-pipeline-ui-amount {
    display: block;
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--fp-accent-color);
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

@keyframes fp-fintech-data-flow-pipeline-ui-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes fp-fintech-data-flow-pipeline-ui-breathe {
    0%, 100% { 
        box-shadow: 12px 12px 24px rgba(71, 85, 105, 0.12), -12px -12px 24px #ffffff, inset 2px 2px 4px #ffffff, inset -2px -2px 6px rgba(71, 85, 105, 0.15); 
    }
    50% { 
        box-shadow: 16px 16px 32px rgba(71, 85, 105, 0.15), -16px -16px 32px #ffffff, inset 2px 2px 4px #ffffff, inset -2px -2px 6px rgba(71, 85, 105, 0.15), 0 0 24px rgba(74, 107, 140, 0.25); 
    }
}

@keyframes fp-fintech-data-flow-pipeline-ui-flow-in {
    0% { left: -45px; opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { left: 100%; opacity: 0; }
}

@keyframes fp-fintech-data-flow-pipeline-ui-flow-out {
    0% { left: -45px; opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { left: 100%; opacity: 0; }
}

@media (max-width: 480px) {
    .fp-fintech-data-flow-pipeline-ui-layout {
        flex-direction: column;
    }
    
    .fp-fintech-data-flow-pipeline-ui-pipe-wrapper {
        width: 36px;
        height: 1fr;
        flex-grow: 1;
    }
    
    .fp-fintech-data-flow-pipeline-ui-pipe {
        background: linear-gradient(to right, #f8fafc 0%, #cbd5e1 40%, #ffffff 60%, #94a3b8 100%);
    }
    
    .fp-fintech-data-flow-pipeline-ui-pipe-left {
        border-radius: 18px 18px 0 0;
        margin-right: 0;
        margin-bottom: -12px;
    }
    
    .fp-fintech-data-flow-pipeline-ui-pipe-right {
        border-radius: 0 0 18px 18px;
        margin-left: 0;
        margin-top: -12px;
    }
    
    .fp-fintech-data-flow-pipeline-ui-pipe-track {
        width: 14px;
        height: 100%;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
    }
    
    .fp-fintech-data-flow-pipeline-ui-pipe-left .fp-fintech-data-flow-pipeline-ui-pipe-track {
        border-radius: 7px 7px 0 0;
        margin-left: 0;
        margin-bottom: 12px;
    }
    
    .fp-fintech-data-flow-pipeline-ui-pipe-right .fp-fintech-data-flow-pipeline-ui-pipe-track {
        border-radius: 0 0 7px 7px;
        margin-right: 0;
        margin-top: 12px;
    }
    
    .fp-fintech-data-flow-pipeline-ui-flow-dot {
        width: 100%;
        height: 45px;
        left: 0;
    }
    
    .fp-fintech-data-flow-pipeline-ui-pipe-left .fp-fintech-data-flow-pipeline-ui-flow-dot {
        animation: fp-fintech-data-flow-pipeline-ui-flow-in-vert 2.5s infinite ease-in-out;
    }
    
    .fp-fintech-data-flow-pipeline-ui-pipe-right .fp-fintech-data-flow-pipeline-ui-flow-dot {
        animation: fp-fintech-data-flow-pipeline-ui-flow-out-vert 2.5s infinite ease-in-out 1.25s;
    }
}

@keyframes fp-fintech-data-flow-pipeline-ui-flow-in-vert {
    0% { top: -45px; opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}

@keyframes fp-fintech-data-flow-pipeline-ui-flow-out-vert {
    0% { top: -45px; opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}
document.querySelectorAll('.fp-fintech-data-flow-pipeline-ui').forEach(root => {
    const liquidGroup = root.querySelector('.fp-fintech-data-flow-pipeline-ui-liquid-group');
    const amountSpan = root.querySelector('.fp-fintech-data-flow-pipeline-ui-amount');

    let currentFill = 0; 
    let targetFill = 0;
    let phase = 'filling';
    let phaseTimer = 0;
    const maxAmount = 24500.00;
    let lastTime = performance.now();
    let animationFrameId;

    const lerp = (start, end, amt) => (1 - amt) * start + amt * end;

    function formatCurrency(value) {
        return '$' + value.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
    }

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

        const dt = time - lastTime;
        lastTime = time;
        phaseTimer += dt;

        if (phase === 'filling') {
            targetFill = 82;
            if (phaseTimer > 4000) { 
                phase = 'idle_full';
                phaseTimer = 0;
            }
        } else if (phase === 'idle_full') {
            targetFill = 82;
            if (phaseTimer > 2500) {
                phase = 'draining';
                phaseTimer = 0;
            }
        } else if (phase === 'draining') {
            targetFill = 18;
            if (phaseTimer > 3500) {
                phase = 'idle_empty';
                phaseTimer = 0;
            }
        } else if (phase === 'idle_empty') {
            targetFill = 18;
            if (phaseTimer > 1500) {
                phase = 'filling';
                phaseTimer = 0;
            }
        }

        currentFill = lerp(currentFill, targetFill, 0.02 * (dt / 16));

        if (liquidGroup) {
            liquidGroup.style.transform = `translateY(${100 - currentFill}%)`;
        }
        
        if (amountSpan) {
            amountSpan.textContent = formatCurrency((currentFill / 100) * maxAmount);
        }

        animationFrameId = requestAnimationFrame(fp_fintech_data_flow_pipeline_ui_animate);
    }

    animationFrameId = requestAnimationFrame(fp_fintech_data_flow_pipeline_ui_animate);

    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: Apr 21, 2026 • Updated: Apr 26, 2026

Description

This is a premium data flow card component designed specifically for the financial technology and banking sector. Engineers in this space constantly fight against interface bloat that drags down performance metrics and complicates compliance reviews. We built this free asset to solve that issue by offering a genuinely sterile DOM structure utilizing only pure HTML, CSS, and Vanilla JavaScript.

Delivering secure banking applications means you cannot afford to bog down your interface with heavy external dependencies. This UI card completely strips out cumbersome frameworks like Tailwind, Bootstrap, and GSAP. The result is an incredibly fast component optimized strictly for Core Web Vitals to keep your PageSpeed scores comfortably above the 90 threshold.

Technical Architecture & Performance

  • Pure Code Foundation: Engineered strictly with native web standards to avoid the security overhead of third-party package updates.

  • Sterile DOM Architecture: Ships with exceptionally minimal markup to ensure rapid browser rendering and prevent layout shifts.

  • Core Web Vitals Focus: Built specifically to ace Lighthouse audits and meet the strict performance demands of enterprise applications.

  • Scoped CSS Implementation: Uses isolated class naming to guarantee the component styling never conflicts with your primary codebase.

  • Rapid Integration: Drops directly into any existing repository without needing complex build configurations or extra compiler steps.

Design & Aesthetic Impact

The interface delivers a highly polished and tactile visual experience tailored for modern finance. We chose distinct slate blue color tones to project trust and institutional stability. The primary interaction features a skeuomorphic liquid fill and level rise animation. This native CSS effect visually represents data accumulation or transfer progress in an intuitive way. It provides users with clear and satisfying feedback while maintaining a remarkably clean and modern UI.

Enterprise Use Cases

  1. Wealth Management Dashboards: Deploy this card to visualize portfolio growth or asset accumulation in real time for institutional clients.

  2. Payment Processing Gateways: Use the liquid fill animation to indicate batch transaction processing status during large corporate payroll runs.

  3. Banking Compliance Monitors: Implement the component as a strict visual indicator for data transfer limits and regulatory thresholds across internal banking networks.

Technical Details

  • StyleSkeuomorphic Modern
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.
Awaiting product image

FinTech Data Flow – Slate Blue Skeuomorphic

Category:

Description

This is a premium data flow card component designed specifically for the financial technology and banking sector. Engineers in this space constantly fight against interface bloat that drags down performance metrics and complicates compliance reviews. We built this free asset to solve that issue by offering a genuinely sterile DOM structure utilizing only pure HTML, CSS, and Vanilla JavaScript.

Delivering secure banking applications means you cannot afford to bog down your interface with heavy external dependencies. This UI card completely strips out cumbersome frameworks like Tailwind, Bootstrap, and GSAP. The result is an incredibly fast component optimized strictly for Core Web Vitals to keep your PageSpeed scores comfortably above the 90 threshold.

Technical Architecture & Performance

  • Pure Code Foundation: Engineered strictly with native web standards to avoid the security overhead of third-party package updates.

  • Sterile DOM Architecture: Ships with exceptionally minimal markup to ensure rapid browser rendering and prevent layout shifts.

  • Core Web Vitals Focus: Built specifically to ace Lighthouse audits and meet the strict performance demands of enterprise applications.

  • Scoped CSS Implementation: Uses isolated class naming to guarantee the component styling never conflicts with your primary codebase.

  • Rapid Integration: Drops directly into any existing repository without needing complex build configurations or extra compiler steps.

Design & Aesthetic Impact

The interface delivers a highly polished and tactile visual experience tailored for modern finance. We chose distinct slate blue color tones to project trust and institutional stability. The primary interaction features a skeuomorphic liquid fill and level rise animation. This native CSS effect visually represents data accumulation or transfer progress in an intuitive way. It provides users with clear and satisfying feedback while maintaining a remarkably clean and modern UI.

Enterprise Use Cases

  1. Wealth Management Dashboards: Deploy this card to visualize portfolio growth or asset accumulation in real time for institutional clients.

  2. Payment Processing Gateways: Use the liquid fill animation to indicate batch transaction processing status during large corporate payroll runs.

  3. Banking Compliance Monitors: Implement the component as a strict visual indicator for data transfer limits and regulatory thresholds across internal banking networks.

Related products