CodeDemo: Free Interactions Component by Davidson Akra

Marketplace Components Categories Interactions

Animated code window with a typewriter-style line reveal. Control timing, delay, and easing-linear, ease, or spring. Comes with dark/light themes, optional line numbers, a copy button, and a blinking cursor. Fully configurable from the Framer canvas.

CodeDemo is a Framer component that brings a code snippet to life through a typewriter-style animation, revealing each line sequentially with a blinking cursor tracking the active position. Timing is fully in your hands - dial in the duration and delay, then shape the pacing with one of three easing modes: a steady linear crawl, a smooth ease in-out curve, or a subtle spring overshoot that gives the reveal a lively, physical feel. When writing mode is off, the entire block appears instantly, making it easy to switch between animated and static presentations without changing anything else. The component ships in two syntax themes — a dark mode built around a deep navy canvas, and a crisp light mode on white — with distinct colors applied across the full range of token types. Supporting details like line numbers, a copy button with confirmation feedback, and font size are all individually toggleable. Every one of these options is surfaced as a native Framer property control, so designers can configure the component entirely from the canvas panel without ever opening the code editor.