Device Mockup Zoom

1"use client";
2 
3import { Timegroup } from "@editframe/react";
4import type { ReactNode, CSSProperties } from "react";
5 
6const FONT_FAMILY =
7  "var(--font-geist-sans), -apple-system, BlinkMacSystemFont, sans-serif";
8 
9const DefaultScreen = () => (
10  <div
11    style={{
12      alignItems: "center",
13      background: "linear-gradient(135deg, #0ea5e9 0%, #9333ea 100%)",
14      color: "white",
15      display: "flex",
16      fontFamily: FONT_FAMILY,
17      fontSize: 32,
18      fontWeight: 700,
19      inset: 0,
20      justifyContent: "center",
21      letterSpacing: "-0.03em",
22      position: "absolute",
23    }}
24  >
25    Your UI
26  </div>
27);
28 
29export interface DeviceMockupZoomProps {
30  children?: ReactNode;
31  device?: "laptop" | "phone";
32  frameColor?: string;
33  screenColor?: string;
34  background?: string;
35  speed?: number;
36  fps?: number;
37  durationInFrames?: number;
38  width?: number;
39  height?: number;
40  className?: string;
41}
42 
43export const DeviceMockupZoom = ({
44  children,
45  device = "laptop",
46  frameColor = "#1f1f1f",
47  screenColor = "#0a0a0a",
48  background = "#fafafa",
49  speed = 1,
50  fps = 30,
51  durationInFrames = 120,
52  width = 1280,
53  height = 720,
54  className,
55}: DeviceMockupZoomProps) => {
56  const safeSpeed = Math.max(0.01, speed);
57  const durationMs = (durationInFrames / fps) * 1000;
58  const scaleDurationMs = ((durationInFrames / fps) * 1000) / safeSpeed;
59 
60  const screen = children ?? <DefaultScreen />;
61 
62  const containerStyle: CSSProperties = {
63    alignItems: "center",
64    background,
65    display: "flex",
66    height,
67    justifyContent: "center",
68    overflow: "hidden",
69    position: "relative",
70    width,
71  };
72 
73  return (
74    <Timegroup
75      className={className}
76      duration={`${durationMs}ms`}
77      mode="fixed"
78      style={containerStyle}
79    >
80      <>
81        <style>{`
82          @keyframes framecn-device-zoom {
83            from { transform: scale(2); }
84            to { transform: scale(1); }
85          }
86        `}</style>
87        <div
88          style={{
89            animation: `framecn-device-zoom ${scaleDurationMs}ms cubic-bezier(0.22, 1, 0.36, 1) backwards`,
90            transformOrigin: "center center",
91          }}
92        >
93          {device === "laptop" ? (
94            <div style={{ position: "relative" }}>
95              {/* Screen body */}
96              <div
97                style={{
98                  background: frameColor,
99                  borderRadius: 16,
100                  boxShadow: "0 30px 80px rgba(0,0,0,0.25)",
101                  height: 440,
102// … truncated