User Interface Components
Relevant source files
The following files were used as context for generating this wiki page:
- frontend/frontend-app/src/components/Navbar.tsx
- frontend/frontend-app/src/pages/Feed.tsx
- frontend/frontend-app/src/pages/Landing.tsx
- frontend/frontend-app/src/pages/Profile.tsx
- ARCHIVE/remaining-docs-consolidated-2026-02-13/TAMV-VISUAL-EXPERIENCE-SPEC.md
- ARCHIVE/remaining-docs-consolidated-2026-02-13/RESUMEN-FINAL-SESION.md
Introduction
The User Interface (UI) components of the TAMV ecosystem represent a "Professional AAA" level frontend architecture designed for high-performance 2D, 3D, XR, and VR experiences. The system utilizes a modern stack led by React 18, TypeScript, and Tailwind CSS, prioritizing "Functional Minimalism" and "Glassmorphism" visual styles to avoid functional or technical mediocrity.
The scope of the UI components covers the core user journey, including immersive landing pages, interactive social feeds, and detailed user profiles. These components are integrated with advanced animation libraries like Framer Motion to provide fluid transitions and micro-interactions.
Architectural Overview
The UI architecture is divided into specialized layers for different dimensions of experience: 2D (Standard Web), 3D (WebGL), XR/VR (WebXR), and 4D (Temporal).
Visual Stack Layers
| Layer | Technologies | Purpose |
|---|---|---|
| Frontend 2D | React 18+, TypeScript, Tailwind CSS, Framer Motion | Standard UI/UX, responsive layouts, and fluid animations. |
| 3D Engine | Three.js, React Three Fiber (R3F), Rapier | WebGL rendering, physics, and interactive 3D scenes. |
| XR/VR | WebXR API, @react-three/xr | Immersive VR/AR experiences and spatial audio. |
| 4D (Temporal) | GSAP 3+, Custom time shaders | Dynamic temporal experiences and timeline-based effects. |
Sources: TAMV-VISUAL-EXPERIENCE-SPEC.md:12-68, RESUMEN-FINAL-SESION.md:46-59
Component Hierarchy
The UI follows a modular structure where specific pages orchestrate global and local components.
The diagram above illustrates the routing and component hierarchy within the frontend application.
Sources: RESUMEN-FINAL-SESION.md:86-103, TAMV-VISUAL-EXPERIENCE-SPEC.md:280-320
Core UI Pages and Components
Landing Page
The Landing Page is the primary entry point, designed with high-impact visuals and live metrics. It features a "Hero Section" with rotating metrics and a "Services Overview" highlighting over 35 ecosystem services.
- Key Features: Animated counters, floating cards, and glassmorphism-based service cards.
- Metrics: Displays live metrics that update every 3 seconds to simulate real-time data.
Sources: TAMV-FRONTEND-BACKEND-COMPLETO.md:10-25, RESUMEN-FINAL-SESION.md:118-124
Social Feed Component
The Feed Page provides an interactive social wall with features like infinite scroll and glassmorphism post cards.
- Logic: Integrates with backend APIs for listing posts, liking, and commenting.
- Visuals: Uses Framer Motion for post entrance animations and Lucide icons for social actions.
Sources: RESUMEN-FINAL-SESION.md:138-151, TAMV-VISUAL-EXPERIENCE-SPEC.md:325-333
Navigation Bar (Navbar)
The Navbar is a sticky, responsive component that provides fluid navigation across the ecosystem. It includes links to the Feed, Profile, and specialized modules like "Isabella AI."
Sources: RESUMEN-FINAL-SESION.md:19-24, frontend/frontend-app/src/components/Navbar.tsx
Visual Guidelines and Design System
Design Principles
The project adheres to three core design pillars:
- Functional Minimalism: Generous white space and clear visual hierarchy using fonts like Inter and Geist.
- Micro-interactions: Immediate feedback (<100ms) on all user actions like hover, active, and focus.
- Native Dark Mode: A professional dark palette featuring high contrast (WCAG AAA) and glassmorphism.
Sources: TAMV-VISUAL-EXPERIENCE-SPEC.md:73-88
Color Palette (Dark Mode)
| Category | Value | Description |
|---|---|---|
| Background Primary | #0A0A0A | Deep black for core backgrounds. |
| Accent Primary | #3B82F6 | Vibrant blue for primary actions. |
| Glass Background | rgba(20, 20, 20, 0.7) | Translucent layer for glassmorphism effects. |
| Glass Blur | 20px | Blur radius for background elements. |
Sources: TAMV-VISUAL-EXPERIENCE-SPEC.md:92-117
Performance and Optimization
The UI components are optimized for high-speed delivery and interaction.
- Target Metrics: Largest Contentful Paint (LCP) < 2.5s and First Input Delay (FID) < 100ms.
- Rendering Optimization: Utilizes Level of Detail (LOD), frustum culling, and instanced rendering for 3D scenes to maintain 60 FPS.
- Asset Management: Uses WebP/AVIF for images and Draco compression for 3D models.
Sources: TAMV-VISUAL-EXPERIENCE-SPEC.md:245-276, RESUMEN-FINAL-SESION.md:183-195
Conclusion
The UI components of TAMV are built to support a "Sovereign Digital Civilization," moving beyond standard web design into immersive XR and 4D environments. By strictly adhering to a "No Mediocrity" rule, the frontend ensures technical robustness through TypeScript and visual excellence through a glassmorphism-based design system, providing a foundation for future AI and blockchain integrations.