Components
Before
function fibonacci(n: number): number { if (n <= 1) return n; return fibonacci(n - 1) + fibonacci(n - 2); }
After
function fibonacci(n: number): number { const dp = [0, 1]; for (let i = 2; i <= n; i++) { dp[i] = dp[i - 1] + dp[i - 2]; } return dp[n]; }
Installation
$ pnpm dlx shadcn@latest add @slidecn/auto-animate-pair
Usage
import AutoAnimatePair from "@/components/slides/auto-animate-pair";
import CodeBlock from "@/components/slides/code-block";
function MyPresentation() {
return (
<Deck>
<AutoAnimatePair
animateId="code-diff"
from={
<CodeBlock language="ts" autoAnimateId="code-diff">
{codeBefore}
</CodeBlock>
}
to={
<CodeBlock language="ts" autoAnimateId="code-diff">
{codeAfter}
</CodeBlock>
}
/>
</Deck>
);
}API Reference
AutoAnimatePair
| Prop | Type | Default | Description |
|---|---|---|---|
animateId | string | required | Shared auto-animate ID |
from | ReactNode | required | First slide content |
to | ReactNode | required | Second slide content |
easing | string | - | Animation easing |
duration | number | - | Animation duration |
notes | string | - | Speaker notes |