[V0_FILE]typescriptreact:file="components/FrameComponent.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { Slider } from "@/components/ui/slider" import { useEffect, useRef } 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 onMediaSizeChange: (value: number) => void onBorderThicknessChange: (value: number) => void onBorderSizeChange: (value: number) => void showControls: boolean label: string showFrame: boolean autoplayMode: "all" | "hover" isHovered: boolean } export function FrameComponent({ video, width, height, className = "", corner, edgeHorizontal, edgeVertical, mediaSize, borderThickness, borderSize, onMediaSizeChange, onBorderThicknessChange, onBorderSizeChange, showControls, label, showFrame, autoplayMode, isHovered, }: 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 (

{/* Video with Border */}

{/* Frame Elements (Higher z-index) */} {showFrame && (

{/* Corners */}

{/* Edges */}

)}

{/* Controls */} {showControls && (

{label}

Media Size: {mediaSize.toFixed(2)} onMediaSizeChange(value[0])} />

Border Thickness: {borderThickness}px onBorderThicknessChange(value[0])} />

Border Size: {borderSize}% onBorderSizeChange(value[0])} />

)}

) } [V0_FILE]typescript:file="app/fonts.ts" isEdit="true" isMerged="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" 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" isEdit="true" isMerged="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" isEdit="true" isMerged="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" isMerged="true" "use client" import { useState } from "react" import DynamicFrameLayout from "../components/DynamicFrameLayout" import { ppEditorialNewUltralightItalic, inter } from "./fonts" import Image from "next/image" import Link from "next/link" 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 (

{/* Left Content */}

Brand
Designer
at Luma?

Luma is looking to hire a multi-disciplinary Brand Designer to develop and maintain the brand identity and communicate the story of Luma to the world. Alongside members of the design team using product and research insights, you will help shape and define Luma's brand across product surfaces, social media, merchandise, marketing website, launch campaigns as well as other new channels.

You will use a combination of graphic design, motion design, web design and video production/editing skills across traditional and innovative tools to communicate in visually compelling and impactful ways.

Here are some of our favorite works so far.

Apply

