Free

Legal File Matrix – Cobalt Bauhaus

<div class="fp-legaltech-file-upload-matrix-ui">
    <div class="fp-legaltech-file-upload-matrix-ui-stage">
        
        <div class="fp-legaltech-file-upload-matrix-ui-draft-bg"></div>

        <div class="fp-legaltech-file-upload-matrix-ui-matrix">
            
            <div class="fp-legaltech-file-upload-matrix-ui-cell fp-legaltech-file-upload-matrix-ui-header">
                <span class="fp-legaltech-file-upload-matrix-ui-title">CTX_MATRIX // DRAFT</span>
                <span class="fp-legaltech-file-upload-matrix-ui-status" id="fp-legaltech-file-upload-matrix-ui-status">AWAITING</span>
            </div>

            <div class="fp-legaltech-file-upload-matrix-ui-cell fp-legaltech-file-upload-matrix-ui-info">
                <div>
                    <span class="fp-legaltech-file-upload-matrix-ui-info-lbl">Target Node</span>
                    <span class="fp-legaltech-file-upload-matrix-ui-info-val">LGL-089</span>
                </div>
                <div class="fp-legaltech-file-upload-matrix-ui-geo-decor"></div>
            </div>

            <div class="fp-legaltech-file-upload-matrix-ui-cell fp-legaltech-file-upload-matrix-ui-dropzone" id="fp-legaltech-file-upload-matrix-ui-dropzone">
                <span class="fp-legaltech-file-upload-matrix-ui-drop-label">Drop Area</span>
                
                <div class="fp-legaltech-file-upload-matrix-ui-ring"></div>
                
                <div class="fp-legaltech-file-upload-matrix-ui-magnetic-wrap" id="fp-legaltech-file-upload-matrix-ui-magnetic">
                    <div class="fp-legaltech-file-upload-matrix-ui-icon">
                        <svg viewBox="0 0 24 24"><path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/></svg>
                    </div>
                </div>
            </div>

            <div class="fp-legaltech-file-upload-matrix-ui-cell fp-legaltech-file-upload-matrix-ui-footer">
                <div class="fp-legaltech-file-upload-matrix-ui-progress-header">
                    <span>Encryption Transfer</span>
                    <span id="fp-legaltech-file-upload-matrix-ui-pct">0%</span>
                </div>
                <div class="fp-legaltech-file-upload-matrix-ui-progress-track">
                    <div class="fp-legaltech-file-upload-matrix-ui-progress-fill" id="fp-legaltech-file-upload-matrix-ui-bar"></div>
                </div>
            </div>

        </div>

    </div>
</div>

.fp-legaltech-file-upload-matrix-ui {
    --fp-container-width: 100%;
    --fp-max-width: 500px;
    --fp-aspect-ratio: 1 / 1;

    --fp-primary-color: #f7f5f0;      
    --fp-secondary-color: #e8e5dc;    
    --fp-muted-color: #111111;        
    --fp-soft-color: #c4c1b8;         
    --fp-background-color: transparent;

    --fp-info-color: #4a4a4a;         
    --fp-warning-color: #e5b217;      
    --fp-danger-color: #d1342b;       
    --fp-accent-color: #0047AB;       

    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-legaltech-file-upload-matrix-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: 2px solid var(--fp-soft-color);
}

.fp-legaltech-file-upload-matrix-ui-draft-bg {
    position: absolute;
    inset: 0;
    background-size: 20px 20px;
    background-image: 
        linear-gradient(to right, rgba(196, 193, 184, 0.3) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(196, 193, 184, 0.3) 1px, transparent 1px);
    z-index: 1;
    pointer-events: none;
}

