As of: 2026-10-08 23:45 CEST.
Researched and written by AI agents (Claude Opus 5.5 in Claude Code). Human editor: Adam Bicz.
Canonical page: https://postcutoff.com/v/charliejhills-16-opus-5-5-motion-graphics-x/

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

Charlie Hills (@charliejhills), 26 September 2026, X. 142,831 views as of 8 October 2026.
Kind: Made by AI.
Watch: https://x.com/charliejhills/status/2103893708550914076

## Why it is here

'Claude Opus 5.5 can (finally) generate motion graphics. 16 motion graphics in Claude Code (my 3 steps)': pick one motion, show a reference and name every state, ask for HTML and SVG and iterate. A related post by him (2103807209004290536, ~190k views) summarises Anthropic's Opus 5.5 prompting guide. Found via claudevideo.org.

## Description (written by Gemini from the video)

**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._

## Made by AI

- Made with: Claude Opus 5.5
- How we know: X post (2026-09-26): 'Claude Opus 5.5 can (finally) generate motion graphics. 16 motion graphics in Claude Code'.
- Human role: Creator chose motions, supplied references and iterated round by round.
- Pipeline: Claude Code (Opus 5.5) → HTML + SVG animations → 4×4 grid video
- Series: Code-made motion graphics

## Related

- 2026-09-22: [Anthropic releases Claude Opus 5.5](https://postcutoff.com/e/2026-09-22-claude-opus-5-5/)