Product & UI · Oct 4, 2026
OPUS 5.5 IS ALL YOU NEED FOR MOTION DESIGN
OPUS 5.5 IS ALL YOU NEED FOR MOTION DESIGN by testarossa. Watch the product & ui video, explore the shared prompt and visit the original X post.
testarossa@rossaxbt
View on XThe prompt behind it.
Original prompt
. Order: one black shape keeps changing: Ordered ✓ → Printing % → On its way (a van on a route) → Delivered ✓. Wall: the delivered circle expands until black fills the frame, holds for one beat, then shrinks into the framed print hanging in the real wall footage. The same iris opens onto the print and closes again. The frame fills the screen, contracts into the pill → the dot → the letters spring back out on the returning beat. Last frame = first frame. </structure> <build> 1. One HTML file, square 1440x1440. Compute every style from time inside an async seek(t): no CSS transitions, timers or state carried between frames. 2. Use closed-form step responses for springs. When a value has multiple targets, add one spring per change so it remains a pure function of time. 3. Liquid glass: each glass element keeps its own clone of the scene behind it. Filter that clone with an SVG feImage displacement map (a rounded-rect distance field) through three feDisplacementMaps at slightly different scales for chromatic edges, then add a rim light. For glass letters, use a canvas distance field per glyph to create the map, mask and highlights. 4. Goo: apply blur and an alpha threshold, then composite the source on top so the glass stays sharp inside. 5. Iris: place 6 blades around a hexagonal aperture. Each blade uses its two vertices, both edge extensions and the SHORT arc between them. 6. Wordmark squeeze: move every letter toward the dot by the same factor and adjust its drawn width to match (narrow the wdth axis, scale the rest), keeping the letters in contact. 7. Footage: re-encode it all-intra (ffmpeg -g 1), load it as a blob URL and await
Video and prompt by testarossa. Original post ↗



