[V0_FILE]typescriptreact:file="components/FrameComponent.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useEffect, useRef } from "react" import type React from "react" interface FrameComponentProps { video: string width: number | string height: number | string className?: string corner: string edgeHorizontal: string edgeVertical: string mediaSize: number borderThickness: number borderSize: number showFrame: boolean autoplayMode: "all" | "hover" isHovered: boolean onResize?: (e: React.MouseEvent, direction: string) => void cornerRadius: number } export function FrameComponent({ video, width, height, className = "", corner, edgeHorizontal, edgeVertical, mediaSize, borderThickness, borderSize, showFrame, autoplayMode, isHovered, onResize, cornerRadius, }: FrameComponentProps) { const videoRef = useRef(null) useEffect(() => { if (autoplayMode === "all") { videoRef.current?.play() } else if (autoplayMode === "hover") { if (isHovered) { videoRef.current?.play() } else { videoRef.current?.pause() } } }, [isHovered, autoplayMode]) return (

{/* Scalable video container with corner radius mask */}

{/* Frame Elements */} {showFrame && (

{/* Corners with resize handlers */}

onResize && onResize(e, "nw")} />

onResize && onResize(e, "ne")} />

onResize && onResize(e, "sw")} />

onResize && onResize(e, "se")} /> {/* Edges with resize handlers */}

onResize && onResize(e, "n")} />

onResize && onResize(e, "s")} />

onResize && onResize(e, "w")} />

