Browser Flow

1"use client";
2 
3import { Timegroup } from "@editframe/react";
4import type { CSSProperties } from "react";
5 
6export interface BrowserFlowProps {
7  url?: string;
8  speed?: number;
9  background?: string;
10  className?: string;
11  fps?: number;
12  durationInFrames?: number;
13  width?: number;
14  height?: number;
15}
16 
17const FONT_FAMILY =
18  "var(--font-geist-sans), -apple-system, BlinkMacSystemFont, sans-serif";
19const MONO_FAMILY =
20  "var(--font-geist-mono), ui-monospace, SFMono-Regular, Menlo, monospace";
21 
22const MacDots = ({ size = 12 }: { size?: number }) => (
23  <div style={{ alignItems: "center", display: "flex", gap: 8 }}>
24    {["#ff5f57", "#febc2e", "#28c840"].map((c) => (
25      <div
26        key={c}
27        style={{
28          background: c,
29          borderRadius: "50%",
30          height: size,
31          opacity: 0.85,
32          width: size,
33        }}
34      />
35    ))}
36  </div>
37);
38 
39export const BrowserFlow = ({
40  url = "framecn.dev",
41  speed = 1,
42  background = "white",
43  className,
44  fps = 30,
45  durationInFrames = 270,
46  width = 1280,
47  height = 720,
48}: BrowserFlowProps) => {
49  const safeSpeed = Math.max(0.01, speed);
50  const durationMs = (durationInFrames / fps) * 1000;
51  const frameMs = 1000 / fps;
52 
53  // Animation timing (converted from frames)
54  const typingStartMs = 4 * frameMs;
55  const typingEndMs = 38 * frameMs;
56  const typingDurationMs = (typingEndMs - typingStartMs) / safeSpeed;
57 
58  const progressStartMs = 40 * frameMs;
59  const progressEndMs = 95 * frameMs;
60 
61  const pageStartMs = 95 * frameMs;
62  const pageFadeDurationMs = 12 * frameMs;
63 
64  const scrollStartMs = 115 * frameMs;
65  const scrollEndMs = 230 * frameMs;
66  const scrollDurationMs = (scrollEndMs - scrollStartMs) / safeSpeed;
67 
68  const clickMs = (230 + 4) * frameMs;
69 
70  const containerStyle: CSSProperties = {
71    background: "radial-gradient(ellipse at center, #11141c 0%, #050505 75%)",
72    fontFamily: FONT_FAMILY,
73    height,
74    overflow: "hidden",
75    position: "relative",
76    width,
77  };
78 
79  const browserWidth = 1100;
80  const browserHeight = 620;
81  const chromeHeight = 56;
82 
83  return (
84    <Timegroup
85      className={className}
86      duration={`${durationMs}ms`}
87      mode="fixed"
88      style={containerStyle}
89    >
90      <>
91        <style>{`
92          @keyframes framecn-browser-type {
93            from { width: 0ch; }
94            to { width: ${url.length}ch; }
95          }
96          @keyframes framecn-browser-cursor {
97            0%, 50% { opacity: 1; }
98            50.01%, 100% { opacity: 0; }
99          }
100// … truncated