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

MedTech Biometric Scan – Ice Blue Glassmorphism

<div class="fp-healthcare-fingerprint-scan-ui">
    <div class="fp-healthcare-fingerprint-scan-ui-stage">
        <div class="fp-healthcare-fingerprint-scan-ui-blob-1"></div>
        <div class="fp-healthcare-fingerprint-scan-ui-blob-2"></div>
        
        <div class="fp-healthcare-fingerprint-scan-ui-glass-card">
            <div class="fp-healthcare-fingerprint-scan-ui-header">
                <div class="fp-healthcare-fingerprint-scan-ui-patient-info">
                    <span class="fp-healthcare-fingerprint-scan-ui-label">Patient Record</span>
                    <span class="fp-healthcare-fingerprint-scan-ui-value">ID: MED-88392-AX</span>
                </div>
                <div class="fp-healthcare-fingerprint-scan-ui-status-badge">
                    <div class="fp-healthcare-fingerprint-scan-ui-dot"></div>
                    <span>Scanning</span>
                </div>
            </div>

            <div class="fp-healthcare-fingerprint-scan-ui-scanner-wrap">
                <div class="fp-healthcare-fingerprint-scan-ui-radial-ring"></div>
                <div class="fp-healthcare-fingerprint-scan-ui-radial-ring"></div>
                
                <div class="fp-healthcare-fingerprint-scan-ui-fingerprint-core">
                    <svg class="fp-healthcare-fingerprint-scan-ui-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M2 12C2 6.48 6.48 2 12 2s10 4.48 10 10"/>
                        <path d="M5 12c0-3.87 3.13-7 7-7s7 3.13 7 7"/>
                        <path d="M8 12c0-2.21 1.79-4 4-4s4 1.79 4 4"/>
                        <path d="M11 12c0-.55.45-1 1-1s1 .45 1 1"/>
                        <path d="M9 16v1a3 3 0 0 0 6 0v-1"/>
                        <path d="M6 16v1a6 6 0 0 0 12 0v-1"/>
                        <path d="M12 22v-2"/>
                    </svg>
                    <div class="fp-healthcare-fingerprint-scan-ui-scan-line"></div>
                </div>
            </div>

            <div class="fp-healthcare-fingerprint-scan-ui-footer">
                <canvas class="fp-healthcare-fingerprint-scan-ui-canvas"></canvas>
            </div>
        </div>
    </div>
</div>
.fp-healthcare-fingerprint-scan-ui {
    --fp-container-width: 100%;
    --fp-max-width: 500px;
    --fp-aspect-ratio: 1 / 1;
    
    --fp-primary-color: #ffffff;
    --fp-secondary-color: rgba(255, 255, 255, 0.65);
    --fp-muted-color: #64748b;
    --fp-soft-color: #e0f2fe;
    --fp-background-color: transparent;
    
    --fp-info-color: #bae6fd;
    --fp-warning-color: #38bdf8;
    --fp-danger-color: #0ea5e9;
    --fp-accent-color: #0284c7;
    --fp-text-color: #1e3a8a;

    --fp-border-glass: rgba(255, 255, 255, 0.8);
    --fp-shadow-glass: rgba(30, 58, 138, 0.1);
    --fp-glow-core: rgba(56, 189, 248, 0.4);

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

.fp-healthcare-fingerprint-scan-ui * {
    box-sizing: inherit;
}

.fp-healthcare-fingerprint-scan-ui-stage {
    aspect-ratio: var(--fp-aspect-ratio);
    background: var(--fp-primary-color);
    border: 1px solid var(--fp-soft-color);
    border-radius: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 40px -20px var(--fp-shadow-glass);
}

.fp-healthcare-fingerprint-scan-ui-blob-1 {
    position: absolute;
    top: -10%;
    left: -10%;
    width: 60%;
    height: 60%;
    background: var(--fp-info-color);
    border-radius: 50%;
    filter: blur(40px);
    opacity: 0.4;
    animation: fp-healthcare-fingerprint-scan-ui-float 10s ease-in-out infinite alternate;
}

.fp-healthcare-fingerprint-scan-ui-blob-2 {
    position: absolute;
    bottom: -15%;
    right: -10%;
    width: 70%;
    height: 70%;
    background: var(--fp-soft-color);
    border-radius: 50%;
    filter: blur(50px);
    opacity: 0.6;
    animation: fp-healthcare-fingerprint-scan-ui-float-rev 12s ease-in-out infinite alternate;
}

@keyframes fp-healthcare-fingerprint-scan-ui-float {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(10%, 15%) scale(1.1); }
}

