A fixed left-side navigation component that tracks scroll position across all 12 MatterLayer product layers. The vertical track fills with colour as you scroll — spring-physics animated, colour-matched to the active layer.
Every part of the indicator is intentional. At rest it is invisible except for the dots. On hover it opens up to reveal the full navigation system.
12 layers label
Slides in on hover. Hidden at rest to keep the component minimal.
Grey base track
Always visible. 1px wide. Defines the full scrollable range.
Animated fill
Grows from 0% to 100% as you scroll through all 12 layers. Spring-physics smoothed. Colour matches the active layer.
Active dot
Expands from 7px to 11px. Glows in the layer's accent colour.
Layer label
Slides in beside each dot on hover. Coloured for the active layer.
Every interaction, transition, and state is precisely specified. Nothing is left to chance.
The fill logic and spring animation in ~30 lines. The rest is standard Framer Motion.
// Fill percentage — maps scroll position to 0–100
const computeFill = useCallback(() => {
const firstEl = document.getElementById(LAYERS[0].id);
const lastEl = document.getElementById(LAYERS[LAYERS.length - 1].id);
if (!firstEl || !lastEl) return;
const mid = window.innerHeight * 0.45;
const start = firstEl.getBoundingClientRect().top + scrollY - mid;
const end = lastEl.getBoundingClientRect().bottom + scrollY - mid;
const raw = (scrollY - start) / (end - start);
setFillPct(Math.min(100, Math.max(0, raw * 100)));
}, []);
// Animated fill — spring-physics scaleY
<motion.div
className="absolute top-0 left-0 right-0 rounded-full origin-top"
animate={{
scaleY: fillPct / 100,
background: `linear-gradient(to bottom, ${activeColor}cc, ${activeColor}66)`,
}}
transition={{
scaleY: { type: "spring", stiffness: 120, damping: 28, mass: 0.6 },
background: { duration: 0.4, ease: "easeOut" },
}}
style={{ height: "100%" }}
/>The indicator on the left is live. Watch the track fill as you scroll. Hover it to reveal layer names. Click any dot to jump directly to that layer.
Continuous risk scoring across every open matter. Surfaces anomalies before they become problems.
Automatic time capture from emails, documents, calls, and calendar events. Nothing falls through the cracks.
Smart billing recommendations, WIP analysis, and invoice drafting. Revenue leakage detected and closed.
Document intelligence across every file in your DMS. Clauses extracted, obligations tracked, versions compared.
Automated task sequences triggered by matter events. Deadlines calculated, reminders sent, blockers surfaced.
Email triage, thread summarisation, and draft generation. Responses prepared, follow-ups scheduled.
Relationship intelligence across clients, counterparties, and referrers. Opportunities identified, conflicts flagged.
Client portal updates, satisfaction signals, and communication logs. Every client relationship visible at a glance.
Regulatory deadline tracking, trust accounting alerts, and CPD monitoring. Nothing missed, nothing late.
Precedent retrieval, know-how surfacing, and expertise mapping. The firm's collective knowledge, always accessible.
New matter intake, conflict checking, and engagement letter generation. From enquiry to open matter in minutes.
Real-time dashboards, partner reports, and board packs. Every metric current, every trend visible.
The layer progress indicator lives on the MatterLayer homepage, guiding visitors through the full product story as they scroll.