/
Style responsive layouts, build components, and add interactions and motion.
Style :hover, :focus, and :active states (and per-breakpoint overrides) from a class — a single definition carries all its interactive states.
A rotate-around-object interaction turns an element to face the cursor — useful for needles, eyes, arrows, and playful hovers.
Beyond tweening properties, interactions can run special effects: textSplit, textScramble, typewriter, counter, svgDraw, svgMorph, motionPath, plus media controls and image sequences.
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
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 (
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.
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.
Split text into characters, words, or lines and animate the pieces with a stagger — great for headline reveals.
Right-click a video to replace it with a high-keyframe scrub asset and wire a native parent-driven scroll interaction.
Breakpoint presence lets you show or hide an element per breakpoint — so a section can appear on desktop but not mobile, without deleting it.
The Border block sets border width/style/color (uniform or per-side) and per-corner radius.
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.
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.
Edit SVG paths on the canvas with full cubic-Bézier anchors — drag handles in mirror, asymmetric, or corner modes; supports subpaths and closing.
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
When a media element is selected, the Media panel shows type-specific controls — for images, video, audio, Spline 3D, Lottie, and image sequences.
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 are reusable elements; instances inherit the master and can expose properties (Boolean, Text, Instance Swap, Variant). Variant changes can animate via FLIP.
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
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.
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.
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).
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.
A window-resize interaction fires when the viewport changes size — handy for responsive behaviors that aren’t covered by breakpoints alone.
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.
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.
Pointer-triggered interactions animate an element on hover, click, or focus — for buttons, cards, and inputs.
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.
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.
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
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.
The Transform block moves, scales, rotates, and skews elements in 2D or 3D, with a 3D toggle that switches transform-style to preserve-3d.
The Fill block stacks fill layers — solid colors, linear/radial/conic gradients, and images — each with position, size, and repeat.
Extract repeated styles, complete missing design-system primitives, and apply document-wide cleanup tools from the UI, AI assistant, or MCP.
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.
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.
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 tweens a component subtree whenever a prop or variant changes — so switching a component’s state animates instead of snapping.
Build a carousel from a track of slides with prev/next and bullet controls, using the .f0-carousel class convention.
The Settings tab of any interaction controls timing: duration, delay, easing, looping, and how a multi-element animation staggers.
For coordinated, ms-precise choreography, the timeline interaction sequences multiple tweens with overlaps and position offsets.
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
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
Make an element follow the pointer (with optional smoothing and axis lock) using the follow-mouse trigger.
Select a parent by element/class selector, enable Animate children, and stagger each parent’s direct children independently.
Use the same targeted cleanup operations from the Helpers panel, AI assistant, or MCP, with scope-aware confirmation for page-wide changes.
Scoping decides what triggers an interaction and what it animates — and, for repeated components, whether each instance reacts on its own or all together.
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.
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
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
Beyond paint, the Styles section controls how an element composites and clips: opacity, mix-blend-mode, visibility, pointer-events, user-select, and overflow.
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.
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
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.
A mouse-position interaction drives values from where the cursor is — for parallax layers and cursor-reactive elements.
Drive an animation from pointer position (mouse-position trigger) — e.g. parallax or a value that tracks the cursor across an axis.
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.
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.
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.
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.
Make every click/trigger add another movement, rotation, or scale from the element’s current state.
Scroll inertia adds smoothed, momentum-based motion driven by scroll velocity — a soft, weighted feel rather than a 1:1 scrub.
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.
The "Layout & Transform" panel lets a frame arrange its children automatically. flowmo offers three layout modes — free (absolute), Stack (Flex), and Grid.
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
Make elements draggable (with bounds and inertia) or respond to swipe gestures in a direction.
The Spacing block sets padding and margin (uniform or per-side) and, for flex/grid containers, Gap (one value or separate Row/Col).
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.
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.
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.
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.