Picsmob
Library
Ambara website preview
FreeLanding Page

Ambara

A glass retreat on a Himalayan peak, floating above a sea of golden clouds.

Download source code
  • landing
  • video-hero
  • loop
  • react
  • vite
  • travel
  • luxury

What moves

  • Clouds rolling slowly around the peak
  • Waterfalls pouring from the pools into the clouds
  • Headline rising in line by line on load

From prompt to live site

  1. Make the visualsGenerate the image, then animate it into a seamless looping clip. Both prompts are below.
  2. Copy the promptOne click. Fill in anything in [square brackets] with your own details.
  3. Paste it into your builderClaude, Lovable, Cursor, v0. Upload your frames to the public/frames folder if it uses them.
  4. LaunchSwap the copy for yours, check it on your phone, publish.

Asset prompts

Product image

For any image model

Create a landscape 16:9 image (as wide as possible, e.g. 1792x1024). Ultra-photorealistic surreal architectural visualization. A breathtaking modern retreat built into the tip of a Himalayan rock peak that rises out of an endless sea of golden clouds at sunrise. The building is a stack of cantilevered stone and glass terraces stepping outward over the void, with warm interior lights glowing in every level and thin infinity pools spilling over the edges. A long narrow glowing walkway made of light leads from the foreground across the clouds to the building. Lighting: the sun is low behind the clouds, warm gold and peach light, soft god rays, deep blue-violet sky above fading into gold. Mist curls around the base of the peak. Composition: the building sits in the RIGHT half of the frame. The LEFT third is calm sky and clouds with empty space for website text. Eye-level wide shot, 24mm lens, cinematic, award-winning architectural photography. No text, no logos, no people, no website UI, no borders.

Video clip

Image-to-video, using the image above

Animate this image into a subtle, photorealistic, cinematic architectural loop. The animation should feel calm, elegant, luxurious and dreamlike, with extremely slow, natural motion only. The sea of golden clouds drifts slowly to the left and gently rolls around the base of the rock peak. The waterfalls pour continuously and smoothly from the infinity pools down into the clouds, with fine mist rising where they fall. Soft sun rays shimmer and shift slightly. Warm lights inside the glass house flicker very subtly. A soft pulse of light travels slowly along the glowing glass walkway. The house, the rock, the mountains and the walkway stay perfectly still and solid, with no warping. The camera does a very slow, almost unnoticeable push-in toward the house. Create a perfectly seamless 6 to 8 second infinite loop where the first and last frames blend together invisibly. No cuts, no new objects, no people, no text, no camera shake. Ultra-photorealistic, cinematic lighting, volumetric atmosphere, realistic cloud and water simulation, 16:9.

The prompt

Build a one-page website for "Ambara", a (fictional) luxury retreat of seven residences built into a Himalayan peak, 3,400 m above a sea of golden clouds. Recreate it exactly as described: every colour, size, line of copy and timing below is intentional. Do not add extra sections, icons, libraries or placeholder images.

=== MEDIA (use these exact URLs) ===
- HERO_VIDEO: https://res.cloudinary.com/dnkrqpuqk/video/upload/v1791320395/hero_rohbdm.mp4  (1280x720, a 6.5s seamless loop: a glass-and-stone house on a rock peak above golden sunrise clouds, waterfalls pouring from its pools, a glowing glass walkway; the building is on the RIGHT, empty sky on the LEFT)
- HERO_IMAGE: https://res.cloudinary.com/dnkrqpuqk/video/upload/v1791320395/hero_rohbdm.jpg  (a still frame of the same video, used as the poster, the fallback and the photo in the sections below)
Put both URLs in constants at the top of the main component so they are easy to swap.

=== STACK ===
- React + Vite, JavaScript, one plain CSS file (styles.css). No Tailwind, no UI kits, no animation libraries; everything is CSS plus a few lines of React.
- If your tool only supports Next.js, build the same thing there with a plain global CSS file.
- Fonts: "Cormorant Garamond" weights 400, 500 and 400 italic (headings, numbers, wordmark) and "Manrope" variable (body). Load from Google Fonts or Fontsource.
- Files: index.html, src/main.jsx, src/App.jsx (Hero, Peak, Residences, Journey, Request components + footer), src/styles.css.

=== HTML HEAD ===
Title "Ambara · Live above the clouds". Meta description "Seven residences carved into a Himalayan peak, 3,400 metres above the clouds." theme-color #0d0f22. <link rel="preload" as="image"> for HERO_IMAGE.

