Documentation is work in progress and not completeEditor
Introduction
Official Product Documentation · Alpha Release
1. Overview
FlashFX is a professional web-based application for motion design and animation. It brings together a comprehensive vector drawing toolkit, a powerful multi-track animation engine, and a full-featured export system , all accessible directly through a modern web browser without any installation. Whether you are a designer crafting a brand identity animation, a content creator producing social media videos, or a developer prototyping an interactive concept, FlashFX provides all the tools necessary to create stunning, publication-ready motion graphics.
The application is designed around three distinct workflow modes, Design, Animate, and Advanced, allowing users to focus on the right tools at the right time. Projects can be saved to the cloud for access across devices, or worked on offline in Guest mode with local browser storage. The entire creation-to-export pipeline lives in the browser, making FlashFX exceptionally accessible and portable.
| What is FlashFX? | |
|---|---|
| Category | Web-based Motion Design & Animation Application |
| Platform | Web Browser (Chrome, Edge, Firefox, Safari) |
| Status | Alpha, Active Development |
| Creator | Gabriele Bolognese |
| Core Capability | Design, animate, and export professional motion graphics entirely within a web browser, no installation required. |
2. Workspace & Interface Modes
FlashFX organizes its workspace into three carefully considered layout modes. Each mode adapts the interface to the specific task at hand, hiding unnecessary panels and surfacing the controls that matter most in that phase of work.
| Feature | Description |
|---|---|
| Design Mode | A clean, canvas-focused layout optimized for creating and positioning visual elements. The timeline and animation controls are minimized, giving designers maximum screen space for composition work. This is the primary mode for building the visual structure of a scene, adding shapes, text, images, and arranging layers. |
| Animate Mode | A timeline-centric layout where the animation controls take center stage. Panels expand to reveal the full keyframe timeline, property tracks, and easing graph. This mode is used once the visual composition is in place, allowing precise control over how elements move, scale, fade, and transform over time. |
| Advanced Mode | A comprehensive layout that keeps all panels visible simultaneously. Suited for power users who need to switch rapidly between design and animation tasks, or who are working on complex projects where constant access to all controls is beneficial. This mode prioritizes functionality and information density over visual simplicity. |
Switching between modes is instant and non-destructive, no work is lost or reset when changing layouts. The three modes share the same underlying project state, so changes made in one mode are immediately reflected in all others.
3. Design & Creation Tools
3.1 Vector Drawing Tools
FlashFX provides a complete set of vector drawing primitives. Every shape is fully resolution-independent, meaning it renders with perfect clarity at any canvas size or zoom level.
| Feature | Description |
|---|---|
| Rectangle Tool | Creates rectangular and square shapes with fully adjustable width, height, corner radius, fill, and stroke. Rectangles can be given smooth rounded corners for softer aesthetics or kept sharp for precise geometric compositions. Supports all material system features including gradients and blend modes. |
| Circle / Ellipse Tool | Draws perfect circles and ellipses. Like all vector shapes, circles respond to the full material system and can carry complex multi-layer fills, outlines, shadows, and blur effects. |
| Star & Polygon Tool | Generates multi-pointed stars and regular polygons with a configurable number of sides or points. The inner and outer radius of stars can be adjusted to create anything from subtle decorative motifs to dramatic radial bursts. |
| Line Tool | Draws straight lines with configurable stroke weight, color, and cap style. Lines support the same material properties as other shapes, including gradient strokes. |
| Text Tool | Places text objects with full typographic control. Text supports rich formatting at the character level and integrates with the advanced text animation system for per-character, per-word, and per-line animation effects. |
| Image Import | Imports raster images directly onto the canvas. Imported images support 60+ visual filters, blend modes, and full integration with the animation engine, position, scale, opacity, and color properties can all be keyframe-animated. |
| Smart Guides & Snapping | An intelligent alignment assistance system that displays dynamic guides when elements approach edges, centers, or equidistant positions relative to other objects. Snapping can be toggled on or off and works with both the grid and other elements on canvas. |
| Grid System | An optional overlay grid provides structural reference points for precise layout work. Grid visibility and snap sensitivity are configurable. |
3.2 Material System
The material system is one of FlashFX's most distinctive features. Rather than a simple flat fill, each shape can carry a multi-layer material stack that combines gradients, textures, patterns, and blend modes to produce sophisticated visual surfaces.
| Feature | Description |
|---|---|
| Multi-Layer Fills | Each element can have multiple fill layers stacked on top of one another. Every layer has its own color, gradient, or texture, as well as its own opacity and blend mode, enabling effects that would normally require complex compositing in external tools. |
| Gradient Fills | Gradients can be linear or radial, with an unlimited number of color stops. Each stop's color and position are fully adjustable. Gradients can be rotated and scaled independently of the shape they fill. |
| Texture Fills | Procedurally generated textures can be applied as fill layers. Texture parameters such as scale, density, and variation are fully adjustable. |
| Pattern Generation | Built-in pattern generators create repeating geometric motifs including dots, lines, grids, and more. Patterns scale with the element and respond to all material blending options. |
| Blend Modes | Every material layer supports a full suite of blend modes, including multiply, screen, overlay, soft light, hard light, and more, giving designers precise control over how layers interact visually. |
3.3 Groups & Layer Management
Complex compositions require robust organization. FlashFX provides a layering and grouping system that keeps projects structured and manageable.
| Feature | Description |
|---|---|
| Layer Stack | All elements exist in a z-ordered layer stack. Any element can be moved up, down, to the top, or to the bottom of the stack to control visual depth and overlap. |
| Grouping | Multiple elements can be grouped together into a single logical unit. Groups can be moved, scaled, and animated as a whole, while individual members within the group retain their own properties and can still be edited independently. |
| Ungrouping | Groups can be dissolved at any time, returning their constituent elements to the main layer stack. This is a non-destructive operation, no properties or keyframes are lost. |
| Z-Order Controls | Fine-grained stacking order control via keyboard shortcuts and context menus, allowing precise management of overlapping elements. |
| Context Menus | Right-clicking any element or empty canvas area produces a context-sensitive menu with common actions such as group, ungroup, duplicate, delete, and ordering controls. |
4. Advanced Text System
Text in FlashFX is far more than a simple label. The text system supports complex typographic styling at the individual character level, rich visual effects, and an animation engine that can orchestrate stunning per-character or per-word motion sequences.
| Feature | Description |
|---|---|
| Rich Character Formatting | Each character within a text block can independently carry its own font size, color, bold, italic, and underline settings. This allows gradient-colored headings, mixed-weight typography, and other expressive typographic treatments without workarounds. |
| Gradient Text | Text can be filled with any gradient from the material system, linear, radial, or custom multi-stop gradients. Each gradient is mapped across the full extent of the text string, creating smooth color transitions across individual characters. |
| Text Stroke | An adjustable outline stroke can be applied to any text, with full color and width control. Strokes can complement or contrast the fill for legibility or stylistic effect. |
| Drop Shadows | Text supports configurable drop shadows with adjustable offset, blur radius, and color, adding depth and lift to text elements. |
| Pattern Fills | The same pattern generation system available for shapes can be applied as a text fill, creating textured or patterned typographic treatments. |
| Text Animation Modes | Text can be animated as a whole block, broken into individual characters, split into words, or divided by lines, each mode enabling a distinct class of animation effect. Stagger timing controls allow sequential reveals, cascading fades, and wave-like motion across text strings. |
| Per-Character Keyframes | When animating in character or word mode, each unit can receive its own independent keyframe, or a stagger delay can offset when each unit begins animating relative to the previous one, automating complex sequential animations. |
5. Image Filters & Effects
FlashFX includes over 60 professional image filters that can be applied to any imported image or shape. Filters stack and compose, allowing complex multi-effect treatments to be built up non-destructively.
| Feature | Description |
|---|---|
| Blur Effects | Multiple blur types including Gaussian blur for soft defocus effects, directional motion blur for simulating movement, and radial blur for zoom and spin effects. Blur radius is fully adjustable and can be animated over time. |
| Color Adjustments | A comprehensive suite of color controls including brightness, contrast, saturation, hue rotation, and color temperature. Color curves can be adjusted per channel for fine-grained color grading. |
| Stylization Effects | Artistic filters including edge detection, emboss, posterize, and pixelation effects that transform photographic content into stylized illustrations or graphic treatments. |
| Distortion Effects | Warp, ripple, and displacement effects that deform the underlying image geometry, creating liquid, organic, or glitch-style visual treatments. |
| Blend Mode Integration | Every image layer supports the full blend mode library, allowing images to interact with shapes and other layers below them in complex ways, from simple transparency to advanced photographic compositing techniques like multiply and screen. |
| Animated Filters | All filter parameters can be keyframe-animated, meaning an image can transition from sharp to blurred, from full color to monochrome, or from undistorted to warped, all driven by the animation timeline. |
6. Animation Engine
The animation engine is the heart of FlashFX. It enables precise, expressive control over how every visual element behaves over time, from simple fade-ins to complex multi-element choreography with custom easing curves.
6.1 Keyframe System
FlashFX uses a keyframe-based animation model familiar to users of professional motion design tools. At its simplest, a keyframe records the value of a property at a specific point in time. The engine interpolates between keyframes to produce smooth motion.
| Feature | Description |
|---|---|
| Automatic Keyframe Creation | When animation mode is active, any property change made to a selected element automatically creates a keyframe at the current playhead position. There is no need to manually insert keyframes, moving an element or adjusting a color while a playhead is positioned instantly captures that state as a keyframe. |
| Manual Keyframe Editing | Keyframes can be selected, moved, duplicated, or deleted directly on the timeline. Moving a keyframe earlier or later in time changes when the animated state is reached, giving precise control over pacing and timing. |
| Multi-Property Animation | Any number of properties on any element can be animated simultaneously. Position, rotation, scale, opacity, color, stroke width, blur radius, all can have independent keyframe tracks running in parallel. |
| Timeline Visualization | Each animated property gets its own horizontal track on the timeline, with keyframes displayed as diamond markers. The full history of an element's animation is visible at a glance, making it easy to identify timing and adjust pacing. |
| Keyframe Selection & Manipulation | Multiple keyframes can be selected simultaneously across different tracks. Selected groups can be moved together to shift timing, or deleted in bulk to remove a segment of animation. |
6.2 Easing & Interpolation
The quality of an animation is largely determined by its easing, the acceleration and deceleration profile between keyframes. FlashFX provides 16 easing presets and a custom curve editor for complete control over motion feel.
| Feature | Description |
|---|---|
| 16 Easing Presets | Ready-to-use easing options covering the full spectrum of motion feel, including Linear (constant speed), Ease In/Out (smooth acceleration), Ease In-Out (smooth start and end), Bounce (spring-back overshoot), Elastic (oscillating overshoot), and more. Each preset can be applied to individual keyframes. |
| Custom Bezier Curves | The interpolation graph allows users to edit bezier curve handles directly, creating entirely custom easing profiles. The curve is visualized as a graph with draggable control points, providing an intuitive and precise editing experience. |
| Per-Keyframe Easing | Each individual keyframe transition can have its own easing setting. The transition from one keyframe to the next can ease in differently than the transition to the one after it, enabling nuanced motion with varying rhythms within a single animation. |
| Easing Visualization | The curve editor provides a live visual preview of how the easing profile will affect the property value over time, making it easy to verify that the intended motion feel has been achieved before previewing playback. |
6.3 Multi-Track Timeline
The timeline is the primary workspace for animation. FlashFX's dual timeline layout provides both a high-level view of all animated elements and a detailed per-element property view.
| Feature | Description |
|---|---|
| Dual Timeline Layout | The timeline supports two complementary views: a wide overview that shows all animated elements and their timing at once, and a focused element view that expands to show the individual property tracks for a selected element. |
| Timeline Navigation | The playhead can be dragged to any point in time. Arrow key navigation steps through frames precisely. Pan controls allow scrolling through long animations, and scroll-wheel zooming adjusts the visible time range. |
| Play & Preview | Full preview playback is available at any time with the spacebar or play button. Playback loops continuously so that animations can be reviewed repeatedly without manual interaction. |
| Frame-Accurate Scrubbing | Dragging the playhead scrubs through the animation at full fidelity, allowing frame-by-frame inspection of any moment in the timeline. The canvas updates in real time as the playhead moves. |
6.4 Sequence Compositor
For more complex productions, the Sequence Compositor allows multiple distinct animation sequences to be assembled into a longer composition, with timing and layering control over how sequences relate to one another.
| Feature | Description |
|---|---|
| Multiple Sequences | A project can contain any number of named sequences, each with its own full timeline of animated elements. Sequences can represent scenes, sections, or variations of a motion design piece. |
| Sequence Ordering | Sequences can be arranged in order to create a longer production. Transitions between sequences can be timed to produce seamless or deliberate cuts. |
| Independent Timelines | Each sequence has its own independent timeline with its own duration, elements, and animations. This keeps complex projects organized by dividing them into logical sections. |
7. Export & Rendering
FlashFX provides a complete export pipeline capable of producing publication-ready video files, image sequences, and animated GIFs, all rendered directly within the browser using a deterministic frame-accurate renderer.
| Feature | Description |
|---|---|
| Video Export, WebM | Exports animations as WebM video files using VP8 or VP9 encoding. WebM is an open format widely supported by web browsers and video platforms, making it ideal for web-destined motion graphics. |
| Video Export, MP4 | Exports animations as MP4 files encoded with the H.264 codec. MP4 is the most universally compatible video format, accepted by virtually every platform, device, and editing application. |
| Frame Rate Options | Export frame rates of 24 fps (cinematic), 30 fps (broadcast standard), and 60 fps (smooth, high-motion) are supported. Higher frame rates produce smoother motion at the cost of larger file sizes. |
| Quality Settings | Four quality tiers, Low, Medium, High, and Maximum, give control over the trade-off between file size and visual fidelity. Higher settings produce larger files with more detail and less compression artifacting. |
| PNG Image Sequence | Exports each frame of the animation as an individual PNG file, packaged for delivery. PNG sequences are the highest-fidelity export format and are commonly used when handing off work to professional compositing or video editing software such as After Effects or DaVinci Resolve. |
| Single Frame Export | Exports any single frame from the animation as a standalone PNG image, with support for transparent backgrounds. Useful for creating thumbnails, still previews, or static design deliverables. |
| GIF Export | Exports the animation as an animated GIF for use in messaging, social media, or web contexts where video playback is not supported. GIF export includes frame rate and color palette controls to balance quality and file size. |
| Deterministic Rendering | The rendering engine produces frame-by-frame output that is identical every time the same project is exported. This ensures consistency between preview and final export, and between repeated exports of the same file. |
| Batch Processing | Multiple export formats can be queued and processed simultaneously in a single export session, saving time when deliverables are needed in several formats at once. |
8. Project Management
FlashFX is designed to support both casual exploration and professional production workflows. A robust project management system handles saving, loading, organizing, and sharing design files across sessions and devices.
| Feature | Description |
|---|---|
| Cloud Storage | Authenticated users can save projects directly to the cloud. Cloud-saved projects are accessible from any device and any browser, simply log in to resume work wherever you left off. Projects are stored securely with owner-based access control, meaning only the account that created a project can view or edit it. |
| Automatic Cloud Sync | When working in an authenticated session, changes are automatically synchronized to the cloud at regular intervals. There is no need to manually trigger saves, the application keeps the cloud copy current in the background. |
| Guest Mode / Local Storage | Users who prefer not to create an account can work in Guest mode. In this mode, projects are saved to the browser's local storage. Work is preserved between sessions on the same device and browser, though it is not synced to other devices and would be lost if browser data were cleared. |
| Project Files (.flashfx) | Projects can be exported as portable .flashfx files, a compressed package that contains the entire project state including all elements, animations, settings, and embedded assets. These files can be shared, backed up, or archived, and re-imported into FlashFX on any installation. |
| Auto-Backup | The application automatically generates preview thumbnails and creates backup snapshots of projects at key moments, providing a safety net against accidental data loss. |
| Version History | A built-in changelog tracks meaningful changes to a project over time, providing a record of how the design has evolved and enabling reference back to earlier states. |
| Unlimited Undo / Redo | Every action taken in the editor is fully reversible. Ctrl+Z steps backward through the history indefinitely, and Ctrl+Y reapplies undone actions. The history is maintained for the full duration of a session. |
| Copy & Paste | Full clipboard support for elements allows copying items within a project or between projects. Pasted elements retain all their properties and animation data. |
9. AI-Powered Features
FlashFX integrates artificial intelligence capabilities to accelerate creative workflows and provide intelligent assistance at key stages of the design process.
| Feature | Description |
|---|---|
| AI Chat Assistant | An integrated conversational assistant is available throughout the application. Users can ask for design suggestions, request explanations of features, get feedback on compositional choices, or get step-by-step guidance on how to achieve a specific effect. The assistant is context-aware and understands the current state of the project. |
| DALL-E Image Generation | FlashFX integrates with OpenAI's DALL-E image generation system, allowing users to generate custom images directly from a text prompt without leaving the application. Generated images are placed directly onto the canvas and can be edited, filtered, and animated like any imported image. |
| Google Image Search Integration | Users can search for stock and reference images from within the application and import results directly onto the canvas. This eliminates the need to switch between browser tabs when sourcing visual reference or placeholder imagery. |
| AI-Powered Design Presets | The application includes a library of smart design presets that leverage AI to suggest starting points, style combinations, and animation configurations tailored to common use cases and design goals. |
10. Keyboard Shortcuts
FlashFX is built for efficiency. An extensive keyboard shortcut system allows power users to access the most common actions without reaching for the mouse, significantly accelerating production workflows.
General Controls
| Shortcut | Description |
|---|---|
| Ctrl + Z | Undo the last action. Can be pressed repeatedly to step back through the full action history. |
| Ctrl + Y | Redo the last undone action. |
| Ctrl + D | Duplicate the currently selected element(s), creating an identical copy with all properties and animation data. |
| Ctrl + G | Group the selected elements into a single composite unit. |
| Ctrl + Shift + G | Ungroup the selected group, returning its elements to the main layer stack. |
| Delete | Remove the currently selected element(s) from the canvas. |
| Ctrl + A | Select all elements on the canvas. |
| Escape | Deselect all elements and return to the neutral selection state. |
Drawing Tools
| Shortcut | Description |
|---|---|
| R | Activate the Rectangle drawing tool. |
| C | Activate the Circle / Ellipse drawing tool. |
| T | Activate the Text placement tool. |
| L | Activate the Line drawing tool. |
| I | Activate the Image import tool. |
| V | Return to the Selection (pointer) tool. |
View & Navigation
| Shortcut | Description |
|---|---|
| Ctrl + 0 | Fit the entire canvas to the current window, resetting zoom to show the full composition. |
| Ctrl + = | Zoom in, increasing the visible scale of the canvas. |
| Ctrl + - | Zoom out, decreasing the visible scale of the canvas. |
| Ctrl + ; | Toggle the grid overlay on or off. |
| Ctrl + ' | Toggle element snapping on or off. |
Timeline Controls
| Shortcut | Description |
|---|---|
| Spacebar | Play or pause animation playback from the current playhead position. |
| Left Arrow | Step the playhead back by one frame. |
| Right Arrow | Advance the playhead forward by one frame. |
| Ctrl + Drag | Pan the timeline view left or right to navigate through longer animations. |
| Scroll Wheel | Zoom the timeline in or out, adjusting the visible time range. |
Element Nudging
| Shortcut | Description |
|---|---|
| Arrow Keys | Move the selected element(s) by 1 pixel in the corresponding direction. |
| Shift + Arrow Keys | Move the selected element(s) by 10 pixels in the corresponding direction for faster repositioning. |
11. Storage & Account Modes
FlashFX supports two distinct operational modes, each suited to different working preferences and requirements.
| Aspect | Guest Mode | Authenticated Mode |
|---|---|---|
| Account Required | No | Yes (free email/password) |
| Storage Location | Browser local storage | Cloud database |
| Cross-Device Access | No | Yes, from any device |
| Automatic Sync | No | Yes, continuous |
| Persistence | Until browser data cleared | Indefinite cloud retention |
| Free Storage Quota | Limited by browser quota | 50 MB on free tier |
| Data Security | Local only | Server-side with Row Level Security |
12. Supported Export Formats
| Format | Type | Key Attributes | Best Used For |
|---|---|---|---|
| WebM | Video | VP8 / VP9 codec, open format | Web delivery, browser-based video |
| MP4 | Video | H.264 codec, universal compatibility | Broadcast, social media, editing pipelines |
| PNG Sequence | Image Series | Lossless, per-frame PNGs | High-end compositing, post-production |
| GIF | Animated Image | Looping, wide compatibility | Messaging, social posts, web embeds |
| Single PNG | Still Image | Lossless, transparency support | Thumbnails, static design deliverables |
| .flashfx Project | Project File | Compressed JSON + assets | Archiving, sharing, cross-device work |
13. Roadmap & Upcoming Features
FlashFX is in active development. The following features are planned for future releases, representing the direction in which the platform is growing.
| Feature | Description |
|---|---|
| Real-Time Collaboration | Multiple users will be able to work on the same project simultaneously, with live cursor visibility and synchronized updates, enabling team-based motion design workflows. |
| Video Import & Editing | The ability to import video files as layers within a composition, enabling FlashFX to function as a lightweight video editing and compositing environment, not just an animation creation tool. |
| Audio Tracks & Sync | Import audio files and synchronize animation keyframes to audio cues, enabling music-driven motion design and motion graphics that react to sound. |
| Shape Morphing Animations | Animate the transition of one shape's geometry into another, enabling fluid, organic-looking form transformations between keyframes. |
| 3D Transform Support | Extend the existing 2D transform system with perspective and depth controls, enabling pseudo-3D rotations and spatial compositions without requiring a dedicated 3D engine. |
| Plugin System | An extensible plugin architecture that will allow third-party developers to add new tools, export formats, data sources, or AI integrations to the FlashFX platform. |
| Template Marketplace | A library of professionally designed, fully animated templates that users can customize as starting points, accelerating production for common use cases such as title cards, lower thirds, social media posts, and presentation graphics. |
| Mobile Responsive Design | An adapted interface for tablet and mobile devices, enabling design review, annotation, and lightweight editing away from a desktop workstation. |
14. Performance & Browser Compatibility
FlashFX is a browser-based application and performs best when run in a modern, up-to-date browser. The following guidance helps ensure the best possible experience.
| Browser | Minimum Version | Recommendation |
|---|---|---|
| Google Chrome | Version 90+ | Recommended, best performance & compatibility |
| Microsoft Edge | Version 90+ | Fully supported, built on the same engine as Chrome |
| Mozilla Firefox | Version 88+ | Fully supported, excellent standards compliance |
| Apple Safari | Version 14+ | Supported; some advanced video export features work best in Chrome |
14.1 Performance Best Practices
Because FlashFX runs entirely in the browser, performance depends on both the application's design and the complexity of the project. The following practices help maintain smooth performance even with demanding compositions.
| Feature | Description |
|---|---|
| Canvas Dimensions | Use 4K resolution (3840×2160) for final export, but consider working at 1080p during the creation phase to reduce the rendering load during editing and preview. The canvas can be scaled up for export without loss. |
| Image Optimization | Compress and resize images before importing them into FlashFX. Large, uncompressed images are the most common cause of performance slowdowns, particularly when multiple images are animated simultaneously. |
| Layer Organization | Use grouping to consolidate related elements. Fewer independent layers means less rendering overhead, particularly during playback preview. |
| Animation Length | Shorter animations export more quickly and play back more smoothly during editing. For long productions, consider using the Sequence Compositor to divide the work into segments rather than building a single very long timeline. |
| Filter Usage | Complex image filters, particularly stacked blur and distortion effects, increase the processing cost of each frame. Use them judiciously on compositions with many animated elements. |