Skip to main content

Text

Image

Circle

Rectangle

Divider

HTML

Button

Link

Form

Navigation

Upload assets

Video Preview Area

Sample Text Element

Call to Action

0:15 / 2:30

Timeline

Video
Audio
Text
Button

Properties Inspector

Selected Element

Text Element

Layer 3

Timing

Position & Size

Styling

Text

Interactions

Timeline

100%
Tracks
0:00 0:30 1:00 1:30 2:00 2:30 3:00
Main Video
video_sample.mp4
Audio
Text Element
Welcome Text
CTA Button
Learn More
Logo Image
company_logo.png
Contact Form
Email Signup
Current Time: 0:45 Total Duration: 3:00

Elements Library

Text Elements

Heading
Paragraph
T
Text Box

Media Elements

Image
Video
Audio

Shape Elements

Rectangle
Circle
Line
Arrow
Triangle
Polygon

Layout Elements

Divider
Container
</>
HTML Embed

Action Elements

CTA
Button
Link
Hotspot

Form Elements

Text Input
Textarea
Dropdown
Checkbox
Radio Button
Complete Form

Navigation Elements

Jump to Time
Next Section
Replay Video

Upload Assets

Drag and drop files here, or click to browse

Images

12 files

Videos

3 files

Audio

5 files

background_music.mp3

2:45 • 3.2 MB

sound_effect.wav

0:03 • 512 KB

Properties Inspector

CTA Button

Interactive Element • Layer 3

Timing & Duration

Position & Size

100%

Button Content

Styling

Actions

Animation

500ms

Layer Order

Asset Manager

Drop files here to upload

or click to browse your computer

Supports: JPG, PNG, GIF, MP4, MOV, MP3, WAV, PDF

hero-image.jpg

1920x1080 • 2.3 MB

2 days ago

2:45

intro-video.mp4

1920x1080 • 45.2 MB

1 week ago

background-music.mp3

3:20 • 7.8 MB

3 days ago

script.pdf

PDF • 1.2 MB

1 day ago

logo.png

512x512 • 89 KB

5 days ago

thumbnail.jpg

1280x720 • 456 KB

1 week ago

1:15

outro-video.mp4

1920x1080 • 23.1 MB

2 weeks ago

sound-effect.wav

0:03 • 512 KB

1 week ago

Storage Used: 2.3 GB of 10 GB
23 files selected

Preview Modal

Interactive Video Preview

Click the preview button to see your interactive video in action. Test all elements and interactions before publishing.

0) { this.focusableElements[0].focus(); } }); }, closeModal() { this.isOpen = false; this.isPlaying = false; document.body.style.overflow = ''; if (this.previousFocus) { this.previousFocus.focus(); } }, handleKeydown(event) { if (event.key === 'Escape') { this.closeModal(); } else if (event.key === 'Tab') { this.trapFocus(event); } }, trapFocus(event) { if (this.focusableElements.length === 0) return; const firstElement = this.focusableElements[0]; const lastElement = this.focusableElements[this.focusableElements.length - 1]; if (event.shiftKey) { if (document.activeElement === firstElement) { event.preventDefault(); lastElement.focus(); } } else { if (document.activeElement === lastElement) { event.preventDefault(); firstElement.focus(); } } }, togglePlay() { this.isPlaying = !this.isPlaying; }, formatTime(seconds) { const mins = Math.floor(seconds / 60); const secs = Math.floor(seconds % 60); return `${mins}:${secs.toString().padStart(2, '0')}`; }, toggleFullscreen() { this.isFullscreen = !this.isFullscreen; } }" @open-preview-modal.window="openModal()" @keydown.window="isOpen && handleKeydown($event)">

Export Modal

Export Interactive Video

Choose your export settings and format. Your interactive video will be ready for publishing or sharing.

0) { this.focusableElements[0].focus(); } }); }, closeModal() { this.isOpen = false; document.body.style.overflow = ''; if (this.previousFocus) { this.previousFocus.focus(); } }, handleKeydown(event) { if (event.key === 'Escape') { this.closeModal(); } else if (event.key === 'Tab') { this.trapFocus(event); } }, trapFocus(event) { if (this.focusableElements.length === 0) return; const firstElement = this.focusableElements[0]; const lastElement = this.focusableElements[this.focusableElements.length - 1]; if (event.shiftKey) { if (document.activeElement === firstElement) { event.preventDefault(); lastElement.focus(); } } else { if (document.activeElement === lastElement) { event.preventDefault(); firstElement.focus(); } } }, nextStep() { if (this.currentStep < this.totalSteps) { this.currentStep++; } }, prevStep() { if (this.currentStep > 1) { this.currentStep--; } }, startExport() { this.isExporting = true; this.exportProgress = 0; // Simulate export progress const interval = setInterval(() => { this.exportProgress += Math.random() * 15; if (this.exportProgress >= 100) { this.exportProgress = 100; this.isExporting = false; clearInterval(interval); } }, 500); } }" @open-export-modal.window="openModal()" @keydown.window="isOpen && handleKeydown($event)">