Changelog
Follow up on the latest improvements and updates.
RSS
We're thrilled to introduce a powerful new feature that transforms your static code snippets into beautiful, shareable animations perfect for social media, documentation, tutorials, and presentations.
✨ What's New
Create Multi-Slide Animations
Build engaging code animations by creating multiple slides that showcase the evolution of your code. Each slide can contain different code snippets, allowing you to tell a story through your code changes.
- Slide Management: Add, remove, and reorder slides with an intuitive drag-and-drop timeline
- Individual Slide Control: Customize each slide's code, title, language, and duration independently
- Diff Transition: Lines that are removed fade out gracefully while new lines fade in, creating a visual diff effect that highlights code changes
Export Options
Export your animations in multiple formats optimized for different use cases:
- MP4 (H.264): Industry-standard format with broad compatibility (requires WebCodecs support)
- Animated GIFs from your code animations with full control over quality and settings.
Timeline & Playback Controls
Full-featured animation controls give you complete command:
- Play/Pause: Control playback at any time
- Reset: Jump back to the beginning instantly
- Progress Tracking: Visual progress indicator shows animation completion
- Timeline Navigation: Click on any slide in the timeline to jump directly to it
- Slide Duration Control: Adjust how long each slide displays (0.1 to 15 seconds)
Sharing & Collaboration
Share your animations with the world through multiple channels:
Public Sharing:
- Generate shareable URLs that work anywhere
- Automatic Open Graph and Twitter Card metadata for rich previews
- Customizable titles and descriptions for social sharing
Embed Support:
- Generate iframe embed codes for blogs and documentation
- Responsive embed options with customizable dimensions
- Works seamlessly with Hashnode, Medium, Dev.to, Notion, and more
Social Platform Integration:
- One-click sharing to Twitter and LinkedIn
- Pre-filled share text with your animation title and description
- Platform-optimized URLs for maximum engagement
Technical Highlights
- WebCodecs API: Leverages modern browser APIs for efficient video encoding
- Client-Side Processing: All rendering and export happens in your browser for privacy and speed
- Progressive Enhancement: Gracefully falls back to WebM when MP4 isn't supported
- Real-Time Preview: See your animation as you build it with instant preview
- Optimized Performance: Efficient frame generation and rendering for smooth playback
Perfect For
- Social Media: Create eye-catching code snippets for Twitter, LinkedIn, and Instagram
- Documentation: Animate code examples in your docs to show step-by-step changes
- Tutorials: Demonstrate code evolution and refactoring processes
- Presentations: Add dynamic code demos to your slides
- Blog Posts: Embed animated code examples that engage readers
- GitHub: Showcase your projects with animated code previews
Ready to bring your code to life? Head to the Animation Studio and start creating! 🚀
Save your code snippets for future reference directly in the tool. Group your saved snippets into categories for easy retrieval.
Saving Snippets
: Use the 'Save Snippet' button after you've added your code. Give your snippet a meaningful name so you can easily find it later.Organizing Snippets
: Group your snippets into categories or use tags to organize them. This organization method makes it easy to find a relevant piece of code.Using Snippets
: Click on any snippet in 'My Snippets' to load it into the code editor. You can then modify it as per your current requirements.