=== DESIGN TOKENS (put on :root) ===
--night: #0d0f22   (page background, the sky after sunset)
--dusk: #171a35
--ivory: #f6f0e6   (main text)
--mist: #b9b6c8    (muted text)
--gold: #e9b86a    (accent)
--line: rgba(246, 240, 230, 0.14)   (all hairlines)
--serif: "Cormorant Garamond", "Times New Roman", serif
--sans: "Manrope Variable", "Manrope", system-ui, sans-serif
--gutter: clamp(20px, 5vw, 72px)   (side padding everywhere)

=== BASE ===
- box-sizing border-box everywhere. html { scroll-behavior: smooth }.
- body: margin 0, background var(--night), colour var(--ivory), font var(--sans) 17px, line-height 1.6, antialiased, overflow-x hidden.
- Links inherit colour, no underline. Reset margins on headings, paragraphs, lists; lists have no bullets or padding.
- :focus-visible: 2px solid gold outline, 4px offset, radius 4px.

=== BUTTONS (.btn) ===
Inline-flex, centred, font 600 15px/1 Manrope, letter-spacing 0.01em, padding 15px 26px, radius 999px, no border, pointer. Transition transform, background, colour, box-shadow over 200ms. Hover: translateY(-1px).
- .btn-light: background ivory, text #16130f. Hover: background #fff and box-shadow 0 10px 40px -10px rgba(233, 184, 106, 0.7).
- .btn-line: text ivory, box-shadow inset 0 0 0 1px rgba(246, 240, 230, 0.55). Hover: inset 1px full ivory and background rgba(246, 240, 230, 0.08).
- .btn-glass (nav only): padding 11px 20px, 14px, text ivory, background rgba(13, 15, 34, 0.25), inset 1px rgba(246, 240, 230, 0.35), backdrop-filter blur(10px). Hover: ivory background, text #16130f.

=== HERO (<header class="hero">) ===
Layout: position relative, min-height 100svh, display grid, grid-template-rows auto 1fr auto (nav / copy / foot row), isolation isolate, overflow hidden.

