👀 I Tested Fable 5.2 vs Opus 5.5 on Interactive Motion Design, UI and 3D Games

You are a senior game developer, gameplay designer, and technical artist specializing in polished browser-based 3D games.

Build a complete, playable 3D arcade racing game called "Neon Rush: Sky Circuit."

Your goal is to create a racing game that feels like a finished indie release rather than a basic technical demo. Every important gameplay feature must work, and the game should have a distinctive visual identity.

TECHNICAL REQUIREMENTS

- Use Three.js for 3D rendering.
- Use React for the game interface.
- Use Vite as the development environment.
- The game must run locally using npm install and npm run dev.
- Create original low-poly 3D assets using procedural geometry.
- Do not rely on paid assets, external API keys, or unavailable files.
- Organize the code into reusable modules for rendering, physics, opponents, track generation, audio, and UI.
- Prioritize reliable gameplay and smooth performance.

1. WORLD DESIGN

Create a futuristic racing circuit suspended above a massive cyberpunk city at night.

The environment should include glowing skyscrapers, animated holographic advertisements, elevated highways, distant flying vehicles, and atmospheric fog.

Use a consistent visual palette of deep navy, electric cyan, magenta, and warm orange.

Build a complete racing circuit featuring:
- Wide corners and sharp hairpin turns.
- Elevated bridges with noticeable height changes.
- A tunnel with dynamic lighting.
- Two clearly marked boost zones.
- An optional shortcut with a meaningful risk and reward.
- Track barriers that prevent vehicles from falling into the city.

Add illuminated checkpoints, a detailed starting grid, recognizable landmarks, and an animated finish line.

Make the environment visually impressive without distracting players from the race.

2. VEHICLES AND DRIVING PHYSICS

Create four futuristic racing vehicles with distinct silhouettes, animated wheels, glowing exhaust systems, and responsive steering.

Implement:
- Acceleration, braking, and reverse movement.
- Speed-sensitive steering.
- Drifting with realistic-feeling momentum and traction changes.
- Nitro boosts with limited energy and gradual regeneration.
- Collisions with barriers and other vehicles.
- Off-track slowdown and recovery.
- Smooth acceleration and deceleration.

Driving should feel accessible to beginners while rewarding skilled players.

Keyboard controls:
W / Up Arrow: Accelerate
S / Down Arrow: Brake or reverse
A / Left Arrow: Steer left
D / Right Arrow: Steer right
Space: Drift
Shift: Activate nitro
R: Reset vehicle
Esc: Pause or resume

3. COMPUTER-CONTROLLED OPPONENTS

Create three computer-controlled opponents that participate in the same race as the player.

Each opponent must:
- Follow the actual track using waypoints or a racing-line system.
- Slow down before sharp corners.
- Recover when stuck or facing the wrong direction.
- Attempt overtakes when there is enough space.
- Use boost zones strategically.
- Complete laps and cross the finish line correctly.

Give each opponent a different driving personality and speed profile.

Apply the same collision rules, checkpoint validation, and lap tracking to all racers.

4. CAMERA AND VISUAL EFFECTS

Implement a responsive third-person chase camera.

The camera must:
- Follow the vehicle smoothly.
- Adjust field of view based on speed.
- Shift naturally during drifting.
- Pull back slightly during nitro boosts.
- Avoid clipping through nearby geometry.

Add tire smoke, glowing boost trails, subtle collision sparks, and speed effects.

Use restrained bloom and carefully positioned lighting to create an attractive scene without making the track difficult to see.

5. GAMEPLAY AND RACE SYSTEM

Build a complete three-lap racing experience.

Include:
- A main menu with a working Play button.
- Vehicle selection before starting.
- A three-second starting countdown.
- Accurate lap tracking using ordered checkpoints.
- Live race rankings based on track progress.
- A race timer and individual lap times.
- A finish screen showing final position and total race time.
- Working Restart and Main Menu buttons.
- Pause and resume functionality.

Prevent checkpoint skipping, duplicate lap counting, and invalid shortcuts from breaking the race.

The player must be able to finish a complete race without developer intervention.

6. USER INTERFACE

Design a polished interface inspired by premium arcade racing games.

Display:
- Current speed in km/h.
- Lap progress.
- Current race position.
- Race timer.
- Nitro energy.
- A compact minimap showing the player and opponents.

Use clear typography, consistent spacing, readable colors, and subtle animations.

Make sure the interface adapts to different desktop screen sizes.

7. AUDIO

Add responsive engine sounds and audio feedback for drifting, nitro boosts, countdowns, collisions, and finishing the race.

Generate sounds using the Web Audio API where practical.

Include a mute button and respect browser autoplay restrictions.

8. PERFORMANCE

Optimize the game for typical modern laptops.

