Glass Phone Duo

pnpm dlx shadcn@4.14.1 add @glassyui/glass-phone-duo

import { GlassPhoneDuo } from "@/components/glassyui/glass-phone-duo";

export function Showcase() {
  return (
    <GlassPhoneDuo
      className="w-full max-w-2xl"
      screenSrc="/app-landscape.png"
      screenAlt="The app on the unfolded display"
      coverSrc="/app-portrait.png"
      coverAlt="The app on the cover display"
    />
  );
}

const [open, setOpen] = useState(true);

return (
  <>
    <GlassPhoneDuo
      open={open}
      finish="star-white"
      screenSrc="/app-landscape.png"
      coverSrc="/app-portrait.png"
    />
    <button type="button" onClick={() => setOpen(!open)}>
      {open ? 'Close phone' : 'Open phone'}
    </button>
  </>
);

<GlassPhoneDuo
  angle={120}
  view="back"
  finish="night-sky"
  screenSrc="/app-landscape.png"
  coverSrc="/app-portrait.png"
/>