CSS video transitions.
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).
Pick by what the two shots have in common.
| Component | Use it when |
|---|---|
| Cut on motion | A moving shape can carry the eye across a hard cut. |
| Whip pan | The next shot sits to the side and a blurred pan can hide the seam. |
| Match cut | One shape stays in place and changes meaning, such as a spinner ring and a finished ring. |
| Iris wipe | The eye is on a click or a mark, and a circle can close on it. |
| Zoom through | A UI part can fill the frame and the next shot comes out of it. |
| Speed ramp freeze | A beat needs weight before a change. |
| Cursor spotlight | A click opens the next screen. |
All 38 components in change between shots
a moving shape carries the eye across a hard cut into a new scene
Cut on motion
a moving shape carries the eye across a hard cut into a new scene
a panel pushes in with a directional blur that follows its speed, set per frame
Push with directional blur
a panel pushes in with a directional blur that follows its speed, set per frame
the pair every beat needs: arrive fast and land soft, leave faster and shorter
Exits faster than entrances
the pair every beat needs: arrive fast and land soft, leave faster and shorter
beats overlap: the next starts at 65% of the last and one element hands off (dot, bar, rule); use once per film
Chain beats
beats overlap: the next starts at 65% of the last and one element hands off (dot, bar, rule); use once per film
the next shot is to the side: a fast sideways pan with a blur that follows its speed hides the seam
Whip pan
the next shot is to the side: a fast sideways pan with a blur that follows its speed hides the seam
one shape crosses a scene change at the same place, size and angle and changes meaning (spinner ring, finished ring)
Match cut
one shape crosses a scene change at the same place, size and angle and changes meaning (spinner ring, finished ring)
a circle closes on the click or mark the eye is on and uncovers the next scene
Iris wipe
a circle closes on the click or mark the eye is on and uncovers the next scene
the next panel slides over the last one: the old shot moves a quarter as far and dims, a shadow grows with the overlap
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
the frame opens like doors onto the next shot: two halves part, the gap starts dark and lights as they clear
Split reveal
the frame opens like doors onto the next shot: two halves part, the gap starts dark and lights as they clear
horizontal bands slide off in alternation, staggered with seeded jitter and speed blur, and uncover the next shot
Slice shift
horizontal bands slide off in alternation, staggered with seeded jitter and speed blur, and uncover the next shot
a word scales into one letter until its stem is the whole frame; that colour is the next shot’s ground
Type fill transition
a word scales into one letter until its stem is the whole frame; that colour is the next shot’s ground
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
Colour 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
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
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
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 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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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.