Cappl - Screen Recorder & Drawing Tools

# 🎬 Cappl — Screen Recorder & Drawing Tools ### Comprehensive Store Description & Feature Reference Cappl is a premium,…

# 🎬 Cappl — Screen Recorder & Drawing Tools ### Comprehensive Store Description & Feature Reference Cappl is a premium, lightweight Chrome extension that combines high-performance screen recording with professional-grade annotation and presentation tools. Designed for educators, developers, creators, and professionals, Cappl allows you to record, capture, and mark up your screen in real time with zero lag. --- ## 🌟 Key Features ### 🎥 High-Definition Screen Recording * **Recording Sources** — Record your Entire Screen, a specific application Window, or an individual Chrome Tab. Choosing a tab automatically injects the drawing tools directly into the web page. * **Recording Quality** — Choose between Auto (native resolution at ~5 Mbps), 720p, 1080p, or Native 4K configuration templates before starting your session. * **Audio Capture** — Mix system or tab audio seamlessly with microphone input. Employs advanced audio node mixing for built-in echo cancellation and noise suppression. * **Live Timer Badge** — A clean green status timer (`1:04`, `5:23`, etc.) displays directly on the extension icon so you always know you are recording. ### 🎨 Real-Time Presentation Canvas * **Isolated Layer** — The presentation toolbar uses a secure Shadow DOM wrapper, isolating its styles completely so target websites never distort its layout. * **Draggable Dock** — Drag the six-dot grip zone to move the toolbar anywhere on your screen. Click the minimize (**−**) button to collapse the panel into a small, floating bubble that stays clamped safely within screen boundaries. ### 🖌️ Advanced Tool Suite * **Pencil Tool (`D`)** — Solid, anti-aliased freehand strokes featuring smooth geometry. * **Highlighter (`H`)** — Semi-transparent marker stroke running at 45% opacity to keep layout text perfectly readable. Automatically expands to 2.5× the pencil width. * **Eraser (`E`)** — Erases pixels directly using composite operations rather than drawing over them in white. Features a clear dashed ring tracking preview running at 4× standard tool sizes. * **Shape Utilities** — Draw crisp Squares, Circles, Ellipses, and Straight Lines with instant, real-time drawing previews before mouse release. * **Arrow Tool** — Draws precise straight vector paths terminating in a filled arrowhead that scales alongside your brush selection. ### ✍️ Premium Annotations * **Text Tool** — Click anywhere to deploy interactive text fields using the Outfit font layout. Font scales dynamically via `max(14px, size × 2 + 10)` and integrates directly into the history layer. * **Laser Pointer** — Leaves a glowing, transient cursor trail that follows your path for ~800 ms before smoothly fading out. Perfect for drawing temporary attention. * **Screen Magnifier Lens** — Activates a premium 2.25× glass-bezel zoom lens (100px radius) around your pointer. Viewports refresh instantly using a 150ms debounce upon mouse pauses or scrolling actions. * **Instant Screenshots** — Capture crisp PNG snapshots of your tab. The toolbar auto-hides for a millisecond during capture so it never blocks your images. Files save as `cappl_screenshot_<ISO-timestamp>.png`. ### 🖱️ Mouse Enhancement Tools * **Cursor Highlight Halo** — Project soft, translucent 25px radius circular halos in your selected color to make the mouse trackable in video playback. * **Click Ripple Effect** — Emits expanding animated feedback rings that dissolve within 0.8 seconds of a click. Deactivates automatically when drawing tools are selected to protect your canvas. ### 🎨 Custom Presets & Storage * **Colors** — Swap presets instantly using hotkeys for Yellow (`1`), Red (`2`), Blue (`3`), or Green. Includes an integrated Custom Color Picker that saves selections across browsing sessions. * **Brush Sizes** — Three preset sizes scale tool diameters systematically across Thin, Medium, and Thick modes. ### ⏪ Smart History & Global Hotkeys * **Canvas Controls** — Fully supports Undo (`Ctrl+Z` / `Cmd+Z`) and Redo (`Ctrl+Shift+Z` / `Ctrl+Y`) stroke stacks alongside an instant Clear All (`C`) action. Buttons visually grey out when history slots run empty. * **Input Protection** — All keyboard shortcuts are instantly ignored when focusing interactive webpage elements like `<input>`, `<textarea>`, or `contenteditable` layers. --- ## 📖 How to Use Cappl (Step-by-Step) ### Step 1: Start Recording 1. Click the **Cappl icon** in your browser toolbar. 2. Select your target configuration options in the panel, then click **Start Recording**. 3. Choose your capture source: **Entire Screen**, **Window**, or **Chrome Tab**. 4. Monitor your session via the live green timer badge on the extension icon. ### Step 2: Present and Annotate 1. The floating drawing toolbar will immediately appear in the bottom-right corner of your tab. 2. Select the **Pencil**, **Highlighter**, or **Shape** tools to begin marking up the screen. 3. Turn on the **Cursor Highlight** and **Click Ripple** toggles to guide your viewers. 4. Drag the toolbar handle to clear your workspace, or click **−** to minimize it. ### Step 3: Manage Canvas Edits * Press the **Undo** button to revert your last stroke. * Press the **Redo** button to restore an undone asset. * Click the **Clear All** button to instantly clean the canvas. ### Step 4: Save & Export Flow 1. Open the extension popup window and click **Stop Recording** (or use `Ctrl+Shift+S`). 2. The engine displays a **"Saving Recording..."** overlay while compiling your file. 3. The video downloads directly as a high-quality WebM (VP9 codec) file named `screen-recording-<timestamp>.webm`. 4. On completion, the system shows **"Recording Saved!"** and closes the worker tab automatically. If the download is interrupted, manual recovery options appear immediately. --- ## ⚙️ Settings Dashboard Click the **⚙ gear icon** in the popup header to manage configurations in real time: * **Auto Download WebM** — Toggle automatic file exports or trigger manual browser "Save As" prompts. * **Audio Preferences** — Turn mic recording states on or off dynamically, even mid-recording. * **Workspace Optimization** — Use per-tool checkbox accordions to completely hide tools you don't use from the toolbar. Features a master "Toggle All" layout control switch. --- ## 🔒 Safe, Local & Secure * **100% Local Processing** — None of your video streams, screen captures, or drawing inputs are ever uploaded to external servers. Stream parsing is handled entirely in-browser using local Web APIs. * **Permissions** — Operates safely using strictly required extension scopes: `storage`, `downloads`, `activeTab`, and `scripting`. * **Developer Blueprint** — Built with React, TypeScript, and Vite. The core logic executes within a self-contained IIFE structure running duplicate-injection protection variables to ensure tab stability.