One Image, 2,616 Lines of Code: This Mechanical Octopus Can Be Taken Apart

One image, one mechanical octopus, a 25-second animation, and 2,616 lines of Three.js code. Fokki posted this demo on X; after Andy L reposted it, the comment section was first jolted by the line count, then began discussing another detail: Claude Opus 5.5 could first render a still frame, compare it with the reference image, fix gaps over three rounds, and only then move on to animation.

According to Fokki's original post, the process was not complicated: the image determined the appearance, and every petal, lens, and connector was built out of Three.js code. The first version looked like a toy, so it went back and stuffed 202 linkages and 480 wheels into the 8 tentacles. One draw call per tentacle, and each frame walks along the bent chain to calculate the pose. In the animation, every 2 to 3 seconds a part opens, a lens unscrews, a mantle hinge flips open, and a pump rotates and rises. At the 16th second, the entire octopus explodes apart on a 330-degree turntable, then is put back together before the turntable finishes its rotation. 25 seconds, 2,616 lines of code.

Three.js is a 3D library in the browser; what it generates is code that can rotate, be disassembled, and be embedded in a web page. For ordinary readers, you can understand it as an interactive model in a web page. For people with a development background, the two terms draw call and chained pose are more important: the former determines rendering overhead, the latter determines whether the tentacle bending is smooth and continuous. Fokki says one draw call per tentacle, meaning it did not hard-stack hundreds of parts as hundreds of independent draws. This detail explains the code structure better than the number of parts.

What is more worth looking at is the self-check step. Fokki wrote that Opus first rendered a still frame and placed it next to the reference image, fixed gaps for 3 rounds, and only then began touching the animation. This sentence is closer to the capability change than the 2,616 lines. A common problem in 3D generation is that when spatial relationships are wrong, no one catches it; getting it right in one pass depends on luck. Being able to compare against the reference image, find problems, and go back to fix them shows that it is trying to maintain a verifiable structure. The netizen 'Cyber Hermit' mentioned that being able to disassemble and reassemble shows that the relationships between parts were also built; hard-coded coordinates cannot do this.

But how to define 'finding a problem' is still a problem. The netizen Thugz asked: in the optimization step, if the problem definition is unclear, it is easy to go in circles. This doubt is not nitpicking. In the demo, what is fixed is the gap between the reference image and the still frame, and the goal is clear. When switching to product pages, advertising assets, or recreating models from old projects, the reference image and acceptance criteria both become blurry. Whether the same self-check loop can be reliably reused depends on the next step.

There is also an account in the comment section. The netizen 'Kk | AI Business Breakdown' did the math: one image exchanged for a 25-second animation, what is saved is mainly the communication cost of back-and-forth revisions and rework; typing time is secondary. 3D outsourcing quoted by lines or person-days will be awkward; clients may in the future assume that one image should produce results. The netizen 'Brother Quan's AI Startup Journal' said that previously a Three.js project of this size would take two weeks to write; now it is one image plus one sentence, and the self-check even comes with automatic repair. The production capacity ceiling has been pushed up a notch, but cost and controllability remain.

The demo is very complete, but don't rush to treat 2,616 lines as the new KPI. The line count looks the most eye-catching, but what should actually be looked at is the rework process: whether it can first self-check, then revise, then deliver on other models. The mechanical octopus can be taken apart and examined; whether this process can be taken apart and used is what to observe next.

Fokki original post: https://x.com/0x_fokki/status/2116289885870981296

Andy L repost: https://x.com/AndyL5cc/status/2116437524390572394

Workflow intro image compiled by netizens; data quoted from Andy L's original post and Fokki's video.