62:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 63:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 64:T44db,import { useEffect, useRef, useState, type PointerEvent as ReactPointerEvent } from "react"; import { motion, useMotionValue, useReducedMotion, useSpring, useTransform, type MotionValue } from "framer-motion"; /** One photograph does all the work: the backdrop and the cloud that drifts over the headline. */ const PHOTO = "https://images.unsplash.com/photo-1760202953582-a54c9459dfd9?auto=format&fit=crop&w=1600&q=80"; const PHOTO_ALT = "A dark timber mountain hut on a green ridge, with pine trees and thick white cloud filling the valley below"; const lodge = { name: "Kestrel Ridge", eyebrow: "Nine rooms at 1,840 metres", headline: ["Above the", "weather"], copy: "A timber lodge on the ridge line, an hour's walk from the last road. Most mornings the valley fills with cloud and the lodge sits just over it.", nightly: 412, }; const links = ["Rooms", "The walk in", "Kitchen", "Winter"]; const stays = [2, 3, 5]; /** Cloud top for the next three mornings, in metres. The lodge sits at LODGE_ALTITUDE. */ const LODGE_ALTITUDE = 1840; const mornings = [ { day: "Thu", cloudTop: 1610, sunrise: "06:42" }, { day: "Fri", cloudTop: 1575, sunrise: "06:43" }, { day: "Sat", cloudTop: 1790, sunrise: "06:45" }, ]; /** How far each layer travels with the pointer, in pixels. Bigger numbers feel closer to the viewer. */ const DEPTH = { photo: -10, type: -22, glassBack: 16, glassFront: 30 }; function useLayer(mx: MotionValue, my: MotionValue, depth: number) { const x = useTransform(mx, (v) => v * depth); const y = useTransform(my, (v) => v * depth * 0.7); return { x, y }; } function MountainMark() { return ( ); } export default function MountainLodgePhotoHeroWithDriftingCloudHeadlineAndGlassBookingCards() { const reduce = useReducedMotion(); const root = useRef(null); const [live, setLive] = useState(true); const [nights, setNights] = useState(3); const [guests, setGuests] = useState(2); const [morning, setMorning] = useState(0); const px = useMotionValue(0); const py = useMotionValue(0); const mx = useSpring(px, { stiffness: 60, damping: 18, mass: 0.8 }); const my = useSpring(py, { stiffness: 60, damping: 18, mass: 0.8 }); const photo = useLayer(mx, my, DEPTH.photo); const type = useLayer(mx, my, DEPTH.type); const back = useLayer(mx, my, DEPTH.glassBack); const front = useLayer(mx, my, DEPTH.glassFront); // Pause the drifting cloud and the floating cards while the hero is off screen. useEffect(() => { const el = root.current; if (!el) return; const io = new IntersectionObserver(([entry]) => setLive(entry.isIntersecting)); io.observe(el); return () => io.disconnect(); }, []); function onMove(e: ReactPointerEvent) { if (reduce || e.pointerType === "touch") return; const r = e.currentTarget.getBoundingClientRect(); px.set(((e.clientX - r.left) / r.width - 0.5) * 2); py.set(((e.clientY - r.top) / r.height - 0.5) * 2); } function onLeave() { px.set(0); py.set(0); } const chosen = mornings[morning]; const clearance = LODGE_ALTITUDE - chosen.cloudTop; // Where the cloud line sits in the little diagram: 0 is the lodge, 100 is the valley floor. const cloudY = 22 + Math.min(1, clearance / 320) * 44; const rise = (delay: number) => reduce ? {} : { initial: { opacity: 0, y: 26, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { type: "spring" as const, stiffness: 70, damping: 16, delay } }; return (

{/* Layer 1: the photograph, furthest away. */} ${PHOTO_ALT}$ {/* A cool wash at the top so the navigation and headline sit on even sky. */}

{/* Layer 2: the headline, with a piece of real cloud passing in front of it. */}

{lodge.eyebrow}

{lodge.headline.map((line, i) => ( {line} {i === 0 ? " " : ""} ))}

{/* Layer 3: glass, nearest the viewer. */}

e.preventDefault()} aria-label="Check availability" className="lodge-cloud-hero-glass lodge-cloud-hero-float rounded-[28px] border border-white/70 p-4 backdrop-blur-2xl sm:p-5" >

{lodge.copy}

Nights

{stays.map((n) => ( ))}

Guests

{guests}

${(lodge.nightly * nights).toLocaleString("en-US")} {nights} nights, half board

Morning forecast

{clearance >= 120 ? "Clear above" : "Borderline"}

{/* The ridge, the lodge and where the cloud is expected to sit. */}

{mornings.map((m, i) => ( ))}

Sunrise {chosen.sunrise}. Cloud sits {clearance} m under the terrace.

); } 61:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","framer-motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/framer-motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"framer-motion"}]]}]}]]}],["$","$L62",null,{"namespace":"@weinc","registryDependencies":[]}]]}],null]}],["$","$L63",null,{"files":[{"path":"components/we-inc/mountain-lodge-photo-hero-with-drifting-cloud-headline-and-glass-booking-cards.tsx","content":"$64","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]