Free

Music 2FA Code – Lavender Acrylic

<div class="fp-music-streaming-otp-2fa-input-ui">
    <div class="fp-music-streaming-otp-2fa-input-ui-stage" id="fp-music-streaming-otp-2fa-input-ui-stage">
        
        <div class="fp-music-streaming-otp-2fa-input-ui-ambient"></div>
        
        <div class="fp-music-streaming-otp-2fa-input-ui-vinyl-wrap">
            <div class="fp-music-streaming-otp-2fa-input-ui-groove fp-music-streaming-otp-2fa-input-ui-groove-1"></div>
            <div class="fp-music-streaming-otp-2fa-input-ui-groove fp-music-streaming-otp-2fa-input-ui-groove-2"></div>
            <div class="fp-music-streaming-otp-2fa-input-ui-groove fp-music-streaming-otp-2fa-input-ui-groove-3"></div>
        </div>

        <div class="fp-music-streaming-otp-2fa-input-ui-card">
            
            <div class="fp-music-streaming-otp-2fa-input-ui-header">
                <svg class="fp-music-streaming-otp-2fa-input-ui-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
                    <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
                    <circle cx="12" cy="16" r="1"></circle>
                </svg>
                <h3 class="fp-music-streaming-otp-2fa-input-ui-title">Artist Studio Auth</h3>
                <span class="fp-music-streaming-otp-2fa-input-ui-subtitle">Enter the 4-digit master pin to unlock session files.</span>
            </div>

            <div class="fp-music-streaming-otp-2fa-input-ui-otp-container" id="fp-music-streaming-otp-2fa-input-ui-otp">
                <div class="fp-music-streaming-otp-2fa-input-ui-digit is-active"></div>
                <div class="fp-music-streaming-otp-2fa-input-ui-digit"></div>
                <div class="fp-music-streaming-otp-2fa-input-ui-digit"></div>
                <div class="fp-music-streaming-otp-2fa-input-ui-digit"></div>
            </div>

            <div class="fp-music-streaming-otp-2fa-input-ui-footer" id="fp-music-streaming-otp-2fa-input-ui-footer-text">
                Resend code in 00:30
            </div>

        </div>

    </div>
</div>

.fp-music-streaming-otp-2fa-input-ui {
    --fp-container-width: 100%;
    --fp-max-width: 500px;
    --fp-aspect-ratio: 1 / 1;

    --fp-primary-color: #f9f8f6; 
    --fp-secondary-color: #f0edf5; 
    --fp-muted-color: #8a7b9d; 
    --fp-soft-color: #e2deea; 
    --fp-background-color: transparent;

    --fp-info-color: #d1c4e9; 
    --fp-warning-color: #b39ddb; 
    --fp-danger-color: #311b53; 
    --fp-accent-color: #9575cd; 
    --fp-text-color: #311b53; 

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

.fp-music-streaming-otp-2fa-input-ui * {
    box-sizing: inherit;
}

.fp-music-streaming-otp-2fa-input-ui-stage {
    aspect-ratio: var(--fp-aspect-ratio);
    background: var(--fp-primary-color);
    border-radius: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--fp-soft-color);
    box-shadow: 0 20px 40px -10px rgba(49, 27, 83, 0.08);
}

