Free
Vet Face ID Guard – Rose Gold Matte
<div class="fp-pet-care-face-id-verification-ui">
<style>
.fp-pet-care-face-id-verification-ui {
/* ━━━━━━━━━━━━━━━━━━
LAYOUT & SIZING SYSTEM
━━━━━━━━━━━━━━━━━━ */
--fp-container-width: 100%;
--fp-max-width: 500px;
--fp-aspect-ratio: 1 / 1;
/* ━━━━━━━━━━━━━━━━━━
COLOR SYSTEM (Ivory, Matte Black, Rose Gold)
━━━━━━━━━━━━━━━━━━ */
--fp-primary-color: #FAF8F5; /* Putih Gading (Ivory) */
--fp-secondary-color: #E8E4DD; /* Soft Border */
--fp-muted-color: #8C8782; /* Muted Text */
--fp-soft-color: #1E1C1B; /* Matte Black (Text & Tech Elements) */
--fp-background-color: transparent;
--fp-info-color: #D48C9A; /* Rose Gold */
--fp-warning-color: #D48C9A;
--fp-danger-color: #D48C9A;
--fp-accent-color: #D48C9A; /* Rose Gold Accent / Neon */
width: var(--fp-container-width);
max-width: var(--fp-max-width);
margin: 0 auto;
position: relative;
box-sizing: border-box;
background-color: var(--fp-background-color);
font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.fp-pet-care-face-id-verification-ui * {
box-sizing: border-box;
}
/* ━━━━━━━━━━━━━━━━━━
MAIN STAGE
━━━━━━━━━━━━━━━━━━ */
.fp-pet-care-face-id-verification-ui-stage {
width: 100%;
aspect-ratio: var(--fp-aspect-ratio);
background-color: var(--fp-primary-color);
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border: 1px solid var(--fp-secondary-color);
border-radius: 24px;
box-shadow: 0 12px 36px rgba(30, 28, 27, 0.04);
/* Layer 1: Subtle Base Breathing */
animation: fp-pet-care-face-id-verification-ui-breathe 5s ease-in-out infinite alternate;
}
@keyframes fp-pet-care-face-id-verification-ui-breathe {
0% { box-shadow: 0 8px 24px rgba(30, 28, 27, 0.02); background-color: #FAF8F5; }
100% { box-shadow: 0 16px 48px rgba(212, 140, 154, 0.08); background-color: #FDFCFB; }
}
/* ━━━━━━━━━━━━━━━━━━
LAYER 2: EXPANDING RINGS
━━━━━━━━━━━━━━━━━━ */
.fp-pet-care-face-id-verification-ui-rings {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
z-index: 1;
pointer-events: none;
}
.fp-pet-care-face-id-verification-ui-ring {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
transform: translate(-50%, -50%);
border-radius: 50%;
border: 1px solid var(--fp-accent-color);
opacity: 0;
animation: fp-pet-care-face-id-verification-ui-expand 4s cubic-bezier(0.25, 1, 0.5, 1) infinite;
}
.fp-pet-care-face-id-verification-ui-ring-1 { animation-delay: 0s; }
.fp-pet-care-face-id-verification-ui-ring-2 { animation-delay: 1.3s; }
.fp-pet-care-face-id-verification-ui-ring-3 { animation-delay: 2.6s; }
@keyframes fp-pet-care-face-id-verification-ui-expand {
0% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.8; border-width: 2px; }
100% { transform: translate(-50%, -50%) scale(2.5); opacity: 0; border-width: 1px; }
}
/* ━━━━━━━━━━━━━━━━━━
SCANNER CORE
━━━━━━━━━━━━━━━━━━ */
.fp-pet-care-face-id-verification-ui-scanner {
position: relative;
z-index: 2;
width: 200px;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
}
/* Matte Black Corner Brackets */
.fp-pet-care-face-id-verification-ui-corners {
position: absolute;
inset: 0;
z-index: 3;
pointer-events: none;
}
.fp-pet-care-face-id-verification-ui-corner {
position: absolute;
width: 40px;
height: 40px;
border-color: var(--fp-soft-color);
border-style: solid;
transition: all 0.3s ease;
}
.fp-pet-care-face-id-verification-ui-corner-tl { top: 0; left: 0; border-width: 4px 0 0 4px; border-top-left-radius: 24px; }
.fp-pet-care-face-id-verification-ui-corner-tr { top: 0; right: 0; border-width: 4px 4px 0 0; border-top-right-radius: 24px; }
.fp-pet-care-face-id-verification-ui-corner-bl { bottom: 0; left: 0; border-width: 0 0 4px 4px; border-bottom-left-radius: 24px; }
.fp-pet-care-face-id-verification-ui-corner-br { bottom: 0; right: 0; border-width: 0 4px 4px 0; border-bottom-right-radius: 24px; }
/* Pet Silhouette */
.fp-pet-care-face-id-verification-ui-pet-svg {
width: 120px;
height: 120px;
fill: none;
stroke: var(--fp-muted-color);
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
opacity: 0.4;
position: relative;
z-index: 1;
}
/* JS Canvas Layer */
.fp-pet-care-face-id-verification-ui-canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 4;
pointer-events: none;
}
/* Typography / Status */
.fp-pet-care-face-id-verification-ui-status {
margin-top: 2rem;
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.fp-pet-care-face-id-verification-ui-status-title {
font-size: 0.85rem;
font-weight: 700;
color: var(--fp-soft-color);
text-transform: uppercase;
letter-spacing: 0.15em;
}
.fp-pet-care-face-id-verification-ui-status-sub {
font-size: 0.65rem;
font-weight: 500;
color: var(--fp-muted-color);
letter-spacing: 0.05em;
display: flex;
align-items: center;
gap: 6px;
}
.fp-pet-care-face-id-verification-ui-dot {
width: 6px;
height: 6px;
background-color: var(--fp-accent-color);
border-radius: 50%;
animation: fp-pet-care-face-id-verification-ui-pulse 1.5s infinite alternate;
}
@keyframes fp-pet-care-face-id-verification-ui-pulse {
0% { opacity: 0.3; transform: scale(0.8); }
100% { opacity: 1; transform: scale(1.2); box-shadow: 0 0 8px var(--fp-accent-color); }
}
/* ━━━━━━━━━━━━━━━━━━
LAYER 3: REACTIVE SPIKE (Triggered by JS)
━━━━━━━━━━━━━━━━━━ */
.fp-pet-care-face-id-verification-ui-spike .fp-pet-care-face-id-verification-ui-corner {
border-color: var(--fp-accent-color);
box-shadow: 0 0 16px rgba(212, 140, 154, 0.4);
transform: scale(1.05);
}
.fp-pet-care-face-id-verification-ui-spike .fp-pet-care-face-id-verification-ui-status-title {
color: var(--fp-accent-color);
text-shadow: 0 0 10px rgba(212, 140, 154, 0.3);
}
/* Responsive Layout Adjustments */
@media (max-width: 480px) {
.fp-pet-care-face-id-verification-ui-scanner { width: 160px; height: 160px; }
.fp-pet-care-face-id-verification-ui-rings { width: 160px; height: 160px; }
.fp-pet-care-face-id-verification-ui-pet-svg { width: 96px; height: 96px; }
.fp-pet-care-face-id-verification-ui-status-title { font-size: 0.75rem; }
}
</style>
<div class="fp-pet-care-face-id-verification-ui-stage">
<div class="fp-pet-care-face-id-verification-ui-rings">
<div class="fp-pet-care-face-id-verification-ui-ring fp-pet-care-face-id-verification-ui-ring-1"></div>
<div class="fp-pet-care-face-id-verification-ui-ring fp-pet-care-face-id-verification-ui-ring-2"></div>
<div class="fp-pet-care-face-id-verification-ui-ring fp-pet-care-face-id-verification-ui-ring-3"></div>
</div>
<div class="fp-pet-care-face-id-verification-ui-scanner">
<div class="fp-pet-care-face-id-verification-ui-corners">
<div class="fp-pet-care-face-id-verification-ui-corner fp-pet-care-face-id-verification-ui-corner-tl"></div>
<div class="fp-pet-care-face-id-verification-ui-corner fp-pet-care-face-id-verification-ui-corner-tr"></div>
<div class="fp-pet-care-face-id-verification-ui-corner fp-pet-care-face-id-verification-ui-corner-bl"></div>
<div class="fp-pet-care-face-id-verification-ui-corner fp-pet-care-face-id-verification-ui-corner-br"></div>
</div>
<svg class="fp-pet-care-face-id-verification-ui-pet-svg" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<path d="M 25 45 L 15 15 L 40 30" />
<path d="M 75 45 L 85 15 L 60 30" />
<path d="M 25 45 C 10 70, 30 90, 50 90 C 70 90, 90 70, 75 45 C 65 30, 35 30, 25 45 Z" />
<circle cx="38" cy="55" r="4" />
<circle cx="62" cy="55" r="4" />
<path d="M 45 70 L 55 70 L 50 75 Z" />
<path d="M 50 75 Q 45 80, 40 78" />
<path d="M 50 75 Q 55 80, 60 78" />
</svg>
<canvas class="fp-pet-care-face-id-verification-ui-canvas"></canvas>
</div>
<div class="fp-pet-care-face-id-verification-ui-status">
<div class="fp-pet-care-face-id-verification-ui-status-title">Biometric Lock</div>
<div class="fp-pet-care-face-id-verification-ui-status-sub">
<div class="fp-pet-care-face-id-verification-ui-dot"></div>
<span class="fp-pet-care-face-id-verification-ui-status-text">Scanning Pet Profile...</span>
</div>
</div>
</div>
<script>
(function() {
// Phase 1 Instance Setup
const root = document.currentScript ? document.currentScript.closest('.fp-pet-care-face-id-verification-ui') : null;
if (!root) return;
const canvas = root.querySelector('.fp-pet-care-face-id-verification-ui-canvas');
const stage = root.querySelector('.fp-pet-care-face-id-verification-ui-stage');
const statusText = root.querySelector('.fp-pet-care-face-id-verification-ui-status-text');
const ctx = canvas.getContext('2d', { alpha: true });
let width, height, dpr;
let rafId;
let isVisible = true;
let time = 0;
// Fetch CSS Variables
const styles = getComputedStyle(root);
const accentColor = styles.getPropertyValue('--fp-accent-color').trim() || '#D48C9A'; // Rose Gold
const mutedColor = styles.getPropertyValue('--fp-muted-color').trim() || '#8C8782';
// Convert Hex to RGB for canvas opacity
const hexToRgb = (hex) => {
let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? `${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(result[3], 16)}` : '212, 140, 154';
};
const rgbAccent = hexToRgb(accentColor);
// Resize Observer
function resize() {
width = canvas.offsetWidth;
height = canvas.offsetHeight;
dpr = window.devicePixelRatio || 1;
canvas.width = width * dpr;
canvas.height = height * dpr;
ctx.scale(dpr, dpr);
initPoints();
}
window.addEventListener('resize', resize);
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => isVisible = entry.isIntersecting);
}, { threshold: 0.1 });
observer.observe(root);
// Generate Biometric Points over the face area
let points = [];
function initPoints() {
points = [];
const cols = 8;
const rows = 8;
const padX = width * 0.2;
const padY = height * 0.2;
const stepX = (width - padX * 2) / (cols - 1);
const stepY = (height - padY * 2) / (rows - 1);
for (let i = 0; i < cols; i++) {
for (let j = 0; j < rows; j++) {
// Create a circular mask for points
const cx = width / 2;
const cy = height / 2;
const px = padX + i * stepX;
const py = padY + j * stepY;
const dist = Math.sqrt(Math.pow(px - cx, 2) + Math.pow(py - cy, 2));
if (dist < width * 0.35) {
points.push({
x: px + (Math.random() * 4 - 2), // slight jitter
y: py + (Math.random() * 4 - 2),
active: false,
activeFactor: 0
});
}
}
}
}
// Layer 3 JS Driven Animation Loop
function fp_pet_care_face_id_verification_ui_render() {
if (!document.body.contains(root)) {
window.removeEventListener('resize', resize);
observer.disconnect();
cancelAnimationFrame(rafId);
return;
}
if (document.visibilityState === 'hidden' || !isVisible) {
rafId = requestAnimationFrame(fp_pet_care_face_id_verification_ui_render);
return;
}
ctx.clearRect(0, 0, width, height);
time += 0.02;
// Scanning line Y position (oscillating up and down)
const scanY = (height / 2) + Math.sin(time) * (height * 0.4);
// Check points against scan line
points.forEach(p => {
const distToScan = Math.abs(p.y - scanY);
if (distToScan < 15) {
p.activeFactor = Math.min(1, p.activeFactor + 0.15);
} else {
p.activeFactor = Math.max(0, p.activeFactor - 0.05);
}
// Draw Point
ctx.beginPath();
const r = 1 + (p.activeFactor * 1.5);
ctx.arc(p.x, p.y, r, 0, Math.PI * 2);
if (p.activeFactor > 0.1) {
ctx.fillStyle = `rgba(${rgbAccent}, ${0.2 + p.activeFactor * 0.8})`;
ctx.shadowBlur = 4;
ctx.shadowColor = accentColor;
} else {
ctx.fillStyle = mutedColor;
ctx.globalAlpha = 0.3;
ctx.shadowBlur = 0;
}
ctx.fill();
ctx.globalAlpha = 1.0; // Reset
});
// Draw Scanner Line
ctx.beginPath();
ctx.moveTo(width * 0.1, scanY);
ctx.lineTo(width * 0.9, scanY);
ctx.strokeStyle = `rgba(${rgbAccent}, 0.8)`;
ctx.lineWidth = 1;
ctx.shadowBlur = 8;
ctx.shadowColor = accentColor;
ctx.stroke();
ctx.shadowBlur = 0;
// Layer 3 Reactive Spike Logic (Random Match Event)
if (Math.random() < 0.005 && !stage.classList.contains('fp-pet-care-face-id-verification-ui-spike')) {
stage.classList.add('fp-pet-care-face-id-verification-ui-spike');
statusText.textContent = "Subject Identified";
setTimeout(() => {
if (stage) {
stage.classList.remove('fp-pet-care-face-id-verification-ui-spike');
statusText.textContent = "Scanning Pet Profile...";
}
}, 1000);
}
rafId = requestAnimationFrame(fp_pet_care_face_id_verification_ui_render);
}
// Init
resize(); // Sets up canvas and points
rafId = requestAnimationFrame(fp_pet_care_face_id_verification_ui_render);
})();
</script>
</div>.fp-pet-care-face-id-verification-ui {
/* ━━━━━━━━━━━━━━━━━━
LAYOUT & SIZING SYSTEM
━━━━━━━━━━━━━━━━━━ */
--fp-container-width: 100%;
--fp-max-width: 500px;
--fp-aspect-ratio: 1 / 1;
/* ━━━━━━━━━━━━━━━━━━
COLOR SYSTEM (Ivory, Matte Black, Rose Gold)
━━━━━━━━━━━━━━━━━━ */
--fp-primary-color: #FAF8F5; /* Putih Gading (Ivory) */
--fp-secondary-color: #E8E4DD; /* Soft Border */
--fp-muted-color: #8C8782; /* Muted Text */
--fp-soft-color: #1E1C1B; /* Matte Black (Text & Tech Elements) */
--fp-background-color: transparent;
--fp-info-color: #D48C9A; /* Rose Gold */
--fp-warning-color: #D48C9A;
--fp-danger-color: #D48C9A;
--fp-accent-color: #D48C9A; /* Rose Gold Accent / Neon */
width: var(--fp-container-width);
max-width: var(--fp-max-width);
margin: 0 auto;
position: relative;
box-sizing: border-box;
background-color: var(--fp-background-color);
font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.fp-pet-care-face-id-verification-ui * {
box-sizing: border-box;
}
/* ━━━━━━━━━━━━━━━━━━
MAIN STAGE
━━━━━━━━━━━━━━━━━━ */
.fp-pet-care-face-id-verification-ui-stage {
width: 100%;
aspect-ratio: var(--fp-aspect-ratio);
background-color: var(--fp-primary-color);
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border: 1px solid var(--fp-secondary-color);
border-radius: 24px;
box-shadow: 0 12px 36px rgba(30, 28, 27, 0.04);
/* Layer 1: Subtle Base Breathing */
animation: fp-pet-care-face-id-verification-ui-breathe 5s ease-in-out infinite alternate;
}
@keyframes fp-pet-care-face-id-verification-ui-breathe {
0% { box-shadow: 0 8px 24px rgba(30, 28, 27, 0.02); background-color: #FAF8F5; }
100% { box-shadow: 0 16px 48px rgba(212, 140, 154, 0.08); background-color: #FDFCFB; }
}
/* ━━━━━━━━━━━━━━━━━━
LAYER 2: EXPANDING RINGS
━━━━━━━━━━━━━━━━━━ */
.fp-pet-care-face-id-verification-ui-rings {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
z-index: 1;
pointer-events: none;
}
.fp-pet-care-face-id-verification-ui-ring {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
transform: translate(-50%, -50%);
border-radius: 50%;
border: 1px solid var(--fp-accent-color);
opacity: 0;
animation: fp-pet-care-face-id-verification-ui-expand 4s cubic-bezier(0.25, 1, 0.5, 1) infinite;
}
.fp-pet-care-face-id-verification-ui-ring-1 { animation-delay: 0s; }
.fp-pet-care-face-id-verification-ui-ring-2 { animation-delay: 1.3s; }
.fp-pet-care-face-id-verification-ui-ring-3 { animation-delay: 2.6s; }
@keyframes fp-pet-care-face-id-verification-ui-expand {
0% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.8; border-width: 2px; }
100% { transform: translate(-50%, -50%) scale(2.5); opacity: 0; border-width: 1px; }
}
/* ━━━━━━━━━━━━━━━━━━
SCANNER CORE
━━━━━━━━━━━━━━━━━━ */
.fp-pet-care-face-id-verification-ui-scanner {
position: relative;
z-index: 2;
width: 200px;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
}
/* Matte Black Corner Brackets */
.fp-pet-care-face-id-verification-ui-corners {
position: absolute;
inset: 0;
z-index: 3;
pointer-events: none;
}
.fp-pet-care-face-id-verification-ui-corner {
position: absolute;
width: 40px;
height: 40px;
border-color: var(--fp-soft-color);
border-style: solid;
transition: all 0.3s ease;
}
.fp-pet-care-face-id-verification-ui-corner-tl { top: 0; left: 0; border-width: 4px 0 0 4px; border-top-left-radius: 24px; }
.fp-pet-care-face-id-verification-ui-corner-tr { top: 0; right: 0; border-width: 4px 4px 0 0; border-top-right-radius: 24px; }
.fp-pet-care-face-id-verification-ui-corner-bl { bottom: 0; left: 0; border-width: 0 0 4px 4px; border-bottom-left-radius: 24px; }
.fp-pet-care-face-id-verification-ui-corner-br { bottom: 0; right: 0; border-width: 0 4px 4px 0; border-bottom-right-radius: 24px; }
/* Pet Silhouette */
.fp-pet-care-face-id-verification-ui-pet-svg {
width: 120px;
height: 120px;
fill: none;
stroke: var(--fp-muted-color);
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
opacity: 0.4;
position: relative;
z-index: 1;
}
/* JS Canvas Layer */
.fp-pet-care-face-id-verification-ui-canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 4;
pointer-events: none;
}
/* Typography / Status */
.fp-pet-care-face-id-verification-ui-status {
margin-top: 2rem;
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.fp-pet-care-face-id-verification-ui-status-title {
font-size: 0.85rem;
font-weight: 700;
color: var(--fp-soft-color);
text-transform: uppercase;
letter-spacing: 0.15em;
}
.fp-pet-care-face-id-verification-ui-status-sub {
font-size: 0.65rem;
font-weight: 500;
color: var(--fp-muted-color);
letter-spacing: 0.05em;
display: flex;
align-items: center;
gap: 6px;
}
.fp-pet-care-face-id-verification-ui-dot {
width: 6px;
height: 6px;
background-color: var(--fp-accent-color);
border-radius: 50%;
animation: fp-pet-care-face-id-verification-ui-pulse 1.5s infinite alternate;
}
@keyframes fp-pet-care-face-id-verification-ui-pulse {
0% { opacity: 0.3; transform: scale(0.8); }
100% { opacity: 1; transform: scale(1.2); box-shadow: 0 0 8px var(--fp-accent-color); }
}
/* ━━━━━━━━━━━━━━━━━━
LAYER 3: REACTIVE SPIKE (Triggered by JS)
━━━━━━━━━━━━━━━━━━ */
.fp-pet-care-face-id-verification-ui-spike .fp-pet-care-face-id-verification-ui-corner {
border-color: var(--fp-accent-color);
box-shadow: 0 0 16px rgba(212, 140, 154, 0.4);
transform: scale(1.05);
}
.fp-pet-care-face-id-verification-ui-spike .fp-pet-care-face-id-verification-ui-status-title {
color: var(--fp-accent-color);
text-shadow: 0 0 10px rgba(212, 140, 154, 0.3);
}
/* Responsive Layout Adjustments */
@media (max-width: 480px) {
.fp-pet-care-face-id-verification-ui-scanner { width: 160px; height: 160px; }
.fp-pet-care-face-id-verification-ui-rings { width: 160px; height: 160px; }
.fp-pet-care-face-id-verification-ui-pet-svg { width: 96px; height: 96px; }
.fp-pet-care-face-id-verification-ui-status-title { font-size: 0.75rem; }
}(function() {
const instances = document.querySelectorAll('.fp-pet-care-face-id-verification-ui');
instances.forEach(root => {
if (root.dataset.fpInitialized) return;
root.dataset.fpInitialized = 'true';
const canvas = root.querySelector('.fp-pet-care-face-id-verification-ui-canvas');
const stage = root.querySelector('.fp-pet-care-face-id-verification-ui-stage');
const statusText = root.querySelector('.fp-pet-care-face-id-verification-ui-status-text');
if (!canvas || !stage || !statusText) return;
const ctx = canvas.getContext('2d', { alpha: true });
let width, height, dpr;
let rafId;
let isVisible = true;
let time = 0;
// Fetch CSS Variables
const styles = getComputedStyle(root);
const accentColor = styles.getPropertyValue('--fp-accent-color').trim() || '#D48C9A'; // Rose Gold
const mutedColor = styles.getPropertyValue('--fp-muted-color').trim() || '#8C8782';
// Convert Hex to RGB for canvas opacity
const hexToRgb = (hex) => {
let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? `${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(result[3], 16)}` : '212, 140, 154';
};
const rgbAccent = hexToRgb(accentColor);
// Generate Biometric Points over the face area
let points = [];
function initPoints() {
points = [];
const cols = 8;
const rows = 8;
const padX = width * 0.2;
const padY = height * 0.2;
const stepX = (width - padX * 2) / (cols - 1);
const stepY = (height - padY * 2) / (rows - 1);
for (let i = 0; i < cols; i++) {
for (let j = 0; j < rows; j++) {
// Create a circular mask for points
const cx = width / 2;
const cy = height / 2;
const px = padX + i * stepX;
const py = padY + j * stepY;
const dist = Math.sqrt(Math.pow(px - cx, 2) + Math.pow(py - cy, 2));
if (dist < width * 0.35) {
points.push({
x: px + (Math.random() * 4 - 2), // slight jitter
y: py + (Math.random() * 4 - 2),
active: false,
activeFactor: 0
});
}
}
}
}
// Resize Observer
function resize() {
width = canvas.offsetWidth;
height = canvas.offsetHeight;
dpr = window.devicePixelRatio || 1;
canvas.width = width * dpr;
canvas.height = height * dpr;
ctx.scale(dpr, dpr);
initPoints();
}
window.addEventListener('resize', resize);
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => isVisible = entry.isIntersecting);
}, { threshold: 0.1 });
observer.observe(root);
// Layer 3 JS Driven Animation Loop
function fp_pet_care_face_id_verification_ui_render() {
if (!document.body.contains(root)) {
window.removeEventListener('resize', resize);
observer.disconnect();
cancelAnimationFrame(rafId);
return;
}
if (document.visibilityState === 'hidden' || !isVisible) {
rafId = requestAnimationFrame(fp_pet_care_face_id_verification_ui_render);
return;
}
ctx.clearRect(0, 0, width, height);
time += 0.02;
// Scanning line Y position (oscillating up and down)
const scanY = (height / 2) + Math.sin(time) * (height * 0.4);
// Check points against scan line
points.forEach(p => {
const distToScan = Math.abs(p.y - scanY);
if (distToScan < 15) {
p.activeFactor = Math.min(1, p.activeFactor + 0.15);
} else {
p.activeFactor = Math.max(0, p.activeFactor - 0.05);
}
// Draw Point
ctx.beginPath();
const r = 1 + (p.activeFactor * 1.5);
ctx.arc(p.x, p.y, r, 0, Math.PI * 2);
if (p.activeFactor > 0.1) {
ctx.fillStyle = `rgba(${rgbAccent}, ${0.2 + p.activeFactor * 0.8})`;
ctx.shadowBlur = 4;
ctx.shadowColor = accentColor;
} else {
ctx.fillStyle = mutedColor;
ctx.globalAlpha = 0.3;
ctx.shadowBlur = 0;
}
ctx.fill();
ctx.globalAlpha = 1.0; // Reset
});
// Draw Scanner Line
ctx.beginPath();
ctx.moveTo(width * 0.1, scanY);
ctx.lineTo(width * 0.9, scanY);
ctx.strokeStyle = `rgba(${rgbAccent}, 0.8)`;
ctx.lineWidth = 1;
ctx.shadowBlur = 8;
ctx.shadowColor = accentColor;
ctx.stroke();
ctx.shadowBlur = 0;
// Layer 3 Reactive Spike Logic (Random Match Event)
if (Math.random() < 0.005 && !stage.classList.contains('fp-pet-care-face-id-verification-ui-spike')) {
stage.classList.add('fp-pet-care-face-id-verification-ui-spike');
statusText.textContent = "Subject Identified";
setTimeout(() => {
if (stage) {
stage.classList.remove('fp-pet-care-face-id-verification-ui-spike');
statusText.textContent = "Scanning Pet Profile...";
}
}, 1000);
}
rafId = requestAnimationFrame(fp_pet_care_face_id_verification_ui_render);
}
// Init
resize(); // Sets up canvas and points
rafId = requestAnimationFrame(fp_pet_care_face_id_verification_ui_render);
});
})();
Description
Let us look at the Vet Face ID Guard Rose Gold Matte component. This free UI asset offers a modular card system specifically engineered for the pet care and veterinary clinic sector. We built this entirely from scratch to handle secure authentication without the usual framework bloat. You get a sterile DOM structure that integrates cleanly into your existing clinic management architecture.
Veterinary platforms often process sensitive patient records and owner billing details. Heavy client side payloads completely ruin performance metrics when immediate access is needed during emergency triage or busy morning check-ins. 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 veterinary staff and receptionists who need to authenticate quickly on busy hospital 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 veterinary 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 soft Rose Gold tones with a modern matte finish to establish a warm and welcoming environment for pet owners. This calm and readable aesthetic ensures visual clarity for users interacting with secure login prompts and identity verification screens. For the interaction layer, we implemented custom expanding and contracting rings. These smooth radial transitions provide clear visual feedback during active facial scans without requiring heavy javascript animation scripts. The final result is a polished user interface that looks premium and functions perfectly for strict enterprise veterinary environments.
Enterprise Use Cases
-
Veterinary staff login portals: Display secure facial recognition prompts using the card grid so clinic employees can access sensitive pet medical records quickly.
-
Pet owner patient dashboards: Build a fast rendering verification page where clients can organize and authorize boarding requests within a lightweight interface.
-
Hospital administration panels: Create a responsive control layout for clinic managers to track active identity verifications across multiple regional pet hospital networks.
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.
Vet Face ID Guard – Rose Gold Matte
Description
Let us look at the Vet Face ID Guard Rose Gold Matte component. This free UI asset offers a modular card system specifically engineered for the pet care and veterinary clinic sector. We built this entirely from scratch to handle secure authentication without the usual framework bloat. You get a sterile DOM structure that integrates cleanly into your existing clinic management architecture.
Veterinary platforms often process sensitive patient records and owner billing details. Heavy client side payloads completely ruin performance metrics when immediate access is needed during emergency triage or busy morning check-ins. 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 veterinary staff and receptionists who need to authenticate quickly on busy hospital 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 veterinary 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 soft Rose Gold tones with a modern matte finish to establish a warm and welcoming environment for pet owners. This calm and readable aesthetic ensures visual clarity for users interacting with secure login prompts and identity verification screens. For the interaction layer, we implemented custom expanding and contracting rings. These smooth radial transitions provide clear visual feedback during active facial scans without requiring heavy javascript animation scripts. The final result is a polished user interface that looks premium and functions perfectly for strict enterprise veterinary environments.
Enterprise Use Cases
-
Veterinary staff login portals: Display secure facial recognition prompts using the card grid so clinic employees can access sensitive pet medical records quickly.
-
Pet owner patient dashboards: Build a fast rendering verification page where clients can organize and authorize boarding requests within a lightweight interface.
-
Hospital administration panels: Create a responsive control layout for clinic managers to track active identity verifications across multiple regional pet hospital networks.
