The documentation provided below is intended to fully detail the features and technical parameters of the OMNI-FX Motion Icon System. This document should not be mistaken for the legal EULA or official usage guidance.
The OMNI Philosophy
Responsive. Moving. Alive.
We save creators hundreds of hours by delivering a complete, production-ready animation engine that your users will remember.
Your Motion Design Teammate
The system is built on the concept of OMNI: One Matter Neural Interaction. This means interfaces should feel less like code and more like life. Our goal is to make every icon feel like a living organism, moving, adapting, and responding to user interaction with fluid expressiveness.
We designed the logic specifically for developers: we use Number inputs where 0 and 1 clearly represent the false or true state (off/on), a pattern developers use daily. The result is FX: Fluid Experience.
The Core Problem We Solve
Standard icons switch jarringly, forcing the user's brain to process two separate, static states. OMNI-FX solves this by providing seamless state transitions where icons fluidly morph from one shape to the next (e.g., a menu icon elegantly animates into a close 'X'). This radically reduces cognitive load and creates moments of user delight.
Icon Inventory:
The OMNI-FX Packs
The OMNI-FX Motion Icon System consists of a total of 50 unique, animated icons. These icons are grouped into progressive packages designed to scale with your project's needs.
Pack Name | Icon Count | Focus & Philosophy |
Starter (Free Trial) | 7 Icons | For testing compatibility and basic UI needs. |
Core (Essential Pack) | 20 Icons | The foundation of every interface. 20 ultra-clean, multi-purpose icons for all apps & web. |
Creator Pack | 30 Icons | Includes all 20 Essentials plus 10 expressive Creative Specials made for designers and digital makers. |
Studio Pack | 50 Icons | The full OMNI experience. Includes the entire Creator Pack plus 20 Pro Icons, featuring Finance Specials for fintech and SaaS. |
Icon Breakdown (Included in Creator and Studio Packs)
The higher-tier packs unlock specialized icon sets, giving your application a unique edge:
Set Name | Icon Count | Typical Use Cases | Sample Icons Included |
Essential Set | 20 Icons (in Core/Creator/Studio) | Universal interface actions, navigation, settings, profiles, and basic feedback. | Home, Search, Heart, Close, Plus, Trash. |
Creative Spark | 10 Icons (in Creator/Studio) | Design tools, media playback, portfolios, art, and visual-first products. | Pencil, Play,Pause, Star, Share, chat. |
Business Core | 20 Icons (in Studio Only) | Commerce, payments, finance, marketplaces, and data visualization. | Credit Card, Wallet, Dollar Coin, Calender, Shopping Bag, Key. |
Focused and Purposeful
IconIndex = {0 to 50}
(core= 0-20 ; ceator= 0-30 ; studio= 0-50)
Core Pack
Creator Pack
Studio Pack
The 8 State Machine Inputs: Your Control Knobs
The entire system is controlled by 8 inputs in the State Machine named StateMachine. You gain programmatic control over the icon's state, colour, hover effects, and visibility by changing the values of these inputs and firing the ClickTrigger.
Input Name | Type | Significance & Playfulness | Use Case & Logic |
| Number | The Identity Switch. This controls which icon is displayed. Inputting | Usage: Set the number corresponding to your desired icon (e.g., |
| Number | The Palette Switch. Controls the primary color of the icon. Inputs range from 1 to 15 (depending on your pack), with | Usage: Use |
| Number | The Bounding Box Toggle. Controls the background fill behind the icon. | Usage: Use |
| Number | The Interaction Feel. Determines the type of visual feedback when the cursor is over the icon. Crucial for device-aware design. | Usage: |
| Number | The Futuristic Toggle. A subtle effect to differentiate your UI from generic designs. | Usage: 0 is Off; 1 is On (True). When set to |
| Number | The Dead Zone. Provides a one-click solution for the disabled visual state. | Usage: 0 is Off (Normal); 1 is On (True). When enabled, the icon enters a desaturated/sleep state, and hover effects are disabled. |
| Boolean | The Listener. An automatic listener used internally by Rive. | Usage: Auto-triggers on mouse-over on desktop. Programmatic control is usually focused on setting |
| Trigger | The State Commit. This is the most critical input. Changing a Number input only prepares the state; firing the trigger commits the change and executes the 400ms morph animation. | Usage: Must be called programmatically on initial component load (to solve the Zero State issue) and after changing the
|
Icon Breakdown (Included in Creator and Studio Packs)
The higher-tier packs unlock specialized icon sets, giving your application a unique edge:
Set Name | Icon Count | Typical Use Cases | Sample Icons Included |
Essential Set | 20 Icons (in Core/Creator/Studio) | Universal interface actions, navigation, settings, profiles, and basic feedback. | Home, Search, Heart, Close, Plus, Trash. |
Creative Spark | 10 Icons (in Creator/Studio) | Design tools, media playback, portfolios, art, and visual-first products. | Pencil, Play,Pause, Star, Share, chat. |
Business Core | 20 Icons (in Studio Only) | Commerce, payments, finance, marketplaces, and data visualization. | Credit Card, Wallet, Dollar Coin, Calender, Shopping Bag, Key. |
The Critical "Zero State" Logic
The Rive file defaults to the Zero State (IconIndex = 0), which is set to be invisible. This is an intentional design decision to achieve two things:
Seamless Morphing: It acts as a central Junction Hub, allowing fluid morphing from any icon to any other icon without pre-defining thousands of connections.
No Hatching: It prevents the icon from flickering or suddenly appearing when the Rive file first loads into your app.
Developer Action Required: To solve the initial invisibility on load, you must set your desired IconIndex (e.g., 5) and then immediately fire the ClickTrigger once during component initialization.
Feature Deep Dive:
Theming and Interactivity
1. Icon Color Palette (ColorStyle)
We provide a highly curated palette of colors designed for modern, futuristic apps and web platforms. Setting the ColorStyle number input controls the primary colour of the icon.
No. | Color Name | Hex Code | Represents | Typical Use Cases |
1 | Playful Pink | F4CADD | A welcoming, gentle, and modern light mode. | Default light themes; wellness apps; creative portfolios. |
2 | Midnight Plum | 090010 | The default dark theme; deep, luxurious, and highly professional. | Default dark theme; fintech; cinematic websites; high-end brands. |
3 | Digital Red | D50B0B | Urgency, importance, and alert. | Critical error messages; delete confirmations. |
4 | Success Green | 1DAD40 | Clarity, positive confirmation, and agreement. | Form submission success; confirmations; digital security. |
5 | Digital Blue | 0778FD | Trust, technology, and quintessential modern tech. | Forms submission success; financial dashboards; navigation. |
6 | Studio Amber | FF8B00 | Warmth, energy, and optimism. | Warning messages (less severe than red); highlighting features. |
7 | Teal | 00A3AD | Clarity and clean UI; bright, engaging. | Healthcare applications; financial tools that need to feel fresh. |
8 | Magenta | E11D74 | Boldness, creativity, and fun. | Creative tools; social media apps; brands targeting a younger audience. |
9 | Slate Blue | 3E0DF6 | Focus, productivity, and serious tasks. | Enterprise software; project management tools; any UI that needs to feel orderly. |
10 | Forest Green | 166534 | Eco-friendly; natural, calm, and trustworthy. | Eco-friendly brands; health and wellness platforms. |
11 | Charcoal | 374151 | Professionalism and reliability. | A versatile, less-stylized dark mode; secondary UI elements. |
12 | Rose Gold | D4A373 | Elegance, luxury, sophisticated, and metallic. | High-end e-commerce; fashion and lifestyle brands. |
13 | Mint | 6EE7B7 | Purity, nature, health, and freshness. | Health tech startups; financial apps that want to feel new and friendly. |
14 | Coral | FF7F50 | Energetic, warm, vibrant. | Call-to-action buttons; social apps; brands that want to feel human. |
15 | Ghost Orchid | F5F7F2 | Purity and minimalism. | A versatile, less-stylized light mode; professional portfolios, clean and minimal UIs. |
15 Color States. Zero Overthinking.
ColorStyle = {0 to 15}
(core= 0-2 ; ceator= 0-5 ; studio= 0-15)
Playful Pink
#F4CADD
Midnight Plum
#090010
Core Pack
Digital Red
#D50B0B
Success Green
#1DAD40
Digital Blue
#0778FD
Creator Pack
Studio Amber
#FF8B00
Teal
#00A3AD
Magenta
#E11D74
Slate Blue
#3E0DF6
Forest Green
#166534
Charcoal
#374151
Rose Gold
#D4A373
Mint
#6EE7B7
Coral
#FF7F50
Ghost Orchid
#FF7F50
Studio Pack
NOTE ON PACK LIMITATIONS (ColorStyle):
The Starter Pack provides all 15 Color Styles for exploration.
The Core Pack is restricted to 2 Color Styles (1: Playful Pink, 2: Midnight Plum), catering to essential light/dark modes.
The Creator Pack unlocks 5 Color Styles (1 & 2, plus 3: Digital Red, 4: Success Green, 5: Digital Blue).
The Studio Pack unlocks all 15 Color Styles.
Want your own color scheme?
We can deliver a brand-specific set, built on the same Rive system.
Contact hello@omnifx.studio to get started.
2. Background Color Palette (BackgroundStyle)
The icons are bounded within a square frame. The BackgroundStyle number input controls the color of the bounding box.
No. | Color Name | Hex Code | Represents | Typical Use Cases |
0 | Transparent | N/A | The Invisible State. | Use when you want the icon to sit on top of a custom background or UI layer. |
1 | Light Mist | F1F5F9 | Clean, soft off-white. | Default light backgrounds, content cards, subtle neutral surfaces. |
2 | Midnight | 000015 | Near-black midnight blue. | Deep dark modes, cinematic hero sections, premium or high-contrast UIs. |
3 | Oat | FDF8F0 | Warm cream — soft neutral. | Warm light backgrounds, editorial layouts, product pages needing gentle contrast. |
4 | Slate Blue (Explicit) | 1F2937 | Deep slate blue-gray. | Navigation bars, side panels, dashboards and enterprise/console interfaces. |
5 | Stone | A8A29E | Muted taupe/stone. | Documentation, secondary surfaces, subdued UI elements. |
6 | Sage | D1E2D2 | Pale sage green — calming and natural. | Wellness apps, nature or health interfaces, eco-focused product pages. |
7 | Sand | F3E5AB | Warm sandy beige. | Lifestyle, home or community UIs; soft backgrounds for human-centric designs. |
8 | Forest Night | 064E3B | Nature, Growth, Tranquility. A very deep, calming, and trustworthy green. | Luxury/natural brands, premium dashboards, high-contrast dark themes. |
9 | Plum | 2B2024 | Uniqueness, Luxury, Creativity. | Creative portfolios, fashion/beauty, moody hero sections and premium branding. |
10 | Cashmere | F3E8D8 | Warm neutral for soft contrast. Luxury, Softness, Minimalism. | Warm, approachable interfaces; onboarding screens; friend/family-oriented apps. |
10 Built-in Backgrounds. Unlimited Customization.
BackgroundStyle = {0 to 10}
(core= 0-2 ; ceator= 0-5 ; studio= 0-10)
Light Mist
#F1F5F9
Midnight
#000015
Core Pack
Oat
#FDF8F0
Slate Blue (Explicit)
#1F2937
Stone
#A8A29E
Creator Pack
Sage
#D1E2D2
Sand
#F3E5AB
Forest Night
#064E3B
Plum
#2B2024
Cashmere
#F3E8D8
Studio Pack
NOTE ON PACK LIMITATIONS (BackgroundStyle):
The Starter Pack provides all 10 Background Styles (plus 0 for invisible) for complete exploration.
The Core Pack is restricted to 2 Background Styles (1: Light, 2: Midnight) plus 0 (invisible).
The Creator Pack unlocks 5 Background Styles (plus 0).
The Studio Pack unlocks all 10 Background Styles (plus 0).
Want your own color scheme?
We can deliver a brand-specific set, built on the same Rive system.
Contact hello@omnifx.studio to get started.
3. Dynamic Interactivity Features
These features provide advanced control over the icon’s behaviour beyond basic identity and color.
A. HoverStyle (0-3: The Motion Profile)
This determines how the icon reacts when the cursor is over it. This is key for device-aware design; always set HoverStyle = 0 for mobile/touch devices.
Input | Style Name | Philosophy & Effect | Where to Use |
0 | Disabled/None | Explicitly turns off hover interaction. | Mandatory for touch devices (mobile, tablet) to prevent unintended stuck animations. |
1 | Wake Effect | OMNI Special: The icon matter "wakes up," ready to morph or change, like an excited alien dark matter. | Primary desktop interactions, main navigation menus, hero CTA buttons. |
2 | Simple Scale | The icon enlarges slightly (1-2% scale). | Secondary actions, simple lists, or when sophisticated motion might distract the user. |
3 | Looping Heartbeat | The icon repeatedly scales up and down smoothly, resembling a heartbeat. | When the icon represents an exciting action (e.g., "Ready to Click," "Checkout," "New Notification"). |
Hover That Converts.
B. GradientFill (0 or 1: The Premium Sheen)
This subtle number input allows you to toggle a sophisticated, premium look.
0 (Off): Turns the subtle gradient effect off.
1 (On): Applies a subtle gradient fill based on the selected
ColorStyle, giving the icon a special, futuristic, and modern look.
Gradient, Simplified.
Enable GradientFill = 1 for a rich adaptive glow — or set it to 0 to stay flat and focused. Subtle control, striking results.
GradientFill = {0,1}
(Available in all packs.)
IconIndex = 38
ColorStyle = 10
GradientFill = 0
IconIndex = 38
ColorStyle = 10
GradientFill = 1
C. DisabledState (0 or 1: The Sleep Toggle)
This is an extra feature provided to instantly create a visual disabled state.
0 (Off): Normal icon behaviour.
1 (On): The icon enters a "dead zone" or sleep state: the color becomes desaturated, and no hover effects work. This state change is intentionally fast (200ms) to feel responsive to the developer’s instruction.
Implementation Notes & Performance Assurance
Seamless Integration and Performance
OMNI-FX files are built on Rive’s vector-based, high-performance C++ runtime. They are not heavy static SVGs but live motion systems requiring Rive runtime support.
Performance Assurance: Even the largest Studio Pack (.riv file is approximately 1.29 MB) is highly efficient. Rive is optimized for instancing, meaning you can run many icons simultaneously on a single page by reusing the same file blueprint without significant CPU/GPU strain. The icons are designed for a smooth 60 FPS experience.
The 400ms Transition Restriction (Intentional Design)
The main limitation you may encounter is that you cannot trigger a state change faster than 400ms.
The Logic: Every smooth transition must pass through the Zero Junction State (Cross → Zero State in ~200ms, then Zero State → Add in ~200ms).
The Intentional Decision: This restriction is required to allow the "matter to morph completely". If you click again before the morph is finished, the next smooth transition cannot begin, which prevents chaotic or choppy animation states. We prioritize smooth, fluid motion over instantaneous, jarring state changes, upholding the OMNI philosophy.
Customization & Creative Services
OMNI FX Studio is here as your motion design teammate. While the .riv file itself is intended for runtime use (meaning you cannot easily open and edit the vector shapes), we offer services to tailor OMNI-FX to your unique brand needs.
Our Customization Services
If your project requires modifications outside the scope of the available inputs, we can help:
Custom Colors: We can swap the default 15-color palette with your specific brand hex codes.
Your Own Icons: Already have a custom icon set? We will animate them in the unique OMNI-FX morphing style.
Custom Motion Interaction: Adapt icons to feel aligned with a custom hover effect or other unique motion requests.
Future Vision
The OMNI-FX Icon System is the foundation of a larger ecosystem. We plan to release entirely separate products, such as OMNI Buttons and Hero Animations, to further empower your fluid UI development.
To request customizations or discuss enterprise licensing, please email us with the subject line "Customization Request": 📩 hello@omnifx.studio
Licensing
Licensing Summary
Your purchased license (Personal or Commercial) defines how you can use the files.
Personal License: Use only for personal, non-commercial work (portfolios, learning). You cannot use it in paid client work or published commercial apps.
Commercial License: Use in unlimited commercial projects, including apps, websites, SaaS products, and client work. You may not resell, redistribute, or use the raw files to create a competitive product.
(Please refer to the enclosed EULA.md and LICENSE.md files for the full, binding legal terms).
We’re here as your motion design teammate — ready to make your brand move. 🚀
Unlock OMNI. Build Living UIs.
Stop Building Static UIs. Unlock the definitive, production-ready motion design system for web and app interfaces.
Core Pack
The Foundation.
Key Features:
•
20 essential icons crafted for universal applications.
•
Dual color themes: light and dark.
2 core background styles.
•
hover-to-wake transitions.
•
Lightweight, high-performance.
•
The Essential Toolkit for Universal UI Clarity.
Creator Pack
The Expression.
Key Features:
•
Includes all 20 Core icons + 10 Creator Specials.
•
5 curated color styles.
5 background colors.
•
Enhanced logic and triggers.
•
Optimized for creators, portfolios.
•
Ignite Your Designs with Creative Spark.
Studio Pack
The Complete System.
Key Features:
•
All 50 icons (includes Core + Creator sets).
•
Full 15-color palette.
10 background styles.
•
Priority license and team support.
•
Designed for startups, and SaaS.
•
The Ultimate Experience for Teams, Agencies & SaaS.
Need Something Custom for Your Brand?
Tailored Motion. Built Around Your Brand.
We know every brand moves differently.
If you’d like OMNI-FX customized for your color system, icons, or interaction style — we offer a dedicated customization service.
Explore our Customization Page for full details,
or simply email us at hello@omnifx.studio with your request.
Buy With Confidence.
Our Simple, Clear Terms.
One-Time Purchase, Lifetime Use.
Pay once. Use it forever — across projects, devices, and time. No hidden renewals or subscriptions.
Transparent Licensing.
Choose between Personal or Commercial use, with clear terms and simple rights — no fine print traps.
Always Yours, Always Accessible.
Once downloaded, your files remain yours permanently, even if the product evolves or updates later.
Guaranteed File Integrity.
If you ever receive missing, broken, or corrupted files, we’ll replace them promptly at no cost.
Developer-friendly
Delivered with docs, code samples and a Naming map to make integration fast.
Customization available
Need custom colors, animation, or brand work? We accept select paid requests.
Respectful support
Email support for any feedback, issues, support and licensing queries: hello@omnifx.studio
Try Before You Buy
Your Path to Absolute Confidence.
We proudly provide a comprehensive Free Starter Pack so you can thoroughly test the system's functionality and verify full compatibility with your technology stack and skills.