# CSS video transitions

> CSS video transitions for HTML films: whips, wipes, match cuts and zooms that carry the eye across a cut, with the snippet for each.

Canonical: https://vawe.dev/video-components/group/change-between-shots
Last updated: 2026-11-03

A cut is where a film is most likely to feel cheap. This is the largest group on the site because a transition has to do a different job each time: hide a seam, change a meaning, hand the eye from one object to the next, or add weight before a change.

The components here fall into a few families. Some carry motion across the cut (cut-on-motion, whip-pan, swipe-continues). Some open the next shot through a shape (iris-wipe, shape-morph-wipe, avatar-world). Some enter the next scene through an object on screen (counter-dive, word-portal, caret-door).

38 components, 37 with a clip.

## Pick by what the two shots have in common

| Component | Use it when |
| --- | --- |
| [Cut on motion](https://vawe.dev/video-components/cut-on-motion) | A moving shape can carry the eye across a hard cut. |
| [Whip pan](https://vawe.dev/video-components/whip-pan) | The next shot sits to the side and a blurred pan can hide the seam. |
| [Match cut](https://vawe.dev/video-components/match-cut) | One shape stays in place and changes meaning, such as a spinner ring and a finished ring. |
| [Iris wipe](https://vawe.dev/video-components/iris-wipe) | The eye is on a click or a mark, and a circle can close on it. |
| [Zoom through](https://vawe.dev/video-components/zoom-through) | A UI part can fill the frame and the next shot comes out of it. |
| [Speed ramp freeze](https://vawe.dev/video-components/speed-ramp-freeze) | A beat needs weight before a change. |
| [Cursor spotlight](https://vawe.dev/video-components/cursor-spotlight) | A click opens the next screen. |

## All 38 components in change between shots

- [Cut on motion](https://vawe.dev/video-components/cut-on-motion): a moving shape carries the eye across a hard cut into a new scene
- [Push with directional blur](https://vawe.dev/video-components/push-blur): a panel pushes in with a directional blur that follows its speed, set per frame
- [Exits faster than entrances](https://vawe.dev/video-components/exit-fast): the pair every beat needs: arrive fast and land soft, leave faster and shorter
- [Chain beats](https://vawe.dev/video-components/chain-beats): beats overlap: the next starts at 65% of the last and one element hands off (dot, bar, rule); use once per film
- [Whip pan](https://vawe.dev/video-components/whip-pan): the next shot is to the side: a fast sideways pan with a blur that follows its speed hides the seam
- [Match cut](https://vawe.dev/video-components/match-cut): one shape crosses a scene change at the same place, size and angle and changes meaning (spinner ring, finished ring)
- [Iris wipe](https://vawe.dev/video-components/iris-wipe): a circle closes on the click or mark the eye is on and uncovers the next scene
- [Stack cover](https://vawe.dev/video-components/stack-cover): the next panel slides over the last one: the old shot moves a quarter as far and dims, a shadow grows with the overlap
- [Split reveal](https://vawe.dev/video-components/split-reveal): the frame opens like doors onto the next shot: two halves part, the gap starts dark and lights as they clear
- [Slice shift](https://vawe.dev/video-components/slice-shift): horizontal bands slide off in alternation, staggered with seeded jitter and speed blur, and uncover the next shot
- [Type fill transition](https://vawe.dev/video-components/type-fill-transition): a word scales into one letter until its stem is the whole frame; that colour is the next shot’s ground
- [Colour block wipe](https://vawe.dev/video-components/color-block-wipe): a solid brand-colour block sweeps across the cut with a slanted, blurred leading edge; a darker block trails it and the next shot sits behind
- [Zoom through](https://vawe.dev/video-components/zoom-through): the camera dives into a UI part until it fills the frame and the next shot comes out of it, with real zoom blur from stacked exposures
- [Speed ramp freeze](https://vawe.dev/video-components/speed-ramp-freeze): a beat needs weight before a change: story time is an integral of a speed curve, so the ball, its squash and the camera slow to a sharp near-hold on the hit frame, then snap on at 3.5x with blur
- [Speed ramp](https://vawe.dev/video-components/speed-ramp): both sides of a cut move the same way: the outgoing accelerates into the cut and the incoming leaves it at the same speed and slows, so the cut lands at peak speed
- [Liquid wipe](https://vawe.dev/video-components/liquid-wipe): a gooey organic edge floods the frame onto the next shot: bars with round heads fuse through a goo filter into a wet edge, and an accent band leads the next shot
- [Grid tile flip](https://vawe.dev/video-components/grid-tile-flip): a wall of tiles flips in a wave to the next shot: one perspective for the grid, each tile lifts toward the camera and darkens edge-on, shot A on the front and shot B on the back
- [Luma matte dissolve](https://vawe.dev/video-components/luma-matte-dissolve): the next shot arrives through its own brightness: an SVG luminance matte with a falling threshold shows its bright areas first, then midtones, and its dark ground last
- [Smear stretch](https://vawe.dev/video-components/smear-stretch): an elastic cut: shot A’s content stretches into streaks on an ease-in, the cut lands at the peak, and shot B snaps back from the streak on an under-damped spring, thinning and bulging like rubber
- [Shape morph wipe](https://vawe.dev/video-components/shape-morph-wipe): the next shot grows out of a shape on screen: the mask is born as a dot, grows as a circle, then widens and squares off into a rounded card and past the frame
- [Spin transition](https://vawe.dev/video-components/spin-transition): a 90 degree camera roll carries the cut: A rolls to 45 degrees speeding up, B rolls in from -45 and lands soft, scaled to always cover the frame, with rotational blur from 16 stacked exposures
- [Swipe continues](https://vawe.dev/video-components/swipe-continues): a card is swiped left and the next scene arrives from the right at the same speed: one belt, the finger lets go at the peak, 40 percent of the travel on the throw and 60 on the brake, 8 stacked exposures for the blur
- [Drop and land](https://vawe.dev/video-components/drop-and-land): an action in scene A lands in scene B: the product tile lifts, falls under gravity out of the card into the cart while one camera tilt brings the cart up and stops before the landing, then squashes and settles on a spring
- [Spin rotation](https://vawe.dev/video-components/spin-rotation): a loading spinner hands over to the loaded screen: the arc’s leading edge sweeps a wedge that uncovers the next screen, the camera rolls 14 degrees with the turn and settles tilted, and the ring flies to the header as its mark
- [Counter dive](https://vawe.dev/video-components/counter-dive): a title is entered through one letter: the camera pushes in log space into the counter of an “o” cut out of the title, scene B is already inside it as a miniature, and it fills the frame with no cut
- [Thumbnail grid](https://vawe.dev/video-components/thumbnail-grid): the scene shrinks into a thumbnail in a grid that is the next scene: one pull back in log space about the middle cell, nine frame-sized cells in the world, radius from square to the look’s step, then the title and a selection ring
- [Light leak transition](https://vawe.dev/video-components/light-leak-transition): two shots meet through warmth: three generated warm layers swell over a dark UI on their own clocks, the cut lands on the peak, and the new shot climbs out as they fall faster; no image asset
- [Type match cut](https://vawe.dev/video-components/type-match-cut): one word grows in shot A and holds its place while the frame cuts around it; in shot B the same node is part of a new line
- [Cursor spotlight](https://vawe.dev/video-components/cursor-spotlight): a click opens the next screen: the cursor tip grows a soft circle (a radial mask, not a blur) that shows shot B inside it while shot A stays outside until the circle covers the frame
- [Toggle horizon](https://vawe.dev/video-components/toggle-horizon): a setting switches the world: the toggle track stretches past both frame edges and thins to the horizon line of the next scene, and shot A opens away from the line, up and down
- [Progress timeline](https://vawe.dev/video-components/progress-timeline): a bar ends and the result opens in an editor: the fill runs past its end, stands up into the scrubber of a timeline and reveals it while it keeps the fill’s speed
- [Avatar world](https://vawe.dev/video-components/avatar-world): a person or brand is the way in: a round vector avatar grows until its circle covers the frame and its art is the ground of the next scene
- [Glow record](https://vawe.dev/video-components/glow-record): an alert becomes a live state: a badge’s red floods the frame in 0.35 s on a screen blend with over-exposure, then gathers into the red dot of a recording light
- [Highlight sweep](https://vawe.dev/video-components/highlight-sweep): a highlight sweeps across a key word, keeps going off the line and grows into the next panel’s background; the edge never stops at the word, and the word flips to dark ink at the edge
- [Shadow handoff](https://vawe.dev/video-components/shadow-handoff): a card lifts, its blurred shadow stretches down and right and darkens into the night scene’s ground colour, then the card leaves faster than it lifted
- [Word portal](https://vawe.dev/video-components/word-portal): a typed word grows until one stem is the whole frame and the next scene shows through the letterforms (an SVG text clip over a fixed scene B), on a log-path zoom
- [Underline road](https://vawe.dev/video-components/underline-road): the underline of a headline extends, bends down and becomes the route on a simple map, with the camera trailing the head at its speed and stopping at the map’s end
- [Caret door](https://vawe.dev/video-components/caret-door): the blinking caret grows tall, then opens as a two-frame-wide door that turns about it under perspective; the next screen is on the door’s face

## Rules that come with this group

- Adjacent transitions change axis or direction. Three horizontal wipes in a row read as monotonous.
- Arrive fast and land soft, leave faster and shorter. exit-fast shows the pair.
- chain-beats overlaps the next beat at 65 percent of the last. Use it once per film.
- In push-blur and whip-pan, the directional blur follows the speed of the move.

## More video components

- [Reveal a title](https://vawe.dev/video-components/group/reveal-a-title)
- [Point the eye](https://vawe.dev/video-components/group/point-the-eye)
- [Move the camera](https://vawe.dev/video-components/group/move-the-camera)
- [End a film](https://vawe.dev/video-components/group/end-a-film)
- [Product moments](https://vawe.dev/video-components/group/product-moments)
- [Grounds](https://vawe.dev/video-components/group/grounds)

## Related

- [The transitions guide](https://vawe.dev/docs/transitions)
- [Transitions that carry the eye](https://vawe.dev/blog/transitions)
- [The easing curves behind them](https://vawe.dev/easing)
- [All 130 video components](https://vawe.dev/video-components)