QoderCN + Qwen 3.8: One Prompt Yields a Physics Video, a Disassemblable 3D Watch, and More

Title: Alibaba's Codex, impressed me once again. Author: Silent Wang Er Tags: Agent, OpenAI, Artificial Intelligence

Hello everyone, I'm Second Brother.

Whether an Agent tool can turn an idea into a deployable product depends on its own engineering capabilities. Take a look at the first Case I completed with QoderCN + Qwen3.8-Flash: using a Memphis-style animation to demonstrate ice puck sliding and Galileo's inclined plane experiment, intuitively explaining Newton's first law. Isn't it impressive?

If you think the screenshot is not enough, I also recorded the screen; you can watch it at a glance.

Isn't it immediately attractive?

Most of the time, as long as we configure the right Skill and a prompt with clear goals, the delivery results from domestic Agent plus domestic model can still be impressive.

01. Install QoderCN and the Site feature

After downloading and installing the client, I suggest first trying the [Site] feature to get a direct feel for QoderCN's engineering ability to generate online sites.

The operation is simple: click the "Site" button at the bottom left of the page, then click [Add Site] at the top right.

Then tell QoderCN about our open-source projects, columns, and portfolio, and let it help us build a personal portfolio site.

After receiving the requirements, QoderCN generates a complete web project locally containing index.html, styles.css, app.js, and image assets, starts local preview to check desktop and mobile layouts, and after confirming, publishes to the qoder.zone online domain with one click. Take a look at the personal site QoderCN generated for me; isn't it nice?

I also recorded a screen video, so you can feel it.

02. QoderCN makes a Vibe video

After seeing the site feature, let's look at the first Case. I used my open-source one-minute-remotion Skill to let QoderCN drive Qwen3.8-Flash to produce a "Newton's First Law" Vibe science video.

Doesn't it make learning physics less boring all of a sudden?

If we had such animated courseware when we were in school, would physics concepts still be hard to grasp? This is also the greatest convenience of the AI era: as long as you have a smooth set of development tools, you can turn originally abstract book knowledge into intuitive animations.

Please read the one-minute-remotion/SKILL.md skill specification in the current workspace and produce a 1-to-2 minute Memphis-style Chinese science video about "Newton's First Law", completing the whole process from script writing to MP4 export in one go:
1. Script (save to docs/src/ai/one-minute/newton-first-law.md): Draft the spoken script strictly following the six-section structure of intro, terms, conclusion, example, why it holds, and ending. Start from pushing a book and ice puck sliding, deduce Newton's first law and the concept of inertia through Galileo's ideal double inclined plane experiment (the right inclined plane gradually flattens, and the ball, in order to return to its initial height, keeps rolling at a constant speed on the frictionless horizontal plane).
2. Voiceover and timeline: Call the built-in Volcano Engine TTS "Second Brother" voice to synthesize the full speech, generate spoken.txt, narration-lock.json, and beats.json that records the timing of each word, and measure the actual audio duration.
3. Memphis-style storyboard and animation rendering (1920x1080, 30fps): Write OUTLINE.md and Remotion animation components, using a light paper background, pastel geometric shapes, and deep blue outlines in Memphis illustration style, showing scenes like pushing a book, ice puck sliding, velocity and resultant force arrows, Galileo's double inclined plane experiment, and emergency braking with seatbelt in sequence following the voice rhythm.
4. Local preview and export verification: Start the Remotion Studio local preview service, check that the picture and subtitles do not overlap in the browser, then export an MP4 with Second Brother's voiceover.

After entering this prompt in QoderCN, its ability to handle multi-step tasks becomes evident.

It first reads the skill specification in the skills/ directory to draft the spoken script, then calls a local Python script to request the Volcano Engine TTS interface, generating the voiceover file voiceover.wav as well as the beats.json file recording the timing of each word.

The overall script level is decent; I made minor tweaks to a few phrases. You can feel it: Qwen's text capability is really good.

---
title: Newton's First Law
---

Hello everyone, I'm Second Brother. Today I'm going to vibe about Newton's First Law.

