[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" "use client" import { useState } from "react" import Scene from "@/3d-scene" import { HexColorPicker } from "react-colorful" import { Slider } from "@/components/ui/slider" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Switch } from "@/components/ui/switch" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" export default function Home() { const [text, setText] = useState("PLAY") const [textColor, setTextColor] = useState("#ffffff") const [backgroundColor, setBackgroundColor] = useState("#000000") const [animationSpeed, setAnimationSpeed] = useState(1) const [bloomIntensity, setBloomIntensity] = useState(1.5) const [showShapes, setShowShapes] = useState(true) const [showColorPicker, setShowColorPicker] = useState(false) const [activeColorPicker, setActiveColorPicker] = useState(null) const handleColorPickerToggle = (type) => { if (activeColorPicker === type) { setShowColorPicker(false) setActiveColorPicker(null) } else { setShowColorPicker(true) setActiveColorPicker(type) } } return (

PlayStation 3D Sign

Custom Text setText(e.target.value)} className="bg-white/10 border-white/20 text-white" placeholder="Enter text" />

Text Color

handleColorPickerToggle("text")} />

{showColorPicker && activeColorPicker === "text" && (

)}

Background Color

handleColorPickerToggle("background")} />

{showColorPicker && activeColorPicker === "background" && (

)}

Animation Speed: {animationSpeed.toFixed(1)}x setAnimationSpeed(value[0])} />

Glow Intensity: {bloomIntensity.toFixed(1)} setBloomIntensity(value[0])} />

