mirror of
https://github.com/snapotter-hq/SnapOtter.git
synced 2026-08-03 07:46:42 +02:00
feat(videos): add Product Demo scenes 1-8 and composition
Eight scenes replicating the SnapOtter UI in light theme: Dashboard overview with search filtering, single tool resize flow, batch processing with staggered progress, pipeline builder, AI tools (bg removal, upscale, OCR), image editor, API docs, and end card.
This commit is contained in:
SnapOtter
@@ -0,0 +1,46 @@
|
|||||||
|
import type React from "react";
|
||||||
|
import { AbsoluteFill, Series } from "remotion";
|
||||||
|
import { GrainOverlay } from "@/components/GrainOverlay";
|
||||||
|
import { AiToolsScene } from "./scenes/AiToolsScene";
|
||||||
|
import { ApiDocsScene } from "./scenes/ApiDocsScene";
|
||||||
|
import { BatchProcessingScene } from "./scenes/BatchProcessingScene";
|
||||||
|
import { DashboardScene } from "./scenes/DashboardScene";
|
||||||
|
import { EndCardScene } from "./scenes/EndCardScene";
|
||||||
|
import { ImageEditorScene } from "./scenes/ImageEditorScene";
|
||||||
|
import { PipelineBuilderScene } from "./scenes/PipelineBuilderScene";
|
||||||
|
import { SingleToolScene } from "./scenes/SingleToolScene";
|
||||||
|
|
||||||
|
export const ProductDemo: React.FC = () => {
|
||||||
|
return (
|
||||||
|
<AbsoluteFill style={{ backgroundColor: "#f5f5f4" }}>
|
||||||
|
<Series>
|
||||||
|
<Series.Sequence durationInFrames={240}>
|
||||||
|
<DashboardScene />
|
||||||
|
</Series.Sequence>
|
||||||
|
<Series.Sequence durationInFrames={360}>
|
||||||
|
<SingleToolScene />
|
||||||
|
</Series.Sequence>
|
||||||
|
<Series.Sequence durationInFrames={360}>
|
||||||
|
<BatchProcessingScene />
|
||||||
|
</Series.Sequence>
|
||||||
|
<Series.Sequence durationInFrames={390}>
|
||||||
|
<PipelineBuilderScene />
|
||||||
|
</Series.Sequence>
|
||||||
|
<Series.Sequence durationInFrames={360}>
|
||||||
|
<AiToolsScene />
|
||||||
|
</Series.Sequence>
|
||||||
|
<Series.Sequence durationInFrames={300}>
|
||||||
|
<ImageEditorScene />
|
||||||
|
</Series.Sequence>
|
||||||
|
<Series.Sequence durationInFrames={150}>
|
||||||
|
<ApiDocsScene />
|
||||||
|
</Series.Sequence>
|
||||||
|
<Series.Sequence durationInFrames={90}>
|
||||||
|
<EndCardScene />
|
||||||
|
</Series.Sequence>
|
||||||
|
</Series>
|
||||||
|
|
||||||
|
<GrainOverlay opacity={0.02} />
|
||||||
|
</AbsoluteFill>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,206 @@
|
|||||||
|
import type React from "react";
|
||||||
|
import { AbsoluteFill, Sequence, useCurrentFrame } from "remotion";
|
||||||
|
import { AppWindow } from "@/components/AppWindow";
|
||||||
|
import { BeforeAfter } from "@/components/BeforeAfter";
|
||||||
|
import { ClipReveal } from "@/components/ClipReveal";
|
||||||
|
import { PhotoPlaceholder } from "@/components/PhotoPlaceholder";
|
||||||
|
import { COLOR } from "@/lib/colors";
|
||||||
|
import { FONT, TEXT } from "@/lib/fonts";
|
||||||
|
|
||||||
|
const Checkerboard: React.FC<{ w: number; h: number }> = ({ w, h }) => (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: w,
|
||||||
|
height: h,
|
||||||
|
backgroundImage:
|
||||||
|
"linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%)",
|
||||||
|
backgroundSize: "16px 16px",
|
||||||
|
backgroundPosition: "0 0, 0 8px, 8px -8px, -8px 0px",
|
||||||
|
opacity: 0.4,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
export const AiToolsScene: React.FC = () => {
|
||||||
|
const frame = useCurrentFrame();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<AbsoluteFill
|
||||||
|
style={{ justifyContent: "center", alignItems: "center", backgroundColor: "#f5f5f4" }}
|
||||||
|
>
|
||||||
|
{/* Background removal demo (0-180) */}
|
||||||
|
<Sequence from={0} durationInFrames={180}>
|
||||||
|
<AbsoluteFill style={{ justifyContent: "center", alignItems: "center" }}>
|
||||||
|
<AppWindow
|
||||||
|
title="Remove Background"
|
||||||
|
width={1200}
|
||||||
|
height={700}
|
||||||
|
topBarColor="#ffffff"
|
||||||
|
bodyColor="#ffffff"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: "flex",
|
||||||
|
alignItems: "center",
|
||||||
|
justifyContent: "center",
|
||||||
|
height: "100%",
|
||||||
|
gap: 40,
|
||||||
|
padding: 24,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Sequence from={0} durationInFrames={60}>
|
||||||
|
<AbsoluteFill style={{ justifyContent: "center", alignItems: "center" }}>
|
||||||
|
<div style={{ display: "flex", alignItems: "center", gap: 12 }}>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: 20,
|
||||||
|
height: 20,
|
||||||
|
border: "3px solid #3b82f6",
|
||||||
|
borderTop: "3px solid transparent",
|
||||||
|
borderRadius: "50%",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<span style={{ fontFamily: FONT.body, fontSize: 14, color: "#3b82f6" }}>
|
||||||
|
Running rembg model locally...
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</AbsoluteFill>
|
||||||
|
</Sequence>
|
||||||
|
|
||||||
|
<Sequence from={60} durationInFrames={120}>
|
||||||
|
<AbsoluteFill style={{ justifyContent: "center", alignItems: "center" }}>
|
||||||
|
<BeforeAfter
|
||||||
|
before={<PhotoPlaceholder width={450} height={340} hue={30} />}
|
||||||
|
after={
|
||||||
|
<div style={{ position: "relative", width: 450, height: 340 }}>
|
||||||
|
<Checkerboard w={450} h={340} />
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
position: "absolute",
|
||||||
|
top: 50,
|
||||||
|
left: 140,
|
||||||
|
width: 170,
|
||||||
|
height: 240,
|
||||||
|
borderRadius: "50% 50% 45% 45%",
|
||||||
|
background: "linear-gradient(135deg, #e8a87c, #d4856b)",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
scanStartFrame={10}
|
||||||
|
scanDuration={50}
|
||||||
|
width={450}
|
||||||
|
height={340}
|
||||||
|
/>
|
||||||
|
</AbsoluteFill>
|
||||||
|
</Sequence>
|
||||||
|
</div>
|
||||||
|
</AppWindow>
|
||||||
|
</AbsoluteFill>
|
||||||
|
</Sequence>
|
||||||
|
|
||||||
|
{/* Quick AI tool montage (180-360) */}
|
||||||
|
<Sequence from={180} durationInFrames={90}>
|
||||||
|
<AbsoluteFill style={{ justifyContent: "center", alignItems: "center" }}>
|
||||||
|
<AppWindow
|
||||||
|
title="Upscale 4x"
|
||||||
|
width={1000}
|
||||||
|
height={500}
|
||||||
|
topBarColor="#ffffff"
|
||||||
|
bodyColor="#ffffff"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: "flex",
|
||||||
|
alignItems: "center",
|
||||||
|
justifyContent: "center",
|
||||||
|
height: "100%",
|
||||||
|
gap: 30,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<PhotoPlaceholder width={100} height={100} hue={200} />
|
||||||
|
<span
|
||||||
|
style={{
|
||||||
|
fontFamily: FONT.heading,
|
||||||
|
fontWeight: 800,
|
||||||
|
fontSize: 32,
|
||||||
|
color: COLOR.accent,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
4x
|
||||||
|
</span>
|
||||||
|
<PhotoPlaceholder width={300} height={300} hue={200} />
|
||||||
|
</div>
|
||||||
|
</AppWindow>
|
||||||
|
</AbsoluteFill>
|
||||||
|
</Sequence>
|
||||||
|
|
||||||
|
<Sequence from={270} durationInFrames={90}>
|
||||||
|
<AbsoluteFill style={{ justifyContent: "center", alignItems: "center" }}>
|
||||||
|
<AppWindow
|
||||||
|
title="OCR / Text Extraction"
|
||||||
|
width={1000}
|
||||||
|
height={500}
|
||||||
|
topBarColor="#ffffff"
|
||||||
|
bodyColor="#ffffff"
|
||||||
|
>
|
||||||
|
<div style={{ display: "flex", height: "100%" }}>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
flex: 0.5,
|
||||||
|
display: "flex",
|
||||||
|
alignItems: "center",
|
||||||
|
justifyContent: "center",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<PhotoPlaceholder width={300} height={350} hue={50} />
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
flex: 0.5,
|
||||||
|
padding: 24,
|
||||||
|
borderLeft: "1px solid #e5e5e5",
|
||||||
|
display: "flex",
|
||||||
|
flexDirection: "column",
|
||||||
|
gap: 8,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{ fontFamily: FONT.body, fontWeight: 600, fontSize: 14, color: "#0a0a0a" }}
|
||||||
|
>
|
||||||
|
Extracted Text
|
||||||
|
</div>
|
||||||
|
{["Lorem ipsum dolor sit", "amet consectetur", "adipiscing elit sed do"].map(
|
||||||
|
(line, i) => (
|
||||||
|
<div
|
||||||
|
key={`ocr-${i}`}
|
||||||
|
style={{
|
||||||
|
fontFamily: FONT.mono,
|
||||||
|
fontSize: 13,
|
||||||
|
color: "#525252",
|
||||||
|
padding: "4px 8px",
|
||||||
|
backgroundColor: "#eff6ff",
|
||||||
|
borderRadius: 4,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{line}
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</AppWindow>
|
||||||
|
</AbsoluteFill>
|
||||||
|
</Sequence>
|
||||||
|
|
||||||
|
{/* Bottom text */}
|
||||||
|
<div style={{ position: "absolute", bottom: 40, width: "100%", textAlign: "center" }}>
|
||||||
|
<ClipReveal startFrame={300}>
|
||||||
|
<span style={{ ...TEXT.sectionTitle, fontSize: 32, color: "#0a0a0a" }}>
|
||||||
|
All on your hardware.
|
||||||
|
</span>
|
||||||
|
</ClipReveal>
|
||||||
|
</div>
|
||||||
|
</AbsoluteFill>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,84 @@
|
|||||||
|
import type React from "react";
|
||||||
|
import { AbsoluteFill } from "remotion";
|
||||||
|
import { AppWindow } from "@/components/AppWindow";
|
||||||
|
import { ClipReveal } from "@/components/ClipReveal";
|
||||||
|
import { TypeWriter } from "@/components/TypeWriter";
|
||||||
|
import { FONT, TEXT } from "@/lib/fonts";
|
||||||
|
|
||||||
|
const CURL_SEGMENTS = [
|
||||||
|
{ text: "curl ", color: "#e6edf3" },
|
||||||
|
{ text: "-X POST ", color: "#79c0ff" },
|
||||||
|
{ text: "localhost:1349/api/v1/tools/resize ", color: "#a5d6ff" },
|
||||||
|
{ text: '-F "file=@photo.jpg" ', color: "#7ee787" },
|
||||||
|
{ text: "-F ", color: "#79c0ff" },
|
||||||
|
{ text: '"settings={\\"width\\":800}"', color: "#ffa657" },
|
||||||
|
];
|
||||||
|
|
||||||
|
export const ApiDocsScene: React.FC = () => {
|
||||||
|
return (
|
||||||
|
<AbsoluteFill
|
||||||
|
style={{ justifyContent: "center", alignItems: "center", backgroundColor: "#f5f5f4" }}
|
||||||
|
>
|
||||||
|
<AppWindow
|
||||||
|
title="API Docs"
|
||||||
|
width={1200}
|
||||||
|
height={600}
|
||||||
|
topBarColor="#1e293b"
|
||||||
|
bodyColor="#0d1117"
|
||||||
|
>
|
||||||
|
<div style={{ padding: 24 }}>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
fontFamily: FONT.body,
|
||||||
|
fontSize: 12,
|
||||||
|
color: "#8b949e",
|
||||||
|
marginBottom: 8,
|
||||||
|
textTransform: "uppercase",
|
||||||
|
letterSpacing: "0.05em",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Example Request
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
style={{ backgroundColor: "#161b22", borderRadius: 8, padding: 16, marginBottom: 16 }}
|
||||||
|
>
|
||||||
|
<TypeWriter
|
||||||
|
segments={CURL_SEGMENTS}
|
||||||
|
startFrame={10}
|
||||||
|
speed={1}
|
||||||
|
style={{ fontSize: 14, lineHeight: 1.6 }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<ClipReveal startFrame={80}>
|
||||||
|
<div style={{ backgroundColor: "#161b22", borderRadius: 8, padding: 16 }}>
|
||||||
|
<pre
|
||||||
|
style={{
|
||||||
|
fontFamily: FONT.mono,
|
||||||
|
fontSize: 13,
|
||||||
|
color: "#e6edf3",
|
||||||
|
margin: 0,
|
||||||
|
lineHeight: 1.6,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{`{
|
||||||
|
"downloadUrl": "/api/v1/download/abc123",
|
||||||
|
"originalSize": 2400000,
|
||||||
|
"processedSize": 340000
|
||||||
|
}`}
|
||||||
|
</pre>
|
||||||
|
</div>
|
||||||
|
</ClipReveal>
|
||||||
|
</div>
|
||||||
|
</AppWindow>
|
||||||
|
|
||||||
|
<div style={{ position: "absolute", bottom: 40, width: "100%", textAlign: "center" }}>
|
||||||
|
<ClipReveal startFrame={100}>
|
||||||
|
<span style={{ ...TEXT.sectionTitle, fontSize: 28, color: "#0a0a0a" }}>
|
||||||
|
Every tool via REST API.
|
||||||
|
</span>
|
||||||
|
</ClipReveal>
|
||||||
|
</div>
|
||||||
|
</AbsoluteFill>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,127 @@
|
|||||||
|
import type React from "react";
|
||||||
|
import { AbsoluteFill, spring, useCurrentFrame, useVideoConfig } from "remotion";
|
||||||
|
import { AppWindow } from "@/components/AppWindow";
|
||||||
|
import { ClipReveal } from "@/components/ClipReveal";
|
||||||
|
import { ProgressBar } from "@/components/ProgressBar";
|
||||||
|
import { FONT, TEXT } from "@/lib/fonts";
|
||||||
|
import { SPRING } from "@/lib/motion";
|
||||||
|
|
||||||
|
const FILES = [
|
||||||
|
{ name: "photo_001.jpg", from: "1.8 MB", to: "95 KB" },
|
||||||
|
{ name: "photo_002.jpg", from: "3.2 MB", to: "210 KB" },
|
||||||
|
{ name: "landscape.png", from: "4.1 MB", to: "280 KB" },
|
||||||
|
{ name: "portrait.jpg", from: "2.7 MB", to: "160 KB" },
|
||||||
|
{ name: "macro_01.jpg", from: "5.0 MB", to: "320 KB" },
|
||||||
|
{ name: "event_23.jpg", from: "1.5 MB", to: "85 KB" },
|
||||||
|
{ name: "scan_hires.png", from: "8.2 MB", to: "450 KB" },
|
||||||
|
{ name: "product_a.jpg", from: "2.0 MB", to: "120 KB" },
|
||||||
|
];
|
||||||
|
|
||||||
|
export const BatchProcessingScene: React.FC = () => {
|
||||||
|
const frame = useCurrentFrame();
|
||||||
|
const { fps } = useVideoConfig();
|
||||||
|
|
||||||
|
const processStartFrame = 100;
|
||||||
|
const filesPerSecond = 3;
|
||||||
|
const framesPerFile = Math.floor(30 / filesPerSecond);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<AbsoluteFill
|
||||||
|
style={{ justifyContent: "center", alignItems: "center", backgroundColor: "#f5f5f4" }}
|
||||||
|
>
|
||||||
|
<AppWindow
|
||||||
|
title="Compress"
|
||||||
|
width={1600}
|
||||||
|
height={900}
|
||||||
|
topBarColor="#ffffff"
|
||||||
|
bodyColor="#ffffff"
|
||||||
|
>
|
||||||
|
<div style={{ padding: 24 }}>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: "grid",
|
||||||
|
gridTemplateColumns: "repeat(4, 1fr)",
|
||||||
|
gap: 12,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{FILES.map((file, i) => {
|
||||||
|
const enterDelay = 20 + i * 4;
|
||||||
|
const enterSpring = spring({ frame: frame - enterDelay, fps, config: SPRING.popIn });
|
||||||
|
const fileProcessFrame = processStartFrame + i * framesPerFile;
|
||||||
|
const isDone = frame > fileProcessFrame + framesPerFile;
|
||||||
|
const isProcessing = frame >= fileProcessFrame && !isDone;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={file.name}
|
||||||
|
style={{
|
||||||
|
padding: 16,
|
||||||
|
borderRadius: 8,
|
||||||
|
border: `1px solid ${isDone ? "#22c55e40" : "#e5e5e5"}`,
|
||||||
|
backgroundColor: isDone ? "#f0fdf4" : "white",
|
||||||
|
opacity: enterSpring,
|
||||||
|
transform: `scale(${0.8 + enterSpring * 0.2})`,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
fontFamily: FONT.body,
|
||||||
|
fontSize: 12,
|
||||||
|
color: "#0a0a0a",
|
||||||
|
fontWeight: 500,
|
||||||
|
marginBottom: 8,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{file.name}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{isProcessing && (
|
||||||
|
<ProgressBar
|
||||||
|
startFrame={0}
|
||||||
|
duration={framesPerFile}
|
||||||
|
width={200}
|
||||||
|
height={4}
|
||||||
|
color="#3b82f6"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{isDone && (
|
||||||
|
<div style={{ display: "flex", gap: 8, alignItems: "center" }}>
|
||||||
|
<span style={{ color: "#22c55e", fontSize: 14 }}>✓</span>
|
||||||
|
<span style={{ fontFamily: FONT.mono, fontSize: 11, color: "#a3a3a3" }}>
|
||||||
|
{file.from}
|
||||||
|
</span>
|
||||||
|
<span style={{ fontFamily: FONT.mono, fontSize: 11, color: "#a3a3a3" }}>
|
||||||
|
{"→"}
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
style={{
|
||||||
|
fontFamily: FONT.mono,
|
||||||
|
fontSize: 11,
|
||||||
|
color: "#22c55e",
|
||||||
|
fontWeight: 600,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{file.to}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{frame > 280 && (
|
||||||
|
<div style={{ marginTop: 24, textAlign: "center" }}>
|
||||||
|
<ClipReveal startFrame={280}>
|
||||||
|
<span style={{ ...TEXT.sectionTitle, fontSize: 32, color: "#0a0a0a" }}>
|
||||||
|
Unlimited batch. No caps.
|
||||||
|
</span>
|
||||||
|
</ClipReveal>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</AppWindow>
|
||||||
|
</AbsoluteFill>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,149 @@
|
|||||||
|
import type React from "react";
|
||||||
|
import {
|
||||||
|
AbsoluteFill,
|
||||||
|
Img,
|
||||||
|
interpolate,
|
||||||
|
spring,
|
||||||
|
staticFile,
|
||||||
|
useCurrentFrame,
|
||||||
|
useVideoConfig,
|
||||||
|
} from "remotion";
|
||||||
|
import { AppWindow } from "@/components/AppWindow";
|
||||||
|
import { CATEGORY_LABELS, CATEGORY_ORDER, COLOR } from "@/lib/colors";
|
||||||
|
import { FONT } from "@/lib/fonts";
|
||||||
|
import { SPRING } from "@/lib/motion";
|
||||||
|
import { TOOLS } from "@/lib/tools";
|
||||||
|
|
||||||
|
const VISIBLE_TOOLS = TOOLS.slice(0, 12);
|
||||||
|
|
||||||
|
export const DashboardScene: React.FC = () => {
|
||||||
|
const frame = useCurrentFrame();
|
||||||
|
const { fps } = useVideoConfig();
|
||||||
|
|
||||||
|
const windowScale = spring({ frame, fps, config: SPRING.snappy });
|
||||||
|
const searchText = "resize";
|
||||||
|
const typingStart = 60;
|
||||||
|
const charsVisible = Math.floor(Math.max(0, frame - typingStart) / 3);
|
||||||
|
const typed = searchText.slice(0, charsVisible);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<AbsoluteFill
|
||||||
|
style={{ justifyContent: "center", alignItems: "center", backgroundColor: "#f5f5f4" }}
|
||||||
|
>
|
||||||
|
<div style={{ transform: `scale(${0.95 + windowScale * 0.05})`, opacity: windowScale }}>
|
||||||
|
<AppWindow
|
||||||
|
title="SnapOtter"
|
||||||
|
width={1600}
|
||||||
|
height={900}
|
||||||
|
topBarColor="#ffffff"
|
||||||
|
bodyColor="#ffffff"
|
||||||
|
>
|
||||||
|
<div style={{ padding: 24 }}>
|
||||||
|
{/* Top bar */}
|
||||||
|
<div style={{ display: "flex", alignItems: "center", gap: 16, marginBottom: 20 }}>
|
||||||
|
<Img src={staticFile("logo.png")} style={{ width: 32, height: 32 }} />
|
||||||
|
<span
|
||||||
|
style={{
|
||||||
|
fontFamily: FONT.heading,
|
||||||
|
fontWeight: 800,
|
||||||
|
fontSize: 20,
|
||||||
|
color: "#0a0a0a",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
SnapOtter
|
||||||
|
</span>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
flex: 1,
|
||||||
|
maxWidth: 400,
|
||||||
|
height: 40,
|
||||||
|
borderRadius: 8,
|
||||||
|
border: "1px solid #e5e5e5",
|
||||||
|
padding: "0 16px",
|
||||||
|
display: "flex",
|
||||||
|
alignItems: "center",
|
||||||
|
fontFamily: FONT.body,
|
||||||
|
fontSize: 14,
|
||||||
|
color: typed ? "#0a0a0a" : "#a3a3a3",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{typed || "Search tools..."}
|
||||||
|
{frame >= typingStart &&
|
||||||
|
charsVisible < searchText.length &&
|
||||||
|
Math.floor(frame / 8) % 2 === 0 && (
|
||||||
|
<span
|
||||||
|
style={{ width: 2, height: 16, backgroundColor: "#3b82f6", marginLeft: 1 }}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Category pills */}
|
||||||
|
<div style={{ display: "flex", gap: 8, marginBottom: 24, flexWrap: "wrap" }}>
|
||||||
|
{CATEGORY_ORDER.map((cat) => (
|
||||||
|
<div
|
||||||
|
key={cat}
|
||||||
|
style={{
|
||||||
|
padding: "4px 12px",
|
||||||
|
borderRadius: 16,
|
||||||
|
fontSize: 12,
|
||||||
|
fontFamily: FONT.body,
|
||||||
|
fontWeight: 500,
|
||||||
|
backgroundColor: `${COLOR.category[cat]}15`,
|
||||||
|
color: COLOR.category[cat],
|
||||||
|
border: `1px solid ${COLOR.category[cat]}30`,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{CATEGORY_LABELS[cat]}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Tool grid */}
|
||||||
|
<div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 12 }}>
|
||||||
|
{VISIBLE_TOOLS.map((tool) => {
|
||||||
|
const matches = !typed || tool.name.toLowerCase().includes(typed.toLowerCase());
|
||||||
|
const cardOpacity = typed ? (matches ? 1 : 0.2) : 1;
|
||||||
|
const cardScale = typed ? (matches ? 1 : 0.95) : 1;
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={tool.name}
|
||||||
|
style={{
|
||||||
|
padding: 16,
|
||||||
|
borderRadius: 8,
|
||||||
|
border: "1px solid #e5e5e5",
|
||||||
|
backgroundColor: "white",
|
||||||
|
opacity: cardOpacity,
|
||||||
|
transform: `scale(${cardScale})`,
|
||||||
|
transition: "all 0.2s",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: 8,
|
||||||
|
height: 8,
|
||||||
|
borderRadius: 4,
|
||||||
|
backgroundColor: COLOR.category[tool.category] ?? COLOR.accent,
|
||||||
|
marginBottom: 8,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
fontFamily: FONT.body,
|
||||||
|
fontWeight: 500,
|
||||||
|
fontSize: 14,
|
||||||
|
color: "#0a0a0a",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{tool.name}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</AppWindow>
|
||||||
|
</div>
|
||||||
|
</AbsoluteFill>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,62 @@
|
|||||||
|
import type React from "react";
|
||||||
|
import {
|
||||||
|
AbsoluteFill,
|
||||||
|
Img,
|
||||||
|
interpolate,
|
||||||
|
spring,
|
||||||
|
staticFile,
|
||||||
|
useCurrentFrame,
|
||||||
|
useVideoConfig,
|
||||||
|
} from "remotion";
|
||||||
|
import { ClipReveal } from "@/components/ClipReveal";
|
||||||
|
import { COLOR } from "@/lib/colors";
|
||||||
|
import { FONT, TEXT } from "@/lib/fonts";
|
||||||
|
import { SPRING } from "@/lib/motion";
|
||||||
|
|
||||||
|
export const EndCardScene: React.FC = () => {
|
||||||
|
const frame = useCurrentFrame();
|
||||||
|
const { fps } = useVideoConfig();
|
||||||
|
|
||||||
|
const logoSpring = spring({ frame, fps, config: SPRING.natural });
|
||||||
|
const fadeOut = interpolate(frame, [70, 90], [1, 0], {
|
||||||
|
extrapolateLeft: "clamp",
|
||||||
|
extrapolateRight: "clamp",
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<AbsoluteFill
|
||||||
|
style={{
|
||||||
|
justifyContent: "center",
|
||||||
|
alignItems: "center",
|
||||||
|
backgroundColor: "white",
|
||||||
|
opacity: fadeOut,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Img
|
||||||
|
src={staticFile("logo.png")}
|
||||||
|
style={{
|
||||||
|
width: 80,
|
||||||
|
height: 80,
|
||||||
|
opacity: logoSpring,
|
||||||
|
transform: `scale(${0.8 + logoSpring * 0.2})`,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div style={{ height: 16 }} />
|
||||||
|
|
||||||
|
<ClipReveal startFrame={10}>
|
||||||
|
<span style={{ ...TEXT.sectionTitle, fontSize: 36, color: "#0a0a0a" }}>
|
||||||
|
Self-hosted image processing.
|
||||||
|
</span>
|
||||||
|
</ClipReveal>
|
||||||
|
|
||||||
|
<div style={{ height: 12 }} />
|
||||||
|
|
||||||
|
<ClipReveal startFrame={25}>
|
||||||
|
<span style={{ fontFamily: FONT.body, fontSize: 18, color: COLOR.accent }}>
|
||||||
|
snapotter.com
|
||||||
|
</span>
|
||||||
|
</ClipReveal>
|
||||||
|
</AbsoluteFill>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,188 @@
|
|||||||
|
import type React from "react";
|
||||||
|
import { AbsoluteFill, interpolate, spring, useCurrentFrame, useVideoConfig } from "remotion";
|
||||||
|
import { AppWindow } from "@/components/AppWindow";
|
||||||
|
import { PhotoPlaceholder } from "@/components/PhotoPlaceholder";
|
||||||
|
import { COLOR } from "@/lib/colors";
|
||||||
|
import { FONT } from "@/lib/fonts";
|
||||||
|
import { SPRING } from "@/lib/motion";
|
||||||
|
|
||||||
|
const TOOLBAR_ICONS = [
|
||||||
|
"Move",
|
||||||
|
"Select",
|
||||||
|
"Brush",
|
||||||
|
"Eraser",
|
||||||
|
"Clone",
|
||||||
|
"Dodge",
|
||||||
|
"Text",
|
||||||
|
"Shape",
|
||||||
|
"Line",
|
||||||
|
"Gradient",
|
||||||
|
"Fill",
|
||||||
|
"Crop",
|
||||||
|
"Eyedropper",
|
||||||
|
"Zoom",
|
||||||
|
"Hand",
|
||||||
|
];
|
||||||
|
|
||||||
|
export const ImageEditorScene: React.FC = () => {
|
||||||
|
const frame = useCurrentFrame();
|
||||||
|
const { fps } = useVideoConfig();
|
||||||
|
|
||||||
|
const enterSpring = spring({ frame, fps, config: SPRING.snappy });
|
||||||
|
const brushFrame = 60;
|
||||||
|
const brushProgress = interpolate(frame, [brushFrame, brushFrame + 60], [0, 1], {
|
||||||
|
extrapolateLeft: "clamp",
|
||||||
|
extrapolateRight: "clamp",
|
||||||
|
});
|
||||||
|
|
||||||
|
const activeToolIdx = frame < 60 ? 2 : frame < 120 ? 6 : frame < 200 ? 11 : 2;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<AbsoluteFill
|
||||||
|
style={{ justifyContent: "center", alignItems: "center", backgroundColor: "#f5f5f4" }}
|
||||||
|
>
|
||||||
|
<div style={{ transform: `scale(${0.95 + enterSpring * 0.05})`, opacity: enterSpring }}>
|
||||||
|
<AppWindow
|
||||||
|
title="Editor"
|
||||||
|
width={1600}
|
||||||
|
height={900}
|
||||||
|
topBarColor="#1e293b"
|
||||||
|
bodyColor="#0f172a"
|
||||||
|
>
|
||||||
|
<div style={{ display: "flex", height: "100%" }}>
|
||||||
|
{/* Toolbar */}
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: 48,
|
||||||
|
backgroundColor: "#1e293b",
|
||||||
|
borderRight: "1px solid #334155",
|
||||||
|
display: "flex",
|
||||||
|
flexDirection: "column",
|
||||||
|
alignItems: "center",
|
||||||
|
paddingTop: 8,
|
||||||
|
gap: 2,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{TOOLBAR_ICONS.map((icon, i) => (
|
||||||
|
<div
|
||||||
|
key={icon}
|
||||||
|
style={{
|
||||||
|
width: 36,
|
||||||
|
height: 32,
|
||||||
|
borderRadius: 6,
|
||||||
|
backgroundColor: i === activeToolIdx ? "#3b82f6" : "transparent",
|
||||||
|
display: "flex",
|
||||||
|
alignItems: "center",
|
||||||
|
justifyContent: "center",
|
||||||
|
fontSize: 10,
|
||||||
|
color: i === activeToolIdx ? "white" : "#94a3b8",
|
||||||
|
fontFamily: FONT.body,
|
||||||
|
fontWeight: 500,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{icon.slice(0, 2)}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Canvas */}
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
flex: 1,
|
||||||
|
display: "flex",
|
||||||
|
alignItems: "center",
|
||||||
|
justifyContent: "center",
|
||||||
|
position: "relative",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<PhotoPlaceholder width={900} height={600} hue={180} />
|
||||||
|
|
||||||
|
{/* Brush stroke */}
|
||||||
|
{brushProgress > 0 && (
|
||||||
|
<svg
|
||||||
|
style={{ position: "absolute", inset: 0, pointerEvents: "none" }}
|
||||||
|
width="100%"
|
||||||
|
height="100%"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M 300 350 Q 450 280 600 320 T 900 300"
|
||||||
|
fill="none"
|
||||||
|
stroke={COLOR.accent}
|
||||||
|
strokeWidth={4}
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeDasharray={800}
|
||||||
|
strokeDashoffset={800 * (1 - brushProgress)}
|
||||||
|
opacity={0.7}
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Text overlay */}
|
||||||
|
{frame > 130 && (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
position: "absolute",
|
||||||
|
bottom: 80,
|
||||||
|
left: "50%",
|
||||||
|
transform: "translateX(-50%)",
|
||||||
|
fontFamily: FONT.heading,
|
||||||
|
fontWeight: 700,
|
||||||
|
fontSize: 28,
|
||||||
|
color: "white",
|
||||||
|
textShadow: "0 2px 8px rgba(0,0,0,0.5)",
|
||||||
|
opacity: interpolate(frame, [130, 145], [0, 1], {
|
||||||
|
extrapolateLeft: "clamp",
|
||||||
|
extrapolateRight: "clamp",
|
||||||
|
}),
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
SnapOtter
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Layers panel */}
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: 200,
|
||||||
|
backgroundColor: "#1e293b",
|
||||||
|
borderLeft: "1px solid #334155",
|
||||||
|
padding: 12,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
fontFamily: FONT.body,
|
||||||
|
fontSize: 11,
|
||||||
|
color: "#94a3b8",
|
||||||
|
fontWeight: 600,
|
||||||
|
marginBottom: 8,
|
||||||
|
textTransform: "uppercase",
|
||||||
|
letterSpacing: "0.05em",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Layers
|
||||||
|
</div>
|
||||||
|
{["Text Layer", "Brush Stroke", "Background"].map((layer, i) => (
|
||||||
|
<div
|
||||||
|
key={layer}
|
||||||
|
style={{
|
||||||
|
padding: "6px 8px",
|
||||||
|
borderRadius: 4,
|
||||||
|
backgroundColor: i === 0 ? "#334155" : "transparent",
|
||||||
|
fontFamily: FONT.body,
|
||||||
|
fontSize: 12,
|
||||||
|
color: "#e2e8f0",
|
||||||
|
marginBottom: 2,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{layer}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</AppWindow>
|
||||||
|
</div>
|
||||||
|
</AbsoluteFill>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,121 @@
|
|||||||
|
import type React from "react";
|
||||||
|
import { AbsoluteFill, interpolate, spring, useCurrentFrame, useVideoConfig } from "remotion";
|
||||||
|
import { AppWindow } from "@/components/AppWindow";
|
||||||
|
import { COLOR } from "@/lib/colors";
|
||||||
|
import { FONT } from "@/lib/fonts";
|
||||||
|
import { EASE, SPRING } from "@/lib/motion";
|
||||||
|
|
||||||
|
const BLOCKS = [
|
||||||
|
{ name: "Resize", color: COLOR.category.essentials, enterFrame: 40, x: 250 },
|
||||||
|
{ name: "Compress", color: COLOR.category.optimization, enterFrame: 80, x: 580 },
|
||||||
|
{ name: "Watermark", color: COLOR.category.watermark, enterFrame: 120, x: 910 },
|
||||||
|
];
|
||||||
|
|
||||||
|
export const PipelineBuilderScene: React.FC = () => {
|
||||||
|
const frame = useCurrentFrame();
|
||||||
|
const { fps } = useVideoConfig();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<AbsoluteFill
|
||||||
|
style={{ justifyContent: "center", alignItems: "center", backgroundColor: "#f5f5f4" }}
|
||||||
|
>
|
||||||
|
<AppWindow
|
||||||
|
title="Pipeline Builder"
|
||||||
|
width={1600}
|
||||||
|
height={900}
|
||||||
|
topBarColor="#ffffff"
|
||||||
|
bodyColor="#ffffff"
|
||||||
|
>
|
||||||
|
<div style={{ position: "relative", width: "100%", height: "100%" }}>
|
||||||
|
{/* Blocks */}
|
||||||
|
{BLOCKS.map((block) => {
|
||||||
|
const s = spring({ frame: frame - block.enterFrame, fps, config: SPRING.popIn });
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={block.name}
|
||||||
|
style={{
|
||||||
|
position: "absolute",
|
||||||
|
left: block.x,
|
||||||
|
top: 280,
|
||||||
|
width: 160,
|
||||||
|
height: 80,
|
||||||
|
borderRadius: 12,
|
||||||
|
backgroundColor: `${block.color}20`,
|
||||||
|
border: `2px solid ${block.color}`,
|
||||||
|
display: "flex",
|
||||||
|
alignItems: "center",
|
||||||
|
justifyContent: "center",
|
||||||
|
fontFamily: FONT.body,
|
||||||
|
fontWeight: 600,
|
||||||
|
fontSize: 16,
|
||||||
|
color: block.color,
|
||||||
|
opacity: s,
|
||||||
|
transform: `scale(${0.5 + s * 0.5})`,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{block.name}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
|
||||||
|
{/* Connection lines */}
|
||||||
|
{frame > 140 &&
|
||||||
|
[0, 1].map((ci) => {
|
||||||
|
const lineProgress = interpolate(frame, [140 + ci * 20, 170 + ci * 20], [0, 1], {
|
||||||
|
extrapolateLeft: "clamp",
|
||||||
|
extrapolateRight: "clamp",
|
||||||
|
easing: EASE.enter,
|
||||||
|
});
|
||||||
|
const x1 = BLOCKS[ci].x + 160;
|
||||||
|
const x2 = BLOCKS[ci + 1].x;
|
||||||
|
return (
|
||||||
|
<svg
|
||||||
|
key={`line-${ci}`}
|
||||||
|
style={{
|
||||||
|
position: "absolute",
|
||||||
|
left: 0,
|
||||||
|
top: 0,
|
||||||
|
width: "100%",
|
||||||
|
height: "100%",
|
||||||
|
pointerEvents: "none",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<line
|
||||||
|
x1={x1}
|
||||||
|
y1={320}
|
||||||
|
x2={x1 + (x2 - x1) * lineProgress}
|
||||||
|
y2={320}
|
||||||
|
stroke="#a3a3a3"
|
||||||
|
strokeWidth={2}
|
||||||
|
strokeDasharray="6,4"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
|
||||||
|
{/* Running indicator */}
|
||||||
|
{frame > 220 && (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
position: "absolute",
|
||||||
|
bottom: 100,
|
||||||
|
width: "100%",
|
||||||
|
textAlign: "center",
|
||||||
|
fontFamily: FONT.body,
|
||||||
|
fontSize: 14,
|
||||||
|
color: "#22c55e",
|
||||||
|
fontWeight: 500,
|
||||||
|
opacity: interpolate(frame, [220, 235], [0, 1], {
|
||||||
|
extrapolateLeft: "clamp",
|
||||||
|
extrapolateRight: "clamp",
|
||||||
|
}),
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
✓ Pipeline completed -- 5 images processed
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</AppWindow>
|
||||||
|
</AbsoluteFill>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,195 @@
|
|||||||
|
import type React from "react";
|
||||||
|
import { AbsoluteFill, interpolate, spring, useCurrentFrame, useVideoConfig } from "remotion";
|
||||||
|
import { AppWindow } from "@/components/AppWindow";
|
||||||
|
import { PhotoPlaceholder } from "@/components/PhotoPlaceholder";
|
||||||
|
import { ProgressBar } from "@/components/ProgressBar";
|
||||||
|
import { COLOR } from "@/lib/colors";
|
||||||
|
import { FONT } from "@/lib/fonts";
|
||||||
|
import { SPRING } from "@/lib/motion";
|
||||||
|
|
||||||
|
export const SingleToolScene: React.FC = () => {
|
||||||
|
const frame = useCurrentFrame();
|
||||||
|
const { fps } = useVideoConfig();
|
||||||
|
|
||||||
|
const slideIn = spring({ frame, fps, config: SPRING.snappy });
|
||||||
|
const dropFrame = 40;
|
||||||
|
const dropProgress = spring({ frame: frame - dropFrame, fps, config: SPRING.natural });
|
||||||
|
const processFrame = 180;
|
||||||
|
const showResult = frame > processFrame + 60;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<AbsoluteFill
|
||||||
|
style={{ justifyContent: "center", alignItems: "center", backgroundColor: "#f5f5f4" }}
|
||||||
|
>
|
||||||
|
<div style={{ transform: `translateX(${(1 - slideIn) * 300}px)`, opacity: slideIn }}>
|
||||||
|
<AppWindow
|
||||||
|
title="Resize"
|
||||||
|
width={1600}
|
||||||
|
height={900}
|
||||||
|
topBarColor="#ffffff"
|
||||||
|
bodyColor="#ffffff"
|
||||||
|
>
|
||||||
|
<div style={{ display: "flex", height: "100%" }}>
|
||||||
|
{/* Dropzone */}
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
flex: 0.6,
|
||||||
|
padding: 24,
|
||||||
|
display: "flex",
|
||||||
|
alignItems: "center",
|
||||||
|
justifyContent: "center",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{frame < dropFrame ? (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: "100%",
|
||||||
|
height: 400,
|
||||||
|
border: "2px dashed #d4d4d4",
|
||||||
|
borderRadius: 12,
|
||||||
|
display: "flex",
|
||||||
|
alignItems: "center",
|
||||||
|
justifyContent: "center",
|
||||||
|
fontFamily: FONT.body,
|
||||||
|
fontSize: 16,
|
||||||
|
color: "#a3a3a3",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Drop an image here
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
transform: `translateY(${(1 - dropProgress) * -200}px)`,
|
||||||
|
opacity: dropProgress,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<PhotoPlaceholder width={500} height={375} hue={30} />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Settings */}
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
flex: 0.4,
|
||||||
|
padding: 24,
|
||||||
|
backgroundColor: "#fafafa",
|
||||||
|
borderLeft: "1px solid #e5e5e5",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
fontFamily: FONT.heading,
|
||||||
|
fontWeight: 700,
|
||||||
|
fontSize: 18,
|
||||||
|
color: "#0a0a0a",
|
||||||
|
marginBottom: 20,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Settings
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Width field */}
|
||||||
|
<label
|
||||||
|
style={{
|
||||||
|
fontFamily: FONT.body,
|
||||||
|
fontSize: 13,
|
||||||
|
color: "#737373",
|
||||||
|
display: "block",
|
||||||
|
marginBottom: 4,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Width
|
||||||
|
</label>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
height: 36,
|
||||||
|
borderRadius: 6,
|
||||||
|
border: "1px solid #e5e5e5",
|
||||||
|
padding: "0 12px",
|
||||||
|
display: "flex",
|
||||||
|
alignItems: "center",
|
||||||
|
fontFamily: FONT.mono,
|
||||||
|
fontSize: 14,
|
||||||
|
color: "#0a0a0a",
|
||||||
|
marginBottom: 16,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
1920
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Height field */}
|
||||||
|
<label
|
||||||
|
style={{
|
||||||
|
fontFamily: FONT.body,
|
||||||
|
fontSize: 13,
|
||||||
|
color: "#737373",
|
||||||
|
display: "block",
|
||||||
|
marginBottom: 4,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Height
|
||||||
|
</label>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
height: 36,
|
||||||
|
borderRadius: 6,
|
||||||
|
border: "1px solid #e5e5e5",
|
||||||
|
padding: "0 12px",
|
||||||
|
display: "flex",
|
||||||
|
alignItems: "center",
|
||||||
|
fontFamily: FONT.mono,
|
||||||
|
fontSize: 14,
|
||||||
|
color: "#a3a3a3",
|
||||||
|
marginBottom: 16,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
auto
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Process button / results */}
|
||||||
|
{frame >= processFrame && !showResult && (
|
||||||
|
<ProgressBar
|
||||||
|
startFrame={0}
|
||||||
|
duration={60}
|
||||||
|
width={300}
|
||||||
|
color="#3b82f6"
|
||||||
|
style={{ marginTop: 20 }}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{showResult && (
|
||||||
|
<div style={{ marginTop: 20, display: "flex", gap: 16 }}>
|
||||||
|
<div style={{ fontFamily: FONT.body, fontSize: 14, color: "#a3a3a3" }}>
|
||||||
|
2.4 MB
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
fontFamily: FONT.body,
|
||||||
|
fontSize: 14,
|
||||||
|
color: "#22c55e",
|
||||||
|
fontWeight: 600,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
340 KB
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
fontFamily: FONT.heading,
|
||||||
|
fontSize: 14,
|
||||||
|
color: COLOR.accent,
|
||||||
|
fontWeight: 700,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
-86%
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</AppWindow>
|
||||||
|
</div>
|
||||||
|
</AbsoluteFill>
|
||||||
|
);
|
||||||
|
};
|
||||||
Reference in New Issue
Block a user