What is motion design: how moving graphics are built, shown on ten Reels drawn in code

Motion design is graphic design that moves over time

Most people meet motion design before they have a name for it: a logo that assembles itself before a video, a price that counts up in an advert, words that drop onto a Reel on the beat. Wikipedia describes motion graphic design, also known as motion design, as a subset of graphic design that combines design with motion graphics and video production. Nothing has to be filmed. The material is type, shapes, icons, interface elements and numbers.

The same article separates it from animation as an art form, which leans on cinematic effects and storytelling to build a narrative. Motion design usually sets abstract objects, text and graphic elements in motion instead. For a buyer the line is practical: a cartoon with characters and a plot is an animation order, a clip explaining a service with type and diagrams is the other kind. Wikipedia names film titles, advertising and interface design among its uses.

Timing, easing and springs: the grammar of movement

Animators described the basics long before software. The twelve basic principles of animation, introduced by the Disney animators Ollie Johnston and Frank Thomas in their 1981 book, still work as a checklist. Timing is the number of drawings or frames given to an action. Slow in and slow out means more pictures near the start and the end of a movement, so that nothing starts or stops dead. Software calls this easing.

Interface designers turned this into numbers. The Material Design motion documentation for Android developers defines easing as a curve that determines how long it takes an object to start and stop moving. It lists sixteen standard durations from 50 to 1,000 milliseconds: the larger the area or distance, the longer the animation. It also describes springs in three speeds; spatial springs move things on screen, effects springs change colour or opacity.

Apple’s Human Interface Guidelines add judgement. They ask designers to add motion purposefully, supporting the experience without overshadowing it, and warn that gratuitous or excessive animation can distract people and even make them physically uncomfortable. Feedback animation should be brief and precise. People should be able to cancel motion rather than wait for it to end. In a business clip, every movement points at the message.

Music, sound effects and rights in an animated clip

Moving graphics are rarely silent. Music sets the tempo, and cuts, words and small hits and whooshes land on it, so the picture feels played rather than shown. Wikipedia calls the type side of this kinetic typography: text presented over time to convey an idea or an emotion. It traces the technique to Saul Bass’s titles for North by Northwest in 1959, where the credits flew in from off-screen.

Sound is also where rights problems hide. The US Copyright Office explains that recording a song can create two works, the composition with its lyrics and the sound recording, commonly owned and licensed separately. Using either from another artist generally needs the holder’s permission or a licence. Stock footage, fonts and images need the same care. Rules differ between countries and platforms, so ask a specialist about your own case.

Reduced motion, flashing limits and vertical formats

Moving pictures can do harm. The W3C’s explanation of WCAG 2.2 criterion 2.3.3, Animation from Interactions, a Level AAA requirement, says some users experience distraction or nausea from animation, and vestibular disorders can bring dizziness and headaches. The criterion asks that motion triggered by interaction can be disabled unless it is essential. On websites the tool is the CSS media feature prefers-reduced-motion, which MDN describes as detecting that a user asked the device to minimise non-essential motion.

A finished video shows everyone the same frames, so for clips the key rule concerns flashing. Criterion 2.3.1, Three Flashes or Below Threshold, is Level A, the basic tier: nothing should flash more than three times in any one second unless the flashes stay below the general and red thresholds. It exists to prevent seizures caused by photosensitivity, and the W3C notes extra sensitivity to red flashing. Under criterion 1.2.2, captions carry meaningful sound effects as well as speech.

Format is the last constraint, and it changes. Meta’s ads guide for video ads in Instagram Reels currently lists a 9:16 ratio at 1440 by 2560 pixels and a duration from 0 seconds to 15 minutes. It suggests keeping at least 14 percent at the top, 35 percent at the bottom and 6 percent on each side free of text and logos. YouTube’s help page says Shorts tools create videos up to 3 minutes long, uploaded at up to 1080p. Check both pages before each release.

Ten Reels in Code, the studio’s own run of vertical films

Ten Reels in Code shows the craft on real work. It is a run of vertical films that VITON13 Studio made for its own Instagram in 2026: the studio’s own work, not a client commission, since the account and the brief are the studio’s. The task was a series that looks like the work of ten different motion designers. Four films are about the studio’s services, three about VITON13 SCHOOL and three about VJOURNAL.

Each film runs 14 to 16 seconds, 152 seconds in total, with its own look, soundtrack and cover. Each rests on a different technique: a particle globe, a murmuration, a machine that plays music by collisions, a 3D medallion, a kinetic-type edit. In one, glowing balls bounce between seven luminous bars labelled with studio directions. Every figure on screen was read from the studio’s live sites on 12 October 2026, and the run went from brief to ten finished films in one day.

Every frame a function of time, every sound from the cue list

The method links the case to the building blocks above. Each film is an HTML scene in which every frame is a pure function of time: a given moment always yields the same picture. A shared engine supplies springs, a 3D camera, particles, depth of field and type that lands on the beat. That last item is kinetic typography in the most literal sense.

Sound comes from the same source. The music and every hit, tick and whoosh are synthesised from the scene’s own cue list, so picture and sound cannot drift apart. The films contain no stock footage, no AI imagery and no licensed music. The references were public prompts gathered under the tag “particles”; the studio answered each with its own idea, taking the techniques, not footage or code.

The ten scenes were written in parallel from one brief, checked one frame per beat and rendered with motion blur in headless Chrome, a browser running without a window. The films were scheduled one a day from 13 October 2026. The engine stays: a new film is one scene file, one soundtrack file and one command. Seen from inside, the craft is a set of decisions about time, written down exactly enough for a machine to repeat.

What ten code-drawn Reels cannot tell a buyer

A case shows a method, and this one has firm limits. These are the studio’s own Reels, not client work: they show what the method gives with a free hand, not how it copes with a client’s brand rules and approvals. The films had only started to publish, so there are no reach or sales figures yet. Nothing here suggests that code-drawn Reels sell better than filmed ones.

The sound has a caveat too: it was balanced by measurement, not mastered by ear. The reference prompts are public and belong to their authors; only the idea of each technique was borrowed. One day of production says little about a commissioned clip, where the message is agreed with a client first. The honest reading is narrower: motion design can be built from code and synthesised sound, and the engine can be reused.

Ordering motion design or 2D animation: what to prepare

Before ordering, write the message in one or two sentences: what the viewer should know or do after fifteen seconds. Gather the brand assets that exist: logo files, colours, fonts with licences, product shots, real figures with sources. List the platforms with the ratio and length from each one’s current help page, and the date the clip goes live. With that sheet, the work can be planned without guessing.

Templates are enough more often than people expect: a weekly announcement, a sale, new opening hours. A template gives a clean result quickly, and timing, safe zones, flash limits and captions still apply to it. Ordering motion design makes sense when a clip carries the brand for months, explains a product with type and diagrams, or must stand out among look-alike templates. Choose 2D animation when the idea needs characters and a story.

VITON13 Studio does both kinds of work: motion design for explainer and promo clips, and 2D animation with characters. The case of the ten Reels shows its method from brief to render. The guides linked below explain what explainer and promo videos cost and what the price depends on. Bring the message, the assets and the formats, and the first conversation can be about the idea.