Preview Panel

The preview panel shows a live rendering of your animation. It updates in real time as you edit keyframes, values, and timing.

Shape presets

The shape dropdown in the preview toolbar lets you quickly set up a starting element. Selecting a shape replaces the HTML and CSS in the code editor with a pre-configured element.

Shape	Description
Box	100px orange square with rounded corners
Circle	100px orange circle
Triangle	100px triangle using clip-path
Star	100px star using clip-path
Card	240px card with heading and paragraph text
Button	Pill-shaped button with label
Empty	Clears HTML and CSS to a blank canvas

Once you select a shape, you can freely edit the generated HTML and CSS. The shape dropdown shows Custom when the code no longer matches any preset.

Viewport sizing

The viewport dropdown lets you preview your animation at different screen sizes:

Preset	Dimensions
Auto	Fills the available preview area (responsive)
Phone	375 x 667
Phone Large	430 x 932
Tablet	768 x 1024
Laptop	1366 x 768
Desktop	1920 x 1080
Custom	Enter your own width and height

The preview iframe resizes to match the selected viewport. When the viewport is larger than the panel, the preview zooms to fit.

When a fixed viewport is selected (anything other than Auto), additional controls appear:

Orientation toggle — switch between portrait and landscape
Zoom controls — fit to panel, zoom in, and zoom out buttons with a percentage display

Code editor toggle

The Code button in the preview toolbar toggles the code editor panel inline next to the preview. When active, the preview and code editor share the space with a resizable splitter.

Focus mode

Click the fullscreen button in the preview toolbar to toggle focus mode. This hides the properties panel and collapses the timeline to give the preview maximum screen space.

Click the button again to return to the normal layout.