.fp-music-streaming-otp-2fa-input-ui-ambient {
    position: absolute;
    width: 150%;
    height: 150%;
    background: 
        radial-gradient(circle at 30% 30%, rgba(179, 157, 219, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 70% 70%, rgba(149, 117, 205, 0.1) 0%, transparent 50%);
    animation: fp-music-streaming-otp-2fa-input-ui-breathe 6s ease-in-out infinite alternate;
    z-index: 1;
    pointer-events: none;
}

@keyframes fp-music-streaming-otp-2fa-input-ui-breathe {
    0% { transform: scale(0.9) rotate(0deg); opacity: 0.6; }
    100% { transform: scale(1.1) rotate(10deg); opacity: 1; }
}

.fp-music-streaming-otp-2fa-input-ui-vinyl-wrap {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 300px; height: 300px;
    z-index: 2;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fp-music-streaming-otp-2fa-input-ui-groove {
    position: absolute;
    border-radius: 50%;
    border: 1px solid transparent;
}

.fp-music-streaming-otp-2fa-input-ui-groove-1 {
    width: 100%; height: 100%;
    border-color: rgba(149, 117, 205, 0.2);
    border-style: dashed;
    animation: fp-music-streaming-otp-2fa-input-ui-spin 20s linear infinite;
}

.fp-music-streaming-otp-2fa-input-ui-groove-2 {
    width: 75%; height: 75%;
    border-color: rgba(179, 157, 219, 0.3);
    border-top-color: transparent;
    border-bottom-color: transparent;
    animation: fp-music-streaming-otp-2fa-input-ui-spin-rev 15s linear infinite;
}

.fp-music-streaming-otp-2fa-input-ui-groove-3 {
    width: 50%; height: 50%;
    border-color: rgba(209, 196, 233, 0.4);
    border-left-color: transparent;
    animation: fp-music-streaming-otp-2fa-input-ui-spin 10s linear infinite;
}

@keyframes fp-music-streaming-otp-2fa-input-ui-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@keyframes fp-music-streaming-otp-2fa-input-ui-spin-rev {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(-360deg); }
}

.fp-music-streaming-otp-2fa-input-ui-card {
    position: relative;
    z-index: 10;
    width: 80%;
    max-width: 320px;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 24px;
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    box-shadow: 
        0 16px 40px -10px rgba(49, 27, 83, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.fp-music-streaming-otp-2fa-input-ui-header {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.fp-music-streaming-otp-2fa-input-ui-icon {
    width: 32px;
    height: 32px;
    color: var(--fp-accent-color);
    margin-bottom: 4px;
}

.fp-music-streaming-otp-2fa-input-ui-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--fp-text-color);
    margin: 0;
    letter-spacing: -0.01em;
}

.fp-music-streaming-otp-2fa-input-ui-subtitle {
    font-size: 0.75rem;
    color: var(--fp-muted-color);
    line-height: 1.4;
}

.fp-music-streaming-otp-2fa-input-ui-otp-container {
    display: flex;
    gap: 12px;
    justify-content: center;
    width: 100%;
}

.fp-music-streaming-otp-2fa-input-ui-digit {
    width: 48px;
    height: 56px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid var(--fp-soft-color);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--fp-text-color);
    box-shadow: inset 0 2px 4px rgba(49, 27, 83, 0.02);
    transition: all 0.3s ease;
    position: relative;
}

.fp-music-streaming-otp-2fa-input-ui-digit.is-active {
    border-color: var(--fp-accent-color);
    background: var(--fp-primary-color);
    box-shadow: 
        0 0 0 3px rgba(149, 117, 205, 0.2),
        inset 0 2px 4px rgba(49, 27, 83, 0.02);
    transform: translateY(-2px);
}

.fp-music-streaming-otp-2fa-input-ui-digit.is-active::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 24px;
    background: var(--fp-accent-color);
    animation: fp-music-streaming-otp-2fa-input-ui-blink 1s step-end infinite;
}

.fp-music-streaming-otp-2fa-input-ui-digit.has-value::after {
    display: none; 
}

@keyframes fp-music-streaming-otp-2fa-input-ui-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

.fp-music-streaming-otp-2fa-input-ui-footer {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--fp-accent-color);
    text-align: center;
    transition: color 0.3s;
}

.fp-music-streaming-otp-2fa-input-ui-stage.is-verifying .fp-music-streaming-otp-2fa-input-ui-card {
    box-shadow: 
        0 16px 40px -10px rgba(149, 117, 205, 0.3),
        inset 0 0 40px rgba(179, 157, 219, 0.2);
    border-color: var(--fp-warning-color);
}

.fp-music-streaming-otp-2fa-input-ui-stage.is-verifying .fp-music-streaming-otp-2fa-input-ui-digit {
    animation: fp-music-streaming-otp-2fa-input-ui-pulse-digit 1s infinite alternate;
}

.fp-music-streaming-otp-2fa-input-ui-stage.is-verifying .fp-music-streaming-otp-2fa-input-ui-footer {
    color: var(--fp-muted-color);
}

