Ombelle Fort Lauderdale
Website Planning — Media Mapping

Media Catalog & Asset Mapping

A project-level registry of all supplied Ombelle media assets, with suggested usage mappings for major section families. Planning reference for Production Design — not final asset assignments.


01Asset Inventory
Images
Exterior
20 files
Interiors
7 files
Amenities
21 files
Lifestyle
24 files
Neighborhood
45 files
Textures
2 files
Brand Graphics
Organic Lines
1 file — available
Geometric Pattern
1 file — available
Botanical / Leaf
Atmospheric media — available
Organic lines and geometric pattern are official SVG brand graphics. Botanical treatment is atmospheric media (static + video), not an SVG brand graphic.
Other Assets
Fonts
3 files
Logos
2 files
Icons
1 file
Video
5 files — on disk
140 total records119 images2 brand graphics5 videos

02Hero Video Sequence

Optimized hero video clips supplied in a 4-part sequence. Only the first clip is preloaded — subsequent clips load progressively as playback advances.

vid-hero-v2-1080p
Seq 0 — Hero V2 — 1080p
Poster: ext-hero-v2-poster
Critical

02bHero Recommendation — Temporary Landing Page
First video
vid-hero-v2-1080p
Sequence
vid-hero-v2-1080p
Poster
ext-hero-v2-poster
Mobile fallback
ext-hero-v2-poster — static image for mobile if video payload is too heavy
Reduced motion
ext-hero-v2-poster — static poster image for prefers-reduced-motion
Loop strategy
Single video file with native loop.
Performance
Production Hero video. Native autoplay + loop. Poster loads first. Reduced-motion: static poster only.

02cExterior & Texture Videos

Exterior / Cinematic

vid-pool-deck-sunrise-loop
Pool Deck Sunrise Loop — Poster: ext-pool-deck-sunrise
vid-ombelle-website-1080p
Ombelle Website Video — 1080p — Poster: ext-ombelle-website-1080p-poster

Texture / Atmospheric

vid-palm-shadow-white-loop
Palm Shadow — White Background Loop — Fallback: tex-palm-shadow-white-poster
vid-plant-shadow-white-loop
Plant Shadow — White Background Loop (Botanical Animated) — Fallback: tex-plant-shadow-white-poster

03Hero Image Candidates

Images identified as strong hero candidates based on subject, orientation, and visual impact. Used as poster fallbacks for hero video.

ext-hero-v2-poster
Hero V2 — Poster — 1920×1080 (landscape)
Critical
ext-towers-hero-portrait-day
Towers — portrait, daytime — 1288×1900 (portrait)
Critical
ext-towers-hero-portrait-cotton-candy
Towers — portrait, cotton-candy sky — 1288×1900 (portrait)
High Priority
ext-towers-aerial-sunrise
Towers — aerial sunrise — 1900×1443 (landscape)
High Priority
ext-pool-aerial-sunset
Pool deck — aerial sunset — 1900×1266 (landscape)
High Priority
ext-pool-deck-sunrise
Pool deck — sunrise — 1900×1017 (landscape)
High Priority
ext-ombelle-website-1080p-poster
Ombelle Website Video — Poster — 1920×1080 (landscape)
High Priority

04Temporary Landing Page — Media Slots

Suggested asset candidates for each media slot on the Temporary Landing Page. Primary candidates and alternates are planning references, not final assignments.

Hero
video — landscape

Primary: vid-hero-v2-1080p

Alternates: ext-towers-hero-portrait-cotton-candy, ext-pool-deck-sunrise
Crop: Full-bleed hero video. Poster: ext-hero-v2-poster.
Perf: Critical — hero video preloaded with poster. Reduced-motion: static poster image.
Introduction
image — portrait

Primary: ext-lobby-third-street-portrait

Alternates: ext-podium-third-and-third-corner
Crop: Editorial portrait, restrained width
Residences
image — landscape

Primary: int-living-room

Alternates: int-kitchen, int-bedroom
Crop: Wide editorial crop
Perf: Lazy-load below fold
Amenities
image — landscape

Primary: ext-pool-aerial-sunset

Alternates: ame-lobby-reception, ame-spa-lounge
Crop: Cinematic 16:9 crop
Perf: Lazy-load below fold
Visual / Architectural Moment
image — landscape

Primary: ext-towers-aerial-sunrise

Alternates: ext-pool-deck-overhead-aerial, ext-tower-aerial-top
Crop: Full-bleed landscape
Perf: Lazy-load below fold
Neighborhood
image — landscape

Primary: nbd-flagler-village-streetscape-palms

Alternates: nbd-waterfront-promenade, nbd-pedestrian-streetscape
Crop: Wide editorial crop
Perf: Lazy-load below fold
Visual Tour
image — landscape

Primary: ext-pool-deck-sunset

Alternates: ame-yoga-room, lif-poolside
Crop: Cinematic crop
Perf: Lazy-load below fold
Atmospheric Texture
video — landscape

Primary: vid-plant-shadow-white-loop

Alternates: vid-palm-shadow-white-loop, tex-plant-shadow-white-poster
Crop: Subtle background texture, low opacity. Botanical atmospheric treatment.
Perf: Lazy-load. Muted, playsinline, loop. Reduced-motion: static poster fallback.
Organic Line Opportunity
svg — portrait

Primary: gfx-organic-lines

Alternates: gfx-geometric-pattern
Crop: Decorative editorial transition or section framing. aria-hidden.
Perf: No preload cost — inline SVG.
Geometric Pattern Opportunity
svg — portrait

Primary: gfx-geometric-pattern

Alternates: gfx-organic-lines
Crop: Subtle background field or detail moment. aria-hidden. Do not combine aggressively with organic lines.
Perf: No preload cost — inline SVG.

