About
An animated code block that types out syntax-highlighted source character by character as it comes into view.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Code Block to your project and fits it to your theme.
Code
How Code Block is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
'use client';
import { CodeBlock } from '@/components/ui/primitives-animate-code-block';
import { cn } from '@/lib/utils';
import { useTheme } from 'next-themes';
interface CodeBlockDemoProps {
duration: number;
delay: number;
writing: boolean;
cursor: boolean;
}
const CodeBlockDemo = ({
duration,
delay,
writing,
cursor,
}: CodeBlockDemoProps) => {
const { resolvedTheme } = useTheme();
return (
<div
key={`${duration}-${delay}-${writing}-${cursor}`}
className="relative bg-accent w-[420px] h-[372px] text-sm p-4 overflow-auto"
>
<CodeBlock
code={`'use client';
import * as React from 'react';
type MyComponentProps = {
myProps: string;
} & React.ComponentProps<'div'>;
function MyComponent(props: MyComponentProps) {
return (
<div {...props}>
<p>My Component</p>
</div>
);
}
export { MyComponent, type MyComponentProps };`}
lang="tsx"
theme={resolvedTheme === 'dark' ? 'dark' : 'light'}
writing={writing}
duration={duration}
delay={delay}
className={cn(
'[&>pre,_&_code]:!bg-transparent [&>pre,_&_code]:[background:transparent_!important] [&>pre,_&_code]:border-none [&_code]:!text-[13px] [&_code_.line]:!px-0',
cursor &&
"data-[done=false]:[&_.line:last-of-type::after]:content-['|'] data-[done=false]:[&_.line:last-of-type::after]:inline-block data-[done=false]:[&_.line:last-of-type::after]:w-[1ch] data-[done=false]:[&_.line:last-of-type::after]:-translate-px",
)}
/>
</div>
);
};
export default function Demo() {
return (
<div className="flex min-h-[420px] w-full items-center justify-center p-6">
<CodeBlockDemo duration={10000} delay={0} writing cursor />
</div>
);
}