Kinetic
A flexible wrapper component for framer-motion animations.
Playground
Customize the Kinetic properties to see different variations.
Content to animate
Customize
Installation
pnpm dlx shadcn@latest add https://shadcn-ui-variants.vercel.app/r/kinetic.jsonOverview
This component provides a declarative way to add animations to any content. It supports viewport-based animations, scroll-triggered animations, and various predefined animation variants.
Examples
Basic fade in animation
Content to animate
Animate when entering viewport
Card title
Card description
Scroll-based animation
Scroll to see me animate
Custom animation with loop
Kinetic Props
| Prop | Type | Default |
|---|---|---|
animation | enum | — |
duration | number | 0.5 |
delay | number | 0 |
startOnView | boolean | false |
once | boolean | true |
loop | boolean | false |
onScroll | boolean | false |
offset | number | — |
className | string | — |
children* | React.ReactNode | — |
viewportOptions | enum | — |
transition | MotionProps["transition"] | — |
style | React.CSSProperties | — |
externalScrollProgress | MotionValue<number> | — |
isParentScrollRangeCustom | boolean | — |
staggerIndex | number | — |
scrollStaggerAmount | number | — |
segmentScrollSpan | number | — |