Every webpage has structure. Hero sections, feature grids, CTAs, pricing tables, footers -- Reftrix classifies each by type and encodes them as searchable vector embeddings. Query your own analyzed sites with sub-millisecond semantic retrieval.
hero / feature / cta / testimonial / pricing / footer / navigation / gallery -- classified via multilingual ML model, similarity search at < 11ms
CSS transitions, JS animation libraries, and WebGL shaders -- three detection channels capture every animation on a page. Duration, easing curve, trigger condition, and library origin are all recorded.
CSS + JS + WebGL detection channels -- 15px/frame capture at 30fps -- GSAP / Framer Motion / anime.js / Three.js / Lottie detection
Gradients, textures, and color fields extracted from every layer. Seven distinct background types cataloged from inline styles, stylesheet sources, and external CSS -- each encoded for pattern matching.
solid / linear / radial / mesh / conic / image / glassmorphism -- extracted from inline styles + <style> tags + external CSS
Every design conveys intent. Professional gravitas, playful energy, minimal clarity -- mood, tone, and emotional register are classified into sixteen distinct profiles via AI vision analysis and CSS heuristics.
16 mood categories (professional / playful / premium / tech / organic / minimalist / bold / elegant / artistic / trustworthy / ...) -- Vision LLM + CSS analysis
Screenshots become searchable vectors. DINOv2 ViT-B/14 encodes each section and part as a 768-dimensional visual embedding -- enabling 'find by appearance' queries that text search cannot match.
DINOv2 ViT-B/14 visual embedding (768D L2-normalized) -- section + part dual embeddings -- cosine similarity with HNSW indexing
Buttons, headings, images, navigation bars, forms -- each UI element is extracted, classified into 16 part types, and dual-embedded with both text and visual vectors for precision component search.
16 part types (button / heading / image / navigation / card / form / icon / link / footer / ...) -- text + visual dual embedding -- boundingBox + computedStyles
Every site renders differently at 375px, 768px, and 1440px. Multi-viewport screenshots are captured, Pixelmatch computes visual diffs, and layout shifts are quantified across breakpoints.
3 viewports (375 / 768 / 1440) -- Pixelmatch perceptual diff -- layout shift detection -- breakpoint classification
Run page.analyze on any URL. Reftrix extracts layout structure, motion patterns, background designs, and design narratives -- encoding each as a 768-dimensional vector embedding for semantic similarity search. All data persisted to PostgreSQL + pgvector with HNSW indexing.
Every section and UI part is captured, cropped, and processed through DINOv2 ViT-B/14 to produce a 768-dimensional visual embedding -- enabling similarity search by appearance, not just text.
Upload or describe a visual pattern. Reftrix searches across all analyzed sections using cosine similarity on DINOv2 embeddings, returning visually similar designs regardless of their text content.
Combine visual and text signals with Reciprocal Rank Fusion. 60% vector weight and 40% full-text weight produce results that match both appearance and semantic meaning.
As you provide feedback on search results, Reftrix learns your design preferences. A 2-factor confidence model reranks future results based on mood category coverage and interaction history.
Every UI element is extracted and classified into 16 part types. Each part carries dual embeddings -- text and visual -- for precision search. Compare styles, layout, interaction, and accessibility across parts.
Model Context Protocol
14 tools / 3 categories / Claude integration
input validation / stdio transport
Five phases transform unstructured web pages into a searchable vector space -- capture, map, observe, interpret, and index across 27 database models, 16 search indexes, and 768-dimensional dual embeddings.
Playwright + lazy scroll
Playwright captures full-page HTML and screenshots. Lazy scroll triggers IntersectionObserver-based loading before capture. HTML sanitized via DOMPurify. SSRF protection blocks private IPs. External CSS resolved and inlined.
Section + part classification
Sections classified into 19 types via Vision LLM. Post-processor rules: split oversized sections (>10,000px), merge 3+ consecutive same-type, absorb empty unknowns. Parts extracted into 16 UI component types with bounding boxes.
Motion + quality + responsive
Scroll Vision analysis detects CSS/JS/WebGL animations at 15px frame resolution. Quality evaluation scores originality, craftsmanship, and contextuality. Multi-viewport responsive analysis captures layout shifts across breakpoints.
Narrative + mood profiling
Vision LLM classifies design narrative into 16 mood categories. DB analysis: professional (141 sites), elegant (119), premium (103). Confidence-scored mood profiles with tone, color, and typography signals.
Dual embedding + HNSW
e5-base text embeddings (768D) + DINOv2 visual embeddings (768D). Type-aware dedup (cosine >0.995). 16 HNSW indexes with sub-11ms retrieval. Hybrid RRF search: 60% vector + 40% full-text.