Motion Synthesizer — Development skill for Claude Code

Motion Synthesizer

A browser-based motion design tool for creating animated particle systems, 3D mesh visuals, and typographic motion — built for experienced designers who want direct control and fast iteration.

Runs entirely in a single HTML file. No install, no server, no dependencies to manage.

  

---

Overview

Motion Synthesizer generates grid-based oscillating systems — wave-propagated shapes, 3D particle meshes, typographic layouts — in a style influenced by motion designers like Mario de Meyer, dvdp, and play_sf. Every parameter is animatable, every animation is phaseable, and the whole thing exports frame-accurate MP4.

---

Features

Shapes

15 shape types: `circle` `ellipse` `square` `rect-w` `rect-t` `roundrect` `triangle` `hexagon` `diamond` `star` `ring` `cross` `dot` `text` `marker`

Layouts

10 layout modes that define how shapes are distributed across the canvas:

Layout	Description
grid	Rows × columns with spacing control
honeycomb	Offset grid with staggered rows
radial	Evenly spaced around a circle
circle-pack	Packed circular fill
text-pack	Shapes masked to a text outline
scatter	Random distribution with seed control
row / column	Single-axis linear layouts
diagonal	Angled linear arrangement
obj-mesh	Shapes projected onto a 3D point cloud

Animation System

Two animation modes per track:

• Oscillate — continuous sine-wave motion driven by frequency. Set min/max values, frequency (Hz), and phase spread
• Keyframe — eased from/to with duration, delay, and loop modes (loop, pingpong, none)

**Animatable properties:** `scale` `scaleX` `scaleY` `rotate` `rotDeg` `moveX` `moveY` `opacity` `skewX` `skewY` `spread` `spreadX` `spreadY` `orb