Module 01
3D Core Rendering (GrokCore3D)
A hardware-accelerated 3D environment powered by React Three Fiber and Three.js, responding dynamically to application state.
- Custom mesh generation
- Dynamic lighting and shadows
- Interactive camera controls
Back to Selected Work
Technical DossierAI-powered brutally honest feedback.
GrokRoast
An interactive, 3D web experience that leverages simulated AI to critique or praise your ideas, bio, and routines. It blends high-end 3D visual storytelling with text-to-speech audio for a fully immersive web application.
Engineering Contribution
3D scene implementation (React Three Fiber), AI response integration, Web Speech API audio synthesis, and complex UI animations.
Technology Stack
01 / ArchitectureFrontend
- React 19
- Vite
- Tailwind CSS
- Framer Motion
3D & Graphics
- Three.js
- React Three Fiber
- React Three Drei
- Canvas Confetti
Audio & Utilities
- Web Speech API
- HTML-to-Image
- Lucide React
System Schematics
02 / Blueprints
Core Modules
03 / SubsystemsModule 02
AI Response Engine
Simulates LLM-style roasting or boosting by generating dynamic text verdicts based on the provided user prompts.
- Context-aware text generation
- Survival score calculations
- Configurable feedback modes
Module 03
Voice Synthesis System
Utilizes the browser's native Web Speech API to read the verdicts aloud with robotic, cyberpunk voice filters.
- Cross-browser speech synthesis
- Real-time playback controls
- Voice muting and queuing
Module 04
Interactive UI & Animations
Sleek, neon-themed user interface driven by Framer Motion, with particle effects provided by canvas-confetti.
- Fluid layout transitions
- Survival Gauge visualizer
- Export to image capability
Implementation Notes
04 / Code ExcerptReact Three Fiber Integration
The application uses @react-three/fiber to bridge the declarative world of React with the imperative world of Three.js. This allows 3D scenes to react seamlessly to standard React state changes (like switching between "Roast" and "Boost" modes).
Web Speech API Implementation
The Voice Synthesis module wraps the browser's native speechSynthesis interface, carefully managing voice selection and ensuring playback can be interrupted dynamically when the user requests a new verdict.
export const speakCritique = (text: string, mode: "roast" | "boost", onEnd: () => void) => {
const utterance = new SpeechSynthesisUtterance(text);
// Select a voice that matches the vibe
const voices = speechSynthesis.getVoices();
const preferredVoice = voices.find(v => v.name.includes("Google") || v.lang === "en-US");
if (preferredVoice) utterance.voice = preferredVoice;
utterance.pitch = mode === "roast" ? 0.8 : 1.2;
utterance.rate = 1.05;
utterance.onend = onEnd;
speechSynthesis.cancel(); // Clear queue
speechSynthesis.speak(utterance);
};