9b:I[903690,["/chat-static/_next/static/immutable/chunks/2u5gitmblwzhv.js","/chat-static/_next/static/immutable/chunks/2_5m3u4145ss0.js","/chat-static/_next/static/immutable/chunks/06fhmb9zv6uo6.js","/chat-static/_next/static/immutable/chunks/09xvrt12-2rl0.js","/chat-static/_next/static/immutable/chunks/1xgcq8c4f_8fq.js","/chat-static/_next/static/immutable/chunks/1hvqmnitid4xe.js","/chat-static/_next/static/immutable/chunks/3rr5l9ro89g8d.js","/chat-static/_next/static/immutable/chunks/3hsdob8hgrg37.js","/chat-static/_next/static/immutable/chunks/1pxmbozdcc9y7.js","/chat-static/_next/static/immutable/chunks/38yaqwe2ys7o6.js","/chat-static/_next/static/immutable/chunks/1yui69gkjunmr.js","/chat-static/_next/static/immutable/chunks/3em_xe-n6-qt7.js","/chat-static/_next/static/immutable/chunks/09-0bd882xikd.js","/chat-static/_next/static/immutable/chunks/3u4hk7y5fepx4.js","/chat-static/_next/static/immutable/chunks/3fps7vfyqxiw6.js","/chat-static/_next/static/immutable/chunks/0mvgw83jdcr8_.js","/chat-static/_next/static/immutable/chunks/3z_28wzzktgw2.js","/chat-static/_next/static/immutable/chunks/3_zne-oxp3ex8.js","/chat-static/_next/static/immutable/chunks/363ke95s1ko6o.js","/chat-static/_next/static/immutable/chunks/416tmudpeffkz.js","/chat-static/_next/static/immutable/chunks/2ild4_8nnn7ys.js","/chat-static/_next/static/immutable/chunks/28kbmv3dy8txv.js","/chat-static/_next/static/immutable/chunks/22efgyn_v5u19.js","/chat-static/_next/static/immutable/chunks/0jb6ous0375oa.js","/chat-static/_next/static/immutable/chunks/1wjcpzg3nzemw.js","/chat-static/_next/static/immutable/chunks/1knar4f0vp2xn.js","/chat-static/_next/static/immutable/chunks/22609g7ehklky.js","/chat-static/_next/static/immutable/chunks/23g_9unic-14a.js","/chat-static/_next/static/immutable/chunks/3d94pkoo4if9r.js","/chat-static/_next/static/immutable/chunks/1h2xxp9cr5c5m.js","/chat-static/_next/static/immutable/chunks/0kwy-rkr6sgzi.js","/chat-static/_next/static/immutable/chunks/2irdqvyz3s8-x.js","/chat-static/_next/static/immutable/chunks/2e80bj61ftled.js","/chat-static/_next/static/immutable/chunks/11q-tf8omz4oz.js","/chat-static/_next/static/immutable/chunks/2l9h4spirx5z4.js","/chat-static/_next/static/immutable/chunks/3239rz_4jff-u.js","/chat-static/_next/static/immutable/chunks/3435domgao21b.js","/chat-static/_next/static/immutable/chunks/37xw6m9iyvjhu.js","/chat-static/_next/static/immutable/chunks/3ra8b37ai-3dk.js"],"ExplicitChatIdProvider"] 9c:I[838238,["/chat-static/_next/static/immutable/chunks/2u5gitmblwzhv.js","/chat-static/_next/static/immutable/chunks/2_5m3u4145ss0.js","/chat-static/_next/static/immutable/chunks/06fhmb9zv6uo6.js","/chat-static/_next/static/immutable/chunks/09xvrt12-2rl0.js","/chat-static/_next/static/immutable/chunks/1xgcq8c4f_8fq.js","/chat-static/_next/static/immutable/chunks/1hvqmnitid4xe.js","/chat-static/_next/static/immutable/chunks/3rr5l9ro89g8d.js","/chat-static/_next/static/immutable/chunks/3hsdob8hgrg37.js","/chat-static/_next/static/immutable/chunks/1pxmbozdcc9y7.js","/chat-static/_next/static/immutable/chunks/38yaqwe2ys7o6.js","/chat-static/_next/static/immutable/chunks/1yui69gkjunmr.js","/chat-static/_next/static/immutable/chunks/3em_xe-n6-qt7.js","/chat-static/_next/static/immutable/chunks/09-0bd882xikd.js","/chat-static/_next/static/immutable/chunks/3u4hk7y5fepx4.js","/chat-static/_next/static/immutable/chunks/3fps7vfyqxiw6.js","/chat-static/_next/static/immutable/chunks/0mvgw83jdcr8_.js","/chat-static/_next/static/immutable/chunks/3z_28wzzktgw2.js","/chat-static/_next/static/immutable/chunks/3_zne-oxp3ex8.js","/chat-static/_next/static/immutable/chunks/363ke95s1ko6o.js","/chat-static/_next/static/immutable/chunks/416tmudpeffkz.js","/chat-static/_next/static/immutable/chunks/2ild4_8nnn7ys.js","/chat-static/_next/static/immutable/chunks/28kbmv3dy8txv.js","/chat-static/_next/static/immutable/chunks/22efgyn_v5u19.js","/chat-static/_next/static/immutable/chunks/0jb6ous0375oa.js","/chat-static/_next/static/immutable/chunks/1wjcpzg3nzemw.js","/chat-static/_next/static/immutable/chunks/1knar4f0vp2xn.js","/chat-static/_next/static/immutable/chunks/22609g7ehklky.js","/chat-static/_next/static/immutable/chunks/23g_9unic-14a.js","/chat-static/_next/static/immutable/chunks/3d94pkoo4if9r.js","/chat-static/_next/static/immutable/chunks/1h2xxp9cr5c5m.js","/chat-static/_next/static/immutable/chunks/0kwy-rkr6sgzi.js","/chat-static/_next/static/immutable/chunks/2irdqvyz3s8-x.js","/chat-static/_next/static/immutable/chunks/2e80bj61ftled.js","/chat-static/_next/static/immutable/chunks/11q-tf8omz4oz.js","/chat-static/_next/static/immutable/chunks/2l9h4spirx5z4.js","/chat-static/_next/static/immutable/chunks/3239rz_4jff-u.js","/chat-static/_next/static/immutable/chunks/3435domgao21b.js","/chat-static/_next/static/immutable/chunks/37xw6m9iyvjhu.js","/chat-static/_next/static/immutable/chunks/3ra8b37ai-3dk.js"],"SWRDataProvider"] 9d:T1bba8,[V0_FILE]typescriptreact:file="components/filter-selector.tsx" isMerged="true" "use client" import { Button } from "@/components/ui/button" import { cn } from "@/lib/utils" import type { Filter, FilterType } from "./camera-app" interface FilterSelectorProps { filters: Filter[] selectedFilter: FilterType onFilterChange: (filter: FilterType) => void } export function FilterSelector({ filters, selectedFilter, onFilterChange }: FilterSelectorProps) { return (

{filters.map((filter) => ( ))}

) } [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "geist": "^1.3.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "14.2.25", "next-themes": "^0.4.6", "react": "^19", "react-day-picker": "9.8.0", "react-dom": "^19", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.67", "@fal-ai/serverless-client": "0.15.0", "@fal-ai/client": "1.6.2", "@upstash/redis": "1.35.4" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="components/liquid-button.tsx" isMerged="true" use client ' import type React from "react" import { useState, useCallback } from "react" import { LiquidGlass } from "./liquid-glass" interface LiquidButtonProps { children: React.ReactNode onClick?: () => void variant?: "primary" | "secondary" | "ghost" | "danger" size?: "sm" | "md" | "lg" | "xl" disabled?: boolean loading?: boolean className?: string style?: React.CSSProperties icon?: React.ReactNode iconPosition?: "left" | "right" rippleEffect?: boolean } export function LiquidButton({ children, onClick, variant = "primary", size = "md", disabled = false, loading = false, className = "", style, icon, iconPosition = "left", rippleEffect = true, }: LiquidButtonProps) { const [isPressed, setIsPressed] = useState(false) const getVariantStyles = () => { switch (variant) { case "primary": return "text-white bg-gradient-to-r from-blue-500/20 to-purple-600/20 border-blue-400/30 hover:from-blue-400/30 hover:to-purple-500/30" case "secondary": return "text-gray-100 bg-white/10 border-white/20 hover:bg-white/15" case "ghost": return "text-white bg-transparent border-white/10 hover:bg-white/5" case "danger": return "text-white bg-gradient-to-r from-red-500/20 to-pink-600/20 border-red-400/30 hover:from-red-400/30 hover:to-pink-500/30" default: return "text-white bg-white/10 border-white/20" } } const getSizeStyles = () => { switch (size) { case "sm": return "px-4 py-2 text-sm rounded-xl" case "lg": return "px-8 py-4 text-lg rounded-2xl" case "xl": return "px-10 py-5 text-xl rounded-3xl" default: return "px-6 py-3 text-base rounded-2xl" } } const handleClick = useCallback(() => { if (disabled || loading) return setIsPressed(false) onClick?.() }, [disabled, loading, onClick]) const buttonContent = (

{loading &&

} {icon && iconPosition === "left" && !loading && {icon}} {children} {icon && iconPosition === "right" && !loading && {icon}}

) return ( {buttonContent} ) } [V0_FILE]typescriptreact:file="components/liquid-glass.tsx" isMerged="true" "use client" import type React from "react" import { useState, useRef, useCallback, type ReactNode } from "react" interface LiquidGlassProps { children: ReactNode className?: string style?: React.CSSProperties variant?: "button" | "card" | "panel" | "floating" intensity?: "subtle" | "medium" | "strong" rippleEffect?: boolean flowOnHover?: boolean stretchOnDrag?: boolean onClick?: () => void onDragStart?: () => void onDragEnd?: () => void } export function LiquidGlass({ children, className = "", style, variant = "card", intensity = "medium", rippleEffect = true, stretchOnDrag = true, onClick, onDragStart, onDragEnd, }: LiquidGlassProps) { const [isJiggling, setIsJiggling] = useState(false) const [isDragging, setIsDragging] = useState(false) const [isHovering, setIsHovering] = useState(false) const [isPressed, setIsPressed] = useState(false) const [wobbleOffset, setWobbleOffset] = useState({ x: 0, y: 0 }) const [cursorPos, setCursorPos] = useState({ x: 0, y: 0 }) const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 }) const [ripples, setRipples] = useState>([]) const elementRef = useRef(null) const dragStartPos = useRef({ x: 0, y: 0 }) const rippleCounter = useRef(0) const getVariantClasses = () => { const baseClasses = "liquid-glass relative overflow-hidden" switch (variant) { case "button": return `${baseClasses} px-6 py-3 rounded-2xl cursor-pointer select-none` case "card": return `${baseClasses} p-6 rounded-3xl` case "panel": return `${baseClasses} p-8 rounded-2xl` case "floating": return `${baseClasses} p-4 rounded-full shadow-2xl` default: return baseClasses } } const getIntensityClasses = () => { switch (intensity) { case "subtle": return "backdrop-blur-sm bg-white/5 border-white/10" case "strong": return "backdrop-blur-3xl bg-white/20 border-white/30" default: return "backdrop-blur-xl bg-white/10 border-white/20" } } const createRipple = useCallback( (e: React.MouseEvent) => { if (!rippleEffect || !elementRef.current) return const rect = elementRef.current.getBoundingClientRect() const x = e.clientX - rect.left const y = e.clientY - rect.top const newRipple = { id: rippleCounter.current++, x, y, } setRipples((prev) => [...prev, newRipple]) setTimeout(() => { setRipples((prev) => prev.filter((ripple) => ripple.id !== newRipple.id)) }, 600) }, [rippleEffect], ) const handleMouseDown = useCallback( (e: React.MouseEvent) => { if (stretchOnDrag) { setIsDragging(true) dragStartPos.current = { x: e.clientX, y: e.clientY } onDragStart?.() } else if (variant === "button") { setIsPressed(true) } createRipple(e) }, [stretchOnDrag, onDragStart, createRipple, variant], ) const handleMouseMove = useCallback( (e: React.MouseEvent) => { if (elementRef.current) { const rect = elementRef.current.getBoundingClientRect() setCursorPos({ x: e.clientX - rect.left, y: e.clientY - rect.top, }) } if (!isDragging) return const deltaX = e.clientX - dragStartPos.current.x const deltaY = e.clientY - dragStartPos.current.y setDragOffset({ x: deltaX * 0.1, y: deltaY * 0.1 }) }, [isDragging], ) const handleMouseUp = useCallback(() => { if (isDragging) { setIsDragging(false) const currentOffset = { ...dragOffset } setWobbleOffset(currentOffset) setDragOffset({ x: 0, y: 0 }) onDragEnd?.() setIsJiggling(true) setTimeout(() => { setIsJiggling(false) setWobbleOffset({ x: 0, y: 0 }) }, 1800) } else if (variant === "button" && isPressed) { setIsPressed(false) setWobbleOffset({ x: 0, y: 0 }) setIsJiggling(true) setTimeout(() => setIsJiggling(false), 1800) } }, [isDragging, dragOffset, onDragEnd, variant, isPressed]) const handleMouseEnter = useCallback(() => { setIsHovering(true) }, []) const handleClick = useCallback( (e: React.MouseEvent) => { createRipple(e) onClick?.() }, [onClick, createRipple], ) // Add touch event handlers const handleTouchStart = useCallback( (e: React.TouchEvent) => { const touch = e.touches[0] if (stretchOnDrag) { setIsDragging(true) dragStartPos.current = { x: touch.clientX, y: touch.clientY } onDragStart?.() } else if (variant === "button") { setIsPressed(true) } // Create ripple effect for touch if (rippleEffect && elementRef.current) { const rect = elementRef.current.getBoundingClientRect() const x = touch.clientX - rect.left const y = touch.clientY - rect.top const newRipple = { id: rippleCounter.current++, x, y, } setRipples((prev) => [...prev, newRipple]) setTimeout(() => { setRipples((prev) => prev.filter((ripple) => ripple.id !== newRipple.id)) }, 600) } }, [stretchOnDrag, onDragStart, rippleEffect, variant], ) const handleTouchMove = useCallback( (e: React.TouchEvent) => { const touch = e.touches[0] if (elementRef.current) { const rect = elementRef.current.getBoundingClientRect() setCursorPos({ x: touch.clientX - rect.left, y: touch.clientY - rect.top, }) } if (!isDragging) return // Prevent scrolling when dragging e.preventDefault() const deltaX = touch.clientX - dragStartPos.current.x const deltaY = touch.clientY - dragStartPos.current.y setDragOffset({ x: deltaX * 0.1, y: deltaY * 0.1 }) }, [isDragging], ) const handleTouchEnd = useCallback(() => { if (isDragging) { setIsDragging(false) const currentOffset = { ...dragOffset } setWobbleOffset(currentOffset) setDragOffset({ x: 0, y: 0 }) onDragEnd?.() setIsJiggling(true) setTimeout(() => { setIsJiggling(false) setWobbleOffset({ x: 0, y: 0 }) }, 1800) } else if (variant === "button" && isPressed) { setIsPressed(false) setWobbleOffset({ x: 0, y: 0 }) setIsJiggling(true) setTimeout(() => setIsJiggling(false), 1800) } }, [isDragging, dragOffset, onDragEnd, variant, isPressed]) const transformStyle = isJiggling ? ({ "--wobble-start-x": `${wobbleOffset.x}px`, "--wobble-start-y": `${wobbleOffset.y}px`, } as React.CSSProperties) : { transform: `translate(${dragOffset.x}px, ${dragOffset.y}px) ${isDragging ? "scale(1.02)" : ""}`, transition: isDragging ? "none" : "transform 0.3s cubic-bezier(0.23, 1, 0.32, 1)", } return (

