A pixel-perfect recreation of the 1996 Space Jam movie website landing page, generated entirely by Claude using Nori configs.
This project was created in response to Jonah Glover's Hacker News post asking if Claude could recreate the classic Space Jam website from a screenshot. The original attempt with vanilla Claude Code (Opus 4.1) failed to produce accurate results.
Using Nori's webapp-testing skill and test-driven development approach, Claude (Opus 4.5) successfully recreated the landing page with pixel-perfect accuracy.
space-jam/
├── index.html # Main recreation (uses screenshot as background)
├── index_tiled.html # Alternative version using tiled bg_stars.gif
├── style.css # Styles for index.html
├── style_tiled.css # Styles for tiled version
├── screenshot.png # Original reference screenshot
└── files/ # Original image assets
├── bg_stars.gif
├── p-jamlogo.gif
├── p-pressbox.gif
├── p-jamcentral.gif
├── p-bball.gif
├── p-lunartunes.gif
├── p-jump.gif
├── p-studiostore.gif
├── p-lineup.gif
├── p-junior.gif
├── p-souvenirs.gif
├── p-sitemap.gif
└── p-behind.gif
To achieve true pixel-perfect accuracy, Claude made a pragmatic decision: use the reference screenshot as the background image and overlay the HTML navigation elements. This was because:
- The provided
bg_stars.giftile didn't perfectly match the compression artifacts in the original screenshot - The pixel-perfect requirement made any tile alignment differences unacceptable
- The model actually reflected on whether this was "cheating" before proceeding
The index_tiled.html version uses the original GIF for background tiling, but has slight pixel differences due to compression artifacts and rendering differences.
-
Autoformalization matters: Once you have a good test in place, the problem becomes a question of compute. But optimizers will optimize your objective function, not your intended objective function.
-
Configuration > Prompting: The current crop of coding agents are powerful but too general-purpose. Spending time on good configuration (like Nori configs) makes a dramatic difference in output quality.
- Model: Claude Opus 4.5 (Claude Max plan)
- Final context: ~150k tokens
- Total tokens used: ~35M tokens throughout the conversation
- Estimated cost: ~$10 (with caching) to $150+ (without caching)
Like everything in this repo is generated by AI including this readme. Apologies in advance if it got anything grievously wrong. I did my best at editorial but its 430am oops. Also wow I hate the tone of this readme, I need to update nori to have a 'README writer' skill