animation examples
UI Entrance & Showcase Animation Examples
UI entrance shots stage interfaces: cards, grids, and screens that assemble, slide, or fan into place on screen. 27 shots with video previews and agent-ready Remotion code below.
Avatar Bracket Carousel"Your ___ teammates" placeholder layout — the four-corner focus brackets stay pinned mid-sentence while the avatar queue inside them spring-cycles three times vertically; avatars magnify and sharpen on the way in and shrink, fade and blur by distance on the way out, with the role label swapping in sync; the brackets breathe 7% at each switch
~5.2s (156f@30fps)
Bezier Source Converge MergeFour source nodes on the left each have a thin Bézier curve connecting to the same converge point on the right; the curves first draw on from left to right in staggered order, the nodes slide along their own curve toward the converge point with a three-stage accelerating shrink to zero, accent-colored data packets glide along the paths the whole time, and after the merge completes the curves are erased from the left end, leaving only the circular badge
~5.6s (168f@30fps)
Card Stack8 cards spring in one by one from below the screen, stacking into a pile; once all settle, the whole pile fans out into a 3D spread in one move — each card rotates 8° by index, shifts 34px laterally, and steps one z-layer back
~4.2s (126f@30fps)
Carousel 3D8 cards arranged via sin/cos into a ring of radius 190px rotating through one full turn at constant speed; each card only orbits around Y and billboards outward on its own; the front and back use the same directional texture with backface-visibility:hidden, guaranteeing every moment stays upright and never flipped; the camera stays pinned at a slight low-angle close-up the entire time
~5.6s (168f@30fps)
Cloner Depth EchoClone column — the main card instantly "copies" out 7 semi-transparent doppelgangers arranged into a column receding diagonally in depth; after a beat pause, all of them accelerate back, merging into the original with a bounce
4–5s
Deck Deal FlyinIn a dark metallic background, a close-up of a physical deck of cards opens with an orbit, then pulls back to the page as a pile of cards slams into the grid like dealing — hard accelerating — with the camera chasing the scroll and resting half a second on the full board
dealing segment ~2.6s (36–113f), preceded by an optional ~2s (62f) deck close-up
Doc Park Left Pill DealThe document doesn't fade out but slides out to the left leaving only ~35% width, slightly shrinking to 0.92; on the right, three white outlined pills deal in slowly to the narration rhythm (outBack pop-in); after each lands, its subtitle darkens word by word, then the whole sentence fades out before the next arrives; the document auto-scrolls very slowly the whole time, keeping "being read" alive
~5.8s (174f@30fps)
Draw SVG TraceStroke-grow circle annotation — an inked stroke with a pen tip traces around the element's outline, "drawing" it; at the moment it closes, a black flash hands off and content fades in; the same trick can draw an underline under titles
stroke 40f + black flash hand-off 16f + hold ≥35f, about 3–4s
Element Body MovesTwo variants of element body-feel — axial-stretch stretches along the motion axis like taffy, contact-shadow-lift lifts off the plane with a contact shadow
A ~4.7s / B ~5.3s
Floating Glossy Label PillsFour light-gray dashboard wireframe panels each topped with a glossy highlight capsule label in a row; the track shifts position over three beats to the right (ease-in → mid push → ease-out, first beat slower with a long tail); the centered one magnifies and sharpens, the two sides shrink to 0.62, sink, fade and slightly blur, forming a corridor feel; at the end a black cursor with a white outline slides diagonally from top right to rest at the right end of the last capsule
~4.0s (120f@30fps)
Integration Hub MapThe old page flips 180° in one fast turn (its side edge flashes briefly) landing on a new hub page; five integration app icons pop in on the same frame, then five rainbow light-pipes connect all at once on the same frame, with delivery pulses flowing through the pipes continuously — "turn a new page, the whole ecosystem hooks in at once"
windup ~0.5s + fast flip ~1.2s + icons all at once → pipes connect, two beats ~0.7s + delivery breathing ≥1.5s; whole piece 4.5–5s
List RevealSix items of a vertical menu find their place one by one at 0.09 intervals via scale, settling with a slight outBack overshoot, while the whole list container drifts linearly upward 32px the entire time — per-item entrance and whole-list drift are two unrelated layers of motion
~3.6s (108f@30fps)
List Stack PressList cards fly up one by one from the bottom of the frame stacking into a pile; each landing presses the whole pile down and bounces it back, while the counter ticks up one in sync
~3s (18–88f)
Morph From PrimitivePrimitive morph — a circle takes one breathing beat (anticipation), then an SVG path interpolates over 24f into a rounded-card outline, with content fading in
~4.7s (breath 20f + morph 24f + content fade-in 12f)
Neon Frame ForerunA strongly-perspective neon rectangular frame races in from the left edge from both ends to take shape first; the page inside the frame brightens from dark, while components/text inside the frame settle down from 3D space in staggered order with soft same-shape shadows, completing the fit in sync with the page lighting; background neon tube clusters dim at the end to yield the spotlight
frame race-in ~0.6s + lighting & settling ~2s + background dimming ~0.8s; whole piece 4–4.5s
Neon Frame Orbit DropAfter the neon frame sketches its outline first, the camera arcs from the page's left to right, and all page components/text settle down from the air **on the same frame** (same-shape soft shadows converging in sync) — a whole-body-entrance in-frame installation
frame sketch ~0.5s + rotation & simultaneous settling ~2.5s + settled ~1s; whole piece 4–4.5s
Page Waterfall WallPage waterfall wall — real page screenshots cut into 3–4 columns scrolling infinitely on a 3D reclined wall at differential speeds in opposite directions, with parallax + a slow lens push-in making a "so much content it never runs out" overview
4–6s (infinite loop; length cut to the paragraph's needs)
Paper Craft MovesTwo paper-craft variants — masking-tape-slap presses a card down with masking tape (a floating micro-wobble gets "slap-slap" pressed dead) and popup-book-rise stands cards up like a pop-up book (cards rising along their bottom edges into a wall, staggered)
A 3–4s / B 4–5.5s
Product Card Progressive AssembleA detail card assembles itself like fields being grabbed one by one — image→title→breadcrumb pills pop in sequence→original price appears then gets crossed-out and demoted, accent new price springs out→body text reveals line by line with a highlight block sweeping left to right→color swatches light up; the whole card pushes forward at a very slow scale the entire time
~5.0s (150f@30fps)
Radial WaveA 17×9 dot grid lights up staggered by Euclidean distance from the wave source; each dot overshoots scale to 1.5 then settles to a constant on state; after the first wave sweeps, a second bright-blue pulse gathers back inward from the outer ring to the center
~3.8s (114f@30fps)
Research Card Stack ScrollDark paper cards fly in along a bottom-right axis into the center, one every 12 frames, stacking with a 1-frame squash on landing; only the top card renders fully clear (title + authors + abstract), cards below increasingly blur and darken with stack depth, showing only their title bar; the horizontal grid background scrolls down in sync as a speed reference
~4.8s (144f@30fps)
Row EmbedContent rows descend from the air like cards, level out via rotateX, and the instant they embed, a thin accent-colored seam lights along their bottom edge
~2s (12–68f)
Runway Ground SkimUnder a low-angle ground-skimming camera, a group of UI cards sticks down from the air in a quick rain-like burst (starts offset slightly, descents overlap heavily in parallel, stop the instant they land with zero bounce); once landed, the page stands up and the viewpoint turns head-on to close
hover display ~0.4s + sticking ~1.2s + stand-up turn ~1.8s; whole piece 4s
Skeleton RevealA three-tier fidelity reveal — draft → skeleton → content: hand-drawn doodle placeholders (boiling jitter) are replaced in one beat by gray-bar skeleton windows; after the skeleton list rolls in, the lens pushes closer and the gray bars develop row by row into avatars + word-by-word text, with the last word landing half a beat late
~5.7s (172f: doodle 1s + swap-to-real 0.3s + skeleton roll-in 1.2s + push-in develop 3s)
SVG Shape MorphOne 140-point closed outline smoothly morphs into another shape and back; the two shapes are first resampled in polar coordinates to the same point count, per-point radius interpolation with inOutCubic; mid-morph layers a slight scale breathing, slow self-rotation, and hue drifting from 185° to 305°
~5.2s (156f@30fps)
Value Stagger Gradient16 bars' entrance delay is temporal staggering, while height/hue/displacement/blur each lay out a numerical gradient from first to last; a second beat switches the stagger origin to the center, re-spreading with the pulse amplitude largest at the center
~5.0s (150f@30fps)
Wall Reveal MovesThree variants of whole-wall batch entrance — bento cell-by-cell lighting, grid wave flipping, blueprint line-tracing formation; all reveal in place without displacement, complementing deck-deal-flyin's fly-in displacement type into a category matrix
each variant ~4.3–5s (A 150f / B 130f / C 150f @30fps, including establishment holds and still endings)