I successfully recreated the 1996 Space Jam website with Claude
2 days ago (theahura.substack.com)
Recent and related: I failed to recreate the 1996 Space Jam website with Claude - https://news.ycombinator.com/item?id=46183294 (430 comments)
2 days ago (theahura.substack.com)
Recent and related: I failed to recreate the 1996 Space Jam website with Claude - https://news.ycombinator.com/item?id=46183294 (430 comments)
I wrote a comment saying that this should be possible with a proper playwright harness and screenshot taking. My comment ended up in the negatives (though curiously no one stopped to explain why), as if I was saying something so absurdly inaccurate that it wasn’t even worth rebutting. Thank you for actually running the experiment and proving it - I was almost annoyed enough to do it myself.
I couldn’t understand why it had happened - it felt about as logical to my mind as writing a comment that Rust was faster than Node. I feel there is a strong anti-AI sentiment here, to the point that people will ignore evidence presented directly to them.
Personal vendetta aside, I enjoyed this post! You had some clever tricks I wouldn’t have considered. In fact, the idea of producing a pixel diff as output was particularly imaginative. And the bit about autoformalization definitely hits on something I’ve been feeling when working with AI recently.
EDIT: I notice my comment yesterday is in the positives. Please don’t vote it up. That was not my intention here.
There's a lot of LLM haters, simple as that.
For posterity: Claude is no longer “just” an LLM you’re interacting with.
I use AI everyday. But some AI adopters are getting a bit culty as well.
10 replies →
Note that I didn't even it tell it to use a pixel diff. Claude w/ Nori did that on its own by following the Nori TDD skill. I did very little, I'm actually very lazy :D
There is a quote about lazy developers, but I too lazy to search for it.
1 reply →
I didn't get downvoted yesterday but I got pretty far strongly hinting Claude should use very basic image processing approaches and it went for opencv very successfully. It was very fast on the image layout but failed pretty hard on the footer. This morning I decided to walk it through basic image processing for text detection and word building and that went pretty well but I didn't tell it what we were doing and it was too much me telling it what to do. It did sort of realize what we were doing at one point. I was thinking about trying again with just a nudge to think about using basic OCR image processing techniques to detect words and lines and see what Claude comes up with. Was also wondering what it would do if I just told it to use tesseract or paddleocr.
Voting is meant to allow a community to police itself to some extent, although the downside to that is it incentivizes controlling the discussion over contributing to it. It’s a lot easier to vote in accordance with your own beliefs than articulate counter-arguments. The prisoner dilemma takes hold, people stop visiting as they get frustrated by the downvoting, and a bubble forms. It’ll be interesting to see how AI changes the online discussion landscape.
Also note that votes don't just mean agree/disagree. I frequently upvote comments I disagree with and downvote comments I agree with. The votes place the comments in the discussion ranking so plenty of people vote this way.
One example of this is I might like a conversation that's responding to a comment I don't like. But it's a common misunderstanding so I want the conversation to be boosted. Therefore I upvote the comment I disagree with because it's parent to the comments I want to be more visible.
I don't think I'm the only one that does this on HN. And I think doing this can help reduce the repeated comments. In the above example an early common misconception might get downvoted, not seen by others, and then repeated by some, where it can then rise because it's seen by a different subset.
Anyways, I don't think people should vote strictly on agree/disagree
Dude, the recreation is a joke (hopefully an intentional one). It uses the screenshot instead of the assets.
Go ahead, turn on the Web Inspector, and remove the body background:
https://tilework-tech.github.io/space-jam/screenshot.png
The article mentions this:
> So it kind of cheated, though it clearly felt angst about it. After trying a few ways to get the stars to line up perfectly, it just gave up and copied the screenshot in as the background image, then overlaid the rest of the HTML elements on top.
3 replies →
Please read the blog post!
5 replies →
I haven't seen your original comment but "It could work if they did it better" is in general a low value comment.
You should go read it and see if you can tell me a way I could improve it. I felt I gave actionable advice, but I’m always happy to know if I could have said things better.
3 replies →
It is a task that could be _easily_ done manually in much shorter time without AI, probably by developers who even love to develop. The reaction on this shouldn't be misjudged as anti-AI. A lot of people, including me, just do not get it! For scientific purposes? Ok, fair enough. But what is the further meaning of this exercise?
The point is that if we agree that this task is truly a one shot, as long as you agree it’s faster to prompt than code, then while you “easily” do this task in around an hour (or however long you say it will take you), I’ll prompt Claude in around 5 minutes, and get a few more things done while I let it run in the background. What am I missing from your argument?
12 replies →
For me it's more that I'm not a web developer and it would definitely take me way longer to research all the parts of doing this. I have booksmarts (at best) about basic CSS and have given up trying to keep up with javascript anything.
It's seemingly an experiment to see how an LLM performs when the task is just outside of its milieu. The answer is not very well.
Related yesterday: I failed to recreate the 1996 Space Jam website with Claude (500 points, 409 comments) https://news.ycombinator.com/item?id=46183294
Which is what prompted him to try creating it.
It’s prompting all the way down.
So he had to prompt AI to prompt a human to prompt AI (assuming OP is human)
Hey! You did it! I'm going to update my original blog post linking this one.
This version just pastes the screenshot as background.
Yes, anyone who reads the post will find that out because it says it in the post.
3 replies →
Oh you're right. I read it a bit too quickly this morning and thought it had just done that initially to compare planet placement. Too bad.
2 replies →
Wasn’t the OG Space Jam website an image map? Not so different
1 reply →
Wow, that is complex stuff! In the meantime I could have recreated this twice manually. :-D
Do it, and write a blog post about it:
I successfully recreated the 1996 Space Jam website twice, without using any LLMs
:p
:-D Haha, that's a good one.
1 reply →
Please record a video of doing such - I suspect it may take more active effort than you suspect :-)
Well, if you take the screenshot+absolutely positioned invisible anchors approach that Claude eventually settled on (in half an hour), you could probably do it much quicker. Of course having knowledge of the solution like that is kind of cheating.
It would be a funny thing with some surprises, that is for sure. :-D But, I still remember how to do good table designs, so I think I could manage it fairly quick. (Last words of a web developer..) :-)
It tables so it works in Netscape 4? Hell it was probably Netscape 2 or something. Have Claude spin that up and run it.
Oh yeah, and no cheating and using CSS.
>> Note: please help, because I’d like to preserve this website forever and there’s no other way to do it besides getting Claude to recreate it from a screenshot.
This makes zero sense from a preservation perspective, and basic logic follows that if you wait it will be easier to recreate it when and if you actually need it for some reason.
This was sarcasm
https://tilework-tech.github.io/space-jam/
The site claude made is live on github pages now too, enjoy
Does not render correctly here. It does not zoom properly and a window resize also have weird effects. Recreation not finished I guess.
From the article, Claude asked:
> The screenshot shows viewport-specific positioning - should we match at a specific viewport size or make it responsive?
And the author responded:
> exact screenshot dimensions
So it's only intended to replicate the screenshot, but I do agree that making it center/zoom properly would've been more interesting.
for me its not center aligned
Yeah, it renders quite differently depending on screen/window geometry.
> "Optimizers will optimize your objective function, not your intended objective function."
Extremely important to remember when using LLMs.
Might Google Antigravity be able to do this right out of the box? I believe it has a browser that can take screenshots.
When do we start putting the prompt we used in the commit message?
There were a few prompts that went into a single commit so that doesn't quite make sense in this case. I posted the transcript, both in the original jsonl format and in markdown
Agent files have been static.
No reason you can’t ask them to make their own living summaries of what they’ve done, tried and not gotten done, etc - for another instance of “themselves”, another agent.
There are some interesting takes around committing plans that are all executed by the same prompt as an artifact
I see this as a logical rebuttal
reads more like advertising for OPs nori tool, a small wrapper around markdown files
body { background: url('screenshot.png') no-repeat; background-size: 1791px 1000px; background-color: #000; position: relative; }
is this a joke?
Please read the blog post!
I have, and I couldn't believe what it was saying and had to go see the code to verify. I'm really struggling to believe that anyone would consider this a "coding success".
2 replies →