First, clarify two terms. Motion state refers to the magnitude and direction of an object's velocity; rest is the state where velocity is zero. If either the magnitude or direction of velocity changes, the motion state changes. Resultant force is the combined effect of all forces acting on an object.

Newton's First Law states that when no force acts on an object, it always maintains a state of rest or uniform linear motion.

Why does movement not need force to be maintained? Look at Galileo's ideal inclined plane experiment. Let a ball roll down the left inclined plane, it will climb up the right one; the smoother the plane, the closer the height it reaches to the release height. From this, Galileo inferred: if there were no friction at all, the ball would return to its original height.

If the right inclined plane is made gentler, the ball must roll farther to return to its original height. When the right plane is laid flat, the ball can never reach its original height again, so it keeps rolling at a constant speed along the horizontal plane.

In reality, no surface is absolutely smooth. Based on the work of Galileo and others, Newton summarized the First Law: force is not the cause of maintaining motion, but the cause of changing an object's motion state.

The property of an object to maintain its original motion state is called inertia. Inertia is an intrinsic property of an object, not a force; the greater the mass, the greater the inertia.

In reality, objects always experience forces; as long as the resultant force is zero, the effect is the same as no force, and the motion state remains unchanged; only when the resultant force is non-zero does the motion state change. An ice puck can slide far because of inertia; the smaller the friction on the ice, the closer the puck's speed is to constant.

After the script was confirmed, QoderCN first wrote the OUTLINE.md storyboard, dividing the entire video into 11 scenes such as velocity and resultant force, Galileo's double inclined plane experiment, and inertia comparison. Then it wrote remotion/src/Chapter1.tsx and remotion/src/ThreeScenes.tsx animation components, using a light paper background, pastel geometric color blocks, and deep blue outlines in Memphis style to draw each physics scene.

The video opens with Galileo's ideal inclined plane experiment and the title of Newton's First Law; the style is quite cute.

Then it demonstrates the relationship between velocity and resultant force with arrow animations.

Then, through the ball rolling on the left and right inclined planes and the step-by-step flattening of the right plane, Newton's First Law is intuitively derived.

After the code was written, QoderCN automatically started the Remotion Studio preview service on local port 3121, checking frame by frame that the picture and bottom subtitles did not overlap.

After confirming that everything was fine, it exported the video.

03. QoderCN makes a 3D mechanical watch

While the first video task was still running in the background, I created a second task in QoderCN's left task bar, letting QoderCN drive Qwen3.8-Flash to build a disassemblable 3D mechanical watch web page.

The full prompt is as follows; you can copy it into QoderCN to reproduce.

Please use Vite + Three.js to build an interactive "3D mechanical watch movement laboratory (The Mechanical Watch)" web application, without relying on external 3D model files; build all 29 three-dimensional parts in code and implement linkage:
1. Interface layout: cream-colored vintage instruction manual style. On the left are the title and 7 stage buttons (1 Flip case back / 2 Rotate to wind / 3 Balance wheel oscillation / 4 Gear transmission / 5 Disassemble movement / 6 Reassemble / 7 Simulate 24 hours); on the right is a 3D mechanical watch on a dark green work mat. Below, six metric cards display in real time: frequency (28,800 times/hour), today's oscillation count, power reserve (up to 40.0 hours), seconds wheel rotations, jewel count (21), and part count (29). At the bottom, there is a movement principle explanation and five dial color switch buttons.
2. 7 layers, 29 parts modeling: build 29 parts in 7 layers from bottom to top, including case, transparent sapphire case back, strap, crown, mainspring barrel, center wheel, fourth wheel, seconds wheel, escape wheel, pallet fork, balance spring, and ruby bearings.
3. Interactive effects for 7 stages:
   - Stage 1: Flip the watch body 180 degrees to show the internal movement through the transparent case back;
   - Stage 2: Drag the crown up and down to wind, power reserve increases from 0 to 40.0 hours;
   - Stage 3: Zoom in to observe the balance wheel swinging back and forth, provide a slow motion switch to see the escape wheel and pallet fork locking and releasing;
   - Stage 4: Highlight the gear transmission process, driving the seconds, minute, and hour hands to run at their respective speeds;
   - Stage 5 and 6: when clicking disassemble, first stop the balance wheel, then spread the 29 parts into 7 layers upward, support mouse drag rotation for observation, click assemble to close and resume operation;
   - Stage 7: Accelerate simulation of 24-hour operation and power consumption.

