- Three-Phase Animation - Opening text → logo → scrolling crawl with animated starfield background
- Custom Fonts - Star Jedi font (regular for titles, hollow for logo)
- Playback Controls - Play/pause, seek slider, and fullscreen mode
- Keyboard Shortcuts - Space (pause/resume), Arrow keys (seek ±5s), F (fullscreen), Escape (stop)
- URL-Based Sharing - Shareable links with encoded crawl data (no database required)
- Accessibility - Respects
prefers-reduced-motionpreferences - Responsive Design - Optimized for desktop and mobile
- Privacy-Focused - All data stored in URL, no server-side storage
- Node.js 18+ and npm (or yarn/pnpm)
# Clone the repository
git clone https://github.com/mochixlb/starcrawler.git
# Navigate to the project directory
cd starcrawler
# Install dependencies
npm install
# Start the development server
npm run devOpen http://localhost:3000 in your browser to see the application.
- Next.js 16 - React framework with App Router
- React 19 - UI library
- TypeScript - Type safety
- Tailwind CSS 4 - Utility-first CSS framework
- Motion - Animation library
- Lucide React - Icon library
- Zod - Schema validation
- @hexagon/base64 - Base64 encoding for URL data
- react-error-boundary - Error boundary component
For production deployment, set the following environment variable:
NEXT_PUBLIC_SITE_URL=https://your-domain.comImportant: The URL must be a valid HTTPS URL without a trailing slash.
# Create production build
npm run build
# Start production server
npm start# Run tests
npm test
# Run tests with UI
npm run test:ui
# Run tests once
npm run test:run
# Run tests with coverage
npm run test:coverageThe project includes a comprehensive test suite with 112 tests covering validation logic, utility functions, and UI components.
- Enter opening text, logo, episode number, subtitle, and crawl text
- Click "Play Crawl" to start the animation
- Use controls to pause, seek, or toggle fullscreen
- Click "Share" to copy the URL to your clipboard
Animation timing, colors, and fonts are centralized in lib/constants.ts and app/globals.css for easy customization.
starcrawler/
├── app/
│ ├── page.tsx
│ ├── layout.tsx
│ └── ...
├── components/
│ ├── crawl/
│ └── ui/
├── lib/
│ ├── constants.ts
│ ├── types.ts
│ ├── utils.ts
│ └── validation.ts
└── public/
└── fonts/
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.