Colors

Minimal monochrome palette with full semantic colour range for status states and the colour picker swatches.

Core

--fg
#0a0a0a
--fg-muted
#737373
--fg-soft
#a3a3a3
surface-soft
--border
#e5e5e5
border-focus
--bg
#ffffff

Semantic (colour picker palette)

red
orange
yellow
green
sky
blue
purple
pink

Typography

Geist with tight letter-spacing (−0.005em). Tabular nums throughout. Base size: 13px.

--font-size-xl / 18pxExport video
--font-size-lg / 16pxTurn images into video
--font-size-md / 14pxFree, in your browser. No signup.
--font-size-base / 13pxDrop images, set the pace, export an MP4. Your files stay on your device.
--font-size-sm / 12pxAudio track — None
--font-size-xs / 11px upperSettings
--font-family-mono (tabular)00:04.5s 1920×1080

Motion

Spring easing curve. Hover each dot to preview.

--ease (primary spring)
cubic-bezier(0.16,1,0.3,1)
--ease-dropdown
cubic-bezier(0.22,1,0.36,1)
--ease-inout (icon swap)
ease-in-out 200ms
--dur-normal (fast actions)
150ms
--dur-slow (panels/dropdowns)
250ms

Pill Button

Primary CTA. Full-radius pill, Geist 13px, spring scale on press. Has an animated export/progress state.

Icon Button

38×38 circle with border. Scale 0.94 on press. Active state fills black — used when a panel is open.

Brand Pill

The logo wordmark container — full-radius pill with border and subtle shadow. Sits in the top-left of the app.

38px height · 9999px radius · shadow-sm

Toolbar

Floating bottom bar. Two-row layout: top row is the interactive controls, bottom row is the scrollable timeline. Centred with shadow.

Duration 4.5 s
Size 1920×1080
3 slides
4.5s
3.0s
4.5s

Settings Panel

Fixed card positioned top-right when the gear icon is active. 280px wide, 16px padding, list of setting rows.

Settings

None

Export

85%

Dropdown

Scale + fade animation with origin awareness. Open: 250ms spring. Close: 150ms. Extracted verbatim from source.

Edit
Duplicate
Delete
Closing (0.99 scale)
Closed (0.97 scale)

Context Menu

Right-click menu with duration inline input, reset button, dividers, and danger row. 10px radius, 4px padding.

s
Duplicate
Move to end
Remove

Color Picker

HSV picker with hue slider, eyedropper, hex input, and 8-colour swatch grid. Mode tabs switch between colour and image fill.

#
Drop an image or click to browse

Timeline

Scrollable horizontal strip of 50×50 thumbnails with hover lift, active border, drag states, and a glassmorphism Add button. Duration badge on each frame.

4.5s
3.0s
5.0s
4.5s

Forms

Range slider with 3px track and 14px thumb. Select with custom caret. Hex text input with # prefix.

4.5s
85%
#

Icon Swap

Animated A↔B icon transition using blur + scale. Used on the play/pause button. CSS-only state, triggered by data-state attribute.

Click to toggle play ↔ pause

Blur: 2px · Scale: 0.25 → 1 · Duration: 200ms

Dot Grid

The infinite canvas background — radial-gradient dot pattern at 22px spacing. Drag-over state shows a dashed inset border.

Or drop them anywhere
Drag-over state (dashed inset border)