// ================================================== // Project Imports // ================================================== // App.jsx import React, { useEffect, useRef, useState, useMemo } from 'react'; import ReactDOM from 'react-dom/client'; import * as THREE from 'three'; // Add GSAP script to the document head // Wait for GSAP to load before using it const gsapScript = document.createElement('script'); gsapScript.src = 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js'; gsapScript.async = true; gsapScript.onload = () => { // Re-render the app when GSAP is loaded const container = document.getElementById('renderDiv'); const root = ReactDOM.createRoot(container); root.render(); }; document.head.appendChild(gsapScript); // Add global styles for hover effects const styleSheet = document.createElement('style'); styleSheet.type = 'text/css'; styleSheet.innerText = ` .hover-scale { transition: transform 0.2s ease; } .hover-scale:hover { transform: scale(1.05); } .hover-scale-lg { transition: transform 0.2s ease; } .hover-scale-lg:hover { transform: scale(1.1); } `; document.head.appendChild(styleSheet); // Load LEMONMILK fonts const loadFonts = () => { const fontStyles = ` @font-face { font-family: 'LEMONMILK-Bold'; src: url('https://play.rosebud.ai/assets/LEMONMILK-Bold.otf?uDrc') format('opentype'); } @font-face { font-family: 'LEMONMILK-Light'; src: url('https://play.rosebud.ai/assets/LEMONMILK-Light.otf?vNrP') format('opentype'); } @font-face { font-family: 'LEMONMILK-Medium'; src: url('https://play.rosebud.ai/assets/LEMONMILK-Medium.otf?qACp') format('opentype'); } `; const styleSheet = document.createElement('style'); styleSheet.type = 'text/css'; styleSheet.innerText = fontStyles; document.head.appendChild(styleSheet); }; loadFonts(); // ================================================== // General Notes for Rosie AI // ================================================== // Note: In sandboxed environments, avoid using