Media layer (.hero-media, absolute inset 0, z-index -1, background #2a1d14, aria-hidden). Inside, in this order:
1. <img> HERO_IMAGE, alt "".
2. <video> with poster HERO_IMAGE, autoPlay, muted, loop, playsInline, preload "auto", one <source> HERO_VIDEO type video/mp4.
3. A "rays" span and a "shade" span.
Both image and video: absolute inset 0, 100% x 100%, object-fit cover, object-position 70% 50%, filter brightness(0.96) saturate(1.06).
- Keep a React state hasVideo (false at first). On the video's canPlay event set it true. The media layer gets class "has-video" or "is-still".
- Video starts at opacity 0 with a 1.2s opacity transition; in has-video the video goes to opacity 1 and the image fades to 0 over 1.2s.
- In is-still (no video yet or it fails): the image runs @keyframes drift 28s ease-in-out infinite alternate, from scale(1.02) translate3d(0,0,0) to scale(1.12) translate3d(-1.5%, -1%, 0), transform-origin 72% 52%. The rays span (absolute, inset -20%, pointer-events none) becomes visible with mix-blend-mode screen, background radial-gradient(40% 30% at 22% 42%, rgba(255, 196, 120, 0.22), transparent 70%), animating @keyframes glow 9s ease-in-out infinite alternate from translate3d(0,0,0) opacity 0.6 to translate3d(3%, -2%, 0) opacity 1. Outside is-still the rays have opacity 0.
- Shade span (absolute inset 0), two backgrounds stacked:
  radial-gradient(70% 85% at 12% 52%, rgba(13, 15, 34, 0.62) 0%, rgba(13, 15, 34, 0.38) 45%, transparent 75%),
  linear-gradient(180deg, rgba(13, 15, 34, 0.38) 0%, transparent 16%, transparent 78%, #0d0f22 100%).

NAV (<nav class="nav">, position fixed, top/left/right 0, z-index 10)
- Flex, space-between, centred, gap 24px, padding 22px var(--gutter). Transition background, padding, backdrop-filter 300ms.
- Left: <a href="#top" class="wordmark">AMBARA</a>: Cormorant 500, 22px, letter-spacing 0.42em, padding-left 0.42em, margin-left -0.42em (keeps it optically aligned).
- Centre: links Residences, The Peak, Journey, Journal pointing to #residences, #the-peak, #journey, #journal. 14px, opacity 0.82, 1 on hover (200ms), gap clamp(18px, 2.6vw, 40px).
- Right: .btn .btn-glass "Request a stay" to #request.
- Scroll listener (passive): when window.scrollY > 40 add .nav-solid: background rgba(13, 15, 34, 0.72), backdrop-filter blur(14px), padding top and bottom 14px.

HERO COPY (div id "top", align-self center, padding 120px var(--gutter) 40px, max-width 760px)
- Kicker <p>: "3,400 m above the Himalayas". 14px, gold, letter-spacing 0.04em, margin-bottom 22px.
- <h1>: Cormorant 400, font-size clamp(56px, 8.4vw, 132px), line-height 0.9, letter-spacing -0.02em, text-shadow 0 2px 30px rgba(13, 15, 34, 0.35). Three <span>s, each display block: "Wake up", "above the", and <em>clouds.</em> where the em is italic, colour #ffe2b0.
- Subline <p>: "Seven residences carved into a single peak, reached by a walkway of light. Nothing above you but sky." margin-top 28px, max-width 42ch, font-size clamp(16px, 1.3vw, 19px), colour rgba(246, 240, 230, 0.86), text-shadow 0 1px 16px rgba(13, 15, 34, 0.5).
- Buttons row (flex, wrap, gap 12px, margin-top 34px): .btn-light "Request a stay" (#request) and .btn-line "See the peak" (#the-peak).

HERO FOOT ROW (flex, space-between, align-items end, padding 0 var(--gutter) 30px)
- Left: "Now booking winter 2027" (14px, rgba(246, 240, 230, 0.85), inline-flex, gap 10px) preceded by a 7px gold dot (radius 50%, box-shadow 0 0 0 0 rgba(233, 184, 106, 0.7)) animating @keyframes ping 2.4s ease-out infinite to box-shadow 0 0 0 10px transparent.
- Right: <a href="#the-peak" aria-label="Scroll to explore"> grid, centred, gap 8px, 12px, letter-spacing 0.2em, uppercase, opacity 0.8, text "Scroll" above an <i>: 1px wide, 46px tall, background linear-gradient(ivory, transparent), transform-origin top, @keyframes cue 2.2s ease-in-out infinite: 0% scaleY(0), 50% scaleY(1), 100% scaleY(1) opacity 0.

PAGE-LOAD SEQUENCE (pure CSS, animation-fill-mode both, 1.1s, cubic-bezier(.2, .7, .2, 1))
@keyframes rise: from opacity 0 translateY(28px) to opacity 1 none. @keyframes fade: opacity 0 to 1.
- nav: fade, delay 0.2s
- kicker: rise 0.35s
- headline span 1: rise 0.5s; span 2: 0.65s; span 3: 0.8s
- subline: rise 1s
- buttons row: rise 1.15s
- foot row: fade 1.4s

=== MAIN SECTIONS ===
<main> background linear-gradient(180deg, var(--night), var(--dusk) 60%, var(--night)).
Every <section>: padding clamp(80px, 12vw, 160px) var(--gutter) 0, max-width 1320px, margin 0 auto, scroll-margin-top 70px.
Reveal on scroll: each section starts with class .reveal (opacity 0, translateY(32px), transition opacity 1s ease and transform 1s cubic-bezier(.2, .7, .2, 1)). A small useReveal hook uses IntersectionObserver (threshold 0.01, rootMargin "0px 0px -10% 0px") to add .is-in (opacity 1, transform none) once, then disconnects.
Section head (.section-head): flex, space-between, align-items end, gap 20px, wrap, margin-bottom 40px. h2: Cormorant 400, clamp(40px, 5vw, 72px), line-height 1. The side <p>: colour mist, max-width 36ch.

1. THE PEAK (section id "the-peak")
- Statement <p>: Cormorant, clamp(30px, 3.6vw, 52px), line-height 1.18, max-width 24ch: "Ambara sits where the mountain ends and the sky begins. Mornings start above a sea of cloud, evenings end with the whole range turning gold below you."
- <dl> facts: grid 4 equal columns, gap 24px, margin-top clamp(48px, 6vw, 80px), border-top 1px var(--line), padding-top 28px. Each item: <dt> 13px mist label, <dd> Cormorant clamp(28px, 3vw, 40px), line-height 1.1, margin-top 6px.
  Altitude / 3,400 m · Residences / 7 · Walkway / 220 m of glass · Nearest town / Manali, 2 hrs

2. THE RESIDENCES (section id "residences")
- Head: h2 "The residences", side text "Every one faces east, so the sunrise is yours."
- Grid 1.1fr 1fr, gap clamp(28px, 4vw, 64px), align stretch.
- Left: a div with role img, aria-label "The residences stepping out from the peak", background-image HERO_IMAGE, cover, position 66% 45%, min-height 460px, radius 6px.
- Right: <ul> grid, align-content center. Three <li> rows: grid columns 44px 1fr auto, gap 18px, align baseline, padding 26px 0, border-top 1px var(--line), last row also border-bottom. Each row has a ::after line (absolute, left 0, top -1px, height 1px, width 0, gold, transition width 600ms cubic-bezier(.2, .7, .2, 1)) that grows to 100% on row hover.
  Row content: number (Cormorant 18px gold) "01"/"02"/"03"; name h3 (Cormorant 500, clamp(26px, 2.4vw, 34px), line-height 1.1) with detail <p> (mist 15px, margin-top 4px); price <p> right aligned, ivory, nowrap, "From ₹…" with a block <span> "per night" (mist 13px).
  - The Cloud Terrace · Two bedrooms · infinity pool over the drop · From ₹1,85,000
  - The Glass Room · One bedroom · floor-to-ceiling sunrise · From ₹1,20,000
  - The Summit Suite · Three bedrooms · private roof garden · From ₹2,90,000

3. GETTING HERE (section id "journey")
- Head: h2 "Getting here", side text "Part of the stay, not the commute."
- <ol> grid 3 columns, gap 24px, CSS counter. Each <li>: border-top 1px var(--line), padding-top 22px; ::before shows counter as decimal-leading-zero (01, 02, 03) in Cormorant 18px gold; h3 Cormorant 500 28px margin-top 10px; <p> mist, margin-top 6px, max-width 32ch.
  - Fly to Bhuntar: Our team meets you at the airport with warm clothes and chai.
  - Drive into the valley: Two hours through pine forest to the base station.
  - Cross the walkway: Eight minutes on glass above the clouds, lit at every step.

4. REQUEST A STAY (section id "request", extra padding-bottom clamp(80px, 10vw, 140px))
- Panel: relative, overflow hidden, radius 10px, grid 1.1fr 1fr, gap 40px, align center, padding clamp(32px, 5vw, 72px), background-image HERO_IMAGE cover at 30% 60%, isolation isolate. A ::before (absolute inset 0, z-index -1) with linear-gradient(90deg, rgba(13, 15, 34, 0.86), rgba(13, 15, 34, 0.55)).
- Left: h2 "Request a stay" (same style as section h2s) and <p> (rgba(246, 240, 230, 0.85), margin-top 16px, max-width 40ch): "Tell us when you'd like to come. We reply within a day with availability and a hand-planned itinerary."
- Right: form, grid gap 14px, padding 26px, radius 8px, background rgba(13, 15, 34, 0.55), backdrop blur 12px, inset 1px var(--line). Labels are grid gap 6px, 13px mist text above the control:
  Name (input, required, autocomplete name) · Email (type email, required, autocomplete email) · Preferred month (select: November, December, January, February, March; December selected).
  Inputs/select: font inherit 16px, ivory text, background rgba(246, 240, 230, 0.06), border 1px var(--line), radius 6px, padding 12px 14px; on focus no outline, border gold. Options have dark text.
  Submit: .btn .btn-light "Send request", margin-top 6px.
- On submit: preventDefault, and replace the form with <p role="status"> in Cormorant 26px: "Request sent. We'll write to you within 24 hours."

FOOTER: flex, space-between, centred, wrap, gap 12px, padding 32px var(--gutter), border-top 1px var(--line), mist 14px. Left the wordmark "AMBARA" (ivory, 18px), right "A concept retreat in the Himachal Himalayas. © 2027 Ambara."

=== RESPONSIVE ===
Max-width 900px:
- Hide nav links. Steps and residences grids become 1 column. Residence photo min-height 300px. Residence rows become 36px 1fr with the price moved to column 2, left aligned. Facts become 2 columns. Request panel 1 column. Hero image/video object-position 64% 50%.
Max-width 560px:
- Hero shade becomes linear-gradient(180deg, rgba(13, 15, 34, 0.55) 0%, rgba(13, 15, 34, 0.35) 40%, rgba(13, 15, 34, 0.75) 80%, #0d0f22 100%).
- Hero copy padding-top 110px. Glass button padding 9px 14px, 13px. Hide the scroll cue.
No horizontal scroll at any width.

=== REDUCED MOTION ===
@media (prefers-reduced-motion: reduce): scroll-behavior auto; every animation and transition off (!important); .reveal sections fully visible.

=== CHECK BEFORE YOU FINISH ===
- Video fades in over the image and loops with no visible jump; if it can't load, the image drifts with the warm glow instead.
- Headline lines rise one after another on load; nav turns dark after scrolling 40px.
- All four sections reveal once on scroll; gold line grows on residence row hover; form shows the thank-you message.
- Looks right at 1440px, 900px and 375px wide.

More templates