Chrome Extension

Installation & setup

1. Download the extension using the button below and unzip it to a permanent folder on your computer.
2. Open Chrome and go to chrome://extensions.
3. Enable Developer mode using the toggle in the top-right corner.
4. Click Load unpacked and select the unzipped folder.
5. Pin the SlickVid icon to your toolbar for quick access.

The popup shows your logged-in email address and three toggle options - aspect ratio, record audio, and click effects - that persist between sessions.

Click zoom effect

Every mouse click triggers a smooth zoom-in toward the clicked element, holds briefly, then eases back out. This means viewers always know exactly where you clicked without you needing to slow down or re-record. The zoom level and duration are automatic - no configuration needed.

The effect works on any clickable element: buttons, links, form fields, checkboxes, dropdowns. Click position and surrounding context are captured as timestamped events so SlickVid can reconstruct an accurate zoom trajectory when rendering the final video.

Button shine effect

When you click a button, a diagonal white gradient band sweeps across it from left to right - the classic "glint" effect you see in polished product demos. This happens automatically on every button click during recording without any extra setup.

The effect targets button, a, and [role="button"] elements. The shine duration is 0.45s and scales proportionally with the button width.

You can also add a standalone shine effect to any SlickVid button scene in your video script:

--- button (blue, shine) ---
# Get Started
Sign up in under 60 seconds

Input border animation

Clicking into a text input, textarea, or select field triggers an animated border effect. A glowing ring traces around the field perimeter to draw the viewer's eye to the focused element. This makes sign-up demos, form walkthroughs, and search demos look intentional rather than raw.

The animation applies to input, textarea, and select elements. It fires on focus events and fades out when the element loses focus.

You can also use this effect standalone in a video scene to animate a typed value into a form field:

--- input (border, shine) ---
# [email protected]
Email address

Aspect ratio lock

Before you start recording, choose an aspect ratio from the popup dropdown. A semi-transparent overlay appears in the recorded tab showing the safe zone. Anything inside the safe zone will be visible in the final video; content outside it will be cropped.

The safe zone overlay is draggable during recording so you can reposition it if needed. The crop coordinates are stored as metadata and applied during export - not baked into the raw recording.

Audio recording

Enable the Record Audio toggle before starting. The extension captures tab audio (so viewers hear any sounds from the recorded app) plus optional microphone input for voice narration. Both are mixed into the video file automatically.

When audio is on, the exported file uses video/webm;codecs=vp9,opus. Without audio it uses video/webm;codecs=vp9. Both work with every SlickVid video scene type.

Annotation hotkeys

During recording you can mark specific moments with annotations. These are timestamped and attached to the recording so SlickVid can reference them when suggesting scene cuts.

Stop, upload & edit

Click Stop in the popup (or press F10). The raw WebM uploads to SlickVid in two steps: first the video blob, then the event payload (clicks, annotations, timing). A new browser tab opens with your recording ready to trim, add animated scenes, and export.

You can append the recording to an existing project or start a new one from the finish screen. The editor pre-populates a scene script from your click events and annotations, which you can edit freely before rendering.