Port of San Antonio
UX Visual Reference Guide

A cinematic digital journey built around the OMAYA 50 yacht through immersive photo and video production. Transforms a single premium asset into a full brand world.

Present Kelly Aviation Center or Tech Port Arena the way OMAYA presents a yacht — as a livable world, not a spec sheet.

Dynamic web app split into public-facing discovery and operator backend, API-integrated with external boat providers. The most direct structural analog to a Port tenant directory.

Model the Port's tenant search on Helm's dual-space architecture. Public users explore, operators manage. Filters should feel like a luxury booking tool.

Luxury chauffeur brand in a dark theme with gold accents, subtle animations, and premium typography. The definitive reference for dark UI communicating institutional gravity.

Directly inform Port color tokens. Dark base, brand red for CTAs and accent lines, warm cream editorial body text. This palette reads as modern and historically grounded.

An immersive digital safari that translates the soul of wild terrain into a seamless user journey. Cinematic storytelling with fluid UI designed to inspire bespoke experience planning.

How the Port translates its physical environment into a felt experience. The "soul of the land" framing maps directly to Port SA's unique urban industrial story.

World's largest luxury hotel collection in React + Sanity CMS — a visual system that scales across thousands of unique properties without losing coherence.

Reference for CMS architecture. Each tenant (Boeing to tech startups) maintains brand presence within the unified Port visual system.

Elegant one-pager redefining short-term rentals in Italy — minimal, color-driven interface and scroll animations that make a simple offering feel like a luxury editorial.

Scroll animation grammar for the Port's homepage. Each section should breathe in with intention — pacing over parallax.

A travel digital experience building emotional connection through layered visual storytelling and editorial copy — atmosphere first, information second.

Port homepage principle: draw visitors into the world before surfacing logistics. Establish the gravity of 100 years of industrial history, then let users choose their path.

WebGL-powered coastal experience making water the medium for storytelling. Water rendering, tide rhythm, and horizon line as UX architecture.

The ceiling for Port environmental background treatments. Defines the ambient animation language — the site feels alive and connected to the geography it represents.

Gold standard for immersive scroll architecture. Every section transitions as a purposeful act. Sets the ceiling the Port team should understand, even executing at 50% of its intensity.

Technical ambition marker. "Every scroll action has intention and feedback" is non-negotiable. Study the transition logic, not the implementation complexity.

A travel editorial using time as both content and navigation — past, present, and future layered into a single scrollable journey. Direct relevance to how the Port can tell its 100-year story.

Narrative structure reference. The Port's WWI-era to aerospace hub to tech campus timeline is not linear museum content. This shows how to collapse time into one visual experience.