Glass Laptop

pnpm dlx shadcn@4.14.1 add @glassyui/glass-laptop

import { GlassLaptop } from "@/components/glassyui/glass-laptop";

export function Showcase() {
  return (
    <GlassLaptop
      aria-label="The app on a laptop"
      className="w-full max-w-5xl"
    >
      <img alt="" className="size-full object-cover" src="/app.png" />
    </GlassLaptop>
  );
}

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

useEffect(() => {
  const frame = requestAnimationFrame(() => setOpen(true));

  return () => cancelAnimationFrame(frame);
}, []);

return (
  <GlassLaptop open={open} finish="silver">
    <YourScreen />
  </GlassLaptop>
);