.fp-legaltech-file-upload-matrix-ui-matrix {
    position: relative;
    z-index: 10;
    width: 85%;
    height: 85%;
    background: var(--fp-primary-color);
    border: 4px solid var(--fp-muted-color);
    display: grid;
    grid-template-columns: 1fr 1.8fr;
    grid-template-rows: auto 1fr auto;
    box-shadow: 12px 12px 0px var(--fp-accent-color);
    animation: fp-legaltech-file-upload-matrix-ui-breathe 6s ease-in-out infinite;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.fp-legaltech-file-upload-matrix-ui-cell {
    border: 2px solid var(--fp-muted-color);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}

.fp-legaltech-file-upload-matrix-ui-header {
    grid-column: 1 / -1;
    background: var(--fp-muted-color);
    color: var(--fp-primary-color);
    padding: 12px 16px;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    text-transform: uppercase;
}

.fp-legaltech-file-upload-matrix-ui-title {
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.15em;
}

.fp-legaltech-file-upload-matrix-ui-status {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    background: var(--fp-accent-color);
    padding: 4px 8px;
    color: #fff;
    transition: all 0.3s ease;
}

.fp-legaltech-file-upload-matrix-ui-info {
    background: var(--fp-secondary-color);
    padding: 16px;
    justify-content: space-between;
}

.fp-legaltech-file-upload-matrix-ui-info-lbl {
    font-size: 0.65rem;
    font-weight: 800;
    color: var(--fp-info-color);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 4px;
    display: block;
}

.fp-legaltech-file-upload-matrix-ui-info-val {
    font-size: 1rem;
    font-weight: 900;
    color: var(--fp-muted-color);
    font-family: ui-monospace, monospace;
}

.fp-legaltech-file-upload-matrix-ui-geo-decor {
    width: 100%;
    height: 40px;
    background: repeating-linear-gradient(
        45deg,
        var(--fp-muted-color),
        var(--fp-muted-color) 2px,
        transparent 2px,
        transparent 8px
    );
    margin-top: auto;
    border-top: 2px solid var(--fp-muted-color);
}

.fp-legaltech-file-upload-matrix-ui-dropzone {
    background: var(--fp-primary-color);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
}

.fp-legaltech-file-upload-matrix-ui-drop-label {
    position: absolute;
    top: 16px;
    left: 16px;
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--fp-muted-color);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.fp-legaltech-file-upload-matrix-ui-ring {
    position: absolute;
    width: 140px;
    height: 140px;
    border: 2px dashed var(--fp-soft-color);
    border-radius: 50%;
    animation: fp-legaltech-file-upload-matrix-ui-spin 12s linear infinite;
    z-index: 1;
}

.fp-legaltech-file-upload-matrix-ui-ring::after {
    content: '';
    position: absolute;
    top: -4px;
    left: 50%;
    width: 8px;
    height: 8px;
    background: var(--fp-muted-color);
    border-radius: 50%;
    transform: translateX(-50%);
}

.fp-legaltech-file-upload-matrix-ui-magnetic-wrap {
    position: relative;
    z-index: 5;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fp-legaltech-file-upload-matrix-ui-icon {
    width: 100%;
    height: 100%;
    background: var(--fp-accent-color);
    border-radius: 50%;
    border: 4px solid var(--fp-muted-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: 4px 4px 0px rgba(17, 17, 17, 0.2);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.3s ease;
}

.fp-legaltech-file-upload-matrix-ui-icon svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
    transform: translateY(2px);
    transition: transform 0.3s ease;
}

.fp-legaltech-file-upload-matrix-ui-footer {
    grid-column: 1 / -1;
    padding: 16px;
    background: var(--fp-primary-color);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fp-legaltech-file-upload-matrix-ui-progress-header {
    display: flex;
    justify-content: space-between;
    font-size: 0.65rem;
    font-weight: 800;
    color: var(--fp-info-color);
    text-transform: uppercase;
}

.fp-legaltech-file-upload-matrix-ui-progress-track {
    width: 100%;
    height: 12px;
    background: var(--fp-secondary-color);
    border: 2px solid var(--fp-muted-color);
    position: relative;
    overflow: hidden;
}

.fp-legaltech-file-upload-matrix-ui-progress-fill {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 0%;
    background: var(--fp-accent-color);
    border-right: 2px solid var(--fp-muted-color);
    transition: width 0.1s linear, background-color 0.3s ease;
}

.fp-legaltech-file-upload-matrix-ui.fp-is-uploading .fp-legaltech-file-upload-matrix-ui-matrix {
    border-color: var(--fp-accent-color);
    box-shadow: 16px 16px 0px rgba(0, 71, 171, 0.2);
    transform: translate(-4px, -4px);
    animation: none; 
}

.fp-legaltech-file-upload-matrix-ui.fp-is-uploading .fp-legaltech-file-upload-matrix-ui-header {
    background: var(--fp-accent-color);
}

.fp-legaltech-file-upload-matrix-ui.fp-is-uploading .fp-legaltech-file-upload-matrix-ui-status {
    background: var(--fp-primary-color);
    color: var(--fp-accent-color);
}

.fp-legaltech-file-upload-matrix-ui.fp-is-uploading .fp-legaltech-file-upload-matrix-ui-icon {
    transform: scale(1.1);
    background: var(--fp-warning-color);
}

.fp-legaltech-file-upload-matrix-ui.fp-is-uploading .fp-legaltech-file-upload-matrix-ui-icon svg {
    transform: translateY(-4px);
    animation: fp-legaltech-file-upload-matrix-ui-bounce 0.5s ease infinite alternate;
}

.fp-legaltech-file-upload-matrix-ui.fp-is-uploading .fp-legaltech-file-upload-matrix-ui-ring {
    border-color: var(--fp-accent-color);
    animation-duration: 3s; 
}

.fp-legaltech-file-upload-matrix-ui.fp-is-uploading .fp-legaltech-file-upload-matrix-ui-progress-fill {
    background: var(--fp-warning-color);
}

@keyframes fp-legaltech-file-upload-matrix-ui-breathe {
    0%, 100% { transform: translateY(0); box-shadow: 12px 12px 0px var(--fp-accent-color); }
    50% { transform: translateY(-4px); box-shadow: 16px 16px 0px var(--fp-accent-color); }
}

@keyframes fp-legaltech-file-upload-matrix-ui-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes fp-legaltech-file-upload-matrix-ui-bounce {
    0% { transform: translateY(2px); }
    100% { transform: translateY(-4px); }
}

@media (max-width: 480px) {
    .fp-legaltech-file-upload-matrix-ui-stage { padding: 16px; border-radius: 16px; }
    .fp-legaltech-file-upload-matrix-ui-matrix { 
        width: 100%; height: 100%; 
        grid-template-columns: 1fr; 
        grid-template-rows: auto auto 1fr auto;
        box-shadow: 8px 8px 0px var(--fp-accent-color);
    }
    .fp-legaltech-file-upload-matrix-ui-geo-decor { display: none; }
    .fp-legaltech-file-upload-matrix-ui-info { display: flex; flex-direction: row; align-items: center; padding: 12px; }
    .fp-legaltech-file-upload-matrix-ui-info-lbl { margin: 0; }
}

document.querySelectorAll('.fp-legaltech-file-upload-matrix-ui').forEach(root => {
    const dropzone = root.querySelector('#fp-legaltech-file-upload-matrix-ui-dropzone');
    const magneticWrap = root.querySelector('#fp-legaltech-file-upload-matrix-ui-magnetic');
    const statusEl = root.querySelector('#fp-legaltech-file-upload-matrix-ui-status');
    const barEl = root.querySelector('#fp-legaltech-file-upload-matrix-ui-bar');
    const pctEl = root.querySelector('#fp-legaltech-file-upload-matrix-ui-pct');

    let mouseX = 0, mouseY = 0;
    let targetX = 0, targetY = 0;
    let currentX = 0, currentY = 0;
    let isHovering = false;
    
    let phase = 'idle'; 
    let progress = 0;
    let timer = 0;
    let globalTime = 0;
    let lastTime = performance.now();
    let animationFrameId;

    if (dropzone) {
        dropzone.addEventListener('mousemove', (e) => {
            if (phase !== 'idle') return;
            const rect = dropzone.getBoundingClientRect();
            mouseX = e.clientX - rect.left - rect.width / 2;
            mouseY = e.clientY - rect.top - rect.height / 2;
            isHovering = true;
        });

        dropzone.addEventListener('mouseleave', () => {
            isHovering = false;
        });

        dropzone.addEventListener('click', () => {
            if (phase === 'idle') triggerUpload();
        });
    }

    function triggerUpload() {
        phase = 'uploading';
        timer = 0;
        progress = 0;
        isHovering = false; 
        targetX = 0;
        targetY = 0;
        
        root.classList.add('fp-is-uploading');
        if (statusEl) statusEl.textContent = "SECURING...";
    }

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

        let dt = time - lastTime;
        lastTime = time;
        globalTime += dt * 0.002;
        timer += dt;

        if (phase === 'idle') {
            if (isHovering) {
                const dist = Math.hypot(mouseX, mouseY);
                const maxDist = 45; 
                const pullFactor = Math.min(dist, maxDist) / (dist || 1);
                targetX = mouseX * pullFactor;
                targetY = mouseY * pullFactor;
            } else {
                targetX = Math.cos(globalTime) * 15;
                targetY = Math.sin(globalTime * 0.8) * 15;
            }

            if (timer > 6000 && !isHovering) {
                triggerUpload();
            }
        }

        currentX += (targetX - currentX) * 0.15 * (dt/16);
        currentY += (targetY - currentY) * 0.15 * (dt/16);

        if (magneticWrap) {
            magneticWrap.style.transform = `translate(${currentX}px, ${currentY}px)`;
        }

        if (phase === 'uploading') {
            let speed = 20;
            if (progress > 30 && progress < 60) speed = 5;
            if (progress > 80) speed = 40;
            
            progress += (dt / 1000) * speed;

            if (progress >= 100) {
                progress = 100;
                phase = 'complete';
                timer = 0;
                if (statusEl) statusEl.textContent = "VERIFIED";
            }

            if (barEl) barEl.style.width = `${progress}%`;
            if (pctEl) pctEl.textContent = `${Math.floor(progress)}%`;
        }
        else if (phase === 'complete') {
            if (timer > 2000) {
                phase = 'idle';
                timer = 0;
                progress = 0;
                root.classList.remove('fp-is-uploading');
                if (statusEl) statusEl.textContent = "AWAITING";
                if (barEl) barEl.style.width = `0%`;
                if (pctEl) pctEl.textContent = `0%`;
            }
        }

        animationFrameId = requestAnimationFrame(fp_legaltech_file_upload_matrix_ui_loop);
    }

    animationFrameId = requestAnimationFrame(fp_legaltech_file_upload_matrix_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 Legal File Matrix Cobalt Bauhaus component. This free UI asset offers a modular card system specifically engineered for the highly secure LegalTech and law firm sector. We built this entirely from scratch to handle heavy document discovery workflows and dense case files without the usual framework bloat. You get a sterile DOM structure that integrates cleanly into your existing client portal or document management architecture.

Legal platforms process massive amounts of sensitive case data and require absolute reliability during active document review. Heavy client side payloads completely ruin the user experience when paralegals expect immediate visual feedback while sorting through discovery files. 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 file states to users on varied corporate networks or strict legal firewalls.

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 legal 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 professional Cobalt Corporate tones to establish an environment of trust and absolute confidentiality for the end user. This Bauhaus inspired and highly readable aesthetic ensures visual clarity for legal teams analyzing complex case structures and dense discovery directories. For the interaction layer, we implemented a custom magnetic pull and follow animation. This physical visual transition provides clear feedback for active cursor tracking and secure file selection without requiring heavy javascript animation scripts. The final result is a clean user interface that looks premium and functions perfectly for strict enterprise legal platforms.

Enterprise Use Cases

Law firm document portals: Display active case files and secure folders using the card grid so paralegals can organize discovery materials quickly.
Legal compliance management systems: Build a fast rendering audit page where compliance officers can organize and review massive datasets of secure contracts within a lightweight interface.
Electronic discovery panels: Create a responsive control layout for litigation support teams to track active document indexing and file retrieval across multiple regional firm networks.

Technical Details

ElementCards
IndustryLaw Firms
StyleBauhaus Geometric
AnimationFollow, Magnetic Pull
ColorWhite, Blue

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.

Legal File Matrix – Cobalt Bauhaus

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 legal 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

Law firm document portals: Display active case files and secure folders using the card grid so paralegals can organize discovery materials quickly.
Legal compliance management systems: Build a fast rendering audit page where compliance officers can organize and review massive datasets of secure contracts within a lightweight interface.
Electronic discovery panels: Create a responsive control layout for litigation support teams to track active document indexing and file retrieval across multiple regional firm networks.

Legal File Matrix – Cobalt Bauhaus

Description

Technical Architecture & Performance

Design & Aesthetic Impact

Enterprise Use Cases

Technical Details

Highlights & Benefits

Legal File Matrix – Cobalt Bauhaus

Description

Technical Architecture & Performance

Design & Aesthetic Impact

Enterprise Use Cases

Related products

FinTech Data Flow – Slate Blue Skeuomorphic

Web3 Crypto Live Ticker – Deep Sapphire Minimalist

LegalTech Smart Contract – Sage Swiss Grid

PropTech Database Sync – Coral Bauhaus Geometric