An immersive, interactive poetry discovery platform with cutting-edge visual effects
- Aurora Background Effects: Dynamic animated gradients creating a mesmerizing backdrop
- Glassmorphism UI: Multi-layered glass effects with backdrop filters
- Neon Aesthetics: Glowing text with gradient effects and custom animations
- Floating Particles: Ambient particle system for depth and atmosphere
- 3D Card Interactions: Mouse-responsive tilt effects on desktop
- Optimized for mobile, tablet, and desktop devices
- Touch-friendly interactions with no blue tap highlights
- Adaptive typography and spacing
- Performance-optimized animations
- Multiple Themes: Random, Love, Nature, Melancholy, and Mythology
- Dynamic Word Clouds: Visual representation of poem keywords using D3.js
- Smooth Animations: Staggered line reveals and transition effects
- Smart Error Handling: Automatic retries and fallback mechanisms
- Zero Dependencies: Pure vanilla JavaScript (except for visualization libraries)
- API Integration: Real-time poem fetching from PoetryDB
- Modern CSS: CSS Grid, Flexbox, Custom Properties, and advanced animations
- Accessibility: Semantic HTML and keyboard navigation support
- A modern web browser (Chrome, Firefox, Safari, Edge)
- Internet connection for API access and CDN resources
- Clone the repository:
git clone https://github.com/Saganaki22/Poems.git
cd Poems
- Open
index.html
in your web browser:
# Using Python
python -m http.server 8000
# Using Node.js
npx serve
# Or simply double-click index.html
Poems/
βββ index.html # Main application file
βββ favicon.svg # Favicon
βββ 404.html # Custom 404 error page
βββ og-img.jpg # OG Image
βββ LICENSE # MIT
βββ README.md # Project documentation
- Select a Theme: Choose from the available theme pills or stick with random
- Generate Poems: Click "Conjure New Verse" to fetch a new poem
- Interact: Hover over the poem card for 3D effects (desktop only)
- Watch the Word Cloud: See key words from the poem float in the background
- Random: Discover poems from various authors and styles
- Love: Romantic verses from Shakespeare, Burns, and more
- Nature: Natural beauty through Wordsworth, Frost, and others
- Melancholy: Darker themes from Poe, Blake, and Dickinson
- Mythology: Epic tales from Keats, Byron, and Shelley
- HTML5: Semantic markup and structure
- CSS3: Advanced animations, gradients, and effects
- JavaScript ES6+: Modern syntax and features
- Tailwind CSS: Utility-first CSS framework
- D3.js: Data visualization for word clouds
- D3-Cloud: Word cloud layout plugin
- PoetryDB API: RESTful API for poetry content
- Google Fonts: Premium typography (Space Grotesk & Playfair Display)
- Glassmorphism: Translucent UI elements with blur
- Neumorphism: Soft, extruded effects
- Responsive Design: Mobile-first approach
- Progressive Enhancement: Core functionality works everywhere
--neon-teal: #00ffcc
--neon-purple: #9945ff
--neon-pink: #ff0080
--glass-bg: rgba(12, 12, 20, 0.4)
--glass-border: rgba(255, 255, 255, 0.08)
Creates a dynamic, ever-changing background using CSS animations and gradients:
@keyframes aurora {
0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
33% { transform: translateY(-20px) rotate(120deg) scale(1.1); }
66% { transform: translateY(20px) rotate(240deg) scale(0.9); }
}
Automatically handles API failures with intelligent fallbacks:
// Retry with different authors on failure
// Fall back to random poems if themed search fails
// Implement timeout handling for slow connections
Uses D3.js to create floating word visualizations from poem content, filtering out common words and sizing based on frequency.
This project is open source and available under the MIT License.