@keyframes fp-music-streaming-otp-2fa-input-ui-pulse-digit {
    0% { border-color: var(--fp-soft-color); background: rgba(255, 255, 255, 0.7); }
    100% { border-color: var(--fp-accent-color); background: rgba(255, 255, 255, 0.9); }
}

.fp-music-streaming-otp-2fa-input-ui-stage.is-success .fp-music-streaming-otp-2fa-input-ui-card {
    transform: scale(1.02);
    border-color: var(--fp-accent-color);
    box-shadow: 0 20px 50px -10px rgba(149, 117, 205, 0.4);
}

.fp-music-streaming-otp-2fa-input-ui-stage.is-success .fp-music-streaming-otp-2fa-input-ui-digit {
    background: var(--fp-accent-color);
    color: var(--fp-primary-color);
    border-color: var(--fp-accent-color);
    box-shadow: 0 4px 15px rgba(149, 117, 205, 0.4);
}

.fp-music-streaming-otp-2fa-input-ui-stage.is-success .fp-music-streaming-otp-2fa-input-ui-footer {
    color: var(--fp-danger-color);
}

.fp-music-streaming-otp-2fa-input-ui-stage.is-success .fp-music-streaming-otp-2fa-input-ui-groove {
    border-color: var(--fp-accent-color);
    animation-duration: 3s; 
}

@media (max-width: 480px) {
    .fp-music-streaming-otp-2fa-input-ui-card { width: 90%; padding: 24px 16px; }
    .fp-music-streaming-otp-2fa-input-ui-digit { width: 42px; height: 50px; font-size: 1.25rem; }
}

(function() {
    document.querySelectorAll('.fp-music-streaming-otp-2fa-input-ui').forEach(root => {
        const stage = root.querySelector('#fp-music-streaming-otp-2fa-input-ui-stage');
        const digits = root.querySelectorAll('.fp-music-streaming-otp-2fa-input-ui-digit');
        const footerText = root.querySelector('#fp-music-streaming-otp-2fa-input-ui-footer-text');

        if (!stage || digits.length !== 4 || !footerText) return;

        let animationFrameId;
        let lastTick = 0;
        let state = 'IDLE'; 
        let stepTimer = 0;
        let currentDigitIdx = 0;
        const otpCode = ['7', '3', '0', '9'];

        function resetUI() {
            digits.forEach((el, idx) => {
                el.textContent = '';
                el.classList.remove('is-active', 'has-value');
                if (idx === 0) el.classList.add('is-active');
            });
            stage.classList.remove('is-verifying', 'is-success');
            footerText.textContent = "Resend code in 00:30";
            currentDigitIdx = 0;
        }

        function fp_music_streaming_otp_2fa_input_ui_loop(timestamp) {
            if (!document.body.contains(root)) {
                cancelAnimationFrame(animationFrameId);
                if (typeof observer !== 'undefined') observer.disconnect();
                document.removeEventListener('visibilitychange', fp_music_streaming_otp_2fa_input_ui_handleVisibilityChange);
                return;
            }

            if (document.visibilityState === 'visible') {
                if (!lastTick) lastTick = timestamp;
                lastTick = timestamp;

                if (state === 'IDLE') {
                    if (!stepTimer) stepTimer = timestamp;
                    if (timestamp - stepTimer > 2000) {
                        state = 'TYPING';
                        stepTimer = timestamp;
                    }
                } else if (state === 'TYPING') {
                    if (timestamp - stepTimer > 400 + Math.random() * 200) {
                        stepTimer = timestamp;

                        if (currentDigitIdx < 4) {
                            digits[currentDigitIdx].textContent = otpCode[currentDigitIdx];
                            digits[currentDigitIdx].classList.remove('is-active');
                            digits[currentDigitIdx].classList.add('has-value');
                            
                            currentDigitIdx++;
                            
                            if (currentDigitIdx < 4) {
                                digits[currentDigitIdx].classList.add('is-active');
                            } else {
                                state = 'VERIFYING';
                                stepTimer = timestamp;
                                stage.classList.add('is-verifying');
                                footerText.textContent = "Verifying sequence...";
                            }
                        }
                    }
                } else if (state === 'VERIFYING') {
                    if (timestamp - stepTimer > 1500) {
                        state = 'SUCCESS';
                        stepTimer = timestamp;
                        stage.classList.remove('is-verifying');
                        stage.classList.add('is-success');
                        footerText.textContent = "Access Granted";
                    }
                } else if (state === 'SUCCESS') {
                    if (timestamp - stepTimer > 3000) {
                        state = 'IDLE';
                        stepTimer = timestamp;
                        resetUI();
                    }
                }
            }

            animationFrameId = requestAnimationFrame(fp_music_streaming_otp_2fa_input_ui_loop);
        }

        function fp_music_streaming_otp_2fa_input_ui_handleVisibilityChange() {
            if (document.visibilityState === 'hidden') {
                if (animationFrameId) {
                    cancelAnimationFrame(animationFrameId);
                    animationFrameId = null;
                    stepTimer = 0; 
                }
            } else {
                if (!animationFrameId) {
                    lastTick = performance.now();
                    animationFrameId = requestAnimationFrame(fp_music_streaming_otp_2fa_input_ui_loop);
                }
            }
        }

        document.addEventListener('visibilitychange', fp_music_streaming_otp_2fa_input_ui_handleVisibilityChange);

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

        observer.observe(root);
        
        resetUI();
    });
})();

