[V0_FILE]css:file="app/globals.css" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { /* Updated color tokens to match paint swatch viewer design brief */ --background: oklch(1 0 0); /* Pure white background */ --foreground: oklch(0.556 0 0); /* Medium gray for text */ --card: oklch(0.97 0 0); /* Light gray for cards */ --card-foreground: oklch(0.556 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.556 0 0); --primary: oklch(1 0 0); /* White primary */ --primary-foreground: oklch(0.556 0 0); --secondary: oklch(0.97 0 0); /* Light gray secondary */ --secondary-foreground: oklch(0.556 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.646 0.222 285.12); /* Vibrant purple accent */ --accent-foreground: oklch(1 0 0); /* White text on accent */ --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(1 0 0); --border: oklch(0.922 0 0); /* Light border */ --input: oklch(1 0 0); --ring: oklch(0.646 0.222 285.12 / 0.5); /* Purple ring with transparency */ --chart-1: oklch(0.646 0.222 285.12); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0.5rem; /* Reduced radius for cleaner look */ --sidebar: oklch(0.97 0 0); --sidebar-foreground: oklch(0.556 0 0); --sidebar-primary: oklch(1 0 0); --sidebar-primary-foreground: oklch(0.556 0 0); --sidebar-accent: oklch(0.646 0.222 285.12); --sidebar-accent-foreground: oklch(1 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.646 0.222 285.12 / 0.5); } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.145 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.985 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.646 0.222 285.12); --accent-foreground: oklch(1 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.269 0 0); --input: oklch(0.269 0 0); --ring: oklch(0.646 0.222 285.12 / 0.5); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } @theme inline { --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; } } [V0_FILE]png:file="public/logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Sherwin-Williams-Logo-1905-8cHUZBUumcKQb5Zppc290NYNMFSBmM.png" isMerged="true" [V0_FILE]typescriptreact:file="components/color-picker.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" interface ColorOption { name: string color: string } interface ColorPickerProps { colors: ColorOption[] selectedColor: ColorOption onColorSelect: (color: ColorOption) => void } export function ColorPicker({ colors, selectedColor, onColorSelect }: ColorPickerProps) { const [customColor, setCustomColor] = useState("#3b82f6") const handleCustomColorChange = (e: React.ChangeEvent) => { const newColor = e.target.value setCustomColor(newColor) onColorSelect({ name: "Custom Color", color: newColor, }) } return (

{colors.map((colorOption) => ( ))}

Custom

Color

) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useRef } from "react" import { Canvas } from "@react-three/fiber" import { OrbitControls, Environment } from "@react-three/drei" import { MorphingBlob } from "@/components/morphing-blob" import { ColorPicker } from "@/components/color-picker" import { Button } from "@/components/ui/button" import { RotateCcw, Download, X } from "lucide-react" const paintColors = [ { name: "SW 6868 Sf Ivory", color: "#FFFFFF" }, { name: "SW 6938 Synergy", color: "#FFB300" }, { name: "SW 6955 Chinese Blue", color: "#0E4C92" }, { name: "SW 6939 Direct Green", color: "#007A4D" }, { name: "SW 6822 Wisteria", color: "#7E57C2" }, { name: "SW 6871 Positive Red", color: "#C8102E" }, { name: "SW 6883 Raucous Orange", color: "#F15A29" }, { name: "SW 6951 Cote d’Azur", color: "#007BA7" }, { name: "SW 6705 High Strung", color: "#C4D600" }, { name: "SW 6869 Stop", color: "#D22630" }, ] export default function PaintSwatchViewer() { const [selectedColor, setSelectedColor] = useState(paintColors[0]) const [morphSpeed, setMorphSpeed] = useState(1) const [showColorPicker, setShowColorPicker] = useState(false) const canvasRef = useRef(null) const handleReset = () => { setSelectedColor(paintColors[0]) setMorphSpeed(1) } const handleDownload = () => { const canvas = canvasRef.current if (canvas) { const link = document.createElement("a") link.download = `v0-paint-${selectedColor.name.replace(/\s+/g, "-").toLowerCase()}.png` link.href = canvas.toDataURL("image/png") link.click() } } const onColorSelect = (colorOption) => { setSelectedColor(colorOption) } const handleLogoClick = () => { setShowColorPicker(!showColorPicker) } return (

v0 color

Cover the Earth

Color Selection

Animation Speed

setMorphSpeed(Number.parseFloat(e.target.value))} className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer" />

Slow Fast

) } [V0_FILE]typescriptreact:file="components/morphing-blob.tsx" isEdit="true" isQuickEdit="true" "use client" import { useRef } from "react" import { useFrame } from "@react-three/fiber" import { Text, useTexture } from "@react-three/drei" import type { Mesh } from "three" import type * as THREE from "three" interface MorphingBlobProps { color: string morphSpeed: number colorName: string } export function MorphingBlob({ color, morphSpeed, colorName }: MorphingBlobProps) { const meshRef = useRef(null) const geometryRef = useRef(null) const logoTexture = useTexture("/logo.png") useFrame((state) => { if (!meshRef.current || !geometryRef.current) return const time = state.clock.getElapsedTime() * morphSpeed // Get the position attribute from the geometry const positionAttribute = geometryRef.current.attributes.position const positions = positionAttribute.array as Float32Array // Create morphing effect by modifying vertex positions for (let i = 0; i < positions.length; i += 3) { const x = positions[i] const y = positions[i + 1] const z = positions[i + 2] // Calculate original distance from center const distance = Math.sqrt(x * x + y * y + z * z) // Create noise-based morphing const noise1 = Math.sin(time + x * 2) * 0.1 const noise2 = Math.cos(time * 1.5 + y * 2) * 0.1 const noise3 = Math.sin(time * 0.8 + z * 2) * 0.1 const morphFactor = 1 + noise1 + noise2 + noise3 // Apply morphing to positions positions[i] = (x / distance) * morphFactor positions[i + 1] = (y / distance) * morphFactor positions[i + 2] = (z / distance) * morphFactor } // Mark the attribute as needing an update positionAttribute.needsUpdate = true }) return ( {/* Background plane - made larger to ensure full coverage */} {/* Color code text */} {colorName.split(" ")[0] + " " + colorName.split(" ")[1]} {/* Color name text with color accent */} {colorName.split(" ").slice(2).join(" ")} {/* Morphing blob */} ) }

About

Tags

Share

About

Tags

Share

More from tysonskakun

More Templates Like This

About

Tags

Share

About

Tags

Share

More from tysonskakun

More Templates Like This