Di Gusto Components

The Di Gusto wordmark rendered in IBM Plex Sans Bold, optionally accompanied by the animated SpiroLogo icon. Supports multiple size presets, color variants, layout modes, and an animated cycling tagline. Wraps in a Pressable when onPress is provided.

Animated spirograph icon computed from epitrochoid mathematics (R, r, d parameters). No hardcoded SVG path data — the pattern is generated entirely from code. Supports spin, progressive draw, breathe, and morph-keyframe animations. On web, canvas-based rendering bypasses React reconciliation for smooth 60fps animation.

Circular initial-based avatar with optional gradient background and auteur level badge. Displays 1–2 characters in a colored circle. The optional level prop (1–3) renders a small colored badge at the bottom-right: gray (Audience), amber (Director), orange (Auteur).

Slide-in notification anchored to the bottom-right of the screen. 300px wide, slides in from the right edge, pauses for reading, then slides back out. Supports four semantic variants with corresponding icons and color themes.

Compact chip showing the user's live token balance with an odometer-style rolling digit animation. Tapping opens a fullscreen cinematic modal with a video background. Two video states based on balance: deficit (<100 tokens) shows the film crew urging the user to earn; surplus (≥100) shows a celebration. Balance changes trigger a pulse animation and floating delta indicator.

Standard authenticated-screen chrome providing a fixed header, scrollable content area constrained to 1200px max-width, optional footer, and optional floating action button. The outer viewport uses a dark zinc gradient. Content and footer slots accept any React node, enabling composition with TopNav, Footer, and other layout components.

Material Design 3 top app bar with leading action, optional nav links (inline or below), trailing icon buttons, avatar pill, token chip, and an animated traveling bottom border. Adapts between mobile app nav and website nav patterns via linksPosition.

Unified responsive navigation menu. Self-contained — reads auth context and defines all menu items internally. Renders its own hamburger trigger. On desktop/tablet (≥768px) opens as a fullscreen ModalShell; on mobile (<768px) opens as a slide-out side panel. Supports external visibility control for integration with TopNav's menu button.

App footer featuring a canvas-based animation that breathes from zinc/neutral tones into Italian flag colors (green/white/red) and back over a 20-second cycle. Bottom row shows the Di Gusto Logo with animated cycling tagline on the left, and copyright / Privacy / Terms links on the right. Responsive — stacks vertically on mobile.

Full-screen modal with animated backdrop, optional header (title + close button), scrollable content, and optional footer. Supports ESC to close on web, backdrop-press to close, and configurable animation duration. Used as the foundation for all modals in the app including NavMenu (desktop) and AuteurLevelModal.

Two-panel responsive layout: content panel + media panel. Side-by-side on wide screens (≥768px), stacked on narrow with media on top. Media panel supports image, video, solid color, gradient, or a playlist of videos with smooth CrossfadeVideo transitions. Optional background audio with mute toggle, crossfade between playlist tracks.

Accessible tooltip wrapper that shows a label on hover (web) or long-press (native). Wraps any pressable child and displays the tooltip label in a small dark popover above or below the target element.

Vertically-oriented sidebar label used to annotate sections of the UI with rotated text. Typically used in split layouts to label the media panel or content zones.

Loading spinner that cycles through multiple visual styles ("variety") to keep long-loading states visually interesting. Wraps React Native's ActivityIndicator with Di Gusto brand colors.

Cinematic scene identifier label displaying act/scene numbers and a custom label. Supports a glass-morphism variant for use over video backgrounds. Optionally accepts children for additional descriptive text below the primary label.

Badge component displaying story and act metadata. Used to mark story cards, scene headers, and timeline entries with their Act/Scene identifier in the Di Gusto cinematic style.

Italian vocabulary flashcard displayed during story transitions or as interstitials. Shows the Italian word prominently with pronunciation guide and English translation. Styled with warm gold tones to match the Di Gusto aesthetic.

Card component that highlights a featured ingredient from the current story. Shows ingredient name, origin, flavor profile, and a brief culinary description. Used in story scenes where food culture intersects with the narrative.

Patience / loading interstitial shown while AI story generation is in progress. Displays an animated waiting state with Italian-themed copy and a progress indicator. Keeps users engaged during the 15–30 second story generation window.

Italian-themed patience screen — a more cinematic variant of BePatient featuring Italian idioms, scenic imagery, and character-driven copy. Used for longer wait states where a richer experience is appropriate (e.g. first story generation).

Smart HTML video player with viewport detection — pauses when scrolled out of view and resumes when back in view (IntersectionObserver on web). Supports autoplay, mute, loop, object-fit, and an onEnded callback.

Video player with smooth crossfade transitions between a playlist of clips. Preloads the next clip for seamless transitions. Used internally by SplitScreen for video playlists and can be used standalone for story scene sequences.

Fullscreen video modal overlay. Tapping the backdrop or pressing ESC dismisses the modal. Used for previewing story clips, showcasing ingredients, and cinematic reveals.

In-app purchase modal for acquiring token credits. Displays current balance, available token pack options with pricing, and handles the purchase flow. Called from TokenBalanceChip when the user needs more tokens to start a story.

Modal showing the user's current auteur/creator level progression — Audience (1), Director (2), or Auteur (3) — along with token stats, lifetime earnings, and what's unlocked at each tier. Opened from the avatar pill in TopNav.

Authentication gate wrapper that conditionally renders children only when the user is authenticated. Redirects unauthenticated users to the sign-in screen. Optionally accepts a fallback component to show while the auth state is loading.

React class component error boundary that catches rendering errors in the component tree below it. Renders a fallback UI instead of crashing the entire app. Logs errors to the console and optionally to external error tracking.