Installnpx shadcn@latest add https://motion-lexicon.pages.dev/r/primitive-translate.json
- Purpose
- Compare translation, scale, rotation, skew, perspective, and transform origin in one controlled playground.
- Trigger
- Trigger from mode selection or state change, emphasizing one primary transform dimension at a time.
- Interruptibility
- Continue from the current transform matrix when switching modes to avoid decomposition jumps.
- Reduced motion
- Remove large translation, rotation, and perspective, keeping a state-color change or short fade.
translateTranslateA transform shifts visual coordinates horizontally, vertically, or both while leaving layout flow unchanged.
scaleScaleA transform multiplies an element's rendered width and height around a chosen origin.
rotateRotateA transform changes an element's angular orientation around its transform origin.
skewSkewA shear transform offsets one axis in proportion to the other, producing a slanted silhouette.
perspectivePerspectivePerspective sets the viewer-to-plane distance used to project three-dimensional transforms; shorter distances amplify depth.
transform-originTransform originThe transform origin defines the local pivot from which scaling and rotation are calculated.