Use efficient geometry, object reuse, sensible lighting, and limited particle counts.

Avoid unnecessary dependencies that could make the game unstable.

Handle browser resizing, focus changes, and pause states correctly.

9. DEVELOPMENT AND QUALITY CHECK

Implement the project in a logical sequence:
- Set up the application and render the world.
- Build the track and vehicle physics.
- Implement collisions and checkpoint tracking.
- Add computer-controlled opponents.
- Integrate the race system and UI.
- Improve graphics and performance.

After implementation, review the project for:
- Broken imports and runtime errors.
- Incorrect keyboard controls.
- Vehicles getting stuck or leaving the track.
- Incorrect lap counts or rankings.
- Buttons that do not work.
- Missing assets or unresolved dependencies.

Fix any issues you identify.

If browser testing is available, launch the game and test a complete race. If browser testing is unavailable, explain which features remain unverified.

FINAL DELIVERABLE

Provide the complete runnable project with installation instructions and a short controls guide.

The finished game should feel like a cohesive arcade racer with satisfying driving mechanics, competitive opponents, and a recognizable visual style.

Prioritize a reliable and enjoyable experience over adding features that do not work.

You are a senior product designer, creative director, conversion-focused UX strategist, and frontend engineer.

Build a complete, visually distinctive, conversion-focused landing page for "SkillForge Academy", an online platform that teaches working professionals how to automate real tasks using AI.

Your mission is to create a premium website that makes visitors interested in the course and confident enough to enroll.

The website must feel like a thoughtfully designed digital product, not a generic AI-generated landing page.

PROJECT SETUP
- Use React, TypeScript, Vite, and Tailwind CSS.
- Use Framer Motion or Motion for React for animations.
- Use Lucide icons where appropriate.
- Make the project fully runnable with npm install and npm run dev.
- Don't require paid assets or external API keys.
- Use original layouts and CSS-based visuals wherever possible.

1. BRAND AND AUDIENCE

Brand: SkillForge Academy

Product: AI Workflow Builder, a practical online course that helps professionals automate repetitive work using Claude Code.

Target audience:
- Marketing professionals
- Freelancers and solopreneurs
- Small business owners
- Professionals with limited coding experience

Main audience problem:
People know AI can save time, but they struggle to turn prompts into reliable workflows that actually help with their daily work.

Core promise:
"Build AI workflows that handle your repetitive work, even if you've never written code."

Course price: $49 one-time payment.

Primary CTA: "Get Instant Access"

Secondary CTA: "Explore the Curriculum"

Use a confident, friendly voice with specific benefits and simple language. Avoid exaggerated claims and generic AI marketing phrases.

2. VISUAL DIRECTION

Create a premium editorial-meets-tech aesthetic.

Use:
- Warm off-white as the primary background.
- Deep charcoal for typography.
- Electric coral as the main accent.
- Soft lavender and muted blue for supporting elements.
- Large expressive typography.
- Generous whitespace.
- Asymmetric layouts with a clear visual hierarchy.

Avoid:
- Generic purple gradient backgrounds.
- Floating 3D brains or robot illustrations.
- Excessive glassmorphism.
- Identical rounded cards everywhere.
- Unnecessary decorative elements.
- Repetitive layouts that look like common AI-generated websites.

Use one memorable visual concept that connects to the idea of building workflows.

Every section should feel intentional and visually connected to the brand.

3. HERO SECTION

Design a high-impact hero that immediately communicates what visitors can achieve.

Include:
- A short announcement badge.
- A compelling headline focused on the outcome.
- One concise supporting paragraph.
- A prominent primary CTA.
- A secondary curriculum CTA.
- A small trust indicator without fabricated customer counts or ratings.

Create an interactive workflow visualization beside or below the headline.

The visualization should show how a manual task becomes an automated process.

Example workflow:
Incoming customer inquiry → AI classification → Draft response → Human approval → Final output

Animate the connections between steps using subtle movement.

Make the visual understandable without requiring visitors to read a long explanation.

4. COURSE BENEFITS

Show three concrete outcomes:

- Automate recurring research and reporting.
- Turn customer inquiries into organized, actionable information.
- Build reusable workflows without starting from scratch.

Each benefit should include a short explanation and a small original visual illustration.

Use varied layouts rather than repeating the same card design.

5. INTERACTIVE WORKFLOW DEMO

Create a functional interactive section called "See What You Can Build."

Visitors should be able to select one of three example workflows:

A. Customer Inquiry Assistant
B. Weekly Research Brief
C. Content Planning Workflow

When a visitor selects an example, update the workflow diagram and show realistic sample inputs and outputs.

The demo must work entirely in the frontend using predefined example data.

Don't pretend that a live AI service is processing the examples.

Use smooth transitions and make the interaction easy to understand.

