# Mountain Lodge Photo Hero with Drifting Cloud Headline and Glass Booking Cards > Hero on one mountain photograph: real cloud drifts across a huge headline, with frosted booking and forecast cards at depth. Free React and HTML to copy. A shadcn/ui block from the [@weinc](https://we.inc/components?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/weinc/mountain-lodge-photo-hero-with-drifting-cloud-headline-and-glass-booking-cards). - Page, with a live preview: https://shadcn.exchange/r/weinc/mountain-lodge-photo-hero-with-drifting-cloud-headline-and-glass-booking-cards - Screenshot: https://shadcn.exchange/shot/weinc/mountain-lodge-photo-hero-with-drifting-cloud-headline-and-glass-booking-cards/light.png - Registry item: https://we.inc/r/mountain-lodge-photo-hero-with-drifting-cloud-headline-and-glass-booking-cards.json - Listed: 2026-10-28, source last changed 2026-10-28 ## Install ```bash npx shadcn@latest add https://shadcn.exchange/r/weinc/mountain-lodge-photo-hero-with-drifting-cloud-headline-and-glass-booking-cards.json ``` Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on. ## Dependencies - npm packages: `framer-motion` ## Files ### `components/we-inc/mountain-lodge-photo-hero-with-drifting-cloud-headline-and-glass-booking-cards.tsx` ```tsx 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. */}
); } ```