# App Landing Hero with Phone Mockup > App landing hero with a tilted phone mockup cycling bird photos, a live sound meter and download buttons. Copy the React and Tailwind code or HTML free. 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/app-landing-hero-with-phone-mockup). - Page, with a live preview: https://shadcn.exchange/r/weinc/app-landing-hero-with-phone-mockup - Screenshot: https://shadcn.exchange/shot/weinc/app-landing-hero-with-phone-mockup/light.png - Registry item: https://we.inc/r/app-landing-hero-with-phone-mockup.json - Listed: 2026-10-28, source last changed 2026-10-28 ## Install ```bash npx shadcn@latest add https://shadcn.exchange/r/weinc/app-landing-hero-with-phone-mockup.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/app-landing-hero-with-phone-mockup.tsx` ```tsx import { useEffect, useRef, useState, type PointerEvent as ReactPointerEvent } from "react"; import { AnimatePresence, motion, useMotionValue, useReducedMotion, useSpring, useTransform } from "framer-motion"; const FOREST = "https://images.pexels.com/photos/30875697/pexels-photo-30875697.jpeg?auto=compress&cs=tinysrgb&w=1600"; const FOREST_ALT = "A conifer forest at twilight with blue mist hanging between the trees"; const app = { name: "Hark", eyebrow: "Birdsong, named", headline: ["Hear a bird.", "Know its name."], copy: "Hold your phone up to the hedge. Hark listens for a few seconds, tells you who is singing and keeps a list of every bird you have heard from your own back door.", place: "Alder Fen, 05:42", }; const stores = [ { platform: "iPhone", note: "Get Hark for" }, { platform: "Android", note: "Get Hark for" }, ]; /** The birds the phone works through. `focus` is the object-position that keeps the bird in the frame. */ const birds = [ { name: "European robin", short: "Robin", latin: "Erithacus rubecula", heard: "Full song, from a low branch", match: 96, photo: "https://images.pexels.com/photos/11560449/pexels-photo-11560449.jpeg?auto=compress&cs=tinysrgb&w=900", alt: "A European robin singing on a thin branch", focus: "66% 40%" }, { name: "Common kingfisher", short: "Kingfisher", latin: "Alcedo atthis", heard: "Flight call, over the water", match: 91, photo: "https://images.pexels.com/photos/36559572/pexels-photo-36559572.jpeg?auto=compress&cs=tinysrgb&w=900", alt: "A common kingfisher with blue and orange plumage perched on a branch", focus: "66% 50%" }, { name: "Eurasian blue tit", short: "Blue tit", latin: "Cyanistes caeruleus", heard: "Contact call, in the birch", match: 94, photo: "https://images.pexels.com/photos/34593300/pexels-photo-34593300.jpeg?auto=compress&cs=tinysrgb&w=900", alt: "A blue tit standing on a weathered log", focus: "56% 40%" }, ]; const HOLD_MS = 2900; /** Bar heights for the listening meter, as a share of full height. */ const bars = Array.from({ length: 26 }, (_, i) => 0.25 + 0.75 * Math.abs(Math.sin(i * 1.7) * Math.cos(i * 0.6))); function PhoneGlyph() { return ( ); } export default function AppLandingHeroWithPhoneMockup() { const reduce = useReducedMotion(); const root = useRef(null); const [index, setIndex] = useState(0); const [auto, setAuto] = useState(true); const [live, setLive] = useState(true); const px = useMotionValue(0); const py = useMotionValue(0); const sx = useSpring(px, { stiffness: 80, damping: 16 }); const sy = useSpring(py, { stiffness: 80, damping: 16 }); const rotateY = useTransform(sx, (v) => -13 + v * 9); const rotateX = useTransform(sy, (v) => 6 - v * 7); const glareX = useTransform(sx, (v) => `${30 + v * 30}%`); const cardX = useTransform(sx, (v) => v * 18); const cardY = useTransform(sy, (v) => v * 12); useEffect(() => { const el = root.current; if (!el) return; const io = new IntersectionObserver(([entry]) => setLive(entry.isIntersecting)); io.observe(el); return () => io.disconnect(); }, []); // The phone works through the birds by itself until someone picks one. useEffect(() => { if (!auto || reduce || !live) return; const id = setInterval(() => setIndex((i) => (i + 1) % birds.length), HOLD_MS); return () => clearInterval(id); }, [auto, reduce, live]); 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); } const bird = birds[index]; const rise = (delay: number) => reduce ? {} : { initial: { opacity: 0, y: 24 }, animate: { opacity: 1, y: 0 }, transition: { type: "spring" as const, stiffness: 80, damping: 17, delay } }; const ring = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#ffb37a] focus-visible:ring-offset-2 focus-visible:ring-offset-[#071a20]"; return (
{ px.set(0); py.set(0); }} className="app-phone-hero relative isolate overflow-hidden bg-[#071a20] text-[#eef4ee]" > {/* The wood at first light, far behind everything. */}
{FOREST_ALT}
); } ```