Created by Digital Market Created: Apr 27, 2026 • Updated: Apr 27, 2026

Description

Let us look at the Music 2FA Code Lavender Acrylic component. This free UI asset offers a modular card system specifically engineered for the music industry and audio streaming sector. We built this entirely from scratch to handle secure user authentication without the usual framework bloat. You get a sterile DOM structure that integrates cleanly into your existing audio application architecture.

Audio platforms often process heavy media streams and require absolute reliability during user logins. Massive client side payloads completely ruin performance metrics when immediate access is needed to secure artist dashboards or high fidelity streaming libraries. 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 audio engineers and producers who need to authenticate quickly on busy studio networks.

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 audio 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 pairs Lavender Soft tones with a modern acrylic finish to establish a creative and focused environment. This translucent and highly readable aesthetic ensures visual clarity for users interacting with secure two factor authentication prompts. For the interaction layer, we implemented custom typing cursor blink animations. These subtle rhythmic transitions provide clear visual feedback during active code entry without requiring heavy javascript animation scripts. The final result is a clean user interface that looks premium and functions perfectly for strict enterprise audio environments.

Enterprise Use Cases

Artist distribution portals: Display secure two factor authentication prompts using the card grid so musicians can access their royalty dashboards quickly.
Studio session booking platforms: Build a fast rendering security page where studio managers can organize and authorize sensitive recording schedules within a lightweight interface.
High fidelity streaming apps: Create a responsive control layout for audio engineers to track active identity verifications across multiple premium subscriber accounts.

Technical Details

ElementCards
IndustryAudio, Music
StyleTranslucent Acrylic
AnimationTyping Cursor Blink
Colorpurple, White

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.

Music 2FA Code – Lavender Acrylic

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

Artist distribution portals: Display secure two factor authentication prompts using the card grid so musicians can access their royalty dashboards quickly.
Studio session booking platforms: Build a fast rendering security page where studio managers can organize and authorize sensitive recording schedules within a lightweight interface.
High fidelity streaming apps: Create a responsive control layout for audio engineers to track active identity verifications across multiple premium subscriber accounts.

Music 2FA Code – Lavender Acrylic

Description

Technical Architecture & Performance

Design & Aesthetic Impact

Enterprise Use Cases

Technical Details

Highlights & Benefits

Music 2FA Code – Lavender Acrylic

Description

Technical Architecture & Performance

Design & Aesthetic Impact

Enterprise Use Cases

Related products

EdTech Face Verification – Denim Blueprint Draft

SaaS Server Vitals – Classic SaaS Blue Clean Modern

Creative Studio Upload Matrix – Mint Fresh Matte Neon

FinTech Data Flow – Slate Blue Skeuomorphic