Take a look at the multi-task parallel execution state in QoderCN's task list.

This is the front of the mechanical watch.

Then we look at the back.

This Case showcases QoderCN's ability to split code and manage multi-file projects.

QoderCN automatically initialized a standard Vite project in the local workspace, splitting the code into four files with clear responsibilities. src/geometry.js defines the 3D geometry of gears, mainspring, and case; src/parts.js assembles the 29 parts into a complete movement in 7 layers from bottom to top; src/watch.js controls winding and hand rotation; src/main.js binds the 7 buttons on the left side of the page to control camera switching and data panel refresh.

After writing the code, QoderCN automatically executed npm run build in the terminal to verify that the project could be packaged, then started a local development server on port 5182 to preview the 3D rendering effect.

When clicking the left buttons to switch stages, whether flipping the watch body, dragging the crown to wind, or expanding the 29 parts into 7 layers, the transitions are smooth.

04. QoderCN makes an engineering blueprint

After testing the mechanical watch, we created a third task in QoderCN to reproduce a new Case, letting QoderCN drive Qwen3.8-Flash to make a set of interactive 3D architectural blueprints for the Baochu Pagoda and Leifeng Pagoda in West Lake, Hangzhou.

The difficulty of modeling ancient buildings with code lies in accurately reproducing the proportions of the octagonal tower body, flying eaves, and pagoda top, while ensuring that the 2D elevation in the top left corner is consistent with the 3D model in the middle. The full prompt is as follows; you can also copy it to reproduce.

Please use Vite + Three.js to write an interactive 3D web application "Hangzhou West Lake Ancient Architecture Engineering Blueprint (Baochu Pagoda / Leifeng Pagoda)", supporting one-click switching between Baochu Pagoda and Leifeng Pagoda at the top:
1. Visual style: light gray-blue grid coordinate paper background; ancient pagodas rendered in blue semi-transparent wireframe material, showing an architectural blueprint effect.
2. Page layout:
   - Top left: display the current pagoda's 2D elevation (Baochu Pagoda total height approx. 45.3 meters, octagonal 7 stories; Leifeng Pagoda total height approx. 71.7 meters, octagonal 5 stories) and octagonal plan view;
   - Top right: provide buttons for rotate, pan, front view, side view, top view, local zoom, and view reset;
   - Bottom center: left side shows building nameplate, right side provides "Expand / Collapse" buttons.
3. Pagoda modeling and disassembly interaction:
   - Build the octagonal 7-story Baochu Pagoda and octagonal 5-story Leifeng Pagoda, restoring the base, body, flying eaves, railings, and top structures;
   - When clicking the "Expand" button or pressing the space bar, the entire tower expands vertically into 6 segments; each segment automatically extends an indicator line with Chinese and English names; when dragging the mouse to rotate the viewpoint, the indicator lines update in real time with the tower body.

First, look at the blueprint main interface of the two pagodas in the default state.

Then look at the effect after clicking the "Expand" button at the bottom: the pagoda splits into six segments and expands upward, showing bilingual indicator lines.

This Case reflects QoderCN's rigor in front-end project design.

The top left corner of the page needs to draw the 2D elevation, while the middle needs to render the 3D model. If the two modules hard-code dimensions separately, it is easy to run into height inconsistencies between the 2D drawing and 3D model during modifications. Therefore, QoderCN created a separate src/specs.js configuration file to centrally define the total height, floor height, and width of each level for both pagodas.

