16 motion graphics made in Claude Code with Opus 5.5, with a 3-step method

Summary
This video showcases a 4x4 grid displaying 16 distinct UI, typography, and data motion graphic animations generated using Anthropic’s Claude Opus 5.5 within Claude Code. Shared by Charlie Hills (@charliejhills), the demonstration highlights programmatic interface animations and micro-interactions running smoothly in parallel.

What is shown

• [00:00 - 00:08]: A high-density 16-panel grid showcasing various interactive and procedural motion graphics running synchronously:
  1. Button -> player: A pill button morphing into an audio/media player interface.
  2. Search -> results: A search box auto-typing queries (“spring campaign”) and rendering live filtered dropdown results.
  3. Card -> workspace: A project card expanding into an interactive workspace modal.
  4. Tabs -> panels: Tabbed navigation cycling across social media channel analytics (Reels, Posts, Email).
  5. Chart morph: A weekly reach line graph morphing data points with bar chart overlays.
  6. Dashboard zoom: Numeric KPIs updating dynamically alongside sparkline zoom transitions.
  7. Spring stack: Interactive card stack bouncing using spring physics.
  8. Magnetic dock: macOS-style app dock with icon magnification physics on hover.
  9. Masked type: “OPUS in motion” revealed via layered text mask animation.
  10. Elastic type: Variable typography stretching horizontally (“STRETCH”).
  11. Text -> layout: Headline copy (“Design that moves people”) transitioning dynamically into an editorial layout.
  12. Image reveal: A 3D render of a basketball smoothly wiping and scaling into frame.
  13. Perspective shift: 3D isometric tilt and perspective rotation applied to dashboard cards.
  14. Glass focus: Frosted-glass UI overlay blurring and focusing campaign reporting metrics.
  15. Flowing paths: Interactive node diagram showing animated pulsating connectors between nodes.
  16. Particle logo: Dynamic particle dispersion and gathering forming an abstract brand mark.

Claims & numbers

• “16 examples: interfaces, type and data.” (Shown in the header graphic [00:00]).

Notable quotes

• “Opus 5.5 Motion Graphics” [00:00]
• “16 examples: interfaces, type and data.” [00:00]

Assessment
This is a polished showcase grid demonstrating programmatic motion graphic code generated by Claude Opus 5.5. The interactions represent real frontend web animation primitives (likely React/Framer Motion, CSS, or SVG/Canvas code execution) rendered cleanly in parallel.

Lyrics & themes

• The video is completely silent with no background track or voiceover narration.

Lore & references

• Claude Opus 5.5 & Claude Code: Directly attributes the animation code generation to Anthropic’s flagship Opus 5.5 model running inside the Claude Code agentic programming environment.
• Micro-interactions & Design Systems: The animations showcase standard high-end UI patterns commonly found in modern design systems (magnetic docks, variable font stretching, particle physics, spring-loaded card stacks, and glassmorphism).

Visual style & craft

• Craft: Clean, light-mode minimalist presentation canvas arranged in a 4x4 rounded-corner card grid.
• Execution: Highly fluid 60 FPS vector, CSS, and DOM motion graphics showcasing spring physics, fluid easing, SVG path interpolation, and typographic deformation.

Described by gemini-3.8-flash on 2026-10-08 from the video’s audio and frames.