@keyframes fp-healthcare-fingerprint-scan-ui-float-rev {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(-15%, -10%) scale(0.9); }
}

.fp-healthcare-fingerprint-scan-ui-glass-card {
    width: 85%;
    height: 85%;
    background: var(--fp-secondary-color);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--fp-border-glass);
    border-radius: 24px;
    box-shadow: 0 8px 32px 0 var(--fp-shadow-glass);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 24px;
    position: relative;
    z-index: 2;
}

.fp-healthcare-fingerprint-scan-ui-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.fp-healthcare-fingerprint-scan-ui-patient-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fp-healthcare-fingerprint-scan-ui-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fp-muted-color);
    font-weight: 600;
}

.fp-healthcare-fingerprint-scan-ui-value {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--fp-text-color);
}

.fp-healthcare-fingerprint-scan-ui-status-badge {
    background: var(--fp-primary-color);
    border: 1px solid var(--fp-soft-color);
    color: var(--fp-accent-color);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 2px 10px var(--fp-shadow-glass);
}

.fp-healthcare-fingerprint-scan-ui-dot {
    width: 6px;
    height: 6px;
    background: var(--fp-danger-color);
    border-radius: 50%;
    animation: fp-healthcare-fingerprint-scan-ui-blink 2s infinite;
}

@keyframes fp-healthcare-fingerprint-scan-ui-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.fp-healthcare-fingerprint-scan-ui-scanner-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 20px 0;
}

.fp-healthcare-fingerprint-scan-ui-radial-ring {
    position: absolute;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 2px solid var(--fp-warning-color);
    opacity: 0;
    animation: fp-healthcare-fingerprint-scan-ui-lub-dub 2.5s cubic-bezier(0.21, 0.53, 0.56, 0.8) infinite;
}

.fp-healthcare-fingerprint-scan-ui-radial-ring:nth-child(2) {
    animation-delay: 0.2s;
    border-width: 1px;
    border-color: var(--fp-info-color);
}

@keyframes fp-healthcare-fingerprint-scan-ui-lub-dub {
    0% { transform: scale(0.6); opacity: 0; }
    20% { opacity: 0.8; }
    50% { transform: scale(1.8); opacity: 0; }
    100% { transform: scale(2.2); opacity: 0; }
}