elements and traditional // form submissions as they may be blocked by security policies. Instead, use // controlled components with direct event handlers (onClick, onChange, etc.). // ================================================== // ChatAIClass Definition // ================================================== // This module provides a class, ChatAIClass, which uses a ChatManager (provided externally) // to conduct a conversation with an AI. The AI's behavior is defined by a description string, // and the ChatAIClass offers a simple getResponse method to get AI responses. // // This is AI is powered by Rosebud AI and is Rosebud's method to add in-game AI features. // // IMPORTANT NOTE: // - Do not assume how ChatManager works beyond what is described here. // - We only know that: // 1. ChatManager is constructed by passing in a description string. // 2. We can add messages by calling chatManager.addMessage('user', prompt). // 3. We can get an AI-generated response by calling chatManager.getCharacterResponse('classify'). // - Any other assumptions about ChatManager internals or methods should not be made. // // This code can be used in any JS project by simply importing this class and using it. ////////////////////////////////////////////////////////////// // Defines how the AI should behave. This should change to match the project. const AI_BEHAVIOR_DESCRIPTION = ` You are an advanced and knowledgeable AI system capable of assisting users with a wide range of topics. You should respond concisely and helpfully, ensuring that the information you provide is accurate, clear, and context-aware. `; /** * ChatAIClass: * * This class is intended for non-technical users who want to interact with an AI system. * * Usage: * 1. Create an instance of ChatAIClass: * const chat = new ChatAIClass(); * * 2. Call getResponse(prompt) to get a response from the AI: * const answer = await chat.getResponse("What is quantum computing?"); * console.log(answer); */ export class ChatAIClass { constructor() { // Directly create a new ChatManager instance with the AI behavior description. // We assume ChatManager is available globally or imported from elsewhere. this.chatManager = new ChatManager(AI_BEHAVIOR_DESCRIPTION); } /** * Generates a response from the AI based on the given prompt. * * @param {string} prompt - The user's input or question. * @returns {Promise} - The AI's response as text. */ async getResponse(prompt) { // Add the user's message to the conversation. this.chatManager.addMessage('user', prompt); // Ask the ChatManager for the AI's response and return it. const response = await this.chatManager.getCharacterResponse('classify'); // Add the AI's message to the conversation so it has memory of it. this.chatManager.addMessage('assistant', response); return response; } } // ================================================== // Main App Component with Three.js Scene // ================================================== const XIcon = () => { const [currentImage, setCurrentImage] = useState(0); const images = useMemo(() => [ 'https://play.rosebud.ai/assets/image_01.jpg?ELF2', 'https://play.rosebud.ai/assets/image_02.jpg?dWJi', 'https://play.rosebud.ai/assets/image_03.jpg?AJOj', 'https://play.rosebud.ai/assets/image_04.jpg?FI06', 'https://play.rosebud.ai/assets/image_05.jpg?OsJd', 'https://play.rosebud.ai/assets/image_06.jpg?EW92' ], []); useEffect(() => { let animationFrame; let lastTime = performance.now(); const interval = 500; // Fixed interval in milliseconds // Preload all images and wait for them to load const preloadImages = async () => { await Promise.all(images.map(src => { return new Promise((resolve) => { const img = new Image(); img.src = src; img.onload = resolve; img.onerror = resolve; }); })); }; const animate = (time) => { animationFrame = requestAnimationFrame(animate); const delta = time - lastTime; if (delta >= interval) { setCurrentImage(prev => (prev + 1) % images.length); lastTime = time - (delta % interval); } }; preloadImages().then(() => { animationFrame = requestAnimationFrame(animate); }); return () => { cancelAnimationFrame(animationFrame); }; }, [images.length]); return (

); }; const App = () => { const mountRef = useRef(null); const [scrollProgress, setScrollProgress] = useState(0); const [currentSection, setCurrentSection] = useState(0); const galleryRef = useRef(null); const projects = useMemo(() => [ { id: 1, image: 'https://play.rosebud.ai/assets/image_01.jpg?ELF2', title: 'Urban Elegance', quote: 'Capturing the raw beauty of cityscapes through a minimalist lens.', link: '#project1' }, { id: 2, image: 'https://play.rosebud.ai/assets/image_02.jpg?dWJi', title: 'Nature Reimagined', quote: 'Where organic forms meet geometric precision.', link: '#project2' }, { id: 3, image: 'https://play.rosebud.ai/assets/image_03.jpg?AJOj', title: 'Industrial Poetry', quote: 'Finding beauty in the mechanical and mundane.', link: '#project3' }, { id: 4, image: 'https://play.rosebud.ai/assets/image_04.jpg?FI06', title: 'Abstract Realities', quote: 'Exploring the boundaries between perception and imagination.', link: '#project4' }, { id: 5, image: 'https://play.rosebud.ai/assets/image_05.jpg?OsJd', title: 'Minimalist Dreams', quote: 'Less is more, but more is never enough.', link: '#project5' }, { id: 6, image: 'https://play.rosebud.ai/assets/image_06.jpg?EW92', title: 'Chromatic Harmony', quote: 'A symphony of color and form in perfect balance.', link: '#project6' } ], []); useEffect(() => { const handleScroll = (e) => { const delta = Math.sign(e.deltaY); setScrollProgress(prev => { const newProgress = Math.min(1, Math.max(0, prev + delta * 0.1)); if (newProgress >= 1 && currentSection === 0) { setCurrentSection(1); return 0; } else if (newProgress <= 0 && currentSection === 1) { setCurrentSection(0); return 1; } return newProgress; }); }; window.addEventListener('wheel', handleScroll); return () => window.removeEventListener('wheel', handleScroll); }, [currentSection]); const [currentProject, setCurrentProject] = useState(0); useEffect(() => { if (currentSection === 1) { let timeout; const changeProject = () => { setCurrentProject(prev => (prev + 1) % projects.length); timeout = setTimeout(changeProject, 5000); // Changed from 8000 to 6000ms }; timeout = setTimeout(changeProject, 5000); return () => clearTimeout(timeout); } }, [currentSection, projects.length]); useEffect(() => { // Scene setup const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true }); // Handle window resizing const handleResize = () => { const width = window.innerWidth; const height = window.innerHeight; const pixelRatio = window.devicePixelRatio; camera.aspect = width / height; camera.updateProjectionMatrix(); renderer.setSize(width, height); renderer.setPixelRatio(pixelRatio); // Update camera position to maintain cube visibility camera.position.z = 5; }; // Initial setup renderer.setPixelRatio(window.devicePixelRatio); mountRef.current.appendChild(renderer.domElement); handleResize(); // Call once to set initial dimensions window.addEventListener('resize', handleResize); // Animation const animate = () => { requestAnimationFrame(animate); renderer.render(scene, camera); }; animate(); // Cleanup return () => { window.removeEventListener('resize', handleResize); if (mountRef.current && renderer.domElement) { mountRef.current.removeChild(renderer.domElement); } if (renderer) renderer.dispose(); }; }, []); return (

{/* Section 1 - Hero */}

MAESTRO

Work About Contact

SAN FRANCISCO IDENTITY
& DIGITAL DESIGN STUDIO

{/* Section 2 - Gallery */}

{projects.map((project, index) => (

{project.title}

{project.quote}

{index + 1} / {projects.length}

))}

); }; const container = document.getElementById('renderDiv'); const root = ReactDOM.createRoot(container); root.render();

Other games like this

About Maestro Photography Portfolio