05Home Page — Media Slots

Lighter-level mapping for the future Home page. Identifies likely candidate media groups but does not finalize layout decisions.

Hero
video — landscape

Primary: vid-hero-v2-1080p

Alternates: ext-towers-hero-portrait-cotton-candy, ext-pool-deck-sunrise
Crop: Full-bleed hero video. Poster: ext-hero-v2-poster.
Perf: Critical — hero video preloaded with poster. Reduced-motion: static poster.
Editorial Intro
image — portrait

Primary: ext-lobby-third-street-portrait

Alternates: ext-equinox-lobby-entrance
Crop: Editorial portrait, paired with text
Residences
image — landscape

Primary: int-living-room

Alternates: int-kitchen-front, int-bedroom
Crop: Split media content, landscape crop
Perf: Lazy-load
Amenities
image — landscape

Primary: ame-lobby-reception

Alternates: ame-spa-lounge, ext-pool-deck-sunset
Crop: Alternating editorial media
Perf: Lazy-load
Neighborhood
image — landscape

Primary: nbd-flagler-village-streetscape-palms

Alternates: nbd-waterfront-promenade, nbd-restaurant-night-exterior
Crop: Full-bleed media feature
Perf: Lazy-load
Visual Tour / Gallery
image — landscape

Primary: ext-pool-deck-sunset

Alternates: ame-yoga-room, lif-dining-conversation, nbd-cafe-interior
Crop: Gallery grid, mixed orientations
Perf: Lazy-load

06Section Family Media Groups

Candidate asset groups for major reusable section families. A media item may appear in multiple groups — these are suggestions, not exclusive assignments.

Hero

vid-hero-v2-1080pext-towers-hero-portrait-cotton-candyext-towers-hero-portrait-dayext-pool-deck-sunriseext-towers-aerial-sunriseext-pool-aerial-sunset

Residences

int-living-roomint-kitchenint-kitchen-frontint-bedroomint-bathroom-vignetteint-primary-bathroom

Amenities

ame-lobby-receptioname-lobby-loungeame-spa-loungeame-gymame-yoga-roomame-pickleball-courtame-chefs-kitchenext-pool-deck-sunsetvid-pool-deck-sunrise-loop

Neighborhood

nbd-flagler-village-streetscape-palmsnbd-waterfront-promenadenbd-pedestrian-streetscapenbd-restaurant-night-exteriornbd-brightline-stationnbd-parker-playhouse

Visual Tour

ext-towers-aerial-sunriseext-pool-deck-overhead-aerialame-lobby-receptionint-living-roomlif-poolsidenbd-waterfront-promenade

Full-Bleed Media

ext-pool-aerial-sunsetext-towers-aerial-sunriseext-pool-deck-sunrisenbd-flagler-village-streetscape-palmsame-spa-lounge

Editorial Intro

ext-lobby-third-street-portraitext-equinox-lobby-entranceext-podium-third-and-third-corner

Atmospheric Textures

vid-plant-shadow-white-loopvid-palm-shadow-white-looptex-plant-shadow-white-postertex-palm-shadow-white-poster

Brand Graphics

gfx-organic-linesgfx-geometric-pattern

07Media Performance Rules
Astro image optimization
Use Astro's built-in image optimization for all JPGs where applicable
Explicit dimensions/aspect ratios
Prevent CLS with width/height or aspect-ratio CSS
Responsive srcset/sizes
Provide appropriate breakpoints for responsive delivery
Lazy-load below the fold
Only critical above-fold media loads eagerly
Preserve focal points
Use focalPoint values for responsive object-position crops
Video: muted, playsinline, poster
All video must be muted with poster fallback
Video: progressive loading
Subsequent hero videos load lazily, do not block initial render
Video: reduced-motion fallback
Static poster image for reduced-motion users
No audio
Do not add audio to any video

08Alt Text & Caption Strategy

Each media record carries an altStatus field. Most images are marked "needs-review" — provisional alt text has been drafted but should be confirmed before production.

needs-review

Provisional alt text drafted from visible content. Requires confirmation before production use.

decorative

Decorative imagery, textures, and brand graphics. Hidden from accessibility tree or empty alt.

approved

Alt text confirmed and ready for production. Currently applies to logos.
Renderings carry an "Artist Conceptual Rendering" disclaimer only where applicable. Not automatically applied to every image.

09Texture Media vs Brand Graphics

Brand Graphic

Official identity artwork: organic-lines.svg and geometric-pattern.svg. Part of the Ombelle brand guide. Rendered by the BrandGraphic component. Do not modify or recreate.

Botanical / Atmospheric Media

Plant-shadow static poster + animated video loop. Used atmospherically — not an official SVG brand graphic. Static poster is the reduced-motion fallback for the video. Handled by the media system, not BrandGraphic.

Media Texture

Background visual content used atmospherically (palm shadows). Not canonical Ombelle brand-guide artwork unless explicitly confirmed.

10Brand Graphic Usage — Organic Lines & Geometric Pattern

Both official SVGs are available and connected through the BrandGraphic component. Organic lines and geometric pattern are official brand graphics. The botanical treatment is atmospheric media, not a brand graphic.

Organic Lines

Editorial transitions

Background layering

Subtle section movement

Framing content

Decorative composition

Geometric Pattern

Subtle background fields

Editorial transitions

Detail moments

Floor-plan contexts

Restrained layering

Secondary to content — never compromise readability

Never cover important image subjects

Do not aggressively combine organic lines with geometric pattern

Decorative instances hidden from accessibility tree

Do not add final motion yet

Do not alter official SVG geometry


Ombelle Fort Lauderdale

Website Planning — Media Mapping