.fp-healthcare-fingerprint-scan-ui-fingerprint-core {
    position: relative;
    width: 80px;
    height: 80px;
    background: var(--fp-primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px var(--fp-glow-core), inset 0 0 0 1px var(--fp-soft-color);
    z-index: 5;
    transition: all 0.3s ease;
    animation: fp-healthcare-fingerprint-scan-ui-breathe 4s ease-in-out infinite alternate;
}

@keyframes fp-healthcare-fingerprint-scan-ui-breathe {
    0% { transform: scale(1); box-shadow: 0 4px 15px var(--fp-glow-core), inset 0 0 0 1px var(--fp-soft-color); }
    100% { transform: scale(1.05); box-shadow: 0 8px 25px var(--fp-glow-core), inset 0 0 0 1px var(--fp-info-color); }
}

.fp-healthcare-fingerprint-scan-ui-icon {
    width: 40px;
    height: 40px;
    color: var(--fp-accent-color);
    transition: color 0.2s ease;
}

.fp-healthcare-fingerprint-scan-ui-scan-line {
    position: absolute;
    top: 15%;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 2px;
    background: var(--fp-danger-color);
    box-shadow: 0 0 8px var(--fp-danger-color);
    border-radius: 2px;
    z-index: 10;
    animation: fp-healthcare-fingerprint-scan-ui-scan 3s ease-in-out infinite alternate;
}

@keyframes fp-healthcare-fingerprint-scan-ui-scan {
    0% { top: 15%; opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { top: 85%; opacity: 0; }
}

.fp-healthcare-fingerprint-scan-ui-footer {
    height: 60px;
    width: 100%;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 16px;
    border: 1px solid var(--fp-border-glass);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fp-healthcare-fingerprint-scan-ui-canvas {
    width: 100%;
    height: 100%;
    display: block;
}

@media (max-width: 480px) {
    .fp-healthcare-fingerprint-scan-ui-glass-card {
        width: 90%;
        height: 90%;
        padding: 16px;
    }
    .fp-healthcare-fingerprint-scan-ui-fingerprint-core {
        width: 70px;
        height: 70px;
    }
    .fp-healthcare-fingerprint-scan-ui-icon {
        width: 32px;
        height: 32px;
    }
    .fp-healthcare-fingerprint-scan-ui-value {
        font-size: 0.8rem;
    }
}
(function() {
    document.querySelectorAll('.fp-healthcare-fingerprint-scan-ui').forEach(root => {
        const canvas = root.querySelector('.fp-healthcare-fingerprint-scan-ui-canvas');
        const icon = root.querySelector('.fp-healthcare-fingerprint-scan-ui-icon');
        if (!canvas || !icon) return;

        const ctx = canvas.getContext('2d');
        let animationFrameId;
        let width, height;
        let t = 0;

        const style = getComputedStyle(root);
        const colorAccent = style.getPropertyValue('--fp-accent-color').trim() || '#0284c7';
        const colorWarning = style.getPropertyValue('--fp-warning-color').trim() || '#38bdf8';

        function fp_healthcare_fingerprint_scan_ui_resize() {
            if (!canvas.parentElement) return;
            const rect = canvas.parentElement.getBoundingClientRect();
            const dpr = window.devicePixelRatio || 1;
            canvas.width = rect.width * dpr;
            canvas.height = rect.height * dpr;
            width = rect.width;
            height = rect.height;
            ctx.scale(dpr, dpr);
        }

        function fp_healthcare_fingerprint_scan_ui_loop() {
            if (!document.body.contains(root)) {
                cancelAnimationFrame(animationFrameId);
                window.removeEventListener('resize', fp_healthcare_fingerprint_scan_ui_resize);
                document.removeEventListener('visibilitychange', fp_healthcare_fingerprint_scan_ui_handleVisibility);
                observer.disconnect();
                return;
            }

            if (document.visibilityState === 'visible') {
                ctx.clearRect(0, 0, width, height);
                ctx.beginPath();
                ctx.strokeStyle = colorAccent;
                ctx.lineWidth = 1.5;
                ctx.lineJoin = 'round';
                
                let centerY = height / 2;
                ctx.moveTo(0, centerY);
                
                let spikeActive = false;

                for(let x = 0; x < width; x++) {
                    let wave = (x - t) % (width * 0.9);
                    if (wave < 0) wave += (width * 0.9);
                    
                    let yOffset = 0;
                    if (wave > 40 && wave < 80) {
                        let localX = wave - 40; 
                        if (localX < 5) yOffset = 0;
                        else if (localX < 10) yOffset = 6;       
                        else if (localX < 15) { yOffset = -22; spikeActive = true; } 
                        else if (localX < 20) yOffset = 18;      
                        else if (localX < 25) yOffset = 0;
                        else if (localX < 35) yOffset = -4 * Math.sin((localX-25)/10 * Math.PI); 
                    }
                    
                    ctx.lineTo(x, centerY + yOffset);
                }
                ctx.stroke();

                if (spikeActive) {
                    icon.style.color = colorWarning;
                    icon.style.filter = 'drop-shadow(0 0 4px ' + colorWarning + ')';
                } else {
                    icon.style.color = colorAccent;
                    icon.style.filter = 'none';
                }

                t += 1.5; 
            }

            animationFrameId = requestAnimationFrame(fp_healthcare_fingerprint_scan_ui_loop);
        }

        function fp_healthcare_fingerprint_scan_ui_handleVisibility() {
            if (document.visibilityState === 'hidden') {
                if (animationFrameId) {
                    cancelAnimationFrame(animationFrameId);
                    animationFrameId = null;
                }
            } else {
                if (!animationFrameId) {
                    fp_healthcare_fingerprint_scan_ui_resize();
                    animationFrameId = requestAnimationFrame(fp_healthcare_fingerprint_scan_ui_loop);
                }
            }
        }

        window.addEventListener('resize', fp_healthcare_fingerprint_scan_ui_resize);
        document.addEventListener('visibilitychange', fp_healthcare_fingerprint_scan_ui_handleVisibility);
        
        setTimeout(() => {
            fp_healthcare_fingerprint_scan_ui_resize();
        }, 50);

        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    if (!animationFrameId && document.visibilityState === 'visible') {
                        fp_healthcare_fingerprint_scan_ui_resize();
                        animationFrameId = requestAnimationFrame(fp_healthcare_fingerprint_scan_ui_loop);
                    }
                } else {
                    if (animationFrameId) {
                        cancelAnimationFrame(animationFrameId);
                        animationFrameId = null;
                    }
                }
            });
        }, { threshold: 0.1 });

        observer.observe(root);
    });
})();
Created by Digital Market Created: Apr 21, 2026 • Updated: Apr 24, 2026

