Drag onto the canvas, or click to set options first

Container

Text

Heading ▼

H1 — Large

H2 — Medium

H3 — Small

Text Input

Checkbox

Button

Image

Link

Dropdown

Accordion

Bulleted List

Numbered List

Animate on Scroll

DOM Tree

Click select Drag move Right-click actions Arrows navigate Ctrl+scroll zoom

Legend

Container Text / Heading Input Button Image Link Other Has animation Has adapter Asset

MY ASSETS

Click + to add to canvas · drag to place · click card for options

No assets saved yet.
Click Browse & Add Assets above
to pick from 275+ components.

Modules

Drag a module onto the canvas to place it

Pages

Projects 0

Welcome to your new project

This is a placeholder — edit this text, add components from the left panel, or delete this section and start fresh.

Animation Panel

Responsive Panel

Binding

Logs

Quick Actions

Add selector

Pick a selector to add this animation

Animations

Select an animation to edit

Properties

Timing

duration

timing-fn

delay

iterations

Playback

direction

fill-mode

play-state

Timeline 0.00s

0.00s / 1.00s 0%

KF at %

Responsive Adapters

Select a component on the canvas to edit its properties here.

Select an element on the canvas, then apply a common styling action here. Every change is a single undo step and shows in the Logs tab.

Target

Editing this element — base styles.

⌕

Target

Editing this element — base layout.

Item

Container

display

none

Viewport Simulator

Adapter

Select an adapter

Pick a selector for this adapter

⌕

context

Select an element
to assign an ID

# ID

Select an element
to assign classes

. Classes

Build CSS Rule

—

Built Rules

no rules yet

Click an element on the canvas
to see its animations

Animation

Select animation

Animation

Properties

⌕

Animate on scroll

Selector Usage

All IDs Classes Pseudo-classes Pseudo-elements Unused