{/* Right Content */}

) } [V0_FILE]css:file="app/custom-slider.css" isMerged="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" isQuickEdit="true" "use client" import { useState } from "react" import { motion } from "framer-motion" import { FrameComponent } from "./FrameComponent" import { Slider } from "@/components/ui/slider" import { Button } from "@/components/ui/button" import { Switch } from "@/components/ui/switch" const GRID_SIZE = 12 const CELL_SIZE = 60 // pixels per grid cell interface Frame { id: number video: string defaultPos: { x: number; y: number; w: number; h: number } corner: string edgeHorizontal: string edgeVertical: string mediaSize: number borderThickness: number borderSize: number autoplayMode: "all" | "hover" isHovered: boolean } const initialFrames: Frame[] = [ { id: 1, video: "https://static.cdn-luma.com/files/981e483f71aa764b/Company%20Thing%20Exported.mp4", defaultPos: { x: 0, y: 0, w: 4, h: 4 }, corner: "https://static.cdn-luma.com/files/bcf576df9c38b05f/1_corner_update.png", edgeHorizontal: "https://static.cdn-luma.com/files/bcf576df9c38b05f/1_vert_update.png", edgeVertical: "https://static.cdn-luma.com/files/bcf576df9c38b05f/1_hori_update.png", mediaSize: 1, borderThickness: 0, borderSize: 80, autoplayMode: "all", isHovered: false, }, { id: 2, video: "https://static.cdn-luma.com/files/58ab7363888153e3/WebGL%20Exported%20(1).mp4", defaultPos: { x: 4, y: 0, w: 4, h: 4 }, corner: "https://static.cdn-luma.com/files/bcf576df9c38b05f/2_corner_update.png", edgeHorizontal: "https://static.cdn-luma.com/files/bcf576df9c38b05f/2_vert_update.png", edgeVertical: "https://static.cdn-luma.com/files/bcf576df9c38b05f/2_hori_update.png", mediaSize: 1, borderThickness: 0, borderSize: 80, autoplayMode: "all", isHovered: false, }, { id: 3, video: "https://static.cdn-luma.com/files/58ab7363888153e3/Jitter%20Exported%20Poster.mp4", defaultPos: { x: 8, y: 0, w: 4, h: 4 }, corner: "https://static.cdn-luma.com/files/3d36d1e0dba2476c/3_Corner_update.png", edgeHorizontal: "https://static.cdn-luma.com/files/3d36d1e0dba2476c/3_hori_update.png", edgeVertical: "https://static.cdn-luma.com/files/3d36d1e0dba2476c/3_Vert_update.png", mediaSize: 1, borderThickness: 0, borderSize: 80, autoplayMode: "all", isHovered: false, }, { id: 4, video: "https://static.cdn-luma.com/files/58ab7363888153e3/Exported%20Web%20Video.mp4", defaultPos: { x: 0, y: 4, w: 4, h: 4 }, corner: "https://static.cdn-luma.com/files/9e67e05f37e52522/4_corner_update.png", edgeHorizontal: "https://static.cdn-luma.com/files/9e67e05f37e52522/4_hori_update.png", edgeVertical: "https://static.cdn-luma.com/files/9e67e05f37e52522/4_vert_update.png", mediaSize: 1, borderThickness: 0, borderSize: 80, autoplayMode: "all", isHovered: false, }, { id: 5, video: "https://static.cdn-luma.com/files/58ab7363888153e3/Logo%20Exported.mp4", defaultPos: { x: 4, y: 4, w: 4, h: 4 }, corner: "https://static.cdn-luma.com/files/9e67e05f37e52522/5_corner_update.png", edgeHorizontal: "https://static.cdn-luma.com/files/9e67e05f37e52522/5_hori_update.png", edgeVertical: "https://static.cdn-luma.com/files/9e67e05f37e52522/5_verti_update.png", mediaSize: 1, borderThickness: 0, borderSize: 80, autoplayMode: "all", isHovered: false, }, { id: 6, video: "https://static.cdn-luma.com/files/58ab7363888153e3/Animation%20Exported%20(4).mp4", defaultPos: { x: 8, y: 4, w: 4, h: 4 }, corner: "https://static.cdn-luma.com/files/1199340587e8da1d/6_corner.png", edgeHorizontal: "https://static.cdn-luma.com/files/1199340587e8da1d/6_corner-1.png", edgeVertical: "https://static.cdn-luma.com/files/1199340587e8da1d/6_vert.png", mediaSize: 1, borderThickness: 0, borderSize: 80, autoplayMode: "all", isHovered: false, }, { id: 7, video: "https://static.cdn-luma.com/files/58ab7363888153e3/Illustration%20Exported%20(1).mp4", defaultPos: { x: 0, y: 8, w: 4, h: 4 }, corner: "https://static.cdn-luma.com/files/b80b5aa00ccc33bd/7_corner.png", edgeHorizontal: "https://static.cdn-luma.com/files/b80b5aa00ccc33bd/7_hori.png", edgeVertical: "https://static.cdn-luma.com/files/b80b5aa00ccc33bd/7_vert.png", mediaSize: 1, borderThickness: 0, borderSize: 80, autoplayMode: "all", isHovered: false, }, { id: 8, video: "https://static.cdn-luma.com/files/58ab7363888153e3/Art%20Direction%20Exported.mp4", defaultPos: { x: 4, y: 8, w: 4, h: 4 }, corner: "https://static.cdn-luma.com/files/981e483f71aa764b/8_corner.png", edgeHorizontal: "https://static.cdn-luma.com/files/981e483f71aa764b/8_hori.png", edgeVertical: "https://static.cdn-luma.com/files/981e483f71aa764b/8_verticle.png", mediaSize: 1, borderThickness: 0, borderSize: 80, autoplayMode: "all", isHovered: false, }, { id: 9, video: "https://static.cdn-luma.com/files/58ab7363888153e3/Product%20Video.mp4", defaultPos: { x: 8, y: 8, w: 4, h: 4 }, corner: "https://static.cdn-luma.com/files/981e483f71aa764b/9_corner.png", edgeHorizontal: "https://static.cdn-luma.com/files/981e483f71aa764b/9_hori.png", edgeVertical: "https://static.cdn-luma.com/files/981e483f71aa764b/9_vert.png", mediaSize: 1, borderThickness: 0, borderSize: 80, autoplayMode: "all", isHovered: false, }, ] export default function DynamicFrameLayout() { const [frames, setFrames] = useState(initialFrames) const [hovered, setHovered] = useState<{ row: number; col: number } | null>(null) const [hoverSize, setHoverSize] = useState(6) const [gapSize, setGapSize] = useState(4) const [showControls, setShowControls] = useState(false) const [cleanInterface, setCleanInterface] = useState(true) const [showFrames, setShowFrames] = useState(false) // Update: showFrames starts as false const [autoplayMode, setAutoplayMode] = useState<"all" | "hover">("all") const getRowSizes = () => { if (hovered === null) { return "4fr 4fr 4fr" } const { row } = hovered const nonHoveredSize = (12 - hoverSize) / 2 return [0, 1, 2].map((r) => (r === row ? `${hoverSize}fr` : `${nonHoveredSize}fr`)).join(" ") } const getColSizes = () => { if (hovered === null) { return "4fr 4fr 4fr" } const { col } = hovered const nonHoveredSize = (12 - hoverSize) / 2 return [0, 1, 2].map((c) => (c === col ? `${hoverSize}fr` : `${nonHoveredSize}fr`)).join(" ") } const getTransformOrigin = (x: number, y: number) => { const vertical = y === 0 ? "top" : y === 4 ? "center" : "bottom" const horizontal = x === 0 ? "left" : x === 4 ? "center" : "right" return `${vertical} ${horizontal}` } const updateFrameProperty = (id: number, property: keyof Frame, value: number) => { setFrames(frames.map((frame) => (frame.id === id ? { ...frame, [property]: value } : frame))) } const toggleControls = () => { setShowControls(!showControls) } const toggleCleanInterface = () => { setCleanInterface(!cleanInterface) if (!cleanInterface) { setShowControls(false) } } const updateCodebase = () => { console.log("Updating codebase with current values:") console.log("Hover Size:", hoverSize) console.log("Gap Size:", gapSize) console.log("Frames:", frames) // Here you would typically make an API call to update the codebase // For now, we'll just log the values } return (