{ setIsHovering(false) setIsPressed(false) handleMouseUp() }} onMouseEnter={handleMouseEnter} onClick={handleClick} onTouchStart={handleTouchStart} onTouchMove={handleTouchMove} onTouchEnd={handleTouchEnd} onTouchCancel={handleTouchEnd} > {isHovering && (

)} {ripples.map((ripple) => (

))}

{children}

) } [V0_FILE]png:file="public/banana-camera-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/9bh9iCupQyr391MSwB2MG-1%201%20%281%29-v6pgKqumr35hD6b5Je32FLuGjMGbmp.png" isMerged="true" [V0_FILE]css:file="app/globals.css" isQuickEdit="true" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { /* Updated theme for camera app with vibrant colors */ --background: oklch(0.08 0.02 240); --foreground: oklch(0.98 0.01 240); --card: oklch(0.12 0.02 240); --card-foreground: oklch(0.95 0.01 240); --popover: oklch(0.12 0.02 240); --popover-foreground: oklch(0.95 0.01 240); --primary: oklch(0.65 0.25 280); --primary-foreground: oklch(0.98 0.01 240); --secondary: oklch(0.18 0.03 240); --secondary-foreground: oklch(0.95 0.01 240); --muted: oklch(0.15 0.02 240); --muted-foreground: oklch(0.65 0.02 240); --accent: oklch(0.55 0.35 320); --accent-foreground: oklch(0.98 0.01 240); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.98 0.01 240); --border: oklch(0.22 0.03 240); --input: oklch(0.18 0.03 240); --ring: oklch(0.65 0.25 280); --chart-1: oklch(0.65 0.25 280); --chart-2: oklch(0.55 0.35 320); --chart-3: oklch(0.45 0.25 200); --chart-4: oklch(0.75 0.15 60); --chart-5: oklch(0.85 0.25 40); --radius: 1rem; --sidebar: oklch(0.12 0.02 240); --sidebar-foreground: oklch(0.95 0.01 240); --sidebar-primary: oklch(0.65 0.25 280); --sidebar-primary-foreground: oklch(0.98 0.01 240); --sidebar-accent: oklch(0.18 0.03 240); --sidebar-accent-foreground: oklch(0.95 0.01 240); --sidebar-border: oklch(0.22 0.03 240); --sidebar-ring: oklch(0.65 0.25 280); } .dark { --background: oklch(0.08 0.02 240); --foreground: oklch(0.98 0.01 240); --card: oklch(0.12 0.02 240); --card-foreground: oklch(0.95 0.01 240); --popover: oklch(0.12 0.02 240); --popover-foreground: oklch(0.95 0.01 240); --primary: oklch(0.65 0.25 280); --primary-foreground: oklch(0.98 0.01 240); --secondary: oklch(0.18 0.03 240); --secondary-foreground: oklch(0.95 0.01 240); --muted: oklch(0.15 0.02 240); --muted-foreground: oklch(0.65 0.02 240); --accent: oklch(0.55 0.35 320); --accent-foreground: oklch(0.98 0.01 240); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.98 0.01 240); --border: oklch(0.22 0.03 240); --input: oklch(0.18 0.03 240); --ring: oklch(0.65 0.25 280); --chart-1: oklch(0.65 0.25 280); --chart-2: oklch(0.55 0.35 320); --chart-3: oklch(0.45 0.25 200); --chart-4: oklch(0.75 0.15 60); --chart-5: oklch(0.85 0.25 40); --sidebar: oklch(0.12 0.02 240); --sidebar-foreground: oklch(0.95 0.01 240); --sidebar-primary: oklch(0.65 0.25 280); --sidebar-primary-foreground: oklch(0.98 0.01 240); --sidebar-accent: oklch(0.18 0.03 240); --sidebar-accent-foreground: oklch(0.95 0.01 240); --sidebar-border: oklch(0.22 0.03 240); --sidebar-ring: oklch(0.65 0.25 280); } @theme inline { --font-sans: var(--font-geist-sans); --font-mono: var(--font-geist-mono); --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } /* Fixed mobile optimizations to not break layout */ html, body { height: 100dvh; width: 100vw; margin: 0; padding: 0; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; } /* Prevent zoom on iOS */ input, textarea, select { font-size: 16px; } /* Smooth scrolling and touch handling */ * { -webkit-overflow-scrolling: touch; scroll-behavior: smooth; } /* Hide scrollbars but keep functionality */ ::-webkit-scrollbar { display: none; } /* iOS safe area support */ @supports (padding: max(0px)) { .safe-top { padding-top: max(1.5rem, env(safe-area-inset-top)); } .safe-bottom { padding-bottom: max(2rem, env(safe-area-inset-bottom)); } } /* Added liquid glass CSS animations and effects */ @keyframes liquidRipple { 0% { transform: translate(-50%, -50%) scale(0); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(20); opacity: 0; } } @keyframes liquidWobble { 0% { transform: translate(var(--wobble-start-x, 0), var(--wobble-start-y, 0)) rotate(0deg); } 10% { transform: translate(calc(var(--wobble-start-x, 0) * 0.9), calc(var(--wobble-start-y, 0) * 0.9)) rotate(-1deg); } 20% { transform: translate(calc(var(--wobble-start-x, 0) * 0.8), calc(var(--wobble-start-y, 0) * 0.8)) rotate(1deg); } 30% { transform: translate(calc(var(--wobble-start-x, 0) * 0.7), calc(var(--wobble-start-y, 0) * 0.7)) rotate(-0.5deg); } 40% { transform: translate(calc(var(--wobble-start-x, 0) * 0.6), calc(var(--wobble-start-y, 0) * 0.6)) rotate(0.5deg); } 50% { transform: translate(calc(var(--wobble-start-x, 0) * 0.5), calc(var(--wobble-start-y, 0) * 0.5)) rotate(-0.25deg); } 60% { transform: translate(calc(var(--wobble-start-x, 0) * 0.4), calc(var(--wobble-start-y, 0) * 0.4)) rotate(0.25deg); } 70% { transform: translate(calc(var(--wobble-start-x, 0) * 0.3), calc(var(--wobble-start-y, 0) * 0.3)) rotate(-0.125deg); } 80% { transform: translate(calc(var(--wobble-start-x, 0) * 0.2), calc(var(--wobble-start-y, 0) * 0.2)) rotate(0.125deg); } 90% { transform: translate(calc(var(--wobble-start-x, 0) * 0.1), calc(var(--wobble-start-y, 0) * 0.1)) rotate(-0.0625deg); } 100% { transform: translate(0, 0) rotate(0deg); } } .liquid-wobble-active { animation: liquidWobble 1.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; } .liquid-pressed { transform: scale(0.98); transition: transform 0.1s ease-out; } .liquid-glass { border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -1px 0 rgba(255, 255, 255, 0.1); } } [V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import { CameraApp } from "@/components/camera-app" export default function Home() { return (

) } [V0_FILE]typescriptreact:file="components/camera-app.tsx" isQuickEdit="true" isMerged="true" "use client" import { useState, useCallback } from "react" import { CameraCapture } from "./camera-capture" import { ProcessedImage } from "./processed-image" import { addWatermark } from "../lib/watermark" export type FilterType = | "none" | "acid" | "vintage" | "cyberpunk" | "underwater" | "medieval" | "apocalypse" | "steampunk" | "tropical" | "winter" | "neon_tokyo" | "wild_west" | "art_deco" | "fairy_tale" | "horror" | "desert_mirage" | "crystal_cave" | "floating_islands" | "time_machine" | "spy" | "gothic" | "90s" | "disco" export interface Filter { id: FilterType name: string description: string prompt: string } const filters: Filter[] = [ { id: "none", name: "Original", description: "No filter", prompt: "", }, { id: "art_deco", name: "Art Deco", description: "1920s glamour", prompt: "Transform people with elegant 1920s fashion: men in sharp three-piece suits with bow ties, suspenders, and fedora hats; women in drop-waist beaded dresses, long pearl necklaces, feathered headbands, and T-bar shoes. Add Art Deco environment: geometric patterns on walls, gold and black color schemes, elegant curved lines, stylized sunburst designs, ornate mirrors, crystal chandeliers, marble columns, decorative metalwork, vintage automobiles, jazz age accessories. Apply sophisticated golden lighting with luxurious atmosphere.", }, { id: "cyberpunk", name: "Cyberpunk", description: "Futuristic", prompt: "Transform people into cyberpunk characters: futuristic clothing with LED strips, leather jackets with neon accents, cybernetic implants, glowing tattoos, colored contact lenses, punk hairstyles with neon highlights, tech accessories, augmented reality visors, metallic jewelry. Add cyberpunk environment: neon signs with Japanese text, holographic displays, futuristic buildings, flying cars, digital billboards, chrome pipes, circuit patterns on walls, glowing cables, rain effects. Apply purple and cyan neon lighting with digital glitches.", }, { id: "wild_west", name: "Wild West", description: "Cowboy frontier", prompt: "Transform people into cowboys and frontier folk: men in cowboy hats, leather chaps, boots with spurs, bandanas, sheriff badges, gun holsters; women in prairie dresses, bonnets, leather boots, fringed jackets. Add wild west environment: desert cacti, tumbleweeds, old wooden saloons, horse-drawn wagons, wanted posters on walls, oil lamps, wooden barrels, desert mountains in background, vultures circling, dust storms, rustic fences. Apply warm desert tones with dramatic sunset lighting.", }, { id: "vintage", name: "Vintage", description: "Retro vibes", prompt: "Transform people with vintage 1950s style: men in high-waisted trousers, suspenders, bow ties, rolled sleeves, pompadour hairstyles; women in circle skirts, petticoats, cardigans, victory rolls, red lipstick, cat-eye glasses. Add vintage environment: classic diners, jukeboxes, vintage cars, checkered floors, neon signs, milkshake bars, drive-in theaters, retro furniture. Apply warm sepia tones with soft vintage lighting.", }, { id: "underwater", name: "Underwater", description: "Ocean depths", prompt: "Transform people into underwater explorers: diving suits, oxygen masks, flippers, underwater gear, coral accessories, seaweed hair decorations, pearl jewelry, nautical clothing. Add underwater environment: colorful coral reefs, tropical fish swimming around, sea anemones, underwater caves, sunlight filtering through water, bubbles floating up, shipwrecks, treasure chests, dolphins, sea turtles. Apply blue-green aquatic lighting with water ripple effects.", }, { id: "medieval", name: "Medieval", description: "Knights & castles", prompt: "Transform people into medieval characters: knights in armor with helmets and shields, princesses in flowing gowns with crowns, peasants in simple tunics, monks in robes, blacksmiths with leather aprons. Add medieval environment: stone castles, wooden bridges, torches on walls, banners with heraldic symbols, cobblestone paths, medieval weapons, horse stables, market stalls, gothic architecture. Apply warm candlelight with dramatic shadows.", }, { id: "neon_tokyo", name: "Neon Tokyo", description: "Japanese nightlife", prompt: "Transform people with Tokyo street fashion: colorful hair, anime-inspired outfits, LED accessories, kawaii elements, street wear, platform shoes, face masks with designs, tech gadgets. Add neon Tokyo environment: Japanese street signs, vending machines, cherry blossoms, paper lanterns, anime billboards, crowded streets, bullet trains, traditional temples mixed with modern buildings, ramen shops, arcade games. Apply vibrant neon pink and blue lighting.", }, { id: "steampunk", name: "Steampunk", description: "Victorian tech", prompt: "Transform people into steampunk characters: brass goggles, leather corsets, top hats with gears, mechanical arm pieces, pocket watches, steam-powered accessories, Victorian clothing with industrial elements, copper jewelry. Add steampunk environment: brass pipes, steam engines, clockwork mechanisms, airships, industrial machinery, copper and bronze metals, vintage laboratories, mechanical contraptions, steam clouds. Apply warm brass lighting with industrial atmosphere.", }, { id: "spy", name: "Spy", description: "Secret agent", prompt: "Transform people into sophisticated secret agents: men in tailored black suits, bow ties, cufflinks, sleek sunglasses, leather gloves, spy watches; women in elegant cocktail dresses, pearl earrings, red lipstick, stylish trench coats, high heels. Add spy environment: casino interiors, luxury hotels, city rooftops at night, vintage sports cars, briefcases, surveillance equipment, martini glasses, poker tables, neon city lights, shadowy alleyways, international landmarks. Apply dramatic film noir lighting with high contrast shadows and mysterious atmosphere.", }, { id: "gothic", name: "Gothic", description: "Dark romance", prompt: "Transform people into gothic characters: men in black Victorian coats, ruffled shirts, dark eyeliner, silver jewelry, leather boots; women in corsets, flowing black dresses, lace gloves, dark makeup, chokers, dramatic eye shadow. Add gothic environment: ancient cathedrals, stone gargoyles, wrought iron gates, candlelit chambers, stained glass windows, fog-covered graveyards, medieval architecture, ravens, thorny roses, ornate mirrors, velvet curtains. Apply moody purple and blue lighting with dramatic shadows and mysterious ambiance.", }, { id: "90s", name: "90s", description: "Retro nostalgia", prompt: "Transform people with authentic 90s fashion: men in baggy jeans, flannel shirts, backwards baseball caps, sneakers, chain wallets; women in crop tops, high-waisted jeans, chokers, platform shoes, butterfly clips, denim jackets. Add 90s environment: arcade games, neon mall aesthetics, boom boxes, cassette tapes, VHS stores, roller rinks, geometric patterns, bright colors, old computers, pagers, CD players, grunge concert posters. Apply vibrant neon lighting with retro color schemes and nostalgic atmosphere.", }, { id: "disco", name: "Disco", description: "70s dance fever", prompt: "Transform people into disco dancers: men in wide-collar shirts, bell-bottom pants, gold chains, afro hairstyles, platform shoes; women in sequined dresses, feathered hair, bold makeup, metallic fabrics, go-go boots, large hoop earrings. Add disco environment: mirror balls, colorful dance floors, neon lights, vinyl records, DJ booths, retro furniture, lava lamps, psychedelic patterns, disco balls reflecting light, dance platforms, vintage microphones. Apply dynamic multicolored lighting with sparkles, reflections, and groovy dance floor atmosphere.", }, ] export function CameraApp() { const [selectedFilterIndex, setSelectedFilterIndex] = useState(0) const [capturedImage, setCapturedImage] = useState(null) const [processedImage, setProcessedImage] = useState(null) const [isProcessing, setIsProcessing] = useState(false) const [capturedWithFrontCamera, setCapturedWithFrontCamera] = useState(false) const selectedFilter = filters[selectedFilterIndex] const handleCapture = useCallback( async (imageDataUrl: string, facingMode: "user" | "environment") => { setCapturedImage(imageDataUrl) setProcessedImage(null) setCapturedWithFrontCamera(facingMode === "user") if (selectedFilter.id === "none") { try { const watermarkedImage = await addWatermark(imageDataUrl, facingMode === "user") setProcessedImage(watermarkedImage) } catch (error) { console.error("[v0] Error adding watermark to original image:", error) setProcessedImage(imageDataUrl) } return } setIsProcessing(true) try { console.log("[v0] Starting image processing with filter:", selectedFilter.id) const response = await fetch("/api/process-image", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ imageUrl: imageDataUrl, filter: selectedFilter.id, }), }) console.log("[v0] API response status:", response.status) if (!response.ok) { const errorText = await response.text() console.log("[v0] API error response:", errorText) throw new Error(`Error processing image: ${response.status} ${errorText}`) } const data = await response.json() console.log("[v0] API response data:", data) if (data.processedImageUrl) { console.log("[v0] Setting processed image URL:", data.processedImageUrl) try { console.log("[v0] Adding watermark to processed image") const watermarkedImage = await addWatermark(data.processedImageUrl, facingMode === "user") console.log("[v0] Watermark applied successfully") setProcessedImage(watermarkedImage) setIsProcessing(false) } catch (watermarkError) { console.error("[v0] Error adding watermark:", watermarkError) setProcessedImage(data.processedImageUrl) setIsProcessing(false) } const img = new Image() img.crossOrigin = "anonymous" img.onload = () => { console.log("[v0] Processed image loaded successfully") } img.onerror = (error) => { console.log("[v0] Error loading processed image:", error) console.log("[v0] Falling back to original image") addWatermark(imageDataUrl, facingMode === "user") .then((watermarkedFallback) => { setProcessedImage(watermarkedFallback) setIsProcessing(false) }) .catch(() => { setProcessedImage(imageDataUrl) setIsProcessing(false) }) } img.src = data.processedImageUrl } else { console.log("[v0] No processed image URL in response, using original with watermark") try { const watermarkedImage = await addWatermark(imageDataUrl, facingMode === "user") setProcessedImage(watermarkedImage) } catch (error) { console.error("[v0] Error adding watermark to fallback:", error) setProcessedImage(imageDataUrl) } setIsProcessing(false) } } catch (error) { console.error("[v0] Error processing image:", error) try { const watermarkedImage = await addWatermark(imageDataUrl, facingMode === "user") setProcessedImage(watermarkedImage) } catch (watermarkError) { console.error("[v0] Error adding watermark to error fallback:", watermarkError) setProcessedImage(imageDataUrl) } setIsProcessing(false) } }, [selectedFilter], ) const handleReset = () => { setCapturedImage(null) setProcessedImage(null) setIsProcessing(false) setCapturedWithFrontCamera(false) } const handleDownload = () => { if (!processedImage) return try { if (processedImage.startsWith("data:")) { const byteCharacters = atob(processedImage.split(",")[1]) const byteNumbers = new Array(byteCharacters.length) for (let i = 0; i < byteCharacters.length; i++) { byteNumbers[i] = byteCharacters.charCodeAt(i) } const byteArray = new Uint8Array(byteNumbers) const blob = new Blob([byteArray], { type: "image/jpeg" }) const url = URL.createObjectURL(blob) const link = document.createElement("a") link.href = url link.download = `filtered-photo-${selectedFilter.id}-${Date.now()}.jpg` link.style.display = "none" document.body.appendChild(link) link.click() document.body.removeChild(link) setTimeout(() => URL.revokeObjectURL(url), 100) } else { const link = document.createElement("a") link.href = processedImage link.download = `filtered-photo-${selectedFilter.id}-${Date.now()}.jpg` link.style.display = "none" link.setAttribute("target", "_self") document.body.appendChild(link) link.click() document.body.removeChild(link) } } catch (error) { console.error("Download failed:", error) window.location.href = processedImage } } const handleFilterSelect = (index: number) => { setSelectedFilterIndex(index) } return (

{!capturedImage ? ( ) : ( )}

) } [V0_FILE]typescript:file="components/camera-capture.tsx" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState, useRef, useCallback, useEffect } from "react" import { LiquidGlass } from "./liquid-glass" import type { Filter } from "./camera-app" const CameraIcon = ({ className }: { className?: string }) => ( ) const SwitchCameraIcon = ({ className }: { className?: string }) => ( ) const UploadIcon = ({ className }: { className?: string }) => ( ) interface CameraCaptureProps { onCapture: (imageDataUrl: string, facingMode: "user" | "environment") => void selectedFilter: Filter onFilterSelect: (index: number) => void filterIndex: number filters: Filter[] } export function CameraCapture({ onCapture, selectedFilter, onFilterSelect, filterIndex, filters }: CameraCaptureProps) { const videoRef = useRef(null) const canvasRef = useRef(null) const containerRef = useRef(null) const fileInputRef = useRef(null) const [stream, setStream] = useState(null) const [isLoading, setIsLoading] = useState(true) const [error, setError] = useState(null) const [facingMode, setFacingMode] = useState<"user" | "environment">("user") const [isDesktop, setIsDesktop] = useState(false) const [showSwipeHint, setShowSwipeHint] = useState(() => { if (typeof window !== "undefined") { try { const hasEverTakenPhoto = localStorage.getItem("banana-camera-photo-taken") const hasEverTakenPhotoAlt = localStorage.getItem("banana_camera_photo_taken") // Alternative key const sessionFlag = sessionStorage.getItem("banana-camera-photo-taken") console.log("[v0] Initializing showSwipeHint - localStorage value:", hasEverTakenPhoto) console.log("[v0] Initializing showSwipeHint - alternative key:", hasEverTakenPhotoAlt) console.log("[v0] Initializing showSwipeHint - sessionStorage value:", sessionFlag) console.log("[v0] Initializing showSwipeHint - all localStorage keys:", Object.keys(localStorage)) // Check if any of the storage methods indicate a photo was taken const photoWasTaken = hasEverTakenPhoto === "true" || hasEverTakenPhotoAlt === "true" || sessionFlag === "true" console.log("[v0] Photo was taken before:", photoWasTaken) return !photoWasTaken } catch (error) { console.log("[v0] Error reading localStorage:", error) return true // Default to showing hint if there's an error } } return true }) const [touchStart, setTouchStart] = useState<{ x: number; y: number } | null>(null) const lastScrollTime = useRef(0) const [isTransitioning, setIsTransitioning] = useState(false) const transitionTimeoutRef = useRef() const [momentum, setMomentum] = useState(0) const [velocity, setVelocity] = useState(0) const momentumRef = useRef(0) const velocityRef = useRef(0) const lastTouchTime = useRef(0) const animationFrameRef = useRef() const touchHistory = useRef>([]) const [wheelRotation, setWheelRotation] = useState(0) const wheelRotationRef = useRef(0) const targetRotationRef = useRef(0) const isWheelAnimatingRef = useRef(false) const autoCenterTimeoutRef = useRef() const startCamera = useCallback( async (facing: "user" | "environment" = facingMode) => { try { setIsLoading(true) setError(null) if (stream) { stream.getTracks().forEach((track) => track.stop()) } const newStream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: facing, width: { ideal: 1920 }, height: { ideal: 1080 }, }, }) if (videoRef.current) { videoRef.current.srcObject = newStream } setStream(newStream) setFacingMode(facing) } catch (err) { console.error("Error accessing camera:", err) setError("Could not access camera. Please check permissions.") } finally { setIsLoading(false) } }, [stream, facingMode], ) const compressImage = useCallback( (imageDataUrl: string, maxWidth = 1024, maxHeight = 1024, quality = 0.8): Promise => { return new Promise((resolve) => { const img = new Image() img.onload = () => { const canvas = document.createElement("canvas") const ctx = canvas.getContext("2d") if (!ctx) { resolve(imageDataUrl) return } let { width, height } = img if (width > height) { if (width > maxWidth) { height = (height * maxWidth) / width width = maxWidth } } else { if (height > maxHeight) { width = (width * maxHeight) / height height = maxHeight } } canvas.width = width canvas.height = height ctx.drawImage(img, 0, 0, width, height) const compressedDataUrl = canvas.toDataURL("image/jpeg", quality) resolve(compressedDataUrl) } img.src = imageDataUrl }) }, [], ) const capturePhoto = useCallback(async () => { if (!videoRef.current || !canvasRef.current) return const video = videoRef.current const canvas = canvasRef.current const context = canvas.getContext("2d") if (!context) return canvas.width = video.videoWidth canvas.height = video.videoHeight if (facingMode === "user") { context.scale(-1, 1) context.translate(-canvas.width, 0) } context.drawImage(video, 0, 0, canvas.width, canvas.height) const imageDataUrl = canvas.toDataURL("image/jpeg", 0.9) const compressedImageUrl = await compressImage(imageDataUrl) console.log("[v0] Photo captured - hiding hint and saving to localStorage") setShowSwipeHint(false) if (typeof window !== "undefined") { try { localStorage.setItem("banana-camera-photo-taken", "true") localStorage.setItem("banana_camera_photo_taken", "true") // Alternative key sessionStorage.setItem("banana-camera-photo-taken", "true") console.log("[v0] localStorage set - banana-camera-photo-taken: true") console.log("[v0] All storage locations updated") } catch (error) { console.log("[v0] Error saving to localStorage:", error) } } onCapture(compressedImageUrl, facingMode) }, [onCapture, compressImage, facingMode]) const switchCamera = useCallback(() => { const newFacing = facingMode === "user" ? "environment" : "user" startCamera(newFacing) }, [facingMode, startCamera]) const handleImageUpload = useCallback( async (event: React.ChangeEvent) => { const file = event.target.files?.[0] if (!file) return const reader = new FileReader() reader.onload = async (e) => { const imageDataUrl = e.target?.result as string if (imageDataUrl) { const compressedImageUrl = await compressImage(imageDataUrl) console.log("[v0] Image uploaded - hiding hint and saving to localStorage") setShowSwipeHint(false) if (typeof window !== "undefined") { try { localStorage.setItem("banana-camera-photo-taken", "true") localStorage.setItem("banana_camera_photo_taken", "true") // Alternative key sessionStorage.setItem("banana-camera-photo-taken", "true") console.log("[v0] localStorage set - banana-camera-photo-taken: true") console.log("[v0] All storage locations updated") } catch (error) { console.log("[v0] Error saving to localStorage:", error) } } onCapture(compressedImageUrl, "environment") } } reader.readAsDataURL(file) }, [onCapture, compressImage], ) const triggerImageUpload = useCallback(() => { fileInputRef.current?.click() }, []) const handleTouchStart = useCallback((e: React.TouchEvent) => { const touch = e.touches[0] setTouchStart({ x: touch.clientX, y: touch.clientY }) if (animationFrameRef.current) { cancelAnimationFrame(animationFrameRef.current) } if (autoCenterTimeoutRef.current) { clearTimeout(autoCenterTimeoutRef.current) } if (transitionTimeoutRef.current) { clearTimeout(transitionTimeoutRef.current) } // Reset all animation states to prevent erratic movement wheelRotationRef.current = 0 targetRotationRef.current = 0 velocityRef.current = 0 momentumRef.current = 0 isWheelAnimatingRef.current = false setWheelRotation(0) setMomentum(0) setVelocity(0) setIsTransitioning(false) lastTouchTime.current = Date.now() touchHistory.current = [{ x: touch.clientX, time: Date.now() }] }, []) const autoCenter = useCallback(() => { console.log("[v0] Auto-centering from rotation:", wheelRotationRef.current) const startRotation = wheelRotationRef.current const startTime = Date.now() const duration = 200 const animateToCenter = () => { const elapsed = Date.now() - startTime const progress = Math.min(elapsed / duration, 1) const easeOut = 1 - Math.pow(1 - progress, 2) // Smooth easing wheelRotationRef.current = startRotation * (1 - easeOut) setWheelRotation(wheelRotationRef.current) setMomentum(wheelRotationRef.current) if (progress < 1) { requestAnimationFrame(animateToCenter) } else { wheelRotationRef.current = 0 targetRotationRef.current = 0 setWheelRotation(0) setMomentum(0) console.log("[v0] Auto-center complete") } } requestAnimationFrame(animateToCenter) }, []) const animateMomentum = useCallback(() => { const friction = 0.96 // Increased from 0.92 for more control const snapThreshold = 0.1 velocityRef.current *= friction wheelRotationRef.current += velocityRef.current * 0.4 // Reduced from 0.7 for slower movement const rotationThreshold = 20 // Reduced from 30 for quicker response if (Math.abs(wheelRotationRef.current) > rotationThreshold) { const direction = wheelRotationRef.current > 0 ? 1 : -1 let newIndex if (direction > 0) { newIndex = filterIndex < filters.length - 1 ? filterIndex + 1 : 0 } else { newIndex = filterIndex > 0 ? filterIndex - 1 : filters.length - 1 } console.log( "[v0] Momentum filter change from", filterIndex, "to", newIndex, "rotation:", wheelRotationRef.current, ) onFilterSelect(newIndex) setShowSwipeHint(false) wheelRotationRef.current = 0 targetRotationRef.current = 0 velocityRef.current = 0 setWheelRotation(0) setMomentum(0) setVelocity(0) if (animationFrameRef.current) { cancelAnimationFrame(animationFrameRef.current) } if (autoCenterTimeoutRef.current) { clearTimeout(autoCenterTimeoutRef.current) } return } if (Math.abs(velocityRef.current) > 0.05 || Math.abs(wheelRotationRef.current) > 0.3) { isWheelAnimatingRef.current = true animationFrameRef.current = requestAnimationFrame(animateMomentum) } else { isWheelAnimatingRef.current = false console.log("[v0] Momentum stopped - starting auto-center") if (autoCenterTimeoutRef.current) { clearTimeout(autoCenterTimeoutRef.current) } autoCenterTimeoutRef.current = setTimeout(autoCenter, 50) } setWheelRotation(wheelRotationRef.current) setMomentum(wheelRotationRef.current) setVelocity(velocityRef.current) }, [filterIndex, filters.length, onFilterSelect, autoCenter]) const handleTouchMove = useCallback( (e: React.TouchEvent) => { if (!touchStart) return const touch = e.touches[0] const currentTime = Date.now() const deltaX = touch.clientX - touchStart.x wheelRotationRef.current = deltaX * 0.3 // Reduced from 0.5 for slower movement setWheelRotation(wheelRotationRef.current) setMomentum(wheelRotationRef.current) touchHistory.current.push({ x: touch.clientX, time: currentTime }) touchHistory.current = touchHistory.current.filter((t) => currentTime - t.time < 100) const rotationThreshold = 18 // Reduced from 25 for quicker response if (Math.abs(wheelRotationRef.current) > rotationThreshold) { const direction = wheelRotationRef.current > 0 ? -1 : 1 // Inverted for natural feel let newIndex if (direction > 0) { newIndex = filterIndex < filters.length - 1 ? filterIndex + 1 : 0 } else { newIndex = filterIndex > 0 ? filterIndex - 1 : filters.length - 1 } console.log( "[v0] Touch drag filter change from", filterIndex, "to", newIndex, "rotation:", wheelRotationRef.current, ) onFilterSelect(newIndex) setShowSwipeHint(false) wheelRotationRef.current = 0 targetRotationRef.current = 0 setWheelRotation(0) setMomentum(0) setTouchStart({ x: touch.clientX, y: touch.clientY }) // Reset touch start for continuous dragging } }, [touchStart, filterIndex, filters.length, onFilterSelect], ) const handleTouchEnd = useCallback( (e: React.TouchEvent) => { if (!touchStart) return const touch = e.changedTouches[0] const deltaX = touch.clientX - touchStart.x const deltaY = touch.clientY - touchStart.y const currentTime = Date.now() const recentTouches = touchHistory.current.filter((t) => currentTime - t.time < 100) if (recentTouches.length >= 2) { const firstTouch = recentTouches[0] const lastTouch = recentTouches[recentTouches.length - 1] const timeDiff = lastTouch.time - firstTouch.time if (timeDiff > 0) { velocityRef.current = ((lastTouch.x - firstTouch.x) / timeDiff) * 5 // Reduced from 8 } } const swipeThreshold = 20 // Reduced from 30 for quicker response if (Math.abs(deltaX) > Math.abs(deltaY) && Math.abs(deltaX) > swipeThreshold) { let newIndex if (deltaX > 0) { newIndex = filterIndex > 0 ? filterIndex - 1 : filters.length - 1 } else { newIndex = filterIndex < filters.length - 1 ? filterIndex + 1 : 0 } console.log("[v0] Touch swipe filter change from", filterIndex, "to", newIndex, "deltaX:", deltaX) onFilterSelect(newIndex) setShowSwipeHint(false) wheelRotationRef.current = 0 targetRotationRef.current = 0 velocityRef.current = 0 setWheelRotation(0) setMomentum(0) setVelocity(0) } else if (Math.abs(deltaX) > 5 && Math.abs(velocityRef.current) > 0.3) { animateMomentum() } else { console.log("[v0] Touch end - starting auto-center") if (autoCenterTimeoutRef.current) { clearTimeout(autoCenterTimeoutRef.current) } autoCenterTimeoutRef.current = setTimeout(autoCenter, 100) } setTouchStart(null) touchHistory.current = [] }, [touchStart, filterIndex, filters.length, onFilterSelect, animateMomentum, autoCenter], ) const handleWheel = useCallback( (e: React.WheelEvent) => { e.preventDefault() e.stopPropagation() if (isTransitioning) return const now = Date.now() if (now - lastScrollTime.current < 16) { return } lastScrollTime.current = now const deltaY = Math.abs(e.deltaY) const deltaX = Math.abs(e.deltaX) if (deltaY < 1 && deltaX < 1) return const scrollIntensity = Math.min(Math.max(deltaY + deltaX, 5), 50) const direction = (deltaX > deltaY ? e.deltaX : e.deltaY) > 0 ? 1 : -1 wheelRotationRef.current += direction * scrollIntensity * 0.15 // Reduced from 0.25 velocityRef.current = direction * scrollIntensity * 0.05 // Reduced from 0.08 console.log("[v0] Wheel event, rotation:", wheelRotationRef.current, "direction:", direction) if (Math.abs(wheelRotationRef.current) > 25) { // Reduced from 35 let newIndex if (wheelRotationRef.current > 0) { newIndex = filterIndex < filters.length - 1 ? filterIndex + 1 : 0 } else { newIndex = filterIndex > 0 ? filterIndex - 1 : filters.length - 1 } console.log("[v0] Wheel filter change from", filterIndex, "to", newIndex) onFilterSelect(newIndex) setShowSwipeHint(false) wheelRotationRef.current = 0 targetRotationRef.current = 0 velocityRef.current = 0 setWheelRotation(0) setMomentum(0) setVelocity(0) if (animationFrameRef.current) { cancelAnimationFrame(animationFrameRef.current) } if (autoCenterTimeoutRef.current) { clearTimeout(autoCenterTimeoutRef.current) } return } if (autoCenterTimeoutRef.current) { clearTimeout(autoCenterTimeoutRef.current) } animateMomentum() }, [filterIndex, filters.length, onFilterSelect, isTransitioning, animateMomentum], ) const handleFilterChange = useCallback( (newIndex: number) => { if (newIndex !== filterIndex && !isTransitioning) { setIsTransitioning(true) onFilterSelect(newIndex) setShowSwipeHint(false) wheelRotationRef.current = 0 targetRotationRef.current = 0 velocityRef.current = 0 setWheelRotation(0) setMomentum(0) setVelocity(0) if (transitionTimeoutRef.current) { clearTimeout(transitionTimeoutRef.current) } transitionTimeoutRef.current = setTimeout(() => { setIsTransitioning(false) }, 500) } }, [filterIndex, onFilterSelect, isTransitioning], ) const handleKeyDown = useCallback( (e: React.KeyboardEvent) => { if (isTransitioning) return if (e.key === "ArrowLeft") { e.preventDefault() const newIndex = filterIndex > 0 ? filterIndex - 1 : filters.length - 1 setIsTransitioning(true) onFilterSelect(newIndex) setShowSwipeHint(false) wheelRotationRef.current = 0 targetRotationRef.current = 0 velocityRef.current = 0 setWheelRotation(0) setMomentum(0) setVelocity(0) if (transitionTimeoutRef.current) { clearTimeout(transitionTimeoutRef.current) } transitionTimeoutRef.current = setTimeout(() => { setIsTransitioning(false) }, 600) } else if (e.key === "ArrowRight") { e.preventDefault() const newIndex = filterIndex < filters.length - 1 ? filterIndex + 1 : 0 setIsTransitioning(true) onFilterSelect(newIndex) setShowSwipeHint(false) wheelRotationRef.current = 0 targetRotationRef.current = 0 velocityRef.current = 0 setWheelRotation(0) setMomentum(0) setVelocity(0) if (transitionTimeoutRef.current) { clearTimeout(transitionTimeoutRef.current) } transitionTimeoutRef.current = setTimeout(() => { setIsTransitioning(false) }, 600) } }, [filterIndex, filters.length, onFilterSelect, isTransitioning], ) useEffect(() => { const checkIsDesktop = () => { setIsDesktop(window.innerWidth >= 768 && !("ontouchstart" in window)) } checkIsDesktop() window.addEventListener("resize", checkIsDesktop) return () => window.removeEventListener("resize", checkIsDesktop) }, []) useEffect(() => { startCamera() return () => { if (stream) { stream.getTracks().forEach((track) => track.stop()) } if (transitionTimeoutRef.current) { clearTimeout(transitionTimeoutRef.current) } if (animationFrameRef.current) { cancelAnimationFrame(animationFrameRef.current) } if (autoCenterTimeoutRef.current) { clearTimeout(autoCenterTimeoutRef.current) } } }, []) useEffect(() => { console.log("[v0] Camera state - isLoading:", isLoading, "error:", error) }, [isLoading, error]) useEffect(() => { console.log("[v0] showSwipeHint state changed to:", showSwipeHint) }, [showSwipeHint]) if (error) { return (

Camera Error

{error}

startCamera()} className="text-white"> Retry

) } return (

{isLoading && (

Starting camera...

)}

About

Tags

Share

About

Tags

Share

More from estebansuarez

More Templates Like This