Motionboard
Original · Framer · 0:15–0:18YouTube ↗
Motionboard recreation

Showcase Wall

A full-screen wall of work cards drifts diagonally at constant speed while slowly scaling up, then accelerates into one card at the end.

Seen in

YouTube ↗
YouTube ↗
Full recipe

Why it works

The number of cards shows that many people use the product. The cards all have different colors, so color blocks take turns passing through the center of the frame while drifting, and the push-in on one card at the end lands the eye on a specific piece of work.

Spec

Timing
Drift 0–5.9s (177 frames); push-in 5.35–6.0s (about 20 frames); hold on the landed card 6.0–7.65s, with a template bar rising at 6.3s (0.7s); pull-back 7.65–8.65s (1.0s); lockup from 8.3s; film 11s
Easing
Drift and scale-up linear; push-in uses an expo.in curve (2^(10p−10)) for the first 72% of the 0.65s, then a velocity-matched cubic ease-out over the last ~0.18s so the card lands softly; pull-back power3.inOut; bar and lockup expo.out
Camera
A 2400×1600px wall translates x:-440, y:-260 toward the upper left over 5.9s (about 75px per second, 3.9% of frame width), scale 1→1.15 about the frame center; the film opens from black over 0.5s (power1.out); the push-in fills the frame with one card while its borderRadius goes 10→0
Subject
Six masonry columns of website screenshot cards, 360px wide with a 22px gap, column tops staggered between −260 and −40px, five card heights (202.5, 225, 360, 450, 480px); each card is a miniature page with its own palette and typeface; the push-in target is a 202.5px-tall SaaS template page
Style
Dark #0b0b0c stage; cards with 10px radius, a mix of white, dark, orange, yellow, and purple site designs in many different typefaces; after the hold the wall dims under a dark radial overlay (0.9s) and a ring-and-planet mark with a 136px wordmark takes over

Prompt

Show your users' work with a shot called Showcase Wall. Fill the frame with six masonry columns of website screenshot cards (360px wide, 22px gap, five heights from 202.5 to 480px, column tops staggered), each card a miniature page with its own palette and typeface, and open from black over 0.5s. The whole wall drifts toward the upper left with linear ease (x -440px and y -260px over 5.9s, about 4% of frame width per second) while scale grows linearly from 1 to 1.15. From 5.35s push into one card over 0.65s, accelerating with an expo.in curve and settling with a short cubic ease-out, until it fills the frame and its corner radius reaches 0. Hold on it for about 1.6s while your product bar rises (0.7s, expo.out), then pull back over 1s with power3.inOut to the whole wall, dim it, and land your wordmark.

People describe it as

  • A full screen of work cards slowly floating past
  • The wall of showcases that says lots of people use this
  • A card wall moving diagonally, then pushing in on one card

Often confused with

  • Auto Zoom / Zoom-to-CursorAuto Zoom serves one action and pulls back; Showcase Wall drifts at constant speed and ends with a one-way push-in and a cut.
  • Pile-up and ClearPile-up and Clear adds elements one at a time and then clears them; the cards in Showcase Wall fill the frame from the start and move as a whole.
Recipe file (.md)

More Opening