Design, layout & interactions
Style responsive layouts, build components, and add interactions and motion.
Element States (Hover, Active, Focus)
Style :hover, :focus, and :active states (and per-breakpoint overrides) from a class — a single definition carries all its interactive states.
Rotate toward the pointer
A rotate-around-object interaction turns an element to face the cursor — useful for needles, eyes, arrows, and playful hovers.
Interaction Actions: addClass, setAttribute, textScramble, svgDraw, counter & More
Beyond tweening properties, interactions can run special effects: textSplit, textScramble, typewriter, counter, svgDraw, svgMorph, motionPath, plus media controls and image sequences.
CSS vs GSAP animation engine
flowmo can run an interaction as pure CSS or via GSAP. The engine auto-picks: simple reveals/hovers/scroll compile to lightweight CSS when eligible, and anything complex (stagger, text-split, custom r
Media interactions (video, Lottie, Spline)
A set of ready-made interactions wire media to scroll or pointer: scrub a video or image sequence to scroll, scrub a Lottie, drive a Spline 3D scene, or auto-play a video when it enters the viewport (
Effects: Shadows, Blur, and Filters
The "Shadow & Filters" block stacks multiple shadow and filter effects — box/inner/drop/text shadow plus blur, backdrop blur, brightness, contrast, saturate, hue-rotate, invert, grayscale, and sepia.
The Inspector (right sidebar)
In Studio mode the right sidebar is your inspector. An icon rail toggles sections — Layout & Transform, Styles, Text, Media, Interact, Advanced — plus pinned Alignment and Class Manager.
Text Split Animations
Split text into characters, words, or lines and animate the pieces with a stagger — great for headline reveals.
Convert a placed video to scroll scrub
Right-click a video to replace it with a high-keyframe scrub asset and wire a native parent-driven scroll interaction.
Hide elements on specific devices
Breakpoint presence lets you show or hide an element per breakpoint — so a section can appear on desktop but not mobile, without deleting it.
Borders & radius
The Border block sets border width/style/color (uniform or per-side) and per-corner radius.
Copy styles with optional states and classes
Copy the effective authored style from one or more elements, optionally include each source element’s own state rules and user classes, then paste the mapped snapshots onto another selection.
Auto-animate (FLIP state changes)
An auto-animate interaction tweens an element (or component) smoothly between states or variants using a FLIP transition — so toggling a layout, list order, or variant animates instead of snapping.
SVG Vector Editor
Edit SVG paths on the canvas with full cubic-Bézier anchors — drag handles in mirror, asymmetric, or corner modes; supports subpaths and closing.
Choose and configure Interactive elements
Insert a code-backed interactive visual for particles, generative art, WebGL/Three.js, data visualization, physics, or another behavior that cannot be expressed cleanly with native layout and interact
The Media panel
When a media element is selected, the Media panel shows type-specific controls — for images, video, audio, Spline 3D, Lottie, and image sequences.
Building forms (inputs, selects & validation)
flowmo builds real, working forms. Native inputs (input/textarea/select/button/label) get type and validation attributes, and any element can be flagged to “act as a form field”. Pair it with a form-s
Components and Instances
Components are reusable elements; instances inherit the master and can expose properties (Boolean, Text, Instance Swap, Variant). Variant changes can animate via FLIP.
The Class Manager
The pinned Class Manager applies and toggles CSS classes on the selected element, shows which selector a value cascades from, and switches the editing state (hover/focus/active) and breakpoint you’re
SVG, Spline, Lottie, audio & image sequences
Beyond images and video, flowmo has first-class controls for several media types: SVG paint/stroke/draw, Spline 3D scenes, Lottie animations, audio, and frame-by-frame image sequences.
Build component variants with Clicked state and inherited auto-animate
Create reusable component variants, bind designer-named interaction/form/link/list states, use the sticky Clicked toggle, and author one auto-animate transition that every instance can inherit.
Aligning & distributing
The pinned Alignment bar gives one-click align and distribute buttons — left/center/right, top/middle/bottom, and distribute horizontally/vertically — for the selected element(s).
Complete missing primitives with Fill Design System
Measure gaps in the current design-system primitives, derive values from the project’s own visual vocabulary, and fill only the missing declarations after review.
React to window resize
A window-resize interaction fires when the viewport changes size — handy for responsive behaviors that aren’t covered by breakpoints alone.
Morph (lightbox & shared-element)
A morph interaction animates one element into another — opening a card into a lightbox, or a bullet into a panel — using a FLIP transition between the source and target.
Scroll reveal (appear on scroll)
A scroll-reveal interaction animates an element as it enters the viewport — the classic fade/slide-in. You set where the reveal starts and ends and whether it plays once.
Hover, click & focus animations
Pointer-triggered interactions animate an element on hover, click, or focus — for buttons, cards, and inputs.
Sizing: width, height, hug & fill
The Size block sets width and height (and, for flex children, grow/shrink/basis). Use keywords like Hug (max-content) and Fill (stretch), plus optional min/max and a ratio lock.
Components: variants, states & instance overrides
Turn a design into a reusable component with variants and states, then override exposed props per instance. The Interact panel’s Dimensions, States, and Instance sections drive this.
Smart templates (content-aware)
flowmo’s templates aren’t static blocks — each declares typed content slots (text, image, video, icon, background). When you insert one (or let the AI fill it), your content drops into the right slots
Advanced: variables & accessibility
The Advanced section binds custom CSS variables to the element and sets accessibility (semantic tag, id, ARIA label, role) plus data-f0-embed slots for raw HTML.
Transform Properties
The Transform block moves, scales, rotates, and skews elements in 2D or 3D, with a 3D toggle that switches transform-style to preserve-3d.
Fill & backgrounds
The Fill block stacks fill layers — solid colors, linear/radial/conic gradients, and images — each with position, size, and repeat.
Style Patterns, Fill Design System & Helpers
Extract repeated styles, complete missing design-system primitives, and apply document-wide cleanup tools from the UI, AI assistant, or MCP.
Links & CSS transitions
The Interact panel also holds non-animation behavior: turn an element into a link (<a>) with a URL and target, and add CSS transitions so property changes animate smoothly.
Page-unload (exit) animations
A page-unload interaction animates as the visitor navigates away — for page-transition effects. It can optionally hold navigation briefly so the animation can play.
Text & typography
The Text section sets font family, size, weight, line-height, color, and alignment, plus optional letter-spacing, transform, decoration, and a content editor.
Variant animate
Variant-animate tweens a component subtree whenever a prop or variant changes — so switching a component’s state animates instead of snapping.
Carousel Interaction
Build a carousel from a track of slides with prev/next and bullet controls, using the .f0-carousel class convention.
Playback & stagger
The Settings tab of any interaction controls timing: duration, delay, easing, looping, and how a multi-element animation staggers.
Timeline Editor Deep Dive
For coordinated, ms-precise choreography, the timeline interaction sequences multiple tweens with overlaps and position offsets.
Scroll scrub (scroll-linked & pinning)
A scroll-scrub interaction ties animation progress to scroll position — scrubbing a timeline as you scroll, optionally pinning the element in place. It also drives video scrubbing and image-sequence p
Animating code elements
Interactive code elements (React / canvas / WebGL) can expose their own editable fields, and those fields become animatable — so you can keyframe or scroll-drive a custom element’s parameters just lik
Follow Mouse Interaction
Make an element follow the pointer (with optional smoothing and axis lock) using the follow-mouse trigger.
Stagger the children of repeated parents
Select a parent by element/class selector, enable Animate children, and stagger each parent’s direct children independently.
Clean up layers, fonts, text, sizing, and constraints with Helpers
Use the same targeted cleanup operations from the Helpers panel, AI assistant, or MCP, with scope-aware confirmation for page-wide changes.
Targeting & per-instance scoping
Scoping decides what triggers an interaction and what it animates — and, for repeated components, whether each instance reacts on its own or all together.
Animation modes & the preset library
Start with a preset or choose Simple, Auto-animate, or Timeline; then define trigger, target, timing, scope, playback, and the CSS/GSAP engine before verifying preview and export.
Video element: sources, poster & playback
A video element gives you full HTML5 video control: a primary source plus alternative codec formats for browser fallback, a poster image, fit, and the playback toggles (controls, autoplay, loop, muted
Fonts: upload custom, Google & Adobe
The font picker isn’t limited to a fixed list — search ~1500 Google Fonts, add Adobe (Typekit) kits, use system fonts, or upload your own font files. Uploaded fonts are saved to your workspace and reu
Opacity, blend, visibility & overflow
Beyond paint, the Styles section controls how an element composites and clips: opacity, mix-blend-mode, visibility, pointer-events, user-select, and overflow.
Adding properties (the +)
Each section shows a “+” when it has optional properties you haven’t set yet. It opens a searchable list; pick one to add a row. Added rows get an “×” to remove them.
Field types reference
Every property row in the inspector renders one of a small set of reusable input widgets. Knowing them helps you read any panel: unit fields, box/dual fields, sliders, color tabs, toggle groups, and t
Shadows & filters
The Shadow & Filters block stacks visual effects on an element: outer/inner/drop/text shadows and a set of CSS filters like blur, brightness, contrast and hue-rotate.
Mouse position parallax
A mouse-position interaction drives values from where the cursor is — for parallax layers and cursor-reactive elements.
Mouse Move Scrub Animation
Drive an animation from pointer position (mouse-position trigger) — e.g. parallax or a value that tracks the cursor across an axis.
Tabs
A tabs interaction wires tab buttons to panels — showing one panel at a time with a fade between them, using flowmo’s .f0-tabs class conventions.
Position & the aim widget
The Position block sets the CSS position mode and offsets via a visual 3×3 “aim” widget; optional z-index, order, grid placement, and self-alignment.
Layout Types
The "Type" picker in Layout & Transform chooses how a container lays out its children: free, Stack (Flex), Grid, Block, Inline, Inline Block, Table, or None.
Form submit (validation & actions)
A form-submit interaction runs when a form is submitted: validate fields, then send an email, hit a webhook, or run a custom script, with success/failure outcomes.
Simple additive animation (“Add on top”)
Make every click/trigger add another movement, rotation, or scale from the element’s current state.
Scroll inertia
Scroll inertia adds smoothed, momentum-based motion driven by scroll velocity — a soft, weighted feel rather than a 1:1 scrub.
Extract repeated styling with Style Patterns
Scan selected pages for repeated visual rule groups, review concrete proposals, and extract accepted patterns into named shared classes/tokens without changing the rendered result.
Using Auto Layout (Flexbox)
The "Layout & Transform" panel lets a frame arrange its children automatically. flowmo offers three layout modes — free (absolute), Stack (Flex), and Grid.
Build an accordion (exclusive-open panels)
An accordion isn’t a single interaction type — it’s a pattern you compose: clickable headers that expand panels, where opening one closes the others. You build it from a click interaction plus per-ins
Drag and Swipe Interactions
Make elements draggable (with bounds and inertia) or respond to swipe gestures in a direction.
Spacing: padding, margin & gap
The Spacing block sets padding and margin (uniform or per-side) and, for flex/grid containers, Gap (one value or separate Row/Col).
Adding basic responsive breakpoints
flowmo is desktop-first: style the base breakpoint, then add smaller breakpoints whose overrides cascade down. Breakpoints can be max-width, min-width, or both, with an optional scale-lock.
Design System: CSS Variables & Global Classes
The Design System holds reusable CSS variables (color/number/text/image/multi) and global classes. Change a token once and every element using it updates.
Transitions and Easing
Interactions animate with GSAP. Each tween has a duration and a GSAP ease (power1–3.out, back.out, elastic.out, expo.out, sine.inOut, none), with optional stagger, loop, and yoyo.
Interactions: Trigger & Target
Every interaction pairs a Trigger (what starts it) with a Target (what animates). flowmo supports 15 trigger types, from click/hover to scroll-scrub, drag, and follow-mouse.