onResize && onResize(e, "e")} />

)}

) } [V0_FILE]typescript:file="app/fonts.ts" isMerged="true" isEdit="true" import { Inter } from "next/font/google" import type { NextFontWithVariable } from "next/dist/compiled/@next/font" import type { NextFont } from "next/font" const ppEditorialNewUltralightItalic: NextFontWithVariable & NextFont = { className: "font-pp-editorial", style: { fontFamily: "PPEditorialNew-UltralightItalic", fontWeight: "200", fontStyle: "italic", }, variable: "--font-pp-editorial", } const inter = Inter({ subsets: ["latin"], display: "swap", variable: "--font-inter", }) export { ppEditorialNewUltralightItalic, inter } [V0_FILE]typescript:file="app/local-fonts.ts" isMerged="true" isEdit="true" import localFont from "next/font/local" export const customFont = localFont({ src: [ { path: "../public/fonts/your-font-regular.woff2", weight: "300", style: "normal", }, { path: "../public/fonts/your-font-italic.woff2", weight: "400", style: "italic", }, // Add more variations as needed ], display: "swap", }) [V0_FILE]css:file="app/globals.css" isMerged="true" isEdit="true" @tailwind base; @tailwind components; @tailwind utilities; @font-face { font-family: "PPEditorialNew-UltralightItalic"; src: url("https://raw.githubusercontent.com/oeneco/file-thing/9f9223f211387b3764942fcff87f57523870916d/PPEditorialNew-UltralightItalic.ttf") format("truetype"); font-weight: 200; font-style: italic; font-display: swap; } :root { --foreground-rgb: 255, 255, 255; --background-start-rgb: 0, 0, 0; --background-end-rgb: 0, 0, 0; } @layer base { body { color: rgb(var(--foreground-rgb)); background: rgb(var(--background-start-rgb)); } h1, h2, h3, h4, h5, h6 { font-family: "PPEditorialNew-UltralightItalic", sans-serif; font-weight: 200; font-style: italic; letter-spacing: -0.025em; } p { font-family: var(--font-inter); font-weight: 300; opacity: 0.6; } } [V0_FILE]typescript:file="app/layout.tsx" isMerged="true" isEdit="true" import "./globals.css" import { ppEditorialNewUltralightItalic, inter } from "./fonts" import type React from "react" export const metadata = { title: "Dynamic Frame Layout", description: "A dynamic frame layout with custom fonts", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import DynamicFrameLayout from "../components/DynamicFrameLayout" import { ppEditorialNewUltralightItalic, inter } from "./fonts" export default function Home() { const [headerSize] = useState(1.2) // 120% is the default size const [textSize] = useState(0.8) // 80% is the default size return (

{/* Right Content */}

) } [V0_FILE]css:file="app/custom-slider.css" isMerged="true" isEdit="true" .custom-slider { @apply w-full h-1 bg-white/20; } .custom-slider .custom-slider-thumb { @apply w-0.5 h-4 bg-white/50; } .custom-slider .custom-slider-track { @apply h-full bg-white/50; } [V0_FILE]typescriptreact:file="components/DynamicFrameLayout.tsx" isEdit="true" "use client" import type React from "react" import { useState, useEffect, useRef } from "react" import { FrameComponent } from "./FrameComponent" import Image from "next/image" import { Button } from "@/components/ui/button" import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog" import confetti from "canvas-confetti" const initialFrame = { id: 1, video: "https://static.cdn-luma.com/files/dfd1ef3c85e6e017/Ripple%20Animation.mp4", corner: "https://static.cdn-luma.com/files/dfd1ef3c85e6e017/Corner.png", edgeHorizontal: "https://static.cdn-luma.com/files/dfd1ef3c85e6e017/horizontal.png", edgeVertical: "https://static.cdn-luma.com/files/dfd1ef3c85e6e017/Vertical.png", borderThickness: 0, borderSize: 80, autoplayMode: "all" as const, isHovered: false, } const MIN_SIZE = 250 const MAX_SIZE = 800 const MIN_MEDIA_SCALE = 0.9 const MAX_MEDIA_SCALE = 0.96 const CORNER_RADIUS = 50 const BASE_CORRECT_WIDTH = 500 const BASE_CORRECT_HEIGHT = 980 const CORRECT_RATIO = BASE_CORRECT_WIDTH / BASE_CORRECT_HEIGHT const FINAL_SIZE_SCALE = 0.77 const CORRECT_WIDTH = Math.round(BASE_CORRECT_WIDTH * FINAL_SIZE_SCALE) const CORRECT_HEIGHT = Math.round(BASE_CORRECT_HEIGHT * FINAL_SIZE_SCALE) export default function DynamicFrameLayout() { const [frame, setFrame] = useState(initialFrame) const [size, setSize] = useState({ width: 300, height: 300 }) const [mediaSize, setMediaSize] = useState(MIN_MEDIA_SCALE) const [currentTime, setCurrentTime] = useState("") const [guessDialogOpen, setGuessDialogOpen] = useState(false) const [resultDialogOpen, setResultDialogOpen] = useState(false) const [guessAccuracy, setGuessAccuracy] = useState(0) const [guessedRatio, setGuessedRatio] = useState(0) const frameRef = useRef(null) useEffect(() => { const maxDimension = Math.max(size.width, size.height) const scale = (maxDimension - MIN_SIZE) / (MAX_SIZE - MIN_SIZE) const newMediaSize = MIN_MEDIA_SCALE + (MAX_MEDIA_SCALE - MIN_MEDIA_SCALE) * scale setMediaSize(Math.min(Math.max(newMediaSize, MIN_MEDIA_SCALE), MAX_MEDIA_SCALE)) }, [size]) useEffect(() => { const updateTime = () => { const now = new Date() const hours = now.getHours().toString().padStart(2, "0") const minutes = now.getMinutes().toString().padStart(2, "0") setCurrentTime(`${hours}:${minutes}`) } updateTime() const intervalId = setInterval(updateTime, 60000) return () => clearInterval(intervalId) }, []) const handleResize = (e: React.MouseEvent, direction: string) => { e.preventDefault() const startX = e.clientX const startY = e.clientY const startWidth = size.width const startHeight = size.height const onMouseMove = (moveEvent: MouseEvent) => { const deltaX = moveEvent.clientX - startX const deltaY = moveEvent.clientY - startY let newWidth = startWidth let newHeight = startHeight if (direction.includes("e") || direction.includes("w")) { newWidth = startWidth + (direction.includes("e") ? deltaX : -deltaX) * 2 } if (direction.includes("s") || direction.includes("n")) { newHeight = startHeight + (direction.includes("s") ? deltaY : -deltaY) * 2 } newWidth = Math.max(MIN_SIZE, newWidth) newHeight = Math.max(MIN_SIZE, newHeight) setSize({ width: newWidth, height: newHeight }) } const onMouseUp = () => { document.removeEventListener("mousemove", onMouseMove) document.removeEventListener("mouseup", onMouseUp) } document.addEventListener("mousemove", onMouseMove) document.addEventListener("mouseup", onMouseUp) } const handleGuess = () => { const ratio = size.width / size.height setGuessedRatio(ratio) const accuracy = 100 - Math.abs((ratio - CORRECT_RATIO) / CORRECT_RATIO) * 100 setGuessAccuracy(accuracy) setGuessDialogOpen(false) setResultDialogOpen(true) if (accuracy >= 99) { confetti({ particleCount: 100, spread: 70, origin: { y: 0.6 }, }) } } const getSarcasticComment = (accuracy: number) => { if (accuracy >= 99) return "Wow, pixel-perfect! Did you measure your iPhone with a micrometer, or is this just your idea of a fun Friday night?" if (accuracy >= 95) return "Almost there! Your portfolio must be full of 'pixel-perfect' recreations of other people's work, right?" if (accuracy >= 90) return "Not bad! Maybe you can put this on your resume under 'Extremely Niche Skills'." if (accuracy >= 80) return "Hmm, close-ish. Have you considered a career in 'ballpark estimations' instead of design?" if (accuracy >= 70) return "Well, at least you didn't confuse it with an Android. Small victories, right?" if (accuracy >= 60) return "You know, 'close enough' is great for horseshoes and hand grenades, less so for UI design." if (accuracy >= 50) return "Is this how you handle padding in your CSS too? No wonder your layouts are always 'slightly off'." return "Wow. Just... wow. Maybe stick to designing for flip phones? They're making a comeback, I hear." } const animateToCorrectSize = () => { if (frameRef.current) { frameRef.current.style.transition = "width 1s, height 1s" frameRef.current.style.width = `${CORRECT_WIDTH}px` frameRef.current.style.height = `${CORRECT_HEIGHT}px` setSize({ width: CORRECT_WIDTH, height: CORRECT_HEIGHT }) } } const formatRatio = (ratio: number) => { return ratio.toFixed(5) } return (

Guess the iPhone Aspect Ratio

Drag the frame to match the iPhone's aspect ratio, then click "Guess This"

{currentTime}

) }

About

Tags

Share

More from oeneco

More Templates Like This

About

Tags

Share

About

Tags

Share

More from oeneco

More Templates Like This