# ownn.baby — Complete System & Architecture Documentation for LLMs

> **ownn.baby** (`https://ownn.baby/`) is a next-generation bio-link and digital identity platform designed for creators, gamers, artists, and communities. It combines rich multimedia embeds, deep visual styling, tactile animation physics, social connections, cosmetic monetization, and native NVIDIA Nemotron AI assistance into a fast, mobile-first experience.

---

## 1. System Overview & Architecture

### High-Level Architecture
- **Framework**: TanStack Start + React 19 (Server-Side Rendering & Client-Side Hydration)
- **Routing**: TanStack Router with type-safe file-based route definitions (`src/routes`)
- **State & Data Fetching**: TanStack Query (`@tanstack/react-query`)
- **Backend & Database**: Supabase PostgreSQL with Row Level Security (RLS) policies
- **Authentication**: Supabase Auth (Email & Password with session caching)
- **Object Storage & CDN**: Cloudflare R2 bucket with custom CDN edge domain (`https://cdn.ownn.baby`)
- **AI Engine**: NVIDIA Nemotron (`nvidia/llama-3.1-nemotron-70b-instruct`) via OpenRouter server functions
- **Animations & Micro-interactions**: Framer Motion and custom CSS cubic-bezier transitions
- **Styling**: Tailwind CSS with custom HSL design tokens, responsive typography scaling, and Google Fonts
- **Deployment**: Vercel Serverless Functions with Nitro engine

---

## 2. Core Entities & Data Schemas

### 2.1 Profiles (`profiles` table)
Each registered creator has a unique public profile accessible at `https://ownn.baby/{username}`:
- `id` (UUID): Primary key linked to `auth.users.id`
- `username` (Text, Unique): Alphanumeric URL slug (3-30 characters, e.g. `ownn.baby/breyky`)
- `display_name` (Text): Public display name (supports UTF-8 emojis and special typography)
- `bio` (Text): Multi-line biography (up to 200 characters)
- `avatar_url` (Text): Cloudflare R2 CDN URL (`https://cdn.ownn.baby/{userId}/avatar_*.webp`)
- `banner_url` (Text, Optional): Cloudflare R2 CDN URL for header cover banner (1200×400)
- `verified` (Boolean): Indicates whether the profile has purchased or received the official `✓ Verified` badge
- `verified_at` (Timestamp): Timestamp when verification was activated
- `published` (Boolean): Flag indicating public visibility
- `theme` (JSONB): Complete visual styling object containing typography, colors, button styles, animations, and avatar shapes

### 2.2 Blocks (`blocks` table)
Modular content items rendered sequentially on the public page:
- `id` (UUID): Unique block identifier
- `profile_id` (UUID): Foreign key to `profiles.id`
- `title` (Text): Display title of the block or header
- `url` (Text, Optional): Target destination URL or media source URL
- `type` (Text): Block type:
  - `"link"`: Smart link with automatic domain icon detection (Instagram, Discord, GitHub, Twitch, TikTok, etc.)
  - `"spotify"`: Embed player for Spotify tracks, albums, playlists, or podcasts
  - `"youtube"`: Embed player for YouTube videos, playlists, or 9:16 vertical Shorts
  - `"header"`: Section divider title
  - `"divider"`: Decorative spacing line
- `icon` (Text, Optional): Custom Lucide icon identifier
- `visible` (Boolean): Toggles block visibility on the public page
- `position` (Integer): Sort order for reordering
- `config` (JSONB): Block-specific configuration (e.g. `{ playerSize: "compact" | "standard" | "large" }`, `{ isShorts: boolean }`)

### 2.3 Relationships (`relationships` table)
Interconnected profiles displayed on the user's page:
- `id` (UUID): Unique relationship identifier
- `profile_id` (UUID): Source user's profile ID
- `target_username` (Text): Destination username on ownn.baby
- `label` (Text): Relationship role (`Best Friend`, `Duo`, `Boyfriend`, `Girlfriend`, `Love / Amor`, `Husband / Wife`, `Team / Squad`, `Criador Favorito`, `Irmão / Irmã`, `Pet / Mascote`, `Música / Collab`, `Twin / Gêmeo(a)`)
- `emoji` (Text): Category icon emoji

