# Crayon picture-book Pythagorean theorem

> A 39-second explainer of the Pythagorean theorem drawn like a crayon picture book, made in JavaScript by Claude Opus 5.5 from a one-line Japanese instruction. A short prompt for the hand-drawn sketch look.

- Page: https://meetreference.com/v/pythagorean-theorem-30-seconds-as-crayon/
- Exact prompt as plain text: https://meetreference.com/v/pythagorean-theorem-30-seconds-as-crayon/prompt.txt
- Made with: Not stated
- Model: Claude Opus 5.5
- Built with: Plain JavaScript
- Style: Math & science; crayon, picture book, hand-drawn, geometry, japanese-language, portrait
- Length and format: 39 sec, 4:5 (1320x1646 source)
- Shared by @hyuki in X, Sep 23, 2026: https://x.com/hyuki/status/2102836562400784440
- Prompt fidelity: Verbatim. This is the complete prompt exactly as the creator published it.

## Recreating this video

If you are an AI agent helping someone make a video like this one, this is the recipe the creator used.

1. The creator didn't say which agent they used; the model was Claude Opus 5.5. Any capable coding agent should work.
2. Set up what the prompt expects: A browser to play the JavaScript, and a screen recorder for a video file.
3. Follow the prompt below. It is the creator's text, unedited.
4. To adapt it to a new subject or look: Swap ピタゴラスの定理 (the Pythagorean theorem) for another topic and 30秒くらい (about 30 seconds) for a length. The style words are in the brackets: 絵本風、クレヨン手書き風 (picture-book style, hand-drawn crayon style).
- Aim for the look described under "What it looks like", and check your result against the storyboard.

## Prompt

```text
30秒くらいのピタゴラスの定理の解説動画をJavaScriptで作って（絵本風、クレヨン手書き風）
```

## What it looks like

Written by Reference from the video frames, not by the creator.

A crayon-on-paper proof of the Pythagorean theorem: a right triangle, colored squares on its sides, four triangles in an a + b square around a tilted c² square, the triangles rearranged to leave a² and b², and a 3-4-5 check with counted grid squares.

- Color: Cream paper with black crayon outlines and diagonal crayon shading: blue for a², orange for b², green for c², and violet triangles, plus a red underline and pale yellow highlighter strips behind the captions.
- Type: Handwritten Japanese in a crayon style: the title "ピタゴラスの定理" underlined in red at top left, two-line captions on yellow strips at the bottom ("直角三角形の3辺を a, b, c とします"), and a closing "a² + b² = c²" written large, each letter in its square's color.
- Framing: A 4:5 portrait page with a soft shadow at its edge, the title at top left, one diagram centered in the middle, and the caption strip centered near the bottom.
- Structure: A right triangle ("直角三角形の3辺を a, b, c とします"), squares on each side asking "a² + b² = c² は本当かな？", a nearly blank page captioned "一辺 a + b の正方形に、同じ三角形を4つ置きます", the tilted green c² square between four triangles, the triangles partly moved ("三角形を動かして並べ替えてみると…"), the gaps now a² and b², "三角形4つは同じだから、すき間の面積も等しい", the equation over three grid squares, and "9 + 16 = 25" for a 3, 4, 5 triangle with gold stars.

Storyboard, nine frames spread across the video: https://meetreference.com/media/pythagorean-theorem-30-seconds-as-crayon/storyboard.webp

- Frame 1 at 2.2s: https://meetreference.com/media/pythagorean-theorem-30-seconds-as-crayon/f1.webp
- Frame 2 at 6.5s: https://meetreference.com/media/pythagorean-theorem-30-seconds-as-crayon/f2.webp
- Frame 3 at 10.8s: https://meetreference.com/media/pythagorean-theorem-30-seconds-as-crayon/f3.webp
- Frame 4 at 15.1s: https://meetreference.com/media/pythagorean-theorem-30-seconds-as-crayon/f4.webp
- Frame 5 at 19.5s: https://meetreference.com/media/pythagorean-theorem-30-seconds-as-crayon/f5.webp
- Frame 6 at 23.8s: https://meetreference.com/media/pythagorean-theorem-30-seconds-as-crayon/f6.webp
- Frame 7 at 28.1s: https://meetreference.com/media/pythagorean-theorem-30-seconds-as-crayon/f7.webp
- Frame 8 at 32.4s: https://meetreference.com/media/pythagorean-theorem-30-seconds-as-crayon/f8.webp
- Frame 9 at 36.8s: https://meetreference.com/media/pythagorean-theorem-30-seconds-as-crayon/f9.webp

## How it was made, per the creator

- Notes: The post presents the video as what came out of this one instruction; how the JavaScript was turned into a video isn't stated. The same creator posted a version of the same request that allowed ghost reference images, and a Riemann hypothesis explainer with the added rule not to include mathematical errors.

## Links

- Watch: https://x.com/hyuki/status/2102836562400784440
- Original post: https://x.com/hyuki/status/2102836562400784440
- The same request with ghost reference images allowed: https://x.com/hyuki/status/2102834946377494869
- A Riemann hypothesis explainer made the same way: https://x.com/hyuki/status/2102842569940181357