Skip to content

Video components Change between shots

Cut on motion

Change between shotsbrutal1 s

cut-on-motion.md

Cut on motion: final frame of the transition animation — Tap the clip to play it.

When to use

Use when a hard cut should not feel like one. One shape rides one path across both scenes; the scene under it changes at 50% with a step, and the shape only flips colour. A symmetric curve puts the shape mid-frame at peak speed exactly on the cut, which is what hides the cut.

The code

css

.scene { position: absolute; inset: 0; }
.after { background: var(--ink); color: var(--ground); animation-name: cut; animation-duration: 1s; animation-timing-function: linear; animation-fill-mode: both; }
@keyframes cut { 0%, 49.9% { opacity: 0; } 50%, 100% { opacity: 1; } }

.ball { position: absolute; top: calc(var(--u) * 38); left: calc(var(--u) * -14); width: calc(var(--u) * 14); height: calc(var(--u) * 14); border-radius: 50%; background: var(--accent);
        animation-name: travel, flip; animation-duration: 1s, 1s;
        animation-timing-function: var(--through), linear; animation-fill-mode: both, both; }
@keyframes travel { to { translate: 118vw 0; } }
@keyframes flip { 0%, 49.9% { background: var(--accent); } 50%, 100% { background: var(--ground); } }

Easing

Each ease is a pair of After Effects handles from core/motion/presets.js. Every curve as CSS.

Ease	Leaving a key	Arriving at a key
`swap`	75% influence, speed 0	75% influence, speed 0

Notes

html

<div class="scene before">before</div>
<div class="scene after">after</div>
<div class="ball"></div>
<script type="module">
import { EASE } from '../../core/motion/presets.js';
document.documentElement.style.setProperty('--through', EASE.swap);
</script>

The shape can be a word, a card edge or a cursor; what matters is that its path does not stop at the cut. Put the cut two frames before the sound cue, never after it.

Looks (ground, type, radius, accent) live in demo/demo.css; this snippet keeps neutral tokens.

Sound

Sound: pluck at 0.53 s into the move, two frames after the cut at 0.50 s (default gain).

Chain it into a film.

Copy chains of video components from the recipes.

Open the recipes →All 130 video components