---

## 3. Theme Engine & Visual Customization

The ownn.baby Theme Engine (`src/lib/theme.ts`) allows creators to tailor their page:

### 3.1 Typography
- **Independent Font Targets**: Separate typography selection for **Headings** (`headingFont`) and **Body/Links** (`font`).
- **18 Curated Google Fonts**:
  - *Sora, Plus Jakarta Sans, Inter, Space Grotesk, Syne, Outfit, Manrope, DM Sans, Urbanist, Archivo, Epilogue, Playfair Display, Cinzel, Clash Display, Unbounded, Instrument Serif, Poppins, Montserrat*.
- **Fine Controls**: Heading size (20px–42px), heading letter-spacing/tracking (-2px to +4px), link size (13px–19px), bio font size (12px–18px).

### 3.2 Colors & Backgrounds
- **Background Modes**: Solid color (`bgType: "solid"`) or Linear Gradient (`bgType: "gradient"`).
- **Gradient Angles**: Custom degree angles from `0°` to `360°`.
- **Color Fields**: `bg1` (primary background / gradient start), `bg2` (gradient end), `accentColor` (accent highlights), `textColor` (primary text), `mutedColor` (secondary/muted text), `avatarRing` (avatar ring highlight).
- **Personal Color Palette**: User-saved swatches saved directly to profile settings.

### 3.3 Button Styles & Animation Physics
- **10 Visual Button Styles**:
  - `glass`: Frosted glass with backdrop blur and subtle border
  - `glass-thick`: Deep frosted glass with enhanced inner contrast
  - `solid`: High-contrast solid container
  - `outline`: Minimal transparent container with fine border
  - `glow`: Subtle peripheral neon illumination
  - `neon`: Electric vivid border with glowing reflection
  - `pill`: Fully rounded capsule button
  - `cyber`: Angular techno-aesthetic container
  - `brutalist-3d`: Retro 3D elevated button with tactile drop shadow
  - `minimal-card`: Clean modern subtle card
- **7 Micro-interaction Animation Physics**:
  - `bounce`: Springy elastic scale reaction on hover and click
  - `ripple`: Concentric wave pulse
  - `glow`: Dynamic luminous intensity surge
  - `float`: Smooth hovering vertical levitation
  - `glass`: Shimmer reflection sweep
  - `spring`: Snappy tactile physical return
  - `tilt`: Subtle 3D perspective orientation
- **Dimensions**: Slider-adjustable Corner Radius (0px–40px), Border Width (0px–4px), Button Gap Spacing (8px–28px), and Max Page Width (440px–680px).

### 3.4 Particle Systems & Avatar Shapes
- **Floating Particles**: Continuous 60 FPS floating particle ambient background (`✨`, `⭐`, `💖`, `🌸`, `⚡`, `🫧`, `💎`, `🌙`).
- **Density Controls**: `low`, `medium`, `high`.
- **Avatar Shapes**: `circle`, `squircle`, `square`, `blob`.

---

## 4. Baby AI Assistant (NVIDIA Nemotron Engine)

`src/lib/ai-assistant.ts` powers **Baby AI**, an intelligent conversational assistant tailored for profile styling:
- **Model**: `nvidia/llama-3.1-nemotron-70b-instruct`
- **Capabilities**: Parses natural language instructions (in Portuguese, English, Spanish, etc.) and executes structured UI transformations in real-time.
- **Supported Operations**:
  - `UPDATE_THEME`: Modify colors, gradient angles, button styles, typography, and particle effects.
  - `UPDATE_BIO`: Rewrite and format creative biographies.
  - `ADD_BLOCK`: Programmatically append links, Spotify music, or YouTube videos.
  - `ADD_RELATIONSHIP`: Connect peer usernames.