6. COURSE CURRICULUM

Present four course modules:

Module 1: Set Up Your AI Workspace
Module 2: Build Your First Workflow
Module 3: Connect Real Business Tasks
Module 4: Test, Improve, and Reuse Your Automations

Use an accordion interface that expands to show the lessons and expected outcomes.

Include realistic lesson titles and practical exercises.

All accordion buttons must work.

7. SOCIAL PROOF AND TRUST

Create a section explaining why the course is practical.

Focus on:
- Guided project examples.
- Reusable starter prompts.
- Downloadable workflow templates.
- Clear instructions for beginners.

Don't fabricate testimonials, student numbers, company endorsements, or review ratings.

If testimonial components are useful for the design, include clearly labeled placeholders that can be replaced with verified customer feedback later.

8. PRICING AND CONVERSION

Create a compelling pricing section for the $49 course.

Include:
- One-time payment.
- Lifetime access to the purchased course content.
- Downloadable templates and starter prompts.
- A clear summary of what is included.
- A strong "Get Instant Access" CTA.

Do not invent discounts, scarcity claims, refund policies, or guarantees.

Make the primary CTA more visually prominent than secondary actions.

All enrollment buttons should lead to the same configurable checkout URL.

If no checkout URL is supplied, use a clearly identified demo destination rather than a broken or misleading checkout.

9. MOBILE EXPERIENCE

Create a fully responsive experience.

Requirements:
- Clear typography on smaller screens.
- Comfortable spacing and touch targets.
- No horizontal overflow.
- Simplified workflow diagrams on mobile.
- Readable pricing and curriculum sections.
- A mobile navigation menu that works.
- CTAs that remain easy to find without covering important content.

10. ANIMATIONS AND INTERACTIONS

Add refined animations that support the experience.

Include:
- Subtle entrance animations.
- Smooth workflow transitions.
- Responsive button hover states.
- Accordion expansion.
- Navigation interactions.
- Reduced-motion support.

Avoid unnecessary motion that distracts visitors from the content.

11. ACCESSIBILITY AND PERFORMANCE

Use semantic HTML and accessible component patterns.

Ensure:
- Proper heading hierarchy.
- Keyboard-accessible controls.
- Visible focus states.
- Sufficient text contrast.
- Descriptive button labels.
- Optimized animations.
- Efficient rendering.
- No console errors.

12. SELF-REVIEW AND IMPROVEMENT

After building the website, review it from two perspectives.

As a creative director:
- Does the design feel distinctive?
- Is the typography polished?
- Does every section have a clear purpose?
- Does the page avoid repetitive AI design patterns?

As a conversion-focused UX designer:
- Can visitors understand the offer within five seconds?
- Is the primary CTA easy to find?
- Does the page explain the course value clearly?
- Are there unnecessary distractions?
- Does the mobile version preserve the buying journey?

Identify the five most important weaknesses and improve them before delivering the final version.

If browser testing is available, inspect the website at desktop and mobile sizes and test all interactions.

If browser testing is unavailable, clearly explain what remains unverified.

FINAL DELIVERABLE

Deliver a complete, runnable landing page with:
- A distinctive visual identity.
- Functional interactions.
- Responsive layouts.
- Clear conversion-focused messaging.
- A working interactive workflow demo.
- Installation and preview instructions.

Prioritize usability, visual quality, and a clear enrollment journey.

The result should look like a professionally designed course website that a real business could launch after adding verified business information and a live checkout link.

You are a senior creative developer, astrophysics visualization engineer, technical artist, and WebGL specialist.

Build a complete, interactive 3D black hole simulator called "EVENT HORIZON".

Your goal is to create a visually stunning, scientifically informed space visualization that runs smoothly in a browser.

The final experience should resemble a premium interactive science exhibit, with cinematic visuals, intuitive controls, and a convincing representation of a black hole.

TECHNICAL REQUIREMENTS

- Use Three.js and WebGL for 3D rendering.
- Use React and TypeScript for the interface.
- Use Vite for the development environment.
- Use custom GLSL shaders where needed.
- Use procedural geometry and textures instead of paid assets.
- The project must run with npm install and npm run dev.
- Don't require external API keys or unavailable asset files.
- Organize the project into reusable components.
- Optimize for smooth performance on modern desktop browsers.

1. BLACK HOLE VISUALIZATION

Create a central black hole surrounded by a luminous accretion disk.

The black hole must feature:
- A completely dark central region representing the black hole shadow.
- A thin, bright photon-ring-inspired glow.
- A rotating accretion disk with turbulent orange, gold, and white plasma.
- Hotter, brighter material closer to the center.
- Cooler, darker material toward the outer edge.
- A convincing sense of depth and scale.

Use shader-based effects wherever possible to create smooth, animated plasma movement.

