Show HN: Beautiful interactive explainers generated with Claude Code(paraschopra.github.io)
paraschopra.github.io
Show HN: Beautiful interactive explainers generated with Claude Code
https://paraschopra.github.io/explainers/
30 comments
Kinda funny, because on the surface it looks really pretty, but if you dig a little deeper the flaws emerge. For example in the llm explainer section 3: king - man + woman = queen. But if I input queen - woman + man = ???
I guess that is what "one shot" ai generated code gets without any human or even ai review
I guess that is what "one shot" ai generated code gets without any human or even ai review
Pretty much, Ive tried the other examples and none of them work
Yeah, that specific one doesn't work so well but apart from it, does any other example not work?
The Fourier transform audio examples fooled me. The example sounds and slider for them appeared consistent as far as I could tell... but then again I don't know much about Fourier transforms.
Maybe I'm out of the loop but have to say this is the first time I have seen an LLM generate a webpage with working audio widgets.
Maybe I'm out of the loop but have to say this is the first time I have seen an LLM generate a webpage with working audio widgets.
If you liked that explanation of Fourier transforms, you'll probably like this one: https://www.jezzamon.com/fourier/index.html
yep, i was pretty surprised by audio widgets too.
Are these animated visualizations in the sky-explainer all original? If so, I am blown away by the visual consistency and meaningfulness of these throughout the article.
Yeah, all of it was done by Opus 4.6
And as a bonus, sometimes the information is correct!
yes, i noticed that occasionally but i'm curious which one did you find is incorrect?
Oh this was just snark.
There was a discussion yesterday that LLM generated “Show HN” posts should be moved to another thread :)
Nevertheless, it looks nice but I can’t be sure that texts are correct. Did OP check everything because she/he knows deeply the topic?
Citations give credits to text but can we be sure about them if they are automatically generated? Live links to arXiv or ResearchGate would be much better.
Graphics and visualisations look great, well done.
Nevertheless, it looks nice but I can’t be sure that texts are correct. Did OP check everything because she/he knows deeply the topic?
Citations give credits to text but can we be sure about them if they are automatically generated? Live links to arXiv or ResearchGate would be much better.
Graphics and visualisations look great, well done.
I verified the Fourier one and the LLM one. The scaling law one is likely okay too as I long back read the book.
Looking great, how did you standardized animations / canvas work? Did AI help?
I pointed Claude Code towards https://explainers.blog/posts/why-is-the-sky-blue/ , take screenshots and build something like it on the topic provided.
For the LLM explainer, did you point Claude at this one? https://explainextended.com/2023/12/31/happy-new-year-15/ This page Claude assisted page rhymes with that one. Sorta.
The Fourier transform one is really cool. I loved the 5x oscilloscopes builder and the "draw your own wave" widget. Also, seeing the correlation coefficients of the 3Hz + 7Hz wave was really neat.
Please share prompts or md files so we can generate more!
Current prompt is like this:
I want to build a self-contained html/js/css file explainer page as close as possible to this explainer: https://explainers.blog/posts/why-is-the-sky-blue/
What I want you to do is this: - Install playwright and chromium headless to take screenshots of https://explainers.blog/posts/why-is-the-sky-blue/ and interact with the page to deeply understand its style, aesthetics, tone, interactivity, visuals, fonts, etc. - Make comprehensive notes of what you observe so you can implement EXACTLY that when building your explainer - Then on the topic provided below plan to build an explainer with similar length, quality, interactivity, writing style, fun, informative as the article given - produce animations in svg (or otherwise) and interactions as necessary. Similar colour scheme but fun/vibrant/happy. Be very very creative. Act like an expert UI/UX designer who can build stunning explainers. Target it for intelligent hacker-news reader. - Get your plan verified by codex - Produce page one small change at a time. Don't output big chunks in one go. But pay extra attention to number of sections and length of the explained. I want it to be as comprehensive as possible (don't skimp on length) - Keep testing what you produce via playwright on chromium headless.
After you’re finished with index.html, can you check via chromium that all animations, diagrams and interactions that they match with their captions and are visually ok (not too small, large, overlapping, etc.). Sometimes there are factual errors in what the caption or text says and what the diagram suggests.
Topic: diffusion models from first principles
I want to build a self-contained html/js/css file explainer page as close as possible to this explainer: https://explainers.blog/posts/why-is-the-sky-blue/
What I want you to do is this: - Install playwright and chromium headless to take screenshots of https://explainers.blog/posts/why-is-the-sky-blue/ and interact with the page to deeply understand its style, aesthetics, tone, interactivity, visuals, fonts, etc. - Make comprehensive notes of what you observe so you can implement EXACTLY that when building your explainer - Then on the topic provided below plan to build an explainer with similar length, quality, interactivity, writing style, fun, informative as the article given - produce animations in svg (or otherwise) and interactions as necessary. Similar colour scheme but fun/vibrant/happy. Be very very creative. Act like an expert UI/UX designer who can build stunning explainers. Target it for intelligent hacker-news reader. - Get your plan verified by codex - Produce page one small change at a time. Don't output big chunks in one go. But pay extra attention to number of sections and length of the explained. I want it to be as comprehensive as possible (don't skimp on length) - Keep testing what you produce via playwright on chromium headless.
After you’re finished with index.html, can you check via chromium that all animations, diagrams and interactions that they match with their captions and are visually ok (not too small, large, overlapping, etc.). Sometimes there are factual errors in what the caption or text says and what the diagram suggests.
Topic: diffusion models from first principles
Thank you very much!
Are they accurate? How do you verify?
One-shot - how did you review that the output is accurate?
I read all of the outputs.
Would make one piece on optical interferometry? Inalways struggle explaining this with simple terms when asked to.
It generated this: https://paraschopra.github.io/explainers/optical-interferome...
I haven't checked it, but I'm curious about your feedback.
I haven't checked it, but I'm curious about your feedback.
What was the source of inspiration for Claude? I skimmed through the text and it does not look too bad, but devil is in the details and I need more time to go throught the fine prints. One remarks is that Young slit experiment could show what happens with a single slit vs 2
It's mindblowing while reading this that I had no idea they were LLM generated.
> Asking CC to verify its plan via codex
How does this work? You tell it to call `codex exec`?
How does this work? You tell it to call `codex exec`?
In something like ADK, you can have multiple agents and subagents, each can have it's own prompt and model assigned, and they can just do their thing as normal.
One can always give it the CLI and keys to any service, chat bot or otherwise
One can always give it the CLI and keys to any service, chat bot or otherwise
Yes, the skill is something like the following:
# Codex Verification Skill
Use OpenAI Codex as an independent reviewer via `codex exec`.
## How to Call Codex
*Standard pattern with answer extraction:* ```bash CODEX_OUTPUT=$(timeout 120 codex exec '<your prompt here>. Put your complete analysis inside <answer></answer> tags.' 2>/dev/null)
# Codex Verification Skill
Use OpenAI Codex as an independent reviewer via `codex exec`.
## How to Call Codex
*Standard pattern with answer extraction:* ```bash CODEX_OUTPUT=$(timeout 120 codex exec '<your prompt here>. Put your complete analysis inside <answer></answer> tags.' 2>/dev/null)
Recently an amazingly beautiful explainer was shared on HN: https://explainers.blog/posts/why-is-the-sky-blue/
I loved it so much that I wished more topics were explained that way. So, I decided to stress-test today's frontier models (Opus 4.6 in Claude Code) to generate similar explainer on any given topic WITH (almost) one shot and minimal nudging.
I'm launching with four topics: Fourier transformation, scaling laws in bio, cellular automata and LLMs.
I would let you be the judge, but I'm quite liking them.
Some things I learned:
- Prompting CC to test what it builds using headless chromium is essential - There are subtle bugs in explanations (like in one animation human lifespan is 40 years) - Asking CC to verify its plan via codex works really well
I do want to reiterate that the pages generated were mostly one-shot, which amazed me given how detailed the pages + animations are.