Verdmat Valuation Interface

Summary

The Verdmat page is the primary valuation interface for the Sokrates platform, providing users with a multi-layered price decomposition of Icelandic real estate. It features high-fidelity animations built with Framer Motion and a specialized “Agent Sales Pitch” mode designed to demonstrate the market impact of specific real estate agents.

Details

The Verdmat interface (located at src/app/[locale]/verdmat/page.tsx) serves as the frontend for the Sokrates valuation engine. It is designed to provide a “progressive reveal” of property value, moving from a base price to a final estimate influenced by agent performance and property presentation.

Animation and Design

The page utilizes Framer Motion and Tailwind CSS to achieve a high-quality user experience without the overhead of external animation libraries like GSAP or Nivo. This approach maintains the “Icelandic Archive” aesthetic—a clean, minimalist design language used across the Sokrates project. Key visual enhancements include:

• Odometer Price Reveal: The hero price display uses a custom odometer-style animation where individual digits roll vertically into place. This is implemented using Motion’s y percentage animation on 10-digit columns with a staggered delay of 0.04s per digit.
• Confidence Indicators: A “confidence dot” pulses using a bg-primary/40 element with a CSS scale and opacity keyframe (dot-pulse) to draw attention to the reliability of the price range.
• Layer Bar Shimmer: Data bars representing different valuation layers feature a group-hover shimmer effect, created with a CSS-only background-position animation on a white gradient overlay.
• Results Entrance: The results section employs a weighted entrance, scaling from 0.97 to 1.0 while fading in to give the reveal a physical sense of “expanding into place.”

Agent Sales Pitch Mode

A core feature of the Verdmat page is the toggle between Full Decomposition (Verðgreining) and the Agent Sales Pitch (Fasteignasali).

The Agent Sales Pitch mode is a B2B feature optimized for real estate agents. It allows an agent to input their name to see how their specific track record—based on historical data in the agent_statistics table—adjusts the base price of a property. The interface displays a scorecard including:

• Median Spread %: The residual between the sale price and the model’s base prediction (L1+L2+L3), calculated as sale_price / model_L1L2L3_prediction - 1. This isolates the agent’s contribution after accounting for structural, spatial, and temporal factors.
• Transaction Count: Total volume of sales.
• Speed Decile: How fast the agent sells relative to the market.
• Days on Market: Average duration of listings.

Technical Integration

The frontend is built with Next.js (App Router) and integrates with a backend residual modeling API. A known architectural challenge involves reconciling the data format: the backend returns three base layers plus separate scalars for agent and presentation effects, while the frontend visualizes these as a unified 5-layer stack.

The backend implementation requires a JOIN between the agent_statistics schema and the agents table to resolve names to performance metrics. Development plans include the creation of a dedicated agent search endpoint (GET /api/agents?q=) to support autocomplete functionality within the Verdmat interface.

Related

• Eidos
• Icelandic Archive Aesthetic
• Residual Modeling API
• sokrates-website
• Hermes Agent