---

## 5. Shop & Cosmetics System

ownn.baby features a cosmetic monetization system with instant activation via PIX:

### 5.1 Official Verified Badge (`✓ Verified`)
- Visible blue verification badge alongside the creator's `@username` across the entire application.
- Interactive tooltip explaining verified authenticity.
- Lifetime status with no recurring subscription fees.

### 5.2 Exclusive Premium Themes
- Bespoke luxury themes engineered with custom physics and color palettes:
  - *Cherry Blossom, Cyberpunk 2077, Royal Gold Luxury, Deep Midnight, Ethereal Glass, Gothic Blood, Pastel Cloud, Retro Arcade 80s, Forest Elf, Neon Matrix, Vaporwave Sunset, Obsidian Minimalist*.

### 5.3 Avatar Frames
- Real-time animated orbital frames rendered seamlessly via `ProfileFrameRenderer`:
  - *Golden Crown (`frame-crown-gold`), Diamond Sparkles (`frame-sparkle`), Cybernetic Neon (`frame-cyber-blue`), Fiery Aura (`frame-fire`), Rainbow Prisma (`frame-rainbow`), Floral Wreath (`frame-sakura`), Angelic Wings (`frame-angel`), Ghostly Vapour (`frame-ghost`)*.

---

## 6. Global Multi-Language System (i18n)

The application supports 11 native locales with automatic browser language detection, persistent `localStorage` storage (`ownn_language`), and right-to-left (RTL) layout switching:
1. **Português (Brasil)** (`pt`) — Default
2. **English (US)** (`en`)
3. **Español** (`es`)
4. **Français** (`fr`)
5. **Deutsch** (`de`)
6. **Italiano** (`it`)
7. **日本語** (`ja`)
8. **한국어** (`ko`)
9. **简体中文** (`zh`)
10. **Русский** (`ru`)
11. **العربية** (`ar`, with native `dir="rtl"`)

---

## 7. SEO, OpenGraph & Structured Data

- **Primary URL**: `https://ownn.baby/`
- **User Profile URL Pattern**: `https://ownn.baby/{username}`
- **OpenGraph Image**: `https://cdn.ownn.baby/og/og-image.png` (1200×630 pixels)
- **JSON-LD Schema**: `WebSite` and `SocialNetworkingApplication` structured data defined in `src/routes/__root.tsx`.
- **Search Engine Directives**:
  - `Sitemap`: `https://ownn.baby/sitemap.xml`
  - `Robots`: `https://ownn.baby/robots.txt` (Permits GPTBot, ClaudeBot, PerplexityBot, Google-Extended, Applebot-Extended).
  - `LLM Documentation (Compact)`: `https://ownn.baby/llms.txt`
  - `LLM Documentation (Full)`: `https://ownn.baby/llms-full.txt`

---

## 8. Verified Official Endpoints

| Resource | URL | Purpose |
| :--- | :--- | :--- |
| **Homepage** | `https://ownn.baby/` | Landing page, feature showcase & username claim |
| **Authentication** | `https://ownn.baby/auth` | User login and registration |
| **Dashboard** | `https://ownn.baby/dashboard` | Creator control panel & live preview |
| **Public Profiles** | `https://ownn.baby/{username}` | Publicly accessible user bio & links |
| **Cloudflare CDN** | `https://cdn.ownn.baby/` | High-speed global media delivery |
| **LLMs Short Spec** | `https://ownn.baby/llms.txt` | Standard compact LLM summary |
| **LLMs Full Spec** | `https://ownn.baby/llms-full.txt` | Standard comprehensive LLM document |
| **Sitemap** | `https://ownn.baby/sitemap.xml` | Search crawler index |
| **Robots Directives** | `https://ownn.baby/robots.txt` | Search crawler rules & bot permissions |