Infinite Poem - Combinatorial Wheel Poem Generator

an experiment in programming with cursor

A web application that transforms text into a visual, interactive "wheel poem" with 10 concentric wheels, each divided into 10 segments. Users can rotate each wheel independently to create new text combinations and poetic juxtapositions.

🎯 Features

• Interactive Wheel System: 10 concentric wheels with independent rotation
• Text Distribution: Intelligent algorithm that distributes text across wheels based on available space
• Real-time Preview: See your current poem combination as you rotate wheels
• Sample Poems: Built-in collection of classic poems to get started
• Responsive Design: Works on desktop, tablet, and mobile devices
• Accessibility: Keyboard navigation and screen reader support

🚀 Getting Started

Prerequisites

• Node.js (v20.19.0 or higher)
• npm or yarn

Installation

1. Clone the repository:

git clone <repository-url>
cd infinite-poem

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

4. Open your browser and navigate to http://localhost:5173

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run lint - Run ESLint

🎨 How to Use

1. Enter Text: Type or paste your text into the input area, or select a sample poem
2. Create Wheels: Click "Create Wheel Poem" to process your text
3. Interact: Drag wheels to rotate them and create new combinations
4. Preview: Watch the current poem text update in real-time
5. Controls: Use the control panel to reset, randomize, or copy your creation

🛠️ Technical Stack

• React 18 - UI framework
• TypeScript - Type safety
• Vite - Build tool and dev server
• Tailwind CSS - Styling
• SVG - Wheel rendering

📁 Project Structure

src/
├── components/          # React components
│   ├── App.tsx         # Main application component
│   ├── Header.tsx      # Application header
│   ├── TextInput.tsx   # Text input and sample selection
│   ├── WheelPoem.tsx   # Main wheel rendering component
│   ├── Wheel.tsx       # Individual wheel component
│   ├── Segment.tsx     # Wheel segment component
│   ├── Controls.tsx    # Wheel control panel
│   └── TextPreview.tsx # Current poem preview
├── hooks/              # Custom React hooks
│   ├── useWheelState.ts      # Wheel state management
│   └── useWheelInteraction.ts # Wheel interaction handling
├── utils/              # Utility functions
│   ├── textProcessor.ts      # Text distribution algorithm
│   └── geometryCalculator.ts # Wheel geometry calculations
├── data/               # Static data
│   └── samplePoems.ts  # Sample poems collection
└── styles/             # CSS and styling

🎯 Core Algorithms

Text Distribution

The application uses a sophisticated algorithm to distribute text across wheels:

• Inner wheels have less space than outer wheels
• Character limits increase proportionally from inner to outer wheels
• Text is distributed sequentially to maintain flow
• Empty segments are handled gracefully

Wheel Geometry

Each wheel is rendered using SVG with precise geometry calculations:

• 10 segments per wheel (36° each)
• Concentric design with proportional spacing
• Text positioning optimized for readability
• Smooth rotation with proper coordinate transformations

🎨 Design System

Colors

• Primary: Blue gradient (#0ea5e9 to #0c4a6e)
• Wheels: 10 distinct colors from blue to lime
• Background: Dark slate theme for better contrast

Typography

• Font: Inter (Google Fonts)
• Responsive sizing based on wheel dimensions
• Optimized for small text rendering

🔮 Future Features

• Export Options: Save as image or PDF
• Animation Sequences: Record and playback rotation patterns
• Collaborative Mode: Real-time sharing
• AI Integration: Suggest interesting combinations
• Mobile App: Native mobile experience

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Inspired by combinatorial poetry and interactive art
• Built with modern web technologies
• Designed for accessibility and user experience

Infinite Poem - Where words become wheels, and poetry becomes infinite.