Browser Frame

/**
 * VibeBox Motion · Browser Frame
 * Copyright (c) 2026 VibeBox. Licensed under the VibeBox Motion Free License:
 * https://motion.vibeboxph.com/license
 * Use it in unlimited personal, commercial and client projects.
 * Do not sell or redistribute it as a component, kit, template or builder.
 */
import type { CSSProperties, ReactNode } from "react";
import { cn } from "@/lib/utils";

/* A browser window to hang work in. The content window can pan tall content on hover or focus,
   or drift through it on a loop, with CSS alone: the window is a size container, so the pan
   distance is calc(100cqh - 100%) of the content's own height. Touch screens and reduced motion
   get a natively scrollable window instead, so the whole page is always reachable. */

const CSS = `
[data-vb-bf-window] { container-type: size; }
[data-vb-bf-track] { transform: translate3d(0, 0, 0); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  [data-vb-bf-window][data-scroll="hover"] [data-vb-bf-track] { transition: transform 1.1s var(--ease-expo-out, cubic-bezier(0.16, 1, 0.3, 1)); }
  [data-vb-bf-window][data-scroll="hover"]:hover [data-vb-bf-track],
  [data-vb-bf-window][data-scroll="hover"]:focus-within [data-vb-bf-track] {
    transform: translate3d(0, min(0px, calc(100cqh - 100%)), 0);
    transition: transform var(--vb-bf-duration, 8s) var(--ease-expo-in-out, cubic-bezier(0.65, 0, 0.35, 1));
  }
}
@keyframes vb-bf-pan { 0%, 8% { transform: translate3d(0, 0, 0); } 92%, 100% { transform: translate3d(0, min(0px, calc(100cqh - 100%)), 0); } }
@media (prefers-reduced-motion: no-preference) {
  [data-vb-bf-window][data-scroll="auto"] [data-vb-bf-track] { animation: vb-bf-pan var(--vb-bf-duration, 18s) var(--ease-expo-in-out, cubic-bezier(0.65, 0, 0.35, 1)) infinite alternate; }
}
@media (hover: none), (prefers-reduced-motion: reduce) {
  [data-vb-bf-window][data-scroll="hover"], [data-vb-bf-window][data-scroll="auto"] { overflow-y: auto; overscroll-behavior: contain; }
  [data-vb-bf-window][data-scroll] [data-vb-bf-track] { transform: none; animation: none; }
}
`;

export type BrowserFrameProps = {
  /** Shown in the address bar. */
  url: string;
  /** What the window shows: usually a full-page screenshot (an img or next/image). */
  children: ReactNode;
  /** "auto" follows the page's tokens; "light" or "dark" forces that look. */
  tone?: "auto" | "light" | "dark";
  /** Pan tall content: on hover and keyboard focus, on a slow loop, or not at all. */
  scroll?: "none" | "hover" | "auto";
  /** Seconds for one pan from top to bottom. */
  scrollSeconds?: number;
  /** Aspect ratio of the content window, e.g. "16 / 10". */
  ratio?: string;
  className?: string;
};

function Lock() {
  return (
    <svg width="9" height="10" viewBox="0 0 9 10" fill="none" aria-hidden="true" className="shrink-0">
      <rect x="0.75" y="4.25" width="7.5" height="5" rx="1.2" stroke="currentColor" strokeWidth="1.1" />
      <path d="M2.4 4.2V3a2.1 2.1 0 1 1 4.2 0v1.2" stroke="currentColor" strokeWidth="1.1" />
    </svg>
  );
}

export function BrowserFrame({ url, children, tone = "auto", scroll = "none", scrollSeconds, ratio = "16 / 10", className }: BrowserFrameProps) {
  const pans = scroll !== "none";
  return (
    <figure
      data-vb="browser-frame"
      className={cn(
        "relative m-0 overflow-hidden rounded-xl border border-border-strong bg-card text-card-foreground",
        "shadow-[inset_0_1px_0_color-mix(in_oklab,var(--foreground)_6%,transparent),0_40px_90px_-30px_rgba(0,0,0,0.65)]",
        tone === "dark" && "dark",
        tone === "light" && "light",
        className,
      )}
    >
      {pans && (
        <style href="vb-browser-frame" precedence="vb">
          {CSS}
        </style>
      )}
      <div aria-hidden="true" className="grid h-9 grid-cols-[60px_1fr_60px] items-center border-b border-border bg-muted px-3">
        <span className="flex gap-1.5">
          <span className="size-2 rounded-full bg-foreground/20" />
          <span className="size-2 rounded-full bg-foreground/20" />
          <span className="size-2 rounded-full bg-foreground/20" />
        </span>
        <span className="inline-flex h-[22px] max-w-full items-center gap-1.5 justify-self-center overflow-hidden rounded-md bg-foreground/5 px-3 font-mono text-[11px] text-ellipsis whitespace-nowrap text-muted-foreground">
          <Lock />
          {url}
        </span>
        <span />
      </div>
      <div
        data-vb-bf-window=""
        data-scroll={scroll}
        tabIndex={scroll === "hover" ? 0 : undefined}
        className="relative overflow-hidden bg-background focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring"
        style={{ aspectRatio: ratio, ...(scrollSeconds ? ({ "--vb-bf-duration": `${scrollSeconds}s` } as CSSProperties) : null) }}
      >
        <div data-vb-bf-track="" className="[&_img]:block [&_img]:h-auto [&_img]:w-full">
          {children}
        </div>
      </div>
    </figure>
  );
}