Avoid making the black hole look like a simple dark sphere with a glowing ring.

2. GRAVITATIONAL LENSING

Create a convincing visual approximation of gravitational lensing.

Light from the accretion disk and background stars should appear distorted near the black hole.

Requirements:
- Warp the appearance of background stars near the central shadow.
- Make portions of the accretion disk appear above and below the black hole.
- Ensure the effect changes naturally when the camera moves.
- Use screen-space distortion or a shader-based approximation suitable for real-time rendering.

Prioritize visual credibility and stable rendering.

Clearly distinguish visually approximated effects from physically accurate general-relativistic ray tracing.

3. ACCRETION DISK AND PARTICLES

Create thousands of glowing particles orbiting the black hole.

Particle behavior should include:
- Faster orbital movement closer to the center.
- Different orbital speeds based on distance.
- Gradual inward movement for selected particles.
- Bright trails that follow the orbital direction.
- Color variations that suggest different temperatures.
- Particles disappearing as they cross the simulated event horizon.

Use GPU-friendly particle rendering and efficient buffers.

Add subtle turbulence to make the disk feel dynamic without turning it into random noise.

4. INTERACTIVE PHYSICS CONTROLS

Create a clean control panel that allows visitors to change:

- Black hole mass.
- Spin parameter.
- Accretion disk brightness.
- Particle density.
- Simulation speed.
- Camera inclination.

When mass changes, update the visualized horizon scale and orbital motion consistently with the simulation's chosen normalized units.

When spin changes, modify disk movement and visual appearance through a documented approximation. Do not claim to simulate exact Kerr spacetime unless implemented.

Include sensible parameter limits and a Reset to Default button.

Every slider must produce an observable change.

5. CAMERA AND EXPLORATION

Implement an intuitive 3D camera system.

Users should be able to:
- Orbit around the black hole using mouse dragging.
- Zoom in and out with the scroll wheel.
- Switch between cinematic and scientific viewing modes.
- Pause and resume the simulation.
- Reset the camera to its original position.

Use smooth camera movement with reasonable zoom limits.

Prevent camera clipping and disorienting jumps.

6. CINEMATIC MODE

Add a cinematic presentation mode featuring:
- A slow automatic camera orbit.
- Carefully controlled bloom.
- Subtle background star movement.
- Smooth transitions between camera angles.
- A clean full-screen presentation without distracting UI elements.

Include a working button to enter and exit cinematic mode.

The black hole should remain the visual focus throughout.

7. SCIENTIFIC INFORMATION PANEL

Create a compact information panel explaining:
- Event horizon.
- Accretion disk.
- Gravitational lensing.
- Photon sphere.
- Orbital velocity.

Use accessible language suitable for curious beginners.

Include a small visual indicator showing the simulated black hole's current mass and spin.

Clearly label the visualization as an educational approximation rather than a research-grade physics simulation.

8. VISUAL DESIGN AND UI

Use a premium space-observatory aesthetic.

Visual direction:
- Deep black and dark navy backgrounds.
- Warm orange and gold accretion disk.
- Subtle blue-white starfield.
- Minimal typography.
- Thin scientific interface lines.
- Small, precise labels.
- Translucent control panels with readable contrast.

Avoid cluttered dashboards or excessive decorative elements.

The interface should feel like an interactive NASA-inspired science exhibit.

9. PERFORMANCE AND ACCESSIBILITY

Target smooth rendering on a typical modern laptop.

Implement:
- Efficient particle buffers.
- Limited shader complexity.
- Adjustable visual quality.
- Proper cleanup of Three.js resources.
- Responsive canvas resizing.
- Keyboard-accessible interface controls.
- Reduced-motion support where practical.

Provide a lower-quality rendering mode for weaker devices.

10. DEVELOPMENT AND TESTING

Build the project in a reliable sequence:
- Set up the application and rendering scene.
- Create the black hole shadow and accretion disk.
- Implement gravitational lensing approximation.
- Add orbiting particles.
- Build the camera controls.
- Connect the interactive settings.
- Implement cinematic mode.
- Optimize rendering performance.

After implementation, review the project for:
- Shader compilation failures.
- Broken imports.
- Incorrect camera behavior.
- Sliders that do not affect the simulation.
- Particle rendering artifacts.
- Unstable animation.
- Poor performance.
- Console errors.

Fix the most important issues before delivering the final version.

If browser testing is available, launch the application and verify the main interactions. Otherwise, state which features remain untested.

FINAL DELIVERABLE

Provide a complete runnable project with installation instructions, working controls, and a polished interactive visualization.

The experience should be visually impressive, easy to explore, and scientifically honest about its approximations.

Prioritize a convincing black hole visualization, stable interaction, and a smooth user experience.