Show PlayStation Shapes

) } [V0_FILE]typescriptreact:file="tailwind.config.js" isMerged="true" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: 0 }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: 0 }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]css:file="app/globals.css" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 222.2 47.4% 11.2%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 222.2 84% 4.9%; --radius: 0.5rem; } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: 210 40% 98%; --primary-foreground: 222.2 47.4% 11.2%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 212.7 26.8% 83.9%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } /* Custom scrollbar for the controls panel */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.2); } ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.3); } [V0_FILE]json:file="public/fonts/helvetiker_bold.typeface.json" isMerged="true" { "glyphs": { "0": { "ha": 556, "x_min": 42, "x_max": 514, "o": "m 514 347 q 0 347 q 0 694 q 42 694 q 42 389 q 472 389 q 472 694 q 514 694 q 514 347 z m 472 347 q 472 42 q 42 42 q 42 347 q 472 347 z " }, "1": { "ha": 556, "x_min": 133, "x_max": 423, "o": "m 423 0 q 381 0 q 381 652 q 133 652 q 133 694 q 423 694 q 423 0 z " }, "2": { "ha": 556, "x_min": 56, "x_max": 500, "o": "m 500 0 q 56 0 q 56 42 q 458 42 q 458 153 q 56 347 q 56 694 q 500 694 q 500 652 q 98 652 q 98 368 q 500 174 q 500 0 z " }, "3": { "ha": 556, "x_min": 56, "x_max": 500, "o": "m 500 174 q 500 0 q 56 0 q 56 42 q 458 42 q 458 174 q 278 174 q 278 216 q 458 216 q 458 347 q 56 347 q 56 389 q 458 389 q 458 521 q 56 521 q 56 563 q 458 563 q 458 694 q 56 694 q 56 736 q 500 736 q 500 563 q 320 563 q 320 521 q 500 521 q 500 347 q 320 347 q 320 216 q 500 216 q 500 174 z " }, "4": { "ha": 556, "x_min": 28, "x_max": 528, "o": "m 528 216 q 486 216 q 486 0 q 444 0 q 444 216 q 28 216 q 28 258 q 444 694 q 486 694 q 486 258 q 528 258 q 528 216 z m 444 258 q 444 652 q 70 258 q 444 258 z " }, "5": { "ha": 556, "x_min": 56, "x_max": 500, "o": "m 500 347 q 500 0 q 56 0 q 56 42 q 458 42 q 458 347 q 56 347 q 56 694 q 500 694 q 500 652 q 98 652 q 98 389 q 500 389 q 500 347 z " }, "6": { "ha": 556, "x_min": 42, "x_max": 514, "o": "m 514 347 q 514 0 q 42 0 q 42 694 q 514 694 q 514 652 q 84 652 q 84 389 q 514 389 q 514 347 z m 472 347 q 84 347 q 84 42 q 472 42 q 472 347 z " }, "7": { "ha": 556, "x_min": 56, "x_max": 500, "o": "m 500 652 q 153 0 q 111 0 q 458 652 q 56 652 q 56 694 q 500 694 q 500 652 z " }, "8": { "ha": 556, "x_min": 42, "x_max": 514, "o": "m 514 521 q 514 347 q 278 347 q 278 389 q 472 389 q 472 521 q 84 521 q 84 694 q 514 694 q 514 521 z m 472 347 q 472 174 q 84 174 q 84 347 q 472 347 z m 514 174 q 514 0 q 42 0 q 42 174 q 514 174 z m 472 521 q 472 652 q 84 652 q 84 521 q 472 521 z " }, "9": { "ha": 556, "x_min": 42, "x_max": 514, "o": "m 514 694 q 514 0 q 42 0 q 42 42 q 472 42 q 472 347 q 42 347 q 42 694 q 514 694 z m 472 389 q 472 652 q 84 652 q 84 389 q 472 389 z " }, "A": { "ha": 667, "x_min": 14, "x_max": 654, "o": "m 654 0 q 602 0 q 560 111 q 107 111 q 65 0 q 14 0 q 292 694 q 375 694 q 654 0 z m 537 167 q 334 639 q 131 167 q 537 167 z " }, "B": { "ha": 667, "x_min": 81, "x_max": 611, "o": "m 611 174 q 611 0 q 81 0 q 81 694 q 611 694 q 611 521 q 472 521 q 472 389 q 611 389 q 611 174 z m 569 174 q 569 347 q 123 347 q 123 42 q 569 42 q 569 174 z m 569 521 q 569 652 q 123 652 q 123 389 q 569 389 q 569 521 z " }, "C": { "ha": 722, "x_min": 49, "x_max": 674, "o": "m 674 219 q 632 219 q 632 42 q 91 42 q 91 652 q 632 652 q 632 475 q 674 475 q 674 694 q 49 694 q 49 0 q 674 0 q 674 219 z " }, "D": { "ha": 722, "x_min": 81, "x_max": 674, "o": "m 674 347 q 674 0 q 81 0 q 81 694 q 674 694 q 674 347 z m 632 347 q 632 652 q 123 652 q 123 42 q 632 42 q 632 347 z " }, "E": { "ha": 611, "x_min": 81, "x_max": 569, "o": "m 569 0 q 81 0 q 81 694 q 569 694 q 569 652 q 123 652 q 123 389 q 569 389 q 569 347 q 123 347 q 123 42 q 569 42 q 569 0 z " }, "F": { "ha": 611, "x_min": 81, "x_max": 569, "o": "m 569 652 q 123 652 q 123 389 q 569 389 q 569 347 q 123 347 q 123 0 q 81 0 q 81 694 q 569 694 q 569 652 z " }, "G": { "ha": 722, "x_min": 49, "x_max": 674, "o": "m 674 0 q 49 0 q 49 694 q 674 694 q 674 475 q 632 475 q 632 652 q 91 652 q 91 42 q 632 42 q 632 347 q 368 347 q 368 389 q 674 389 q 674 0 z " }, "H": { "ha": 722, "x_min": 81, "x_max": 641, "o": "m 641 0 q 599 0 q 599 347 q 123 347 q 123 0 q 81 0 q 81 694 q 123 694 q 123 389 q 599 389 q 599 694 q 641 694 q 641 0 z " }, "I": { "ha": 278, "x_min": 81, "x_max": 196, "o": "m 196 0 q 81 0 q 81 694 q 196 694 q 196 0 z " }, "L": { "ha": 556, "x_min": 81, "x_max": 514, "o": "m 514 0 q 81 0 q 81 694 q 123 694 q 123 42 q 514 42 q 514 0 z " }, "M": { "ha": 833, "x_min": 81, "x_max": 753, "o": "m 753 0 q 711 0 q 711 639 q 417 0 q 375 0 q 123 639 q 123 0 q 81 0 q 81 694 q 153 694 q 396 69 q 639 694 q 753 694 q 753 0 z " }, "N": { "ha": 722, "x_min": 81, "x_max": 641, "o": "m 641 0 q 599 0 q 599 639 q 123 0 q 81 0 q 81 694 q 123 694 q 123 56 q 599 694 q 641 694 q 641 0 z " }, "O": { "ha": 778, "x_min": 49, "x_max": 729, "o": "m 729 347 q 729 0 q 49 0 q 49 694 q 729 694 q 729 347 z m 687 347 q 687 652 q 91 652 q 91 42 q 687 42 q 687 347 z " }, "P": { "ha": 667, "x_min": 81, "x_max": 611, "o": "m 611 521 q 611 347 q 123 347 q 123 0 q 81 0 q 81 694 q 611 694 q 611 521 z m 569 521 q 569 652 q 123 652 q 123 389 q 569 389 q 569 521 z " }, "R": { "ha": 667, "x_min": 81, "x_max": 611, "o": "m 611 0 q 569 0 q 569 347 q 123 347 q 123 0 q 81 0 q 81 694 q 611 694 q 611 521 q 569 521 q 569 389 q 611 389 q 611 0 z m 569 521 q 569 652 q 123 652 q 123 389 q 569 389 q 569 521 z " }, "S": { "ha": 667, "x_min": 56, "x_max": 611, "o": "m 611 174 q 611 0 q 56 0 q 56 42 q 569 42 q 569 174 q 56 174 q 56 521 q 611 521 q 611 694 q 56 694 q 56 736 q 611 736 q 611 563 q 98 563 q 98 216 q 611 216 q 611 174 z " }, "T": { "ha": 611, "x_min": 21, "x_max": 590, "o": "m 590 652 q 306 652 q 306 0 q 264 0 q 264 652 q 21 652 q 21 694 q 590 694 q 590 652 z " }, "U": { "ha": 722, "x_min": 81, "x_max": 641, "o": "m 641 694 q 641 0 q 81 0 q 81 694 q 123 694 q 123 42 q 599 42 q 599 694 q 641 694 z " }, "V": { "ha": 667, "x_min": 14, "x_max": 654, "o": "m 654 694 q 375 0 q 292 0 q 14 694 q 65 694 q 334 56 q 602 694 q 654 694 z " }, "W": { "ha": 944, "x_min": 14, "x_max": 931, "o": "m 931 694 q 792 0 q 709 0 q 472 639 q 236 0 q 153 0 q 14 694 q 65 694 q 194 56 q 431 694 q 514 694 q 750 56 q 879 694 q 931 694 z " }, "X": { "ha": 667, "x_min": 14, "x_max": 654, "o": "m 654 0 q 602 0 q 334 347 q 65 0 q 14 0 q 306 347 q 14 694 q 65 694 q 334 347 q 602 694 q 654 694 q 362 347 q 654 0 z " }, "Y": { "ha": 667, "x_min": 14, "x_max": 654, "o": "m 654 694 q 602 694 q 334 347 q 334 0 q 292 0 q 292 347 q 65 694 q 14 694 q 313 347 q 313 0 q 313 347 q 654 694 z " }, "a": { "ha": 556, "x_min": 42, "x_max": 514, "o": "m 514 0 q 472 0 q 472 111 q 84 111 q 84 347 q 472 347 q 472 500 q 84 500 q 84 542 q 514 542 q 514 0 z m 472 153 q 472 305 q 126 305 q 126 153 q 472 153 z " }, "b": { "ha": 611, "x_min": 67, "x_max": 562, "o": "m 562 271 q 562 0 q 109 0 q 109 694 q 151 694 q 151 347 q 562 347 q 562 271 z m 520 271 q 151 271 q 151 42 q 520 42 q 520 271 z " }, "c": { "ha": 556, "x_min": 42, "x_max": 514, "o": "m 514 153 q 472 153 q 472 42 q 84 42 q 84 500 q 472 500 q 472 389 q 514 389 q 514 542 q 42 542 q 42 0 q 514 0 q 514 153 z " }, "d": { "ha": 611, "x_min": 49, "x_max": 544, "o": "m 544 694 q 544 0 q 49 0 q 49 542 q 502 542 q 502 694 q 544 694 z m 502 42 q 502 500 q 91 500 q 91 42 q 502 42 z " }, "e": { "ha": 556, "x_min": 42, "x_max": 514, "o": "m 514 271 q 514 0 q 42 0 q 42 542 q 514 542 q 514 271 z m 472 271 q 472 500 q 84 500 q 84 271 q 472 271 z m 472 229 q 84 229 q 84 42 q 472 42 q 472 229 z " }, "f": { "ha": 333, "x_min": 10, "x_max": 343, "o": "m 343 500 q 151 500 q 151 0 q 109 0 q 109 500 q 10 500 q 10 542 q 109 542 q 109 694 q 343 694 q 343 652 q 151 652 q 151 542 q 343 542 q 343 500 z " }, "g": { "ha": 611, "x_min": 49, "x_max": 544, "o": "m 544 542 q 544 -139 q 49 -139 q 49 -97 q 502 -97 q 502 111 q 49 111 q 49 542 q 544 542 z m 502 153 q 502 500 q 91 500 q 91 153 q 502 153 z " }, "h": { "ha": 611, "x_min": 67, "x_max": 544, "o": "m 544 0 q 502 0 q 502 271 q 109 271 q 109 0 q 67 0 q 67 694 q 109 694 q 109 313 q 544 313 q 544 0 z " }, "i": { "ha": 278, "x_min": 67, "x_max": 211, "o": "m 211 0 q 67 0 q 67 500 q 211 500 q 211 0 z m 211 611 q 67 611 q 67 694 q 211 694 q 211 611 z " }, "k": { "ha": 556, "x_min": 67, "x_max": 544, "o": "m 544 0 q 502 0 q 109 271 q 109 0 q 67 0 q 67 694 q 109 694 q 109 313 q 502 542 q 544 542 q 151 313 q 544 0 z " }, "l": { "ha": 278, "x_min": 67, "x_max": 211, "o": "m 211 0 q 67 0 q 67 694 q 211 694 q 211 0 z " }, "m": { "ha": 889, "x_min": 67, "x_max": 822, "o": "m 822 0 q 780 0 q 780 271 q 502 271 q 502 0 q 460 0 q 460 271 q 109 271 q 109 0 q 67 0 q 67 542 q 109 542 q 109 313 q 460 313 q 460 542 q 502 542 q 502 313 q 822 313 q 822 0 z " }, "n": { "ha": 611, "x_min": 67, "x_max": 544, "o": "m 544 0 q 502 0 q 502 271 q 109 271 q 109 0 q 67 0 q 67 542 q 109 542 q 109 313 q 544 313 q 544 0 z " }, "o": { "ha": 611, "x_min": 42, "x_max": 569, "o": "m 569 271 q 569 0 q 42 0 q 42 542 q 569 542 q 569 271 z m 527 271 q 527 500 q 84 500 q 84 42 q 527 42 q 527 271 z " }, "p": { "ha": 611, "x_min": 67, "x_max": 562, "o": "m 562 271 q 562 0 q 109 0 q 109 -139 q 67 -139 q 67 542 q 109 542 q 109 347 q 562 347 q 562 271 z m 520 271 q 151 271 q 151 42 q 520 42 q 520 271 z " }, "r": { "ha": 389, "x_min": 67, "x_max": 347, "o": "m 347 500 q 347 458 q 109 458 q 109 0 q 67 0 q 67 542 q 109 542 q 109 500 q 347 500 z " }, "s": { "ha": 556, "x_min": 42, "x_max": 514, "o": "m 514 153 q 514 0 q 42 0 q 42 42 q 472 42 q 472 153 q 42 153 q 42 389 q 514 389 q 514 542 q 42 542 q 42 584 q 514 584 q 514 431 q 84 431 q 84 195 q 514 195 q 514 153 z " }, "t": { "ha": 333, "x_min": 10, "x_max": 323, "o": "m 323 42 q 323 0 q 109 0 q 109 500 q 10 500 q 10 542 q 109 542 q 109 694 q 151 694 q 151 542 q 323 542 q 323 500 q 151 500 q 151 42 q 323 42 z " }, "u": { "ha": 611, "x_min": 67, "x_max": 544, "o": "m 544 542 q 544 0 q 67 0 q 67 542 q 109 542 q 109 42 q 502 42 q 502 542 q 544 542 z " }, "v": { "ha": 556, "x_min": 14, "x_max": 542, "o": "m 542 542 q 278 0 q 236 0 q 14 542 q 56 542 q 257 42 q 500 542 q 542 542 z " }, "w": { "ha": 778, "x_min": 14, "x_max": 764, "o": "m 764 542 q 639 0 q 597 0 q 389 500 q 181 0 q 139 0 q 14 542 q 56 542 q 160 42 q 368 542 q 410 542 q 618 42 q 722 542 q 764 542 z " }, "x": { "ha": 556, "x_min": 14, "x_max": 542, "o": "m 542 0 q 500 0 q 278 271 q 56 0 q 14 0 q 257 271 q 14 542 q 56 542 q 278 271 q 500 542 q 542 542 q 299 271 q 542 0 z " }, "y": { "ha": 556, "x_min": 14, "x_max": 542, "o": "m 542 542 q 278 0 q 278 -139 q 14 -139 q 14 -97 q 236 -97 q 236 0 q 14 542 q 56 542 q 257 42 q 500 542 q 542 542 z " }, " ": { "ha": 278, "x_min": 0, "x_max": 0, "o": "" } }, "familyName": "Helvetiker", "ascender": 750, "descender": -250, "underlinePosition": -100, "underlineThickness": 50, "boundingBox": { "yMin": -250, "xMin": -1000, "yMax": 750, "xMax": 1000 }, "resolution": 1000, "original_font_information": { "format": 0, "copyright": "Copyright (c) 1985, 1987, 1989, 1990 Adobe Systems Incorporated. All Rights Reserved.Helvetica is a trademark of Linotype AG and/or its subsidiaries.", "fontFamily": "Helvetiker", "fontSubfamily": "Regular", "uniqueID": "Helvetiker", "fullName": "Helvetiker Regular", "version": "0.1.2", "postScriptName": "Helvetiker-Regular" }, "cssFontWeight": "normal", "cssFontStyle": "normal" } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isQuickEdit="true" import "./globals.css" import { Inter } from "next/font/google" import { ThemeProvider } from "@/components/theme-provider" const inter = Inter({ subsets: ["latin"] }) export const metadata = { title: "PlayStation 3D Signs", description: "Interactive 3D PlayStation-inspired signs", } export default function RootLayout({ children }) { return ( {children} ) } [V0_FILE]typescriptreact:file="fallback-text.tsx" "use client" import { useRef, useState } from "react" import { Text } from "@react-three/drei" import { useFrame } from "@react-three/fiber" import * as THREE from "three" export function FallbackText({ text, color = "#ffffff", position = [0, -4, 0] }) { const textRef = useRef() const [hovered, setHovered] = useState(false) useFrame((state, delta) => { if (textRef.current) { textRef.current.material.fillOpacity = THREE.MathUtils.lerp( textRef.current.material.fillOpacity, hovered ? 1 : 0.8, delta * 6, ) } }) return ( setHovered(true)} onPointerOut={() => setHovered(false)} > {text} ) } [V0_FILE]typescriptreact:file="3d-scene.tsx" isEdit="true" isQuickEdit="true" "use client" import { useRef, useState, useEffect } from "react" import { Canvas, useFrame, useLoader } from "@react-three/fiber" import { OrbitControls, Environment, Float, Text, PerspectiveCamera } from "@react-three/drei" import { EffectComposer, Bloom, ChromaticAberration } from "@react-three/postprocessing" import { BlendFunction } from "postprocessing" import * as THREE from "three" export default function Scene({ text = "PLAY", textColor = "#ffffff", backgroundColor = "#000000", animationSpeed = 1, bloomIntensity = 1.5, showShapes = true, }) { const [isMobile, setIsMobile] = useState(false) useEffect(() => { const checkMobile = () => { setIsMobile(window.innerWidth < 768) } checkMobile() window.addEventListener("resize", checkMobile) return () => window.removeEventListener("resize", checkMobile) }, []) return (

{/* Controls UI */}

) } function CustomText({ text, color = "#ffffff", ...props }) { const textRef = useRef() const [hovered, setHovered] = useState(false) const [fontLoaded, setFontLoaded] = useState(false) const [error, setError] = useState(false) // Use a simpler font that's guaranteed to work const font = useLoader( THREE.FontLoader, "/fonts/Inter_Bold.json", undefined, (err) => { console.error("Error loading font:", err) setError(true) }, () => { setFontLoaded(true) }, ) useFrame((state, delta) => { if (textRef.current) { textRef.current.material.emissiveIntensity = THREE.MathUtils.lerp( textRef.current.material.emissiveIntensity, hovered ? 2 : 1, delta * 6, ) } }) // If font failed to load, use a fallback Text component if (error) { return ( setHovered(true)} onPointerOut={() => setHovered(false)} > {text} ) } // Only render Text3D when font is loaded if (!fontLoaded) { return null } return ( setHovered(true)} onPointerOut={() => setHovered(false)}> ) } function PlayStationShapes({ animationSpeed = 1 }) { const groupRef = useRef() const [hoveredShape, setHoveredShape] = useState(null) const [clickedShape, setClickedShape] = useState(null) // Animation for the whole group useFrame((state, delta) => { if (groupRef.current) { groupRef.current.rotation.y += delta * 0.2 * animationSpeed } }) // Material properties for neon effect const createNeonMaterial = (color, isHovered, isClicked) => { const intensity = isClicked ? 4 : isHovered ? 3 : 2 return { color: color, emissive: color, emissiveIntensity: intensity, metalness: 0.3, roughness: 0.2, toneMapped: false, } } // Handle pointer events const handlePointerOver = (shape) => setHoveredShape(shape) const handlePointerOut = () => setHoveredShape(null) const handleClick = (shape) => { if (clickedShape === shape) { setClickedShape(null) } else { setClickedShape(shape) } } return ( {/* Square (Pink) */} handlePointerOver("square")} onPointerOut={handlePointerOut} onClick={() => handleClick("square")} > {/* Triangle (Green) */} handlePointerOver("triangle")} onPointerOut={handlePointerOut} onClick={() => handleClick("triangle")} > {/* X shape (Blue) */} handlePointerOver("x")} onPointerOut={handlePointerOut} onClick={() => handleClick("x")} > {/* Circle (Red) */} handlePointerOver("circle")} onPointerOut={handlePointerOut} onClick={() => handleClick("circle")} > ) }