Preview image. Unlock full-res
Promotional still showing six tilted rounded-rectangle UI cards scattered on a pure-black field, each previewing a different JavaScript animation or web-motion library, with MatteoJS centered and dominant.
Summary
A promo still for a web-animation library ecosystem, using six tilted, scattered rounded-rectangle cards on a pure-black stage to tease individual tools -- MatteoJS centered, Osmo upper-left, Locomotive Smooth Scroll lower-center, and Stop Motion lower-right.
Visual description
Pure-black background with six large rounded-rectangle cards positioned at varying angles, overlapping at the edges to suggest a loose pile in motion. Center-front: a cream/off-white card dominates the composition, showing the "MatteoJS" wordmark in oversized black display type alongside seven colorful smiley-face dot icons in blue, green, pink, yellow, and red. Upper-left: a dark charcoal card with "Osmo *" in large white sans-serif and a white asterisk glyph. Upper-right: a dark gray card showing three portrait photographs of people in a horizontal team-listing UI, with a circular green badge. Lower-left: a photograph of an interior scene with furniture, slightly tilted. Lower-center: a dark olive-green card reading "Locomotive Smooth Scroll [SETUP]" in white type. Lower-right: a light gray card with a black pill button reading "Stop Motion" with a lightning-bolt icon, and a visible cursor arrow pointing at it. All cards use rounded-8-or-more-px corners, consistent padding, and clean sans-serif typography throughout.
Key takeaway
The tilted card-scatter on a black ground as a promo layout: each card stands alone as a product preview while the pile implies a connected ecosystem. Centering the hero card (MatteoJS) at full upright while surrounding cards tilt creates a natural focal hierarchy without any explicit framing. The cursor visible on the Stop Motion card adds an interactive, in-context signal at a glance.
Reuse notes
Excellent reference for developer-tool landing pages, product-launch social assets, and any multi-product or multi-feature promo that needs to show range without a long feature list. The black background is load-bearing: it lets each card's own color palette pop without fighting. Works best when card content is genuinely varied in tone and color. Replicate with Figma's free-rotate handles on auto-layout frames or CSS rotate() transforms in a relative-positioned container.
