Overview
React / Next.js
Other Frameworks
<VeltWireframe>
<VeltRecorderControlPanelWireframe>
<VeltRecorderControlPanelWireframe.FloatingMode />
<VeltRecorderControlPanelWireframe.ThreadMode />
</VeltRecorderControlPanelWireframe>
</VeltWireframe>
<velt-wireframe style="display:none;">
<velt-recorder-control-panel-wireframe>
<velt-recorder-control-panel-floating-mode-wireframe />
<velt-recorder-control-panel-thread-mode-wireframe />
</velt-recorder-control-panel-wireframe>
</velt-wireframe>
Floating Mode
React / Next.js
Other Frameworks
<VeltWireframe>
<VeltRecorderControlPanelWireframe.FloatingMode>
<VeltRecorderControlPanelWireframe.FloatingMode.Container />
<VeltRecorderControlPanelWireframe.FloatingMode.ScreenMiniContainer />
<VeltRecorderControlPanelWireframe.FloatingMode.Loading />
<VeltRecorderControlPanelWireframe.FloatingMode.ActionBar />
</VeltRecorderControlPanelWireframe.FloatingMode>
</VeltWireframe>
<velt-wireframe style="display:none;">
<velt-recorder-control-panel-floating-mode-wireframe>
<velt-recorder-control-panel-floating-mode-container-wireframe />
<velt-recorder-control-panel-screen-mini-container-wireframe />
<velt-recorder-control-panel-loading-wireframe />
<velt-recorder-control-panel-action-bar-wireframe />
</velt-recorder-control-panel-floating-mode-wireframe>
</velt-wireframe>
Container (Floating Mode)
React / Next.js
Other Frameworks
<VeltWireframe>
<VeltRecorderControlPanelWireframe.FloatingMode.Container>
<VeltRecorderControlPanelWireframe.FloatingMode.Video />
<VeltRecorderControlPanelWireframe.FloatingMode.CollapsedButton />
<VeltRecorderControlPanelWireframe.FloatingMode.Paused />
<VeltRecorderControlPanelWireframe.FloatingMode.Waveform />
</VeltRecorderControlPanelWireframe.FloatingMode.Container>
</VeltWireframe>
<velt-wireframe style="display:none;">
<velt-recorder-control-panel-floating-mode-container-wireframe>
<velt-recorder-control-panel-video-wireframe />
<velt-recorder-control-panel-floating-mode-waveform-wireframe />
<velt-recorder-control-panel-collapsed-button-wireframe />
<velt-recorder-control-panel-paused-wireframe />
</velt-recorder-control-panel-floating-mode-container-wireframe>
</velt-wireframe>
Video (Floating Mode Container)
React / Next.js
Other Frameworks
<VeltWireframe>
<VeltRecorderControlPanelWireframe.FloatingMode.Video />
</VeltWireframe>
<velt-wireframe style="display:none;">
<velt-recorder-control-panel-video-wireframe />
</velt-wireframe>
React / Next.js
Other Frameworks
<VeltWireframe>
<VeltRecorderControlPanelWireframe.FloatingMode.Waveform />
</VeltWireframe>
<velt-wireframe style="display:none;">
<velt-recorder-control-panel-floating-mode-waveform-wireframe />
</velt-wireframe>
React / Next.js
Other Frameworks
<VeltWireframe>
<VeltRecorderControlPanelWireframe.FloatingMode.CollapsedButton>
<VeltRecorderControlPanelWireframe.FloatingMode.CollapsedButton.On />
<VeltRecorderControlPanelWireframe.FloatingMode.CollapsedButton.Off />
</VeltRecorderControlPanelWireframe.FloatingMode.CollapsedButton>
</VeltWireframe>
<velt-wireframe style="display:none;">
<velt-recorder-control-panel-collapsed-button-wireframe>
<velt-recorder-control-panel-collapsed-button-on-wireframe />
<velt-recorder-control-panel-collapsed-button-off-wireframe />
</velt-recorder-control-panel-collapsed-button-wireframe>
</velt-wireframe>
On (CollapsedButton)
React / Next.js
Other Frameworks
<VeltWireframe>
<VeltRecorderControlPanelWireframe.FloatingMode.CollapsedButton.On />
</VeltWireframe>
<velt-wireframe style="display:none;">
<velt-recorder-control-panel-collapsed-button-on-wireframe />
</velt-wireframe>
Off (CollapsedButton)
React / Next.js
Other Frameworks
<VeltWireframe>
<VeltRecorderControlPanelWireframe.FloatingMode.CollapsedButton.Off />
</VeltWireframe>
<velt-wireframe style="display:none;">
<velt-recorder-control-panel-collapsed-button-off-wireframe />
</velt-wireframe>
Paused (Floating Mode Container)
React / Next.js
Other Frameworks
<VeltWireframe>
<VeltRecorderControlPanelWireframe.FloatingMode.Paused />
</VeltWireframe>
<velt-wireframe style="display:none;">
<velt-recorder-control-panel-paused-wireframe />
</velt-wireframe>
ScreenMiniContainer (Floating Mode)
React / Next.js
Other Frameworks
<VeltWireframe>
<VeltRecorderControlPanelWireframe.FloatingMode.ScreenMiniContainer>
<VeltRecorderControlPanelWireframe.FloatingMode.Video />
<VeltRecorderControlPanelWireframe.FloatingMode.Screen />
</VeltRecorderControlPanelWireframe.FloatingMode.ScreenMiniContainer>
</VeltWireframe>
<velt-wireframe style="display:none;">
<velt-recorder-control-panel-screen-mini-container-wireframe>
<velt-recorder-control-panel-video-wireframe />
<velt-recorder-control-panel-screen-wireframe />
</velt-recorder-control-panel-screen-mini-container-wireframe>
</velt-wireframe>
Video (Floating Mode ScreenMiniContainer)
This is the same Video component as used in the Floating Mode Container.
React / Next.js
Other Frameworks
<VeltWireframe>
<VeltRecorderControlPanelWireframe.FloatingMode.Video />
</VeltWireframe>
<velt-wireframe style="display:none;">
<velt-recorder-control-panel-video-wireframe />
</velt-wireframe>
Screen (Floating Mode ScreenMiniContainer)
React / Next.js
Other Frameworks
<VeltWireframe>
<VeltRecorderControlPanelWireframe.FloatingMode.Screen />
</VeltWireframe>
<velt-wireframe style="display:none;">
<velt-recorder-control-panel-screen-wireframe />
</velt-wireframe>
Loading (Floating Mode)
React / Next.js
Other Frameworks
<VeltWireframe>
<VeltRecorderControlPanelWireframe.FloatingMode.Loading />
</VeltWireframe>
<velt-wireframe style="display:none;">
<velt-recorder-control-panel-loading-wireframe />
</velt-wireframe>
ActionBar (Floating Mode)
React / Next.js
Other Frameworks
<VeltWireframe>
<VeltRecorderControlPanelWireframe.FloatingMode.ActionBar>
<VeltRecorderControlPanelWireframe.FloatingMode.ActionBar.TypeIcon />
<VeltRecorderControlPanelWireframe.FloatingMode.ActionBar.Time />
<VeltRecorderControlPanelWireframe.FloatingMode.ActionBar.Waveform />
<VeltRecorderControlPanelWireframe.FloatingMode.ActionBar.Toggle />
<VeltRecorderControlPanelWireframe.FloatingMode.ActionBar.Pip />
<VeltRecorderControlPanelWireframe.FloatingMode.ActionBar.Stop />
<VeltRecorderControlPanelWireframe.FloatingMode.ActionBar.Clear />
</VeltRecorderControlPanelWireframe.FloatingMode.ActionBar>
</VeltWireframe>
<velt-wireframe style="display:none;">
<velt-recorder-control-panel-action-bar-wireframe>
<velt-recorder-control-panel-action-bar-type-icon-wireframe />
<velt-recorder-control-panel-action-bar-time-wireframe />
<velt-recorder-control-panel-action-bar-waveform-wireframe />
<velt-recorder-control-panel-action-bar-toggle-wireframe />
<velt-recorder-control-panel-action-bar-pip-wireframe />
<velt-recorder-control-panel-action-bar-stop-wireframe />
<velt-recorder-control-panel-action-bar-clear-wireframe />
</velt-recorder-control-panel-action-bar-wireframe>
</velt-wireframe>
TypeIcon (ActionBar)
React / Next.js
Other Frameworks
<VeltWireframe>
<VeltRecorderControlPanelWireframe.FloatingMode.ActionBar.TypeIcon />
</VeltWireframe>
<velt-wireframe style="display:none;">
<velt-recorder-control-panel-action-bar-type-icon-wireframe />
</velt-wireframe>
Time (ActionBar)
React / Next.js
Other Frameworks
<VeltWireframe>
<VeltRecorderControlPanelWireframe.FloatingMode.ActionBar.Time />
</VeltWireframe>
<velt-wireframe style="display:none;">
<velt-recorder-control-panel-action-bar-time-wireframe />
</velt-wireframe>
React / Next.js
Other Frameworks
<VeltWireframe>
<VeltRecorderControlPanelWireframe.FloatingMode.ActionBar.Waveform />
</VeltWireframe>
<velt-wireframe style="display:none;">
<velt-recorder-control-panel-action-bar-waveform-wireframe />
</velt-wireframe>
Toggle (ActionBar)
React / Next.js
Other Frameworks
<VeltWireframe>
<VeltRecorderControlPanelWireframe.FloatingMode.ActionBar.Toggle>
<VeltRecorderControlPanelWireframe.FloatingMode.ActionBar.Toggle.Pause />
<VeltRecorderControlPanelWireframe.FloatingMode.ActionBar.Toggle.Play />
</VeltRecorderControlPanelWireframe.FloatingMode.ActionBar.Toggle>
</VeltWireframe>
<velt-wireframe style="display:none;">
<velt-recorder-control-panel-action-bar-toggle-wireframe>
<velt-recorder-control-panel-action-bar-toggle-pause-wireframe />
<velt-recorder-control-panel-action-bar-toggle-play-wireframe />
</velt-recorder-control-panel-action-bar-toggle-wireframe>
</velt-wireframe>
Pause (Toggle)
React / Next.js
Other Frameworks
<VeltWireframe>
<VeltRecorderControlPanelWireframe.FloatingMode.ActionBar.Toggle.Pause />
</VeltWireframe>
<velt-wireframe style="display:none;">
<velt-recorder-control-panel-action-bar-toggle-pause-wireframe />
</velt-wireframe>
Play (Toggle)
React / Next.js
Other Frameworks
<VeltWireframe>
<VeltRecorderControlPanelWireframe.FloatingMode.ActionBar.Toggle.Play />
</VeltWireframe>
<velt-wireframe style="display:none;">
<velt-recorder-control-panel-action-bar-toggle-play-wireframe />
</velt-wireframe>
Pip (ActionBar)
Picture-in-Picture button for screen recordings with camera. This allows users to view the recording in a floating window during screen capture.
Picture-in-Picture is only supported in Chrome browsers and only works for screen recordings when the camera is active. This feature is disabled by default.
React / Next.js
Other Frameworks
<VeltWireframe>
<VeltRecorderControlPanelWireframe.FloatingMode.ActionBar.Pip />
</VeltWireframe>
<velt-wireframe style="display:none;">
<velt-recorder-control-panel-action-bar-pip-wireframe />
</velt-wireframe>
Stop (ActionBar)
React / Next.js
Other Frameworks
<VeltWireframe>
<VeltRecorderControlPanelWireframe.FloatingMode.ActionBar.Stop />
</VeltWireframe>
<velt-wireframe style="display:none;">
<velt-recorder-control-panel-action-bar-stop-wireframe />
</velt-wireframe>
Clear (ActionBar)
React / Next.js
Other Frameworks
<VeltWireframe>
<VeltRecorderControlPanelWireframe.FloatingMode.ActionBar.Clear />
</VeltWireframe>
<velt-wireframe style="display:none;">
<velt-recorder-control-panel-action-bar-clear-wireframe />
</velt-wireframe>
Thread Mode
React / Next.js
Other Frameworks
<VeltWireframe>
<VeltRecorderControlPanelWireframe.ThreadMode>
<VeltRecorderControlPanelWireframe.ThreadMode.Video />
<VeltRecorderControlPanelWireframe.ThreadMode.ScreenMiniContainer />
<VeltRecorderControlPanelWireframe.ThreadMode.Loading />
<VeltRecorderControlPanelWireframe.ThreadMode.ActionBar />
</VeltRecorderControlPanelWireframe.ThreadMode>
</VeltWireframe>
<velt-wireframe style="display:none;">
<velt-recorder-control-panel-thread-mode-wireframe>
<velt-recorder-control-panel-video-wireframe />
<velt-recorder-control-panel-loading-wireframe />
<velt-recorder-control-panel-action-bar-wireframe />
<velt-recorder-control-panel-screen-mini-container-wireframe />
</velt-recorder-control-panel-thread-mode-wireframe>
</velt-wireframe>
Video (Thread Mode)
React / Next.js
Other Frameworks
<VeltWireframe>
<VeltRecorderControlPanelWireframe.ThreadMode.Video />
</VeltWireframe>
<velt-wireframe style="display:none;">
<velt-recorder-control-panel-video-wireframe />
</velt-wireframe>
Loading (Thread Mode)
React / Next.js
Other Frameworks
<VeltWireframe>
<VeltRecorderControlPanelWireframe.ThreadMode.Loading />
</VeltWireframe>
<velt-wireframe style="display:none;">
<velt-recorder-control-panel-loading-wireframe />
</velt-wireframe>
ActionBar (Thread Mode)
This ActionBar is similar in structure to the Floating Mode ActionBar but specific to ThreadMode.
React / Next.js
Other Frameworks
<VeltWireframe>
<VeltRecorderControlPanelWireframe.ThreadMode.ActionBar>
<VeltRecorderControlPanelWireframe.ThreadMode.ActionBar.TypeIcon />
<VeltRecorderControlPanelWireframe.ThreadMode.ActionBar.Time />
<VeltRecorderControlPanelWireframe.ThreadMode.ActionBar.Waveform />
<VeltRecorderControlPanelWireframe.ThreadMode.ActionBar.Toggle />
<VeltRecorderControlPanelWireframe.ThreadMode.ActionBar.Pip />
<VeltRecorderControlPanelWireframe.ThreadMode.ActionBar.Stop />
<VeltRecorderControlPanelWireframe.ThreadMode.ActionBar.Clear />
</VeltRecorderControlPanelWireframe.ThreadMode.ActionBar>
</VeltWireframe>
<velt-wireframe style="display:none;">
<velt-recorder-control-panel-action-bar-wireframe>
<velt-recorder-control-panel-action-bar-type-icon-wireframe />
<velt-recorder-control-panel-action-bar-time-wireframe />
<velt-recorder-control-panel-action-bar-waveform-wireframe />
<velt-recorder-control-panel-action-bar-toggle-wireframe />
<velt-recorder-control-panel-action-bar-pip-wireframe />
<velt-recorder-control-panel-action-bar-stop-wireframe />
<velt-recorder-control-panel-action-bar-clear-wireframe />
</velt-recorder-control-panel-action-bar-wireframe>
</velt-wireframe>
TypeIcon (Thread Mode ActionBar)
React / Next.js
Other Frameworks
<VeltWireframe>
<VeltRecorderControlPanelWireframe.ThreadMode.ActionBar.TypeIcon />
</VeltWireframe>
<velt-wireframe style="display:none;">
<velt-recorder-control-panel-action-bar-type-icon-wireframe />
</velt-wireframe>
Time (Thread Mode ActionBar)
React / Next.js
Other Frameworks
<VeltWireframe>
<VeltRecorderControlPanelWireframe.ThreadMode.ActionBar.Time />
</VeltWireframe>
<velt-wireframe style="display:none;">
<velt-recorder-control-panel-action-bar-time-wireframe />
</velt-wireframe>
React / Next.js
Other Frameworks
<VeltWireframe>
<VeltRecorderControlPanelWireframe.ThreadMode.ActionBar.Waveform />
</VeltWireframe>
<velt-wireframe style="display:none;">
<velt-recorder-control-panel-action-bar-waveform-wireframe />
</velt-wireframe>
Toggle (Thread Mode ActionBar)
React / Next.js
Other Frameworks
<VeltWireframe>
<VeltRecorderControlPanelWireframe.ThreadMode.ActionBar.Toggle>
<VeltRecorderControlPanelWireframe.ThreadMode.ActionBar.Toggle.Pause />
<VeltRecorderControlPanelWireframe.ThreadMode.ActionBar.Toggle.Play />
</VeltRecorderControlPanelWireframe.ThreadMode.ActionBar.Toggle>
</VeltWireframe>
<velt-wireframe style="display:none;">
<velt-recorder-control-panel-action-bar-toggle-wireframe>
<velt-recorder-control-panel-action-bar-toggle-pause-wireframe />
<velt-recorder-control-panel-action-bar-toggle-play-wireframe />
</velt-recorder-control-panel-action-bar-toggle-wireframe>
</velt-wireframe>
Pause (Thread Mode Toggle)
React / Next.js
Other Frameworks
<VeltWireframe>
<VeltRecorderControlPanelWireframe.ThreadMode.ActionBar.Toggle.Pause />
</VeltWireframe>
<velt-wireframe style="display:none;">
<velt-recorder-control-panel-action-bar-toggle-pause-wireframe />
</velt-wireframe>
Play (Thread Mode Toggle)
React / Next.js
Other Frameworks
<VeltWireframe>
<VeltRecorderControlPanelWireframe.ThreadMode.ActionBar.Toggle.Play />
</VeltWireframe>
<velt-wireframe style="display:none;">
<velt-recorder-control-panel-action-bar-toggle-play-wireframe />
</velt-wireframe>
Pip (Thread Mode ActionBar)
Picture-in-Picture button for screen recordings with camera in Thread Mode. This allows users to view the recording in a floating window during screen capture.
Picture-in-Picture is only supported in Chrome browsers and only works for screen recordings when the camera is active. This feature is disabled by default.
React / Next.js
Other Frameworks
<VeltWireframe>
<VeltRecorderControlPanelWireframe.ThreadMode.ActionBar.Pip />
</VeltWireframe>
<velt-wireframe style="display:none;">
<velt-recorder-control-panel-action-bar-pip-wireframe />
</velt-wireframe>
Stop (Thread Mode ActionBar)
React / Next.js
Other Frameworks
<VeltWireframe>
<VeltRecorderControlPanelWireframe.ThreadMode.ActionBar.Stop />
</VeltWireframe>
<velt-wireframe style="display:none;">
<velt-recorder-control-panel-action-bar-stop-wireframe />
</velt-wireframe>
Clear (Thread Mode ActionBar)
React / Next.js
Other Frameworks
<VeltWireframe>
<VeltRecorderControlPanelWireframe.ThreadMode.ActionBar.Clear />
</VeltWireframe>
<velt-wireframe style="display:none;">
<velt-recorder-control-panel-action-bar-clear-wireframe />
</velt-wireframe>
ScreenMiniContainer (Thread Mode)
React / Next.js
Other Frameworks
<VeltWireframe>
<VeltRecorderControlPanelWireframe.ThreadMode.ScreenMiniContainer>
<VeltRecorderControlPanelWireframe.ThreadMode.Video />
<VeltRecorderControlPanelWireframe.ThreadMode.Screen />
</VeltRecorderControlPanelWireframe.ThreadMode.ScreenMiniContainer>
</VeltWireframe>
<velt-wireframe style="display:none;">
<velt-recorder-control-panel-screen-mini-container-wireframe>
<velt-recorder-control-panel-video-wireframe />
<velt-recorder-control-panel-screen-wireframe />
</velt-recorder-control-panel-screen-mini-container-wireframe>
</velt-wireframe>
Video (Thread Mode ScreenMiniContainer)
This is the same Video component as used in the main Thread Mode section.
React / Next.js
Other Frameworks
<VeltWireframe>
<VeltRecorderControlPanelWireframe.ThreadMode.Video />
</VeltWireframe>
<velt-wireframe style="display:none;">
<velt-recorder-control-panel-video-wireframe />
</velt-wireframe>
Screen (Thread Mode ScreenMiniContainer)
React / Next.js
Other Frameworks
<VeltWireframe>
<VeltRecorderControlPanelWireframe.ThreadMode.Screen />
</VeltWireframe>
<velt-wireframe style="display:none;">
<velt-recorder-control-panel-screen-wireframe />
</velt-wireframe>