{showFrames ? "Hide Frames" : "Show Frames"}

setAutoplayMode(checked ? "all" : "hover")} /> {autoplayMode === "all" ? "Autoplay All" : "Hover Autoplay"}

{!cleanInterface && (

Dynamic Frame Layout

)} {!cleanInterface && showControls && ( <>

Hover Size: {hoverSize} setHoverSize(value[0])} />

Gap Size: {gapSize}px setGapSize(value[0])} />

)}

{frames.map((frame) => { const row = Math.floor(frame.defaultPos.y / 4) const col = Math.floor(frame.defaultPos.x / 4) const transformOrigin = getTransformOrigin(frame.defaultPos.x, frame.defaultPos.y) return ( setHovered({ row, col })} onMouseLeave={() => setHovered(null)} > updateFrameProperty(frame.id, "mediaSize", value)} onBorderThicknessChange={(value) => updateFrameProperty(frame.id, "borderThickness", value)} onBorderSizeChange={(value) => updateFrameProperty(frame.id, "borderSize", value)} showControls={showControls && !cleanInterface} label={`Frame ${frame.id}`} showFrame={showFrames} autoplayMode={autoplayMode} isHovered={ hovered?.row === Math.floor(frame.defaultPos.y / 4) && hovered?.col === Math.floor(frame.defaultPos.x / 4) } /> ) })}

) }

Brand Designer at Luma?

Dynamic Frame Layout

Brand
Designer
at Luma?

About

Tags

Share

About

Tags

Share

More from oeneco

More Templates Like This

About

Tags

Share

About

Tags

Share

More from oeneco

More Templates Like This