Banking Wealth Biometric – Gold Luxury Onyx
<div class="fp-fintech-wealth-biometric-verification-ui">
<div class="fp-fintech-wealth-biometric-verification-ui-stage">
<div class="fp-fintech-wealth-biometric-verification-ui-ambient"></div>
<div class="fp-fintech-wealth-biometric-verification-ui-card" id="fp-fintech-wealth-biometric-verification-ui-card">
<div class="fp-fintech-wealth-biometric-verification-ui-header">
<span class="fp-fintech-wealth-biometric-verification-ui-tag">Private Wealth</span>
<span class="fp-fintech-wealth-biometric-verification-ui-id">ID: ONYX-089</span>
</div>
<div class="fp-fintech-wealth-biometric-verification-ui-center">
<div class="fp-fintech-wealth-biometric-verification-ui-ring fp-fintech-wealth-biometric-verification-ui-ring-1"></div>
<div class="fp-fintech-wealth-biometric-verification-ui-ring fp-fintech-wealth-biometric-verification-ui-ring-2"></div>
<div class="fp-fintech-wealth-biometric-verification-ui-fingerprint">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 10a2 2 0 0 0-2 2c0 1.02-.1 2.51-.26 4"></path>
<path d="M14 13.12c0 2.38 0 6.38-1 8.88"></path>
<path d="M17.29 21.02c.12-.6.43-2.3.5-3.02"></path>
<path d="M2 12a10 10 0 0 1 18-6"></path>
<path d="M2 16h.01"></path>
<path d="M21.8 16c.2-2 .131-5.354 0-6"></path>
<path d="M5 19.5C5.5 18 6 15 6 12a6 6 0 0 1 .34-2"></path>
<path d="M8.65 22c.21-.66.45-1.32.57-2"></path>
<path d="M9 6.8a6 6 0 0 1 9 5.2v2"></path>
</svg>
<div class="fp-fintech-wealth-biometric-verification-ui-scanline"></div>
</div>
</div>
<div class="fp-fintech-wealth-biometric-verification-ui-status-wrap">
<div class="fp-fintech-wealth-biometric-verification-ui-status-indicator">
<div class="fp-fintech-wealth-biometric-verification-ui-dot" id="fp-fintech-wealth-biometric-verification-ui-dot"></div>
<div class="fp-fintech-wealth-biometric-verification-ui-text" id="fp-fintech-wealth-biometric-verification-ui-text">AWAITING SENSOR</div>
</div>
</div>
<div class="fp-fintech-wealth-biometric-verification-ui-shimmer"></div>
</div>
</div>
</div>.fp-fintech-wealth-biometric-verification-ui {
--fp-container-width: 100%;
--fp-max-width: 500px;
--fp-aspect-ratio: 1 / 1;
--fp-primary-color: #FAFAFA;
--fp-secondary-color: #F0F0F0;
--fp-muted-color: #737373;
--fp-soft-color: #E5E5E5;
--fp-background-color: transparent;
--fp-info-color: #D4AF37;
--fp-warning-color: #FCD34D;
--fp-danger-color: #B45309;
--fp-accent-color: #FFD700;
--fp-text-color: #0A0A0A;
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, sans-serif;
box-sizing: border-box;
position: relative;
}
.fp-fintech-wealth-biometric-verification-ui * {
box-sizing: inherit;
}
.fp-fintech-wealth-biometric-verification-ui-stage {
aspect-ratio: var(--fp-aspect-ratio);
background: linear-gradient(135deg, var(--fp-primary-color) 0%, var(--fp-secondary-color) 100%);
border-radius: 24px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
box-shadow: 0 20px 50px -10px rgba(10, 10, 10, 0.1);
border: 1px solid #ffffff;
}
.fp-fintech-wealth-biometric-verification-ui-ambient {
position: absolute;
width: 150%;
height: 150%;
background: radial-gradient(circle at center, rgba(212, 175, 55, 0.1) 0%, transparent 60%);
animation: fp-fintech-wealth-biometric-verification-ui-breathe 4s ease-in-out infinite alternate;
pointer-events: none;
z-index: 1;
}
@keyframes fp-fintech-wealth-biometric-verification-ui-breathe {
0% { transform: scale(0.9); opacity: 0.4; }
100% { transform: scale(1.1); opacity: 0.8; }
}
.fp-fintech-wealth-biometric-verification-ui-card {
position: relative;
z-index: 2;
width: 80%;
height: 80%;
background: var(--fp-text-color);
border-radius: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 24px;
box-shadow:
0 20px 40px rgba(0, 0, 0, 0.4),
inset 0 1px 1px rgba(255, 255, 255, 0.1),
inset 0 -1px 0 rgba(212, 175, 55, 0.3);
border: 1px solid rgba(212, 175, 55, 0.2);
overflow: hidden;
}
.fp-fintech-wealth-biometric-verification-ui-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
z-index: 3;
}
.fp-fintech-wealth-biometric-verification-ui-tag {
font-size: 0.65rem;
font-weight: 800;
letter-spacing: 0.2em;
color: var(--fp-primary-color);
background: linear-gradient(90deg, var(--fp-info-color), var(--fp-danger-color));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-transform: uppercase;
}
.fp-fintech-wealth-biometric-verification-ui-id {
font-size: 0.65rem;
font-weight: 600;
color: var(--fp-muted-color);
font-family: ui-monospace, monospace;
letter-spacing: 0.05em;
}
.fp-fintech-wealth-biometric-verification-ui-center {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.fp-fintech-wealth-biometric-verification-ui-ring {
position: absolute;
border-radius: 50%;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.fp-fintech-wealth-biometric-verification-ui-ring-1 {
width: 140px; height: 140px;
border: 1px dashed rgba(212, 175, 55, 0.3);
animation: fp-fintech-wealth-biometric-verification-ui-spin 12s linear infinite;
}
.fp-fintech-wealth-biometric-verification-ui-ring-2 {
width: 180px; height: 180px;
border: 1px solid rgba(212, 175, 55, 0.1);
border-top-color: var(--fp-info-color);
animation: fp-fintech-wealth-biometric-verification-ui-spin-rev 8s linear infinite;
}
@keyframes fp-fintech-wealth-biometric-verification-ui-spin {
0% { transform: translate(-50%, -50%) rotate(0deg); }
100% { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes fp-fintech-wealth-biometric-verification-ui-spin-rev {
0% { transform: translate(-50%, -50%) rotate(360deg); }
100% { transform: translate(-50%, -50%) rotate(0deg); }
}
.fp-fintech-wealth-biometric-verification-ui-fingerprint {
width: 80px;
height: 80px;
color: var(--fp-muted-color);
position: relative;
z-index: 5;
transition: color 0.4s ease, transform 0.4s ease;
opacity: 0.8;
}
.fp-fintech-wealth-biometric-verification-ui-fingerprint svg {
width: 100%;
height: 100%;
filter: drop-shadow(0 0 8px rgba(0,0,0,0.5));
}
.fp-fintech-wealth-biometric-verification-ui-scanline {
position: absolute;
top: 0; left: -10%; right: -10%;
height: 2px;
background: var(--fp-accent-color);
box-shadow: 0 0 10px var(--fp-accent-color), 0 0 20px var(--fp-warning-color);
opacity: 0;
transform: translateY(0);
z-index: 6;
}
.fp-fintech-wealth-biometric-verification-ui-status-wrap {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
z-index: 3;
}
.fp-fintech-wealth-biometric-verification-ui-status-indicator {
display: flex;
align-items: center;
gap: 8px;
}
.fp-fintech-wealth-biometric-verification-ui-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--fp-muted-color);
transition: all 0.3s ease;
box-shadow: 0 0 0 rgba(0,0,0,0);
}
.fp-fintech-wealth-biometric-verification-ui-text {
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.1em;
color: var(--fp-muted-color);
text-transform: uppercase;
transition: color 0.3s ease;
}
.fp-fintech-wealth-biometric-verification-ui-card.is-scanning .fp-fintech-wealth-biometric-verification-ui-fingerprint {
color: var(--fp-primary-color);
opacity: 1;
}
.fp-fintech-wealth-biometric-verification-ui-card.is-scanning .fp-fintech-wealth-biometric-verification-ui-scanline {
opacity: 1;
animation: fp-fintech-wealth-biometric-verification-ui-scan-anim 1s ease-in-out infinite alternate;
}
@keyframes fp-fintech-wealth-biometric-verification-ui-scan-anim {
0% { transform: translateY(0px); }
100% { transform: translateY(80px); }
}
.fp-fintech-wealth-biometric-verification-ui-card.is-scanning .fp-fintech-wealth-biometric-verification-ui-ring-1 {
border-color: rgba(212, 175, 55, 0.8);
animation-duration: 4s;
}
.fp-fintech-wealth-biometric-verification-ui-card.is-scanning .fp-fintech-wealth-biometric-verification-ui-ring-2 {
border-top-color: var(--fp-accent-color);
animation-duration: 3s;
}
.fp-fintech-wealth-biometric-verification-ui-card.is-scanning .fp-fintech-wealth-biometric-verification-ui-dot {
background: var(--fp-warning-color);
box-shadow: 0 0 8px var(--fp-warning-color);
animation: fp-fintech-wealth-biometric-verification-ui-pulse 0.5s infinite alternate;
}
@keyframes fp-fintech-wealth-biometric-verification-ui-pulse {
from { opacity: 1; transform: scale(1); }
to { opacity: 0.5; transform: scale(0.8); }
}
.fp-fintech-wealth-biometric-verification-ui-card.is-scanning .fp-fintech-wealth-biometric-verification-ui-text {
color: var(--fp-primary-color);
}
.fp-fintech-wealth-biometric-verification-ui-card.is-verified .fp-fintech-wealth-biometric-verification-ui-fingerprint {
color: var(--fp-accent-color);
transform: scale(1.1);
filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.6));
}
.fp-fintech-wealth-biometric-verification-ui-card.is-verified .fp-fintech-wealth-biometric-verification-ui-ring {
border-color: var(--fp-accent-color);
transform: translate(-50%, -50%) scale(1.1);
opacity: 0;
}
.fp-fintech-wealth-biometric-verification-ui-card.is-verified .fp-fintech-wealth-biometric-verification-ui-dot {
background: var(--fp-accent-color);
box-shadow: 0 0 12px var(--fp-accent-color);
}
.fp-fintech-wealth-biometric-verification-ui-card.is-verified .fp-fintech-wealth-biometric-verification-ui-text {
color: var(--fp-accent-color);
text-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
}
.fp-fintech-wealth-biometric-verification-ui-shimmer {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: linear-gradient(
105deg,
transparent 20%,
rgba(255, 215, 0, 0.15) 45%,
rgba(255, 255, 255, 0.5) 50%,
rgba(255, 215, 0, 0.15) 55%,
transparent 80%
);
transform: translateX(-150%);
z-index: 10;
pointer-events: none;
}
.fp-fintech-wealth-biometric-verification-ui-card.is-verified .fp-fintech-wealth-biometric-verification-ui-shimmer {
animation: fp-fintech-wealth-biometric-verification-ui-shimmer-sweep 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes fp-fintech-wealth-biometric-verification-ui-shimmer-sweep {
0% { transform: translateX(-150%) skewX(-15deg); }
100% { transform: translateX(150%) skewX(-15deg); }
}
@media (max-width: 480px) {
.fp-fintech-wealth-biometric-verification-ui-card { width: 90%; height: 90%; padding: 20px; }
.fp-fintech-wealth-biometric-verification-ui-ring-1 { width: 120px; height: 120px; }
.fp-fintech-wealth-biometric-verification-ui-ring-2 { width: 150px; height: 150px; }
.fp-fintech-wealth-biometric-verification-ui-fingerprint { width: 70px; height: 70px; }
.fp-fintech-wealth-biometric-verification-ui-text { font-size: 0.6rem; }
}(function() {
document.querySelectorAll('.fp-fintech-wealth-biometric-verification-ui').forEach(root => {
const card = root.querySelector('#fp-fintech-wealth-biometric-verification-ui-card');
const statusText = root.querySelector('#fp-fintech-wealth-biometric-verification-ui-text');
if (!card || !statusText) return;
let animationFrameId;
let lastEventTime = 0;
let state = 0;
function fp_fintech_wealth_biometric_verification_ui_loop(timestamp) {
if (!document.body.contains(root)) {
cancelAnimationFrame(animationFrameId);
observer.disconnect();
document.removeEventListener('visibilitychange', fp_fintech_wealth_biometric_verification_ui_handleVisibilityChange);
return;
}
if (document.visibilityState === 'visible') {
if (!lastEventTime) lastEventTime = timestamp;
const elapsed = timestamp - lastEventTime;
if (state === 0 && elapsed > 2500) {
state = 1;
lastEventTime = timestamp;
card.classList.add('is-scanning');
statusText.textContent = "VERIFYING BIOMETRIC...";
}
else if (state === 1 && elapsed > 2000) {
state = 2;
lastEventTime = timestamp;
card.classList.remove('is-scanning');
card.classList.remove('is-verified');
void card.offsetWidth;
card.classList.add('is-verified');
statusText.textContent = "VIP ACCESS GRANTED";
}
else if (state === 2 && elapsed > 3500) {
state = 0;
lastEventTime = timestamp;
card.classList.remove('is-verified');
statusText.textContent = "AWAITING SENSOR";
}
}
animationFrameId = requestAnimationFrame(fp_fintech_wealth_biometric_verification_ui_loop);
}
function fp_fintech_wealth_biometric_verification_ui_handleVisibilityChange() {
if (document.visibilityState === 'hidden') {
if (animationFrameId) {
cancelAnimationFrame(animationFrameId);
animationFrameId = null;
lastEventTime = 0;
}
} else {
if (!animationFrameId) {
lastEventTime = performance.now();
animationFrameId = requestAnimationFrame(fp_fintech_wealth_biometric_verification_ui_loop);
}
}
}
document.addEventListener('visibilitychange', fp_fintech_wealth_biometric_verification_ui_handleVisibilityChange);
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
if (!animationFrameId && document.visibilityState === 'visible') {
lastEventTime = performance.now();
animationFrameId = requestAnimationFrame(fp_fintech_wealth_biometric_verification_ui_loop);
}
} else {
if (animationFrameId) {
cancelAnimationFrame(animationFrameId);
animationFrameId = null;
lastEventTime = 0;
}
}
});
}, { threshold: 0.1 });
observer.observe(root);
});
})();
Description
The Banking Wealth Biometric card is a high-performance UI component designed for the elite tier of the FinTech and private banking sectors. It provides a sophisticated interface for displaying biometric authentication states, wealth management tiers, and secure asset overviews. This component offers a drop-in solution for technical teams that require a high-end aesthetic without the technical debt of massive external frameworks.
In the world of private banking, client trust starts with a flawless digital experience. Many interactive components rely on heavy third-party libraries that bloat the DOM and slow down mobile interactions. This asset solves that problem by using a sterile code structure. It ensures that your secure banking portal remains exceptionally fast and responsive. This allows high-net-worth users to access their accounts with zero friction, maintaining the high performance standards required for enterprise financial software.
Technical Architecture & Performance
-
Zero-Dependency Core: Built entirely with native HTML, CSS, and Vanilla JavaScript. There is no reliance on Tailwind, Bootstrap, or GSAP.
-
Sterile DOM Structure: The markup is lean and semantic. This minimizes the browser work required for layout calculations and avoids the complexity of virtual DOM reconciliations.
-
Core Web Vitals Optimization: Every line of code is tuned for speed. You can expect a 90+ score on mobile and desktop performance audits out of the box.
-
Pure CSS Scoping: All styles are encapsulated to prevent CSS leakage. This makes it safe to integrate into large-scale banking applications without breaking global styles.
-
Main Thread Efficiency: The animation logic is lightweight and hardware-accelerated. This keeps the browser main thread clear for critical security logic and API fetching.
Design & Aesthetic Impact
The visual identity of this component is defined by the Gold Premium and Onyx color palette. It uses high-contrast, deep blacks and metallic gold accents to establish a sense of exclusivity and security. The primary design feature is a sophisticated shimmering light sweep animation. As the user interacts with the card or completes a biometric scan, a subtle beam of light travels across the surface. The UI remains clean and professional, focusing on high legibility. The result is a premium aesthetic that communicates wealth and technological precision.
Enterprise Use Cases
-
Wealth Management Dashboards: Use these cards to display premium account tiers or investment portfolio summaries. The shimmering animation provides a subtle visual reward when a client achieves a new wealth status.
-
Biometric Authentication Screens: Integrate the component into the login flow of a mobile banking app. It serves as a high-performance visual indicator during face or fingerprint scanning processes.
-
High-Limit Credit Portals: Implement the cards as interactive displays for elite credit products. The fast-loading code ensures that clients can view their spending limits and secure details on any device without the UI slowing down their experience.
Highlights & Benefits
Drop the code straight into your project without configuration.
Built strictly with pure CSS & Vanilla JS for maximum speed.
Constructed with strict adherence to WCAG accessibility standards for perfect contrast and screen-reader support.
Utilizes a highly optimized, clean DOM architecture ensuring lightning-fast render and maximum PageSpeed scores.
Banking Wealth Biometric – Gold Luxury Onyx
Description
The Banking Wealth Biometric card is a high-performance UI component designed for the elite tier of the FinTech and private banking sectors. It provides a sophisticated interface for displaying biometric authentication states, wealth management tiers, and secure asset overviews. This component offers a drop-in solution for technical teams that require a high-end aesthetic without the technical debt of massive external frameworks.
In the world of private banking, client trust starts with a flawless digital experience. Many interactive components rely on heavy third-party libraries that bloat the DOM and slow down mobile interactions. This asset solves that problem by using a sterile code structure. It ensures that your secure banking portal remains exceptionally fast and responsive. This allows high-net-worth users to access their accounts with zero friction, maintaining the high performance standards required for enterprise financial software.
Technical Architecture & Performance
-
Zero-Dependency Core: Built entirely with native HTML, CSS, and Vanilla JavaScript. There is no reliance on Tailwind, Bootstrap, or GSAP.
-
Sterile DOM Structure: The markup is lean and semantic. This minimizes the browser work required for layout calculations and avoids the complexity of virtual DOM reconciliations.
-
Core Web Vitals Optimization: Every line of code is tuned for speed. You can expect a 90+ score on mobile and desktop performance audits out of the box.
-
Pure CSS Scoping: All styles are encapsulated to prevent CSS leakage. This makes it safe to integrate into large-scale banking applications without breaking global styles.
-
Main Thread Efficiency: The animation logic is lightweight and hardware-accelerated. This keeps the browser main thread clear for critical security logic and API fetching.
Design & Aesthetic Impact
The visual identity of this component is defined by the Gold Premium and Onyx color palette. It uses high-contrast, deep blacks and metallic gold accents to establish a sense of exclusivity and security. The primary design feature is a sophisticated shimmering light sweep animation. As the user interacts with the card or completes a biometric scan, a subtle beam of light travels across the surface. The UI remains clean and professional, focusing on high legibility. The result is a premium aesthetic that communicates wealth and technological precision.
Enterprise Use Cases
-
Wealth Management Dashboards: Use these cards to display premium account tiers or investment portfolio summaries. The shimmering animation provides a subtle visual reward when a client achieves a new wealth status.
-
Biometric Authentication Screens: Integrate the component into the login flow of a mobile banking app. It serves as a high-performance visual indicator during face or fingerprint scanning processes.
-
High-Limit Credit Portals: Implement the cards as interactive displays for elite credit products. The fast-loading code ensures that clients can view their spending limits and secure details on any device without the UI slowing down their experience.
