Skew In
Lean in and straighten up — an editorial entrance built from shear plus travel. Install with npx remotion-ui@latest add skew-in.
PrimitivePrimitives
$ npx remotion-ui@latest add skew-inLeans in and straightens up. A shear and a slide, opposed on purpose.
Why the shear opposes the travel
The element leans into the direction it is travelling from, so it looks
dragged upright by its own momentum rather than sliding in pre-formed. That
opposition is the whole component — slide-left with a skew() in style
leans the other way and reads as a wobble.
import { SkewIn } from "@/remotion/primitives/skew-in";
<SkewIn skew={16} travel={72} durationInFrames={40}>
<h1>Leans in, straightens up</h1>
</SkewIn>Pivot
origin defaults to bottom left. A shear pivoted at the centre lifts the
baseline of a headline, and the line below it visibly jumps as the shear
resolves — put the pivot on the baseline corner and only the top of the element
moves.
Exits
Like every wrapper primitive here, it takes exit, exitAtInFrames,
exitInFrames and exitDirection from the shared enter/exit contract. Inside a
<Sequence durationInFrames={n}>, exit alone lands the element out at the end
of its slot. exitDirection="continue" carries the lean on through instead of
straightening back.
The shear opposes the travel on purpose — the element looks dragged upright by its own momentum.
Agent notes
Install first, then import the copied source component locally. AI guide →
@/remotion/primitives/skew-in- Use when: frame-level motion primitives and reusable animation wrappers.
- Customize: skew, skewY, travel, direction, plus copied source for timing, layout, colors, and typography.
- Rule: do not import this component from the
remotion-uinpm package; it is copied into your project.
Usage
import { SkewIn } from "@/remotion/primitives/skew-in";
<SkewIn skew={16} travel={72} durationInFrames={40}>
<h1>Leans in, straightens up</h1>
</SkewIn>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | - | What leans in. |
| skew | number | 14 | Horizontal shear it starts at, in degrees. |
| skewY | number | 0 | Vertical shear it starts at. Small values only. |
| travel | number | 56 | How far it slides in, in px. Travels against the lean. |
| direction | "left" | "right" | "left" | Which way the element leans on the way in. |
| origin | TransformOrigin | "bottom left" | Pivot. A centre pivot lifts the baseline and the line below jumps. |
| durationInFrames | number | 30 | Length of the entrance. |
| delayInFrames | number | 0 | Frames to wait before it starts. |
| spring | MotionSpring | - | Drive the entrance with a spring instead of the ease-out curve. |
| exit | boolean | false | Land out at the end of the surrounding Sequence. |
| exitAtInFrames | number | - | Frame the exit starts on. Overrides the automatic timing. |
| exitInFrames | number | - | Length of the exit. Defaults to 70% of the entrance. |
| exitDirection | "reverse" | "continue" | "reverse" | Straighten back, or carry the lean on through. |
| block | boolean | false | Fill the parent's width instead of shrink-wrapping. |