Description

The MedTech Biometric Scan UI component brings a highly technical and clinical glassmorphism aesthetic directly to your enterprise application. Built exclusively for the pharmacy and health sector, these interactive cards allow your team to implement advanced visual features without compromising application speed or relying on heavy package installations.

Many modern health platforms suffer from bloated frontend architectures that drag down page load times and frustrate engineering teams. This free asset solves that problem by relying entirely on pure native code. It gives tech leads a visually striking component that keeps the DOM absolutely sterile, avoids framework bloat, and respects strict performance budgets required by healthcare systems.

Technical Architecture & Performance

  • Zero Dependency Codebase: Built entirely with vanilla JavaScript, plain HTML, and pure CSS to guarantee maximum performance and immediate browser execution.

  • Sterile DOM Structure: Bypasses the heavy payload of layout frameworks and animation libraries like Tailwind, Bootstrap, and GSAP to maintain a strictly lightweight footprint.

  • Core Web Vitals Optimized: Engineered specifically to help your enterprise pages achieve and easily maintain PageSpeed scores of 90 or higher.

  • Scoped CSS Implementation: Prevents style leakage across your application to make component integration straightforward and highly predictable for your engineering team.

Design & Aesthetic Impact

The visual experience centers on crisp ice blue color tones that communicate trust, cleanliness, and technical authority. When a user interacts with the component, a radial pulse and heartbeat animation triggers to simulate active biometric scanning directly in the browser. This effect creates an engaging aesthetic while keeping the overall user interface clinical and distinctly modern. The native code execution ensures these complex visual effects run at a smooth 60 frames per second without straining mobile or desktop device resources.

Enterprise Use Cases

  1. Patient Health Dashboards: Perfect for displaying live biometric data and critical vital signs within a secure health portal environment.

  2. Pharmacy Inventory Systems: Ideal for rendering active tracking modules where the radial pulse effect can instantly highlight temperature sensitive medication status.

  3. Telehealth Applications: A highly effective fit for active patient consultations, drawing immediate attention to real time data feeds and critical system alerts.

Technical Details

  • IndustryHealth
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

MedTech Biometric Scan – Ice Blue Glassmorphism

$1

Category:

Description

The MedTech Biometric Scan UI component brings a highly technical and clinical glassmorphism aesthetic directly to your enterprise application. Built exclusively for the pharmacy and health sector, these interactive cards allow your team to implement advanced visual features without compromising application speed or relying on heavy package installations.

Many modern health platforms suffer from bloated frontend architectures that drag down page load times and frustrate engineering teams. This free asset solves that problem by relying entirely on pure native code. It gives tech leads a visually striking component that keeps the DOM absolutely sterile, avoids framework bloat, and respects strict performance budgets required by healthcare systems.

Technical Architecture & Performance

  • Zero Dependency Codebase: Built entirely with vanilla JavaScript, plain HTML, and pure CSS to guarantee maximum performance and immediate browser execution.

  • Sterile DOM Structure: Bypasses the heavy payload of layout frameworks and animation libraries like Tailwind, Bootstrap, and GSAP to maintain a strictly lightweight footprint.

  • Core Web Vitals Optimized: Engineered specifically to help your enterprise pages achieve and easily maintain PageSpeed scores of 90 or higher.

  • Scoped CSS Implementation: Prevents style leakage across your application to make component integration straightforward and highly predictable for your engineering team.

Design & Aesthetic Impact

The visual experience centers on crisp ice blue color tones that communicate trust, cleanliness, and technical authority. When a user interacts with the component, a radial pulse and heartbeat animation triggers to simulate active biometric scanning directly in the browser. This effect creates an engaging aesthetic while keeping the overall user interface clinical and distinctly modern. The native code execution ensures these complex visual effects run at a smooth 60 frames per second without straining mobile or desktop device resources.

Enterprise Use Cases

  1. Patient Health Dashboards: Perfect for displaying live biometric data and critical vital signs within a secure health portal environment.

  2. Pharmacy Inventory Systems: Ideal for rendering active tracking modules where the radial pulse effect can instantly highlight temperature sensitive medication status.

  3. Telehealth Applications: A highly effective fit for active patient consultations, drawing immediate attention to real time data feeds and critical system alerts.

Related products