On this basis, src/panels.js reads this configuration file to draw the 2D elevation in the top left, and src/tower.js reads the same configuration to generate the 3D model in the middle, ensuring data consistency between the 2D drawing and 3D model from the source.

When clicking the "UNFOLD" button to expand the pagoda into six segments, src/overlay.js converts the spatial coordinates of each 3D component into screen 2D coordinates in real time, so no matter how you rotate or zoom the viewpoint, the indicator lines always point accurately to the corresponding tower sections.

05. QoderCN redesigns a personal website

The fourth Case continues to replicate an interesting web interaction effect, letting QoderCN drive Qwen3.8-Flash to make a homepage interactive prototype for my open-source knowledge base site "Java Advanced Road" (javabetter.cn), where you can drag and pinch the face with the mouse.

To achieve this elastic face-pinch effect without introducing a third-party physics engine, you need to use native WebGL to divide the avatar image into a fine grid and calculate the stretching and rebound of grid vertices with physics formulas. The full prompt is as follows; replace it with your own avatar image to run.

Please use native WebGL (without relying on third-party physics or rendering libraries) to create an interactive "Second Brother face-pinch easter egg" homepage prototype for "Java Advanced Road" (javabetter.cn), implementing drag-stretch and elastic rebound effects:
1. Page layout: on the left are the "Java Advanced Road" navigation bar, main title ("Hello, I am Silent Wang Er / Second Brother"), personal and open-source knowledge base introduction, learning route entry, and search box; on the right is a circular orange background hosting the Second Brother avatar interactive canvas; at the top are a light/dark mode toggle, sound toggle, and parameter adjustment panel.
2. WebGL grid division and rebound formula: divide the avatar into a 72x72 grid, leaving ample transparent margins around the canvas to ensure the face can be pulled out of the orange disc. Each grid point records the current stretch displacement, and a damped wave equation calculates the connected deformation of adjacent facial features in real time; after releasing the mouse, the grid swings elastically a few times and returns to its original state in about 2 seconds.
3. Mouse face-pinch interaction and lighting effects:
   - When holding the mouse on any position of the avatar and dragging, it stretches the nose, cheeks, glasses, and chin together; after release, if you click again during the rebound, you can continue to grab the face;
   - In the fragment shader, calculate brightness and highlights in real time based on the degree of grid deformation, enhancing the three-dimensional feel of skin stretching, and provide softness and damping adjustment sliders.

Take a look at the actual measured picture after QoderCN wrote the code in the local workspace and I held the nose in the browser and dragged it to the right.

After releasing the mouse, the stretched cheek rebounds quickly, following a few slight shakes and then returning to its original state.

In this Case, QoderCN split the project into two core files: js/plushie.js and js/main.js. js/plushie.js is responsible for writing WebGL shaders, dividing the 72×72 image grid, and calculating the stretch displacement and rebound velocity of grid nodes each frame; js/main.js is responsible for synthesizing drag sound effects, switching light/dark themes, and handling search interactions.

In addition to writing core code, QoderCN also uses the built-in preview to troubleshoot layout issues.

To allow the avatar to be pulled outside the orange circular background, the WebGL canvas is larger than the circular background, with transparent margins around it. During browser preview, QoderCN discovered that the enlarged transparent canvas blocked the theme switch button at the top of the page, and on narrow mobile screens it caused a horizontal scroll bar. It then proactively adjusted the canvas click-through property and page width styles to solve the issues of unclickable buttons and horizontal scroll on mobile.

Ending

My biggest feeling is that Qwen3.8-Flash + QoderCN has greatly reduced the cost of trying complex creative ideas on a daily basis, and QoderCN's engineering capability determines whether these ideas can be transformed into well-structured, maintainable complete projects.

Whether it is reading a Skill to automatically complete voiceover synthesis and Memphis-style animation rendering, or splitting a complex 3D mechanical watch and West Lake ancient pagodas into multiple source files with clear responsibilities, and automatically troubleshooting page occlusion and mobile layout issues through browser preview, QoderCN demonstrates mature project development and delivery capabilities.

The prompts for each Case in this article are already organized.

See you next time.