Free
✈️ Travel
CROSS_PLATFORM
Lark Lodge Booking
Boutique lodge booking app with map-first discovery, date-range picker and a calm, editorial stay-detail flow.
8 views 0 copies 385 words
The Prompt
# Lark Lodge — Boutique Lodge Booking App
## Goal
Design and build "Lark Lodge", a boutique lodge booking app. Feel: quiet luxury — the app equivalent of a linen-bound guidebook; discovery feels like planning, not shopping. Every screen should feel native-quality — fluid, tactile, zero jank.
## Visual Language
- **Palette**: warm paper #F7F4EE base, pine #2F4A3C primary, clay #C67B5C accent, ink #23241F text; light-first
- **Type scale**: large title 32-34px bold, section header 20px semibold, body 16-17px, caption 13px.
- **Surfaces**: layered backgrounds (base / elevated card / sheet), 20px card radius, subtle 1px hairline separators.
- **Iconography**: consistent 24px stroke icons, 1.75px stroke weight.
## Screens
1. **Discover** — full-bleed map with price-pill pins; bottom sheet list of lodges syncs with map bounds; tapping a pin previews a card with hero photo.
2. **Stay detail** — editorial layout: full-width photo carousel, serif title, amenity chips, sticky 'Check dates' bar; story block about the hosts.
3. **Date picker** — month view range selection with drag handles, minimum-stay rules shown inline, price-per-night dots under dates.
4. **Review & pay** — fare breakdown card (nights / cleaning / taxes), promo field, book button with optimistic 'Requesting…' state.
5. **Trips** — upcoming stay cards with countdown, one-tap 'Directions', past stays as a small archive.
## Interactions & Motion
- Map↔list sync: selecting a card pans the map with a spring; the pin enlarges and lifts the card.
- Date range: selecting start then end animates the in-between fill; invalid ranges shake gently with an inline hint.
- Photo carousel has parallax on scroll-in; hero photo Ken-Burns breathes on the detail screen.
- Booking confirmation: a minimal stamp animation ('Confirmed') — no confetti, this is quiet luxury.
- Spring physics for all transitions (stiffness ~260, damping ~24); never linear easing.
- Skeleton loaders for every async surface; optimistic UI for user actions.
## Details That Matter
- Price pills on the map use tabular figures and stay legible at small sizes.
- Offline: cache last-viewed lodge details for the subway-browsing user.
## Tech & Quality Bar
- React Native + Expo + TypeScript (or Flutter if requested). Reanimated for 60fps gestures.
- Dark & light mode from a single token file. Safe-area aware on all screens.
- Haptics on key confirmations. Offline-tolerant: cache last data, show stale-while-revalidate.
You may also like
Free
Wanderful
✈️ Travel
Cinematic travel hero: a full-bleed loop drifting under a GSAP mouse parallax, with a liquid-glass pill navbar and two fade-up copy blocks.
4.8k 445CursorClaude CodeLovable
Free
Wandor
✈️ Travel
Travel-app hero on an illustrated loop: a white top fade, a typewriter wordmark and a 701px frosted prompt card with upload and CTA.
1.7k 554CursorClaude CodeLovable
Free
Cartful Shopper
🛒 Ecommerce
Mobile shopping app with story-style product discovery, slick cart drawer and checkout in three taps.
4.4k 752CursorBoltReplit
Premium
Ember Meditation
🧘 Wellness
Meditation & sleep app with breathing orb, ambient soundscape mixer and gentle streak-free habit design.
3.5k 839CursorLovableReplit