Code Detail
Prompt
Designed in a surrealist digital collage style to create dream-like visual narratives.Image manipulation is at the core, and unrelated elements should be combined to create unexpected connections, such as classical sculpture with modern electronics, natural elements with geometric shapes.Proportions should be deliberately out of proportion to create visual tension.Colors can be used in dreamy combinations, such as warm sunset tones or cool moonlight tones, adding a slight color cast.Typography should be integrated into the collage, with text wrapping around objects, running through images or becoming part of the composition.Decorative elements should include surreal symbols such as levitating objects, impossible architecture, distorted figures or animals.Subtle shadows and lighting effects may be added to enhance three-dimensionality. The overall design should present a visual experience between reality and dream, triggering the viewer's imagination and subconscious associations, with references to René Magritte's paintings and the work of modern digital artists such as Justin Peters.
Generated Result
import React from 'react'; import './App.css'; class App extends React.Component { render() { return ( <div className="App min-h-screen bg-gradient-to-br from-indigo-900 via-purple-900 to-pink-900 text-white"> <header className="App-header flex justify-center items-center h-32 bg-black bg-opacity-50"> <h1 className="text-6xl font-bold text-shadow-lg shadow-indigo-500">Surreal Dreams</h1> </header> <main className="p-8"> <section className="mb-16"> <div className="grid grid-cols-1 md:grid-cols-2 gap-8"> <div className="relative overflow-hidden rounded-lg shadow-2xl transform transition-transform hover:scale-105"> <img src="https://placehold.co/600x400" alt="Surreal Artwork 1" className="w-full" /> <div className="absolute inset-0 flex justify-center items-center bg-black bg-opacity-50"> <p className="text-3xl font-semibold text-center rotate-12">Classical Meets Modern</p> </div> </div> <div className="relative overflow-hidden rounded-lg shadow-2xl transform transition-transform hover:scale-105"> <img src="https://placehold.co/600x400" alt="Surreal Artwork 2" className="w-full" /> <div className="absolute inset-0 flex justify-center items-center bg-black bg-opacity-50"> <p className="text-3xl font-semibold text-center -rotate-6">Nature & Geometry</p> </div> </div> </div> </section> <section className="mb-16"> <div className="relative h-96 overflow-hidden rounded-lg shadow-2xl"> <img src="https://placehold.co/1200x400" alt="Surreal Artwork 3" className="w-full" /> <div className="absolute inset-0 flex justify-center items-center bg-black bg-opacity-50"> <p className="text-5xl font-bold text-center transform rotate-45">Unexpected Connections</p> </div> </div> </section> <section className="mb-16"> <div className="grid grid-cols-1 md:grid-cols-3 gap-8"> <div className="relative overflow-hidden rounded-lg shadow-2xl transform transition-transform hover:scale-105"> <img src="https://placehold.co/400x400" alt="Surreal Artwork 4" className="w-full" /> <div className="absolute inset-0 flex justify-center items-center bg-black bg-opacity-50"> <p className="text-2xl font-semibold text-center">Floating Objects</p> </div> </div> <div className="relative overflow-hidden rounded-lg shadow-2xl transform transition-transform hover:scale-105"> <img src="https://placehold.co/400x400" alt="Surreal Artwork 5" className="w-full" /> <div className="absolute inset-0 flex justify-center items-center bg-black bg-opacity-50"> <p className="text-2xl font-semibold text-center">Impossible Architecture</p> </div> </div> <div className="relative overflow-hidden rounded-lg shadow-2xl transform transition-transform hover:scale-105"> <img src="https://placehold.co/400x400" alt="Surreal Artwork 6" className="w-full" /> <div className="absolute inset-0 flex justify-center items-center bg-black bg-opacity-50"> <p className="text-2xl font-semibold text-center">Distorted Figures</p> </div> </div> </div> </section> <section className="mb-16"> <div className="relative h-96 overflow-hidden rounded-lg shadow-2xl"> <img src="https://placehold.co/1200x400" alt="Surreal Artwork 7" className="w-full" /> <div className="absolute inset-0 flex justify-center items-center bg-black bg-opacity-50"> <p className="text-5xl font-bold text-center">Dreamlike Narratives</p> </div> </div> </section> <section className="mb-16"> <div className="grid grid-cols-1 md:grid-cols-2 gap-8"> <div className="relative overflow-hidden rounded-lg shadow-2xl transform transition-transform hover:scale-105"> <img src="https://placehold.co/600x400" alt="Surreal Artwork 8" className="w-full" /> <div className="absolute inset-0 flex justify-center items-center bg-black bg-opacity-50"> <p className="text-3xl font-semibold text-center">Sunset Tones</p> </div> </div> <div className="relative overflow-hidden rounded-lg shadow-2xl transform transition-transform hover:scale-105"> <img src="https://placehold.co/600x400" alt="Surreal Artwork 9" className="w-full" /> <div className="absolute inset-0 flex justify-center items-center bg-black bg-opacity-50"> <p className="text-3xl font-semibold text-center">Moonlight Tones</p> </div> </div> </div> </section> <section className="mb-16"> <div className="relative h-96 overflow-hidden rounded-lg shadow-2xl"> <img src="https://placehold.co/1200x400" alt="Surreal Artwork 10" className="w-full" /> <div className="absolute inset-0 flex justify-center items-center bg-black bg-opacity-50"> <p className="text-5xl font-bold text-center">Visual Tension</p> </div> </div> </section> <section className="mb-16"> <div className="grid grid-cols-1 md:grid-cols-3 gap-8"> <div className="relative overflow-hidden rounded-lg shadow-2xl transform transition-transform hover:scale-105"> <img src="https://placehold.co/400x400" alt="Surreal Artwork 11" className="w-full" /> <div className="absolute inset opium flex justify-center items-center bg-black bg-opacity-50"> <p className="text-2xl font-semibold text-center">Surreal Symbols</p> </div> </div> <div className="relative overflow-hidden rounded-lg shadow-2xl transform transition-transform hover:scale-105"> <img src="https://placehold.co/400x400" alt="Surreal Artwork 12" className="w-full" /> <div className="absolute inset-0 flex justify-center items-center bg-black bg-opacity-50"> <p className="text-2xl font-semibold text-center">Levitation</p> </div> </div> <div className="relative overflow-hidden rounded-lg shadow-2xl transform transition-transform hover:scale-105"> <img src="https://placehold.co/400x400" alt="Surreal Artwork 13" className="w-full" /> <div className="absolute inset-0 flex justify-center items-center bg-black bg-opacity-50"> <p className="text-2xl font-semibold text-center">Distorted Reality</p> </div> </div> </div> </section> </main> <footer className="flex justify-center items-center h-16 bg-black bg-opacity-50"> <p className="text-sm">© 2025 Surreal Dreams. All Rights Reserved.</p> </footer> </div> ); } } export default App;