Make motion
mean something.

Look closely before you ask for “more dynamic.”

Watch once for the overall idea. Then choose one change to describe: what moves, when it starts, what remains still, and what the viewer should understand.

Watch 赛博小凡’s 30-second motion-design roundup on Douyin ↗

The source is inspiration for observation. The prompt below is course-authored; this page does not reproduce the creator’s prompts or video assets. Course coding practice uses Claude Code. No Opus upgrade or DeepSeek use is required.

This study focuses on the media sequence. Building a form-driven app belongs to the later web-app topics; it is not a prerequisite or a task here.

Explain a study session in twelve seconds.

How could a three-step study flow make its current step clear, while preserving the correct times and a readable still version?

Use a fictional task: Review chapter notes. Explain a 25-minute study session as three labeled steps: Prepare · 2 minutes → Work · 20 minutes → Reflect · 3 minutes.

The clip lasts 12 seconds; the study session lasts 25 minutes. Playback seconds control when a label appears. They do not change the study-time values or make this a live countdown timer.

1. Watch and choose one idea

   Use the video or English summary. Choose a movement that could clarify the current step: a highlight moving, a shape changing, or a label appearing. Describe its purpose before borrowing its appearance.

2. Describe three frames and their timing

   0–4 seconds: highlight Prepare, labeled 2 minutes. 4–8 seconds: highlight Work, labeled 20 minutes. 8–12 seconds: highlight Reflect, labeled 3 minutes. Keep the three step names and their times readable. Stop at 12 seconds on a still overview; Replay starts again at 0 seconds.

3. Prompt an original piece

   On paper, draw the three frames and add movement, timing, and still-version notes. If you choose an optional local motion preview, use the Claude Code prompt below. Use original shapes and wording. A working planner, input form, or video export is not required.

4. Inspect, then revise one difference

   Use the checks below. Identify one confusing label, timing choice, or motion. Change that part, compare again, and state which checks you actually performed. Both routes answer the same question and add no assigned submission.

Study Sprint: the reference behind the labels

The media piece uses the fixed 25-minute case. These reference values explain where its numbers come from; they do not ask you to build a planner.

Fictional example

A fictional student wants to divide one work block for Review chapter notes. Use only fictional information. The example explains time allocation; it does not promise better grades or personalized tutoring.

Exact rule

2 minutes prepare + (duration − 5) minutes work + 3 minutes reflect

Show the task, chosen duration, and all three labeled steps. For the featured 25-minute case, verify that 2 + 20 + 3 = 25.

Other durations

The original idea allows 15, 25, or 45 minutes. These optional calculations can help you check that a visual change has not altered the rule.

• 15 minutes: 2 prepare / 10 work / 3 reflect.
• 25 minutes: 2 prepare / 20 work / 3 reflect.
• 45 minutes: 2 prepare / 40 work / 3 reflect.

Boundary

No accounts, backend, API keys, model calls, tracking, or real personal/student data in the piece. No input form, calendar connection, public deployment, or paid tool is required.

Give motion a purpose and a boundary.

The paper route above is sufficient. If you want to try a coded media preview, select and copy this prompt into Claude Code. It asks for one fixed explainer, with no form or live planning logic. A local HTML preview is not automatically an exported video.

Use Claude Code to make an original, local Study Sprint motion preview. It is a 12-second explainer of a fictional 25-minute study session, not a live study timer, interactive planner, or exported video. Do not add an input form.

Task: Review chapter notes.
Study-time labels: Prepare 2 minutes; Work 20 minutes; Reflect 3 minutes.
Playback timing: 0–4 seconds highlight Prepare; 4–8 highlight Work; 8–12 highlight Reflect. Keep all three labels and times readable. Stop at 12 seconds on a still overview of the whole plan. Replay must begin again at 0 seconds. The 12-second playback must not change the 25-minute plan.

Use original shapes and wording. Explain how the motion helps a viewer identify the current step. Begin paused. Provide clearly labeled Play, Pause, and Replay controls, keyboard operation, and visible focus. Do not autoplay or flash. Include a readable still version and show it by default when reduced motion is requested. Keep the layout usable on a narrow screen. Do not promise video export.

Keep the reference rule unchanged: 2 minutes prepare, chosen duration minus 5 minutes work, and 3 minutes reflect. The 15 / 25 / 45-minute examples give 2 / 10 / 3, 2 / 20 / 3, and 2 / 40 / 3. These are reference values, not a request to build a form or planner.

Add no account, backend, API key, model call, tracking, or real personal data. Keep the preview local; no deployment is needed.

Explain the files changed. Check timing, readable labels, correct numbers, keyboard controls, a narrow screen, pause/replay, and the still/reduced-motion version. Inspect the result, revise one specific weakness, and repeat the affected checks. Report what you actually checked and anything still unverified.

You can use the same brief on paper: draw three frames, annotate seconds and study-time labels separately, and include the final still view. A storyboard walkthrough is evidence about the design; do not report it as a browser test.

Check what changed—and what must stay true.

• Meaning and timing

  Can someone identify Prepare, Work, and Reflect without guessing? Do the three playback stages occupy 0–4, 4–8, and 8–12 seconds, then stop on the still overview? Does Replay start again at 0 seconds? Are playback seconds clearly different from the study-time labels?

• Correct, unchanged results

  The featured 25-minute session must stay 2 / 20 / 3 before and after a visual revision. Check that the three times sum to 25. For an optional rule check, 15 gives 2 / 10 / 3 and 45 gives 2 / 40 / 3.

• Readable with or without motion

  Inspect the labels on a narrow screen or a narrow paper frame. The still version must communicate the same three steps and numbers. If you built a preview, test reduced-motion preference, keyboard focus, Play, Pause, and Replay. Confirm it starts paused and introduces no flashing.

• One revision and honest evidence

  Name one concrete weakness, the change you made, and what improved or remains uncertain. A paper route describes the intended behavior. A coded route checks actual browser behavior. Credit the source that influenced the idea and distinguish your own work from its examples.