Image Expand To Fullscreen

1"use client";
2 
3import { Timegroup } from "@editframe/react";
4import type { CSSProperties } from "react";
5 
6const FONT_FAMILY =
7  "var(--font-geist-sans), -apple-system, BlinkMacSystemFont, sans-serif";
8 
9export interface ImageExpandRect {
10  top: number;
11  left: number;
12  width: number;
13  height: number;
14}
15 
16export interface ImageExpandToFullscreenProps {
17  from?: ImageExpandRect;
18  to?: ImageExpandRect;
19  borderRadiusFrom?: number;
20  borderRadiusTo?: number;
21  morphAt?: number;
22  imageColorA?: string;
23  imageColorB?: string;
24  imageColorC?: string;
25  feedBackground?: string;
26  editorBackground?: string;
27  accent?: string;
28  postAuthor?: string;
29  postBody?: string;
30  speed?: number;
31  fps?: number;
32  durationInFrames?: number;
33  width?: number;
34  height?: number;
35  className?: string;
36}
37 
38const DEFAULT_FROM: ImageExpandRect = {
39  height: 200,
40  left: 460,
41  top: 280,
42  width: 360,
43};
44 
45const DEFAULT_TO: ImageExpandRect = {
46  height: 480,
47  left: 200,
48  top: 120,
49  width: 880,
50};
51 
52export const ImageExpandToFullscreen = ({
53  from = DEFAULT_FROM,
54  to = DEFAULT_TO,
55  borderRadiusFrom = 12,
56  borderRadiusTo = 16,
57  morphAt = 30,
58  imageColorA = "#ff6b6b",
59  imageColorB = "#845ec2",
60  imageColorC = "#4d8dff",
61  feedBackground = "#f4f4f5",
62  editorBackground = "#0a0a0a",
63  accent = "#fafafa",
64  postAuthor = "Maya Larsson",
65  postBody = "Sunset over the old harbor — color graded straight out of camera.",
66  speed = 1,
67  fps = 30,
68  durationInFrames = 150,
69  width = 1280,
70  height = 720,
71  className,
72}: ImageExpandToFullscreenProps) => {
73  const safeSpeed = Math.max(0.01, speed);
74  const durationMs = (durationInFrames / fps) * 1000;
75  const frameMs = 1000 / fps;
76  const morphMs = ((durationInFrames / fps) * 1000) / safeSpeed;
77 
78  const containerStyle: CSSProperties = {
79    fontFamily: FONT_FAMILY,
80    height,
81    overflow: "hidden",
82    position: "relative",
83    width,
84  };
85 
86  const imageGradient = `linear-gradient(135deg, ${imageColorA}, ${imageColorB}, ${imageColorC})`;
87 
88  return (
89    <Timegroup
90      className={className}
91      duration={`${durationMs}ms`}
92      mode="fixed"
93      style={containerStyle}
94    >
95      <>
96        <style>{`
97          @keyframes framecn-img-expand-feed {
98            from { opacity: 1; }
99            to { opacity: 0; }
100          }
101          @keyframes framecn-img-expand-editor {
102            from { opacity: 0; }
103            to { opacity: 1; }
104          }
105          @keyframes framecn-img-expand-img {
106// … truncated