Tuplu Animation Builder

Design, play, and export production-ready CSS keyframe timelines directly on your live webpage components without writing a line of code. Tuplu Animation Builder turns web animation engineering into a visual playground. By working side-by-side with your active browser tab in a convenient side panel, Tuplu lets you select any HTML element, chain together keyframe transformations, and preview the results instantly in real-page contexts. Whether you are tuning interactive buttons, creating staggered cards, or building text entry reveals, Tuplu writes clean code for you. Key Features: - Visual Timeline Editor: Add sequential keyframe blocks and configure translate, rotate, scale, skew, opacity, and blur values. - Direct Element Selection: Click on any element on your active webpage to capture its CSS selector and preview changes live. - Multi-Element Animation: Hold Cmd/Ctrl during selection to select multiple elements and design distinct animation tracks for each. - Interactive Local Canvas: Test animations on pre-built layouts (Flexbox, Grid, Free positioning) in a sandbox when offline. - Staggered Delays & Text Splitting: Automatically slice text nodes into individual letters for cascading typewriter sweeps. - Multi-Framework Code Export: Copy clean code for Vanilla CSS, Tailwind CSS configs, Framer Motion components, or GSAP timelines. - Sandbox Integration: Open and test your animated mockups directly in CodePen with a single click. How to Use: 1. Open the Tuplu panel by clicking the extension icon in your browser toolbar. 2. Click "Select Target" and click on any element on your active webpage. 3. Click "+ Add Keyframe" to create animation steps and drag sliders to change visual transforms or colors. 4. Go to the "Animation-Code" tab to inspect and copy the code, or click "Open in CodePen" to experiment. Privacy and Security: Tuplu Animation Builder runs completely locally on your machine. It does not track your browsing history, collect personal data, or transmit information off your device. Local storage is used solely to save your custom presets and animation library items. Support and Feedback: Have ideas, questions, or issues? Visit our project support page to file bug reports or suggest new feature additions.