Mentorship Funnel – Lavender Soft Clay
<div class="fp-coaching-platform-traffic-analytics-funnel-ui">
<div class="fp-coaching-platform-traffic-analytics-funnel-ui-stage">
<div class="fp-coaching-platform-traffic-analytics-funnel-ui-ambient"></div>
<div class="fp-coaching-platform-traffic-analytics-funnel-ui-card" id="fp-coaching-platform-traffic-analytics-funnel-ui-card">
<div class="fp-coaching-platform-traffic-analytics-funnel-ui-header">
<span class="fp-coaching-platform-traffic-analytics-funnel-ui-title">Client Funnel</span>
<div class="fp-coaching-platform-traffic-analytics-funnel-ui-badge">
<div class="fp-coaching-platform-traffic-analytics-funnel-ui-dot"></div>
LIVE
</div>
</div>
<div class="fp-coaching-platform-traffic-analytics-funnel-ui-funnel">
<div class="fp-coaching-platform-traffic-analytics-funnel-ui-row" id="fp-row-1">
<div class="fp-coaching-platform-traffic-analytics-funnel-ui-track">
<div class="fp-coaching-platform-traffic-analytics-funnel-ui-fill" style="--fp-fill-level: 80%;" id="fp-fill-1">
<div class="fp-coaching-platform-traffic-analytics-funnel-ui-wave-container">
<div class="fp-coaching-platform-traffic-analytics-funnel-ui-wave"></div>
<div class="fp-coaching-platform-traffic-analytics-funnel-ui-wave fp-coaching-platform-traffic-analytics-funnel-ui-wave-2"></div>
</div>
</div>
<div class="fp-coaching-platform-traffic-analytics-funnel-ui-meta">
<span class="fp-coaching-platform-traffic-analytics-funnel-ui-lbl">Total Reach</span>
<span class="fp-coaching-platform-traffic-analytics-funnel-ui-val" id="fp-val-1">12,450</span>
</div>
</div>
</div>
<div class="fp-coaching-platform-traffic-analytics-funnel-ui-row" id="fp-row-2">
<div class="fp-coaching-platform-traffic-analytics-funnel-ui-track">
<div class="fp-coaching-platform-traffic-analytics-funnel-ui-fill" style="--fp-fill-level: 45%;" id="fp-fill-2">
<div class="fp-coaching-platform-traffic-analytics-funnel-ui-wave-container">
<div class="fp-coaching-platform-traffic-analytics-funnel-ui-wave"></div>
<div class="fp-coaching-platform-traffic-analytics-funnel-ui-wave fp-coaching-platform-traffic-analytics-funnel-ui-wave-2"></div>
</div>
</div>
<div class="fp-coaching-platform-traffic-analytics-funnel-ui-meta">
<span class="fp-coaching-platform-traffic-analytics-funnel-ui-lbl">Warm Leads</span>
<span class="fp-coaching-platform-traffic-analytics-funnel-ui-val" id="fp-val-2">840</span>
</div>
</div>
</div>
<div class="fp-coaching-platform-traffic-analytics-funnel-ui-row" id="fp-row-3">
<div class="fp-coaching-platform-traffic-analytics-funnel-ui-track">
<div class="fp-coaching-platform-traffic-analytics-funnel-ui-fill" style="--fp-fill-level: 15%;" id="fp-fill-3">
<div class="fp-coaching-platform-traffic-analytics-funnel-ui-wave-container">
<div class="fp-coaching-platform-traffic-analytics-funnel-ui-wave"></div>
<div class="fp-coaching-platform-traffic-analytics-funnel-ui-wave fp-coaching-platform-traffic-analytics-funnel-ui-wave-2"></div>
</div>
</div>
<div class="fp-coaching-platform-traffic-analytics-funnel-ui-meta">
<span class="fp-coaching-platform-traffic-analytics-funnel-ui-lbl">Enrolled Clients</span>
<span class="fp-coaching-platform-traffic-analytics-funnel-ui-val" id="fp-val-3">42</span>
</div>
</div>
</div>
</div>
<div class="fp-coaching-platform-traffic-analytics-funnel-ui-alert">🎉 NEW MENTEE ENROLLED</div>
</div>
</div>
</div>.fp-coaching-platform-traffic-analytics-funnel-ui {
--fp-container-width: 100%;
--fp-max-width: 500px;
--fp-aspect-ratio: 1 / 1;
--fp-primary-color: #fdfbf7;
--fp-secondary-color: #f3f0f8;
--fp-muted-color: #8c7ea0;
--fp-soft-color: #e5dff0;
--fp-background-color: transparent;
--fp-info-color: #c4b5fd;
--fp-warning-color: #a78bfa;
--fp-danger-color: #7c3aed;
--fp-accent-color: #8b5cf6;
--fp-text-color: #3b2d4a;
width: var(--fp-container-width);
max-width: var(--fp-max-width);
margin: 0 auto;
background: var(--fp-background-color);
font-family: 'Inter', system-ui, -apple-system, sans-serif;
box-sizing: border-box;
position: relative;
}
.fp-coaching-platform-traffic-analytics-funnel-ui * {
box-sizing: inherit;
}
.fp-coaching-platform-traffic-analytics-funnel-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;
box-shadow: inset 0 0 60px rgba(139, 92, 246, 0.03);
}
.fp-coaching-platform-traffic-analytics-funnel-ui-ambient {
position: absolute;
width: 120%;
height: 120%;
background: radial-gradient(circle at center, rgba(167, 139, 250, 0.15) 0%, transparent 65%);
animation: fp-coaching-platform-traffic-analytics-funnel-ui-breathe 6s ease-in-out infinite alternate;
pointer-events: none;
z-index: 1;
}
@keyframes fp-coaching-platform-traffic-analytics-funnel-ui-breathe {
0% { transform: scale(0.9); opacity: 0.5; }
100% { transform: scale(1.1); opacity: 1; }
}
.fp-coaching-platform-traffic-analytics-funnel-ui-card {
position: relative;
z-index: 2;
width: 85%;
height: 85%;
background: var(--fp-primary-color);
border-radius: 28px;
padding: 24px;
display: flex;
flex-direction: column;
transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease;
box-shadow:
16px 16px 32px rgba(139, 92, 246, 0.08),
-16px -16px 32px #ffffff,
inset -2px -2px 6px rgba(139, 92, 246, 0.03),
inset 2px 2px 6px rgba(255, 255, 255, 0.8);
}
.fp-coaching-platform-traffic-analytics-funnel-ui-card.is-spiking {
transform: scale(1.02);
box-shadow:
20px 20px 40px rgba(139, 92, 246, 0.15),
-20px -20px 40px #ffffff,
inset -2px -2px 6px rgba(139, 92, 246, 0.05),
inset 2px 2px 6px rgba(255, 255, 255, 1),
0 0 0 2px var(--fp-info-color);
}
.fp-coaching-platform-traffic-analytics-funnel-ui-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
}
.fp-coaching-platform-traffic-analytics-funnel-ui-title {
font-size: 1.1rem;
font-weight: 800;
color: var(--fp-text-color);
letter-spacing: -0.02em;
}
.fp-coaching-platform-traffic-analytics-funnel-ui-badge {
background: var(--fp-secondary-color);
color: var(--fp-accent-color);
font-size: 0.7rem;
font-weight: 800;
padding: 6px 12px;
border-radius: 20px;
box-shadow:
inset 2px 2px 4px rgba(255,255,255,0.9),
inset -2px -2px 4px rgba(139, 92, 246, 0.1),
2px 2px 4px rgba(139, 92, 246, 0.05);
display: flex;
align-items: center;
gap: 6px;
}
.fp-coaching-platform-traffic-analytics-funnel-ui-dot {
width: 6px;
height: 6px;
background: var(--fp-accent-color);
border-radius: 50%;
animation: fp-coaching-platform-traffic-analytics-funnel-ui-pulse 1.5s infinite;
}
@keyframes fp-coaching-platform-traffic-analytics-funnel-ui-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
}
.fp-coaching-platform-traffic-analytics-funnel-ui-funnel {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.fp-coaching-platform-traffic-analytics-funnel-ui-row {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
flex: 1;
}
.fp-coaching-platform-traffic-analytics-funnel-ui-row:nth-child(1) .fp-coaching-platform-traffic-analytics-funnel-ui-track { width: 100%; }
.fp-coaching-platform-traffic-analytics-funnel-ui-row:nth-child(2) .fp-coaching-platform-traffic-analytics-funnel-ui-track { width: 75%; }
.fp-coaching-platform-traffic-analytics-funnel-ui-row:nth-child(3) .fp-coaching-platform-traffic-analytics-funnel-ui-track { width: 50%; }
.fp-coaching-platform-traffic-analytics-funnel-ui-track {
position: relative;
background: var(--fp-secondary-color);
height: 100%;
min-height: 60px;
border-radius: 20px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
box-shadow:
inset 6px 6px 12px rgba(139, 92, 246, 0.06),
inset -6px -6px 12px #ffffff;
border: 1px solid rgba(255,255,255,0.6);
}
.fp-coaching-platform-traffic-analytics-funnel-ui-meta {
position: relative;
z-index: 10;
display: flex;
flex-direction: column;
align-items: center;
pointer-events: none;
}
.fp-coaching-platform-traffic-analytics-funnel-ui-lbl {
font-size: 0.65rem;
font-weight: 700;
color: var(--fp-text-color);
text-transform: uppercase;
letter-spacing: 0.1em;
opacity: 0.8;
margin-bottom: 2px;
}
.fp-coaching-platform-traffic-analytics-funnel-ui-val {
font-size: 1.25rem;
font-weight: 900;
color: var(--fp-text-color);
font-variant-numeric: tabular-nums;
transition: transform 0.2s ease;
}
.fp-coaching-platform-traffic-analytics-funnel-ui-row.is-updating .fp-coaching-platform-traffic-analytics-funnel-ui-val {
transform: scale(1.15);
color: var(--fp-danger-color);
}
.fp-coaching-platform-traffic-analytics-funnel-ui-fill {
position: absolute;
bottom: 0; left: 0; right: 0;
height: var(--fp-fill-level, 10%);
background: linear-gradient(180deg, var(--fp-info-color) 0%, var(--fp-warning-color) 100%);
transition: height 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
border-top: 1px solid rgba(255,255,255,0.3);
}
.fp-coaching-platform-traffic-analytics-funnel-ui-wave-container {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
overflow: hidden;
}
.fp-coaching-platform-traffic-analytics-funnel-ui-wave {
position: absolute;
width: 200%;
height: 400px;
top: -390px;
left: -50%;
background: rgba(255, 255, 255, 0.2);
border-radius: 40%;
animation: fp-coaching-platform-traffic-analytics-funnel-ui-spin 6s linear infinite;
}
.fp-coaching-platform-traffic-analytics-funnel-ui-wave-2 {
top: -385px;
background: rgba(139, 92, 246, 0.1);
border-radius: 45%;
animation-direction: reverse;
animation-duration: 8s;
}
@keyframes fp-coaching-platform-traffic-analytics-funnel-ui-spin {
100% { transform: rotate(360deg); }
}
.fp-coaching-platform-traffic-analytics-funnel-ui-alert {
position: absolute;
bottom: 40px;
left: 50%;
transform: translateX(-50%) translateY(20px);
background: var(--fp-accent-color);
color: #fff;
padding: 8px 16px;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 800;
letter-spacing: 0.05em;
box-shadow: 0 10px 20px rgba(139, 92, 246, 0.3);
opacity: 0;
pointer-events: none;
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
z-index: 20;
}
.fp-coaching-platform-traffic-analytics-funnel-ui-card.is-spiking .fp-coaching-platform-traffic-analytics-funnel-ui-alert {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
@media (max-width: 480px) {
.fp-coaching-platform-traffic-analytics-funnel-ui-card { width: 90%; height: 90%; padding: 16px; }
.fp-coaching-platform-traffic-analytics-funnel-ui-title { font-size: 0.95rem; }
.fp-coaching-platform-traffic-analytics-funnel-ui-track { min-height: 50px; }
.fp-coaching-platform-traffic-analytics-funnel-ui-val { font-size: 1.1rem; }
}(function() {
document.querySelectorAll('.fp-coaching-platform-traffic-analytics-funnel-ui').forEach(root => {
const card = root.querySelector('#fp-coaching-platform-traffic-analytics-funnel-ui-card');
const rows = [
root.querySelector('#fp-row-1'),
root.querySelector('#fp-row-2'),
root.querySelector('#fp-row-3')
];
const fills = [
root.querySelector('#fp-fill-1'),
root.querySelector('#fp-fill-2'),
root.querySelector('#fp-fill-3')
];
const valEls = [
root.querySelector('#fp-val-1'),
root.querySelector('#fp-val-2'),
root.querySelector('#fp-val-3')
];
if (!card || rows.includes(null) || fills.includes(null) || valEls.includes(null)) return;
let vals = [12450, 840, 42];
let targetFills = [80, 45, 15];
let animationFrameId;
let lastTrafficUpdate = 0;
let lastLeadUpdate = 0;
let lastClientUpdate = 0;
function fp_coaching_platform_traffic_analytics_funnel_ui_format(num) {
return num.toLocaleString('en-US');
}
function fp_coaching_platform_traffic_analytics_funnel_ui_flashRow(index) {
rows[index].classList.add('is-updating');
setTimeout(() => {
if(document.body.contains(root)) rows[index].classList.remove('is-updating');
}, 300);
}
function fp_coaching_platform_traffic_analytics_funnel_ui_loop(timestamp) {
if (!document.body.contains(root)) {
cancelAnimationFrame(animationFrameId);
observer.disconnect();
document.removeEventListener('visibilitychange', fp_coaching_platform_traffic_analytics_funnel_ui_handleVisibilityChange);
return;
}
if (document.visibilityState === 'visible') {
if (timestamp - lastTrafficUpdate > 1200) {
if (Math.random() > 0.4) {
vals[0] += Math.floor(Math.random() * 15) + 1;
valEls[0].textContent = fp_coaching_platform_traffic_analytics_funnel_ui_format(vals[0]);
fp_coaching_platform_traffic_analytics_funnel_ui_flashRow(0);
targetFills[0] = Math.min(95, targetFills[0] + 1);
}
lastTrafficUpdate = timestamp;
}
if (timestamp - lastLeadUpdate > 3000) {
if (Math.random() > 0.6) {
vals[1] += Math.floor(Math.random() * 3) + 1;
valEls[1].textContent = fp_coaching_platform_traffic_analytics_funnel_ui_format(vals[1]);
fp_coaching_platform_traffic_analytics_funnel_ui_flashRow(1);
targetFills[1] = Math.min(80, targetFills[1] + 2);
targetFills[0] = Math.max(70, targetFills[0] - 1);
}
lastLeadUpdate = timestamp;
}
if (timestamp - lastClientUpdate > 6000) {
if (Math.random() > 0.7) {
vals[2] += 1;
valEls[2].textContent = fp_coaching_platform_traffic_analytics_funnel_ui_format(vals[2]);
fp_coaching_platform_traffic_analytics_funnel_ui_flashRow(2);
card.classList.add('is-spiking');
targetFills[2] = Math.min(85, targetFills[2] + 15);
targetFills[1] = Math.max(30, targetFills[1] - 5);
setTimeout(() => {
if(document.body.contains(root)) card.classList.remove('is-spiking');
}, 1500);
}
lastClientUpdate = timestamp;
}
targetFills[0] -= 0.05;
targetFills[1] -= 0.05;
targetFills[2] -= 0.05;
for(let i=0; i<3; i++) {
if(targetFills[i] < 10) targetFills[i] = 10;
if(targetFills[i] > 95) targetFills[i] = 95;
fills[i].style.setProperty('--fp-fill-level', `${targetFills[i]}%`);
}
}
animationFrameId = requestAnimationFrame(fp_coaching_platform_traffic_analytics_funnel_ui_loop);
}
function fp_coaching_platform_traffic_analytics_funnel_ui_handleVisibilityChange() {
if (document.visibilityState === 'hidden') {
if (animationFrameId) {
cancelAnimationFrame(animationFrameId);
animationFrameId = null;
}
} else {
if (!animationFrameId) {
lastTrafficUpdate = performance.now();
lastLeadUpdate = performance.now();
lastClientUpdate = performance.now();
animationFrameId = requestAnimationFrame(fp_coaching_platform_traffic_analytics_funnel_ui_loop);
}
}
}
document.addEventListener('visibilitychange', fp_coaching_platform_traffic_analytics_funnel_ui_handleVisibilityChange);
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
if (!animationFrameId && document.visibilityState === 'visible') {
lastTrafficUpdate = performance.now();
lastLeadUpdate = performance.now();
lastClientUpdate = performance.now();
animationFrameId = requestAnimationFrame(fp_coaching_platform_traffic_analytics_funnel_ui_loop);
}
} else {
if (animationFrameId) {
cancelAnimationFrame(animationFrameId);
animationFrameId = null;
}
}
});
}, { threshold: 0.1 });
observer.observe(root);
});
})();
Description
Meet the Mentorship Funnel component from our Lavender Soft Clay series. This is a premium, free to use UI card component built specifically for modern coaching platforms and professional mentoring networks. It gives development teams a ready to deploy solution for visualizing student progress, program capacity, or funnel stages without adding heavy markup to the codebase.
Building interactive progress trackers for educational platforms often leads to sluggish UI performance when relying on massive front end frameworks. This asset solves that exact problem for the coaching sector. By utilizing a sterile DOM structure and dropping external libraries entirely, developers get a highly responsive interface. This ensures the application stays within strict performance budgets during high traffic enrollment periods and passes rigorous enterprise audits.
Technical Architecture & Performance
-
Pure Code Stack: Built entirely with vanilla JavaScript, HTML5, and CSS3. There are no external dependencies to conflict with your current architecture.
-
Zero Framework Bloat: We intentionally bypassed utility class frameworks like Tailwind or Bootstrap and heavy animation libraries like GSAP to keep the payload as light as possible.
-
Performance First: The sterile DOM and lean CSS guarantee rapid render times. This component consistently hits 90+ scores on Core Web Vitals.
-
Scoped Styling: All CSS is cleanly scoped to prevent style leakage. This guarantees a predictable and conflict free integration into legacy or modern enterprise setups.
-
SVG Level Control: The progress logic is handled via efficient JavaScript that targets specific path attributes for smooth, hardware accelerated performance.
Design & Aesthetic Impact
The visual layout focuses on a crisp and modern aesthetic tailored for approachable yet professional coaching applications. The soothing Lavender Soft color tones establish clear visual hierarchies. This draws user attention to critical growth metrics and funnel stages without overwhelming the screen. The core interaction features a custom liquid fill and level rise animation. This motion design provides immediate visual feedback as mentor capacity or student achievement levels increase. The result is a highly polished and intuitive user experience that feels native to premium educational and wellness platforms.
Enterprise Use Cases
-
Student Progression Dashboards: Integrate these cards into learning management systems. Students can see a live liquid fill animation as they complete course modules or reach new mentorship milestones.
-
Mentor Capacity Trackers: Equip coaching agencies with a lightweight interface to monitor consultant availability. The level rise effect provides a quick visual cue of how many active spots remain in a specific program.
-
Lead Conversion Funnels: Use the component inside aggregate marketing tools for coaches. Sales teams can track potential mentees moving through the enrollment pipeline with a highly responsive UI that does not slow down the initial page load.
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.
Mentorship Funnel – Lavender Soft Clay
Description
Meet the Mentorship Funnel component from our Lavender Soft Clay series. This is a premium, free to use UI card component built specifically for modern coaching platforms and professional mentoring networks. It gives development teams a ready to deploy solution for visualizing student progress, program capacity, or funnel stages without adding heavy markup to the codebase.
Building interactive progress trackers for educational platforms often leads to sluggish UI performance when relying on massive front end frameworks. This asset solves that exact problem for the coaching sector. By utilizing a sterile DOM structure and dropping external libraries entirely, developers get a highly responsive interface. This ensures the application stays within strict performance budgets during high traffic enrollment periods and passes rigorous enterprise audits.
Technical Architecture & Performance
-
Pure Code Stack: Built entirely with vanilla JavaScript, HTML5, and CSS3. There are no external dependencies to conflict with your current architecture.
-
Zero Framework Bloat: We intentionally bypassed utility class frameworks like Tailwind or Bootstrap and heavy animation libraries like GSAP to keep the payload as light as possible.
-
Performance First: The sterile DOM and lean CSS guarantee rapid render times. This component consistently hits 90+ scores on Core Web Vitals.
-
Scoped Styling: All CSS is cleanly scoped to prevent style leakage. This guarantees a predictable and conflict free integration into legacy or modern enterprise setups.
-
SVG Level Control: The progress logic is handled via efficient JavaScript that targets specific path attributes for smooth, hardware accelerated performance.
Design & Aesthetic Impact
The visual layout focuses on a crisp and modern aesthetic tailored for approachable yet professional coaching applications. The soothing Lavender Soft color tones establish clear visual hierarchies. This draws user attention to critical growth metrics and funnel stages without overwhelming the screen. The core interaction features a custom liquid fill and level rise animation. This motion design provides immediate visual feedback as mentor capacity or student achievement levels increase. The result is a highly polished and intuitive user experience that feels native to premium educational and wellness platforms.
Enterprise Use Cases
-
Student Progression Dashboards: Integrate these cards into learning management systems. Students can see a live liquid fill animation as they complete course modules or reach new mentorship milestones.
-
Mentor Capacity Trackers: Equip coaching agencies with a lightweight interface to monitor consultant availability. The level rise effect provides a quick visual cue of how many active spots remain in a specific program.
-
Lead Conversion Funnels: Use the component inside aggregate marketing tools for coaches. Sales teams can track potential mentees moving through the enrollment pipeline with a highly responsive UI that does not slow down the initial page load.
