Wensity

Animated Code Diff Viewer

Pro

Inline or toggled code diffs rendered inside the same polished code block frame, flipping between before and after.

show offanimatedcodediffframer motionprism react renderer
Animated Code Diff Viewer component preview

Installation

Run the following command

~/your-project
pnpm dlx wensity@latest add animated-code-diff

Usage

Import AnimatedCodeDiff from @/components/wensity/animated-code-diff and render it anywhere in your React or Next.js app. The source lands in your own repo, so every prop, class and animation below is yours to edit.

app/example.tsx
import { AnimatedCodeDiff } from "@/components/wensity/animated-code-diff";


const before = `export function CTA({ label }: { label: string }) {
  return <button className="bg-neutral-200 px-5 py-2">{label}</button>;
}`;


const after = `import { motion } from "framer-motion";


export function CTA({ label, href }: { label: string; href: string }) {
  return (
    <motion.a href={href} whileHover={{ scale: 1.03 }}
      className="bg-chili-500 text-white px-5 py-2">
      {label}
    </motion.a>
  );
}`;


export default function Example() {
  return (
    <AnimatedCodeDiff
      before={before}
      after={after}
      language="tsx"
      filename="components/cta.tsx"
      viewMode="inline"
    />
  );
}

Props

PropTypeDefaultDescription
beforestring-Before snapshot — full source string.
afterstring-After snapshot — full source string.
languageDiffLanguage"tsx"Prism language for highlighting.
filenamestring-Filename shown in the header.
autoplayMsnumber0Auto-replay interval in ms. Pass 0 to disable.
initial"before" | "after""before"Initial state when using toggle view mode.
viewMode"inline" | "before" | "after" | "toggle""inline"Initial display mode. Toggle starts from initial.