Stroke
Stroke
Stroke
Rive View Models
Rive View Models
Rive View Models
Rive View Models
VMSwitch
Props
• `switch--selected`: Boolean • `switch--label`: String
• `switch--selected`: Boolean • `switch--label`: String
• `switch--selected`: Boolean • `switch--label`: String
• `switch--selected`: Boolean • `switch--label`: String
Usage in `.rev`
• `generationUX__switch`: 2 instances – Display, Mode
• `generationUX__switch`: 2 instances – Display, Mode
• `generationUX__switch`: 2 instances – Display, Mode
• `generationUX__switch`: 2 instances – Display, Mode
Purpose
• Minimal toggle UI, no extras
• Minimal toggle UI, no extras
• Minimal toggle UI, no extras
• Minimal toggle UI, no extras
VMIncrement
Props
• `increment--label`: String
• `increment--label`: String
• `increment--label`: String
• `increment--label`: String
Usage
• Decrement → `--` • Increment → `++`
• Decrement → `--` • Increment → `++`
• Decrement → `--` • Increment → `++`
• Decrement → `--` • Increment → `++`
Purpose
• Customizable button label for clear UI intent
• Customizable button label for clear UI intent
• Customizable button label for clear UI intent
• Customizable button label for clear UI intent
VMSlider
Props
• `Slider--valueFontSize`: Font size for top value label • `Slider--initialValue`: Starting value/position • `Slider--trackMin` / `Slider--trackMax`: Range limits • `Slider--trackCurrent`: Live-bound value • `Slider--label`: Bottom label text
• `Slider--valueFontSize`: Font size for top value label • `Slider--initialValue`: Starting value/position • `Slider--trackMin` / `Slider--trackMax`: Range limits • `Slider--trackCurrent`: Live-bound value • `Slider--label`: Bottom label text
• `Slider--valueFontSize`: Font size for top value label • `Slider--initialValue`: Starting value/position • `Slider--trackMin` / `Slider--trackMax`: Range limits • `Slider--trackCurrent`: Live-bound value • `Slider--label`: Bottom label text
• `Slider--valueFontSize`: Font size for top value label • `Slider--initialValue`: Starting value/position • `Slider--trackMin` / `Slider--trackMax`: Range limits • `Slider--trackCurrent`: Live-bound value • `Slider--label`: Bottom label text
Imports
• `import__VMIncrement++`: Increment control • `import__VMIncrement--`: Decrement control
• `import__VMIncrement++`: Increment control • `import__VMIncrement--`: Decrement control
• `import__VMIncrement++`: Increment control • `import__VMIncrement--`: Decrement control
• `import__VMIncrement++`: Increment control • `import__VMIncrement--`: Decrement control
Role
Flexible, labeled slider with real-time binding + step buttons
Flexible, labeled slider with real-time binding + step buttons
Flexible, labeled slider with real-time binding + step buttons
Flexible, labeled slider with real-time binding + step buttons
VMStroke
Props
• `import__VMSlider`: Core slider control • `import__switch--Mode`: Mode toggle • `import__switch--Display`: Display toggle • `cellStroke`: Bound target (→ `Slider--trackCurrent`)
• `import__VMSlider`: Core slider control • `import__switch--Mode`: Mode toggle • `import__switch--Display`: Display toggle • `cellStroke`: Bound target (→ `Slider--trackCurrent`)
• `import__VMSlider`: Core slider control • `import__switch--Mode`: Mode toggle • `import__switch--Display`: Display toggle • `cellStroke`: Bound target (→ `Slider--trackCurrent`)
• `import__VMSlider`: Core slider control • `import__switch--Mode`: Mode toggle • `import__switch--Display`: Display toggle • `cellStroke`: Bound target (→ `Slider--trackCurrent`)
Role
• Logic layer for two-way slider (powered by VMSlider) • Enables dynamic control, display, and interaction
• Logic layer for two-way slider (powered by VMSlider) • Enables dynamic control, display, and interaction
• Logic layer for two-way slider (powered by VMSlider) • Enables dynamic control, display, and interaction
• Logic layer for two-way slider (powered by VMSlider) • Enables dynamic control, display, and interaction
Rive Converters
Rive Converters
Rive Converters
Rive Converters
🌐⚛️ VMSlider--timeInt
Props
• `VMSlider--timeInt`: 600ms linear interpolation
• `VMSlider--timeInt`: 600ms linear interpolation
• `VMSlider--timeInt`: 600ms linear interpolation
• `VMSlider--timeInt`: 600ms linear interpolation
🎛️⚛️ VMSwitch--toggle
Props
• `VMSwitch--toggle`: Persistent state handler for `ABSwitch`
• `VMSwitch--toggle`: Persistent state handler for `ABSwitch`
• `VMSwitch--toggle`: Persistent state handler for `ABSwitch`
• `VMSwitch--toggle`: Persistent state handler for `ABSwitch`
🎛️⚛️ VMSwitch--switchMode
Props
• `VMSwitch--switchMode`: Instance-level state for `ABSwitch/Mode`
• `VMSwitch--switchMode`: Instance-level state for `ABSwitch/Mode`
• `VMSwitch--switchMode`: Instance-level state for `ABSwitch/Mode`
• `VMSwitch--switchMode`: Instance-level state for `ABSwitch/Mode`
🎛️⚛️ VMSwitch--switchDisplay
Props
• `VMSwitch--switchDisplay`: Instance-level state for `ABSwitch/Display`
• `VMSwitch--switchDisplay`: Instance-level state for `ABSwitch/Display`
• `VMSwitch--switchDisplay`: Instance-level state for `ABSwitch/Display`
• `VMSwitch--switchDisplay`: Instance-level state for `ABSwitch/Display`
🎚️⚛️ VMSlider__-- / 🎚️⚛️ VMSlider__++
Purpose
• Base values for slider decrement (`--`) and increment (`++`) operations • Core to calculation logic
• Base values for slider decrement (`--`) and increment (`++`) operations • Core to calculation logic
• Base values for slider decrement (`--`) and increment (`++`) operations • Core to calculation logic
• Base values for slider decrement (`--`) and increment (`++`) operations • Core to calculation logic
🎚️⚛️ VMSlider--roundNumber
Props
• `VMSlider--roundNumber`: Defines how slider values are rounded
• `VMSlider--roundNumber`: Defines how slider values are rounded
• `VMSlider--roundNumber`: Defines how slider values are rounded
• `VMSlider--roundNumber`: Defines how slider values are rounded
🎚️⚛️ VMSlider__--round / 🎚️⚛️ VMSlider__++round
Purpose
• Pre-combined decrement/increment with rounding • Merges base ops + `VMSlider--roundNumber`
• Pre-combined decrement/increment with rounding • Merges base ops + `VMSlider--roundNumber`
• Pre-combined decrement/increment with rounding • Merges base ops + `VMSlider--roundNumber`
• Pre-combined decrement/increment with rounding • Merges base ops + `VMSlider--roundNumber`
🎚️⚛️ VMSlider--stringConvert
Props
• `VMSlider--stringConvert`: Rounds and formats slider value as string for display
• `VMSlider--stringConvert`: Rounds and formats slider value as string for display
• `VMSlider--stringConvert`: Rounds and formats slider value as string for display
• `VMSlider--stringConvert`: Rounds and formats slider value as string for display
🎚️⚛️ VMSlider--normalize__0-01, 🎚️⚛️ VMSlider--normalize__0-5
Props
• `VMSlider--normalize__0-01`, `VMSlider--normalize__0-5`, : Dampens `trackCurrent` for smoother output
• `VMSlider--normalize__0-01`, `VMSlider--normalize__0-5`, : Dampens `trackCurrent` for smoother output
• `VMSlider--normalize__0-01`, `VMSlider--normalize__0-5`, : Dampens `trackCurrent` for smoother output
• `VMSlider--normalize__0-01`, `VMSlider--normalize__0-5`, : Dampens `trackCurrent` for smoother output
🎚️⚛️ VMSlider--valueFill, 🎚️⚛️ VMSlider--valueFontSize, 🎚️⚛️ VMSlider--valueFontWeight
`VMSlider--valueFill`: Fills display with `trackCurrent` `VMSlider--valueFontSize`: Binds font size to `trackCurrent` `VMSlider--valueFontWeight`: Binds font weight to `trackCurrent`
`VMSlider--valueFill`: Fills display with `trackCurrent` `VMSlider--valueFontSize`: Binds font size to `trackCurrent` `VMSlider--valueFontWeight`: Binds font weight to `trackCurrent`
`VMSlider--valueFill`: Fills display with `trackCurrent` `VMSlider--valueFontSize`: Binds font size to `trackCurrent` `VMSlider--valueFontWeight`: Binds font weight to `trackCurrent`
`VMSlider--valueFill`: Fills display with `trackCurrent` `VMSlider--valueFontSize`: Binds font size to `trackCurrent` `VMSlider--valueFontWeight`: Binds font weight to `trackCurrent`
🎚️⚛️ VMSlider--valueFillRemap, 🎚️⚛️ VMSlider--valueFontSizeRemap, 🎚️⚛️ VMSlider--valueFontWeightRemap
`VMSlider--valueFillRemap`: Transforms fill dynamically `VMSlider--valueFontSizeRemap`: Scales font size with movement `VMSlider--valueFontWeightRemap`: Adjusts font weight responsively
`VMSlider--valueFillRemap`: Transforms fill dynamically `VMSlider--valueFontSizeRemap`: Scales font size with movement `VMSlider--valueFontWeightRemap`: Adjusts font weight responsively
`VMSlider--valueFillRemap`: Transforms fill dynamically `VMSlider--valueFontSizeRemap`: Scales font size with movement `VMSlider--valueFontWeightRemap`: Adjusts font weight responsively
`VMSlider--valueFillRemap`: Transforms fill dynamically `VMSlider--valueFontSizeRemap`: Scales font size with movement `VMSlider--valueFontWeightRemap`: Adjusts font weight responsively
🎚️🔀 VMSlider--normalise
Props
• `VMSlider--normalise`: Dampens effect of `VMSlider--addValueToProperty` formula
• `VMSlider--normalise`: Dampens effect of `VMSlider--addValueToProperty` formula
• `VMSlider--normalise`: Dampens effect of `VMSlider--addValueToProperty` formula
• `VMSlider--normalise`: Dampens effect of `VMSlider--addValueToProperty` formula
🎚️🔀 VMSlider--value
Props
• `VMSlider--value`: Final output — range-mapped, string-converted, and interpolated
• `VMSlider--value`: Final output — range-mapped, string-converted, and interpolated
• `VMSlider--value`: Final output — range-mapped, string-converted, and interpolated
• `VMSlider--value`: Final output — range-mapped, string-converted, and interpolated
🎚️🔀 VMSlider--valueFill, 🎚️🔀 VMSlider--valuelFontSize, 🎚️🔀 VMSlider--valueFontWeight
`VMSlider--valueFill` `VMSlider--valueFontSize` `VMSlider--valueFontWeight` Each: Value + style, fully interpolated for smooth motion.
`VMSlider--valueFill` `VMSlider--valueFontSize` `VMSlider--valueFontWeight` Each: Value + style, fully interpolated for smooth motion.
`VMSlider--valueFill` `VMSlider--valueFontSize` `VMSlider--valueFontWeight` Each: Value + style, fully interpolated for smooth motion.
`VMSlider--valueFill` `VMSlider--valueFontSize` `VMSlider--valueFontWeight` Each: Value + style, fully interpolated for smooth motion.
🎚️🔀 VMSlider--addValueToProperty
Props
• `VMSlider--addValueToProperty`: Maps and applies value to a target property (e.g. scale, size)
• `VMSlider--addValueToProperty`: Maps and applies value to a target property (e.g. scale, size)
• `VMSlider--addValueToProperty`: Maps and applies value to a target property (e.g. scale, size)
• `VMSlider--addValueToProperty`: Maps and applies value to a target property (e.g. scale, size)
🎚️🔀 VMSlider--valueToScrollPercentage
Props
• `VMSlider--valueToScrollPercentage`: Converts slider value to scroll-compatible %
• `VMSlider--valueToScrollPercentage`: Converts slider value to scroll-compatible %
• `VMSlider--valueToScrollPercentage`: Converts slider value to scroll-compatible %
• `VMSlider--valueToScrollPercentage`: Converts slider value to scroll-compatible %
🎚️🔀 VMSlider--joystickToValue
Props
• `VMSlider--joystickToValue`: Maps joystick input to slider value range
• `VMSlider--joystickToValue`: Maps joystick input to slider value range
• `VMSlider--joystickToValue`: Maps joystick input to slider value range
• `VMSlider--joystickToValue`: Maps joystick input to slider value range
🎚️🔀 VMSlider--percentage
Props
• `VMSlider--percentage`: Core range-mapped value driving all scaling, styling, and output systems
• `VMSlider--percentage`: Core range-mapped value driving all scaling, styling, and output systems
• `VMSlider--percentage`: Core range-mapped value driving all scaling, styling, and output systems
• `VMSlider--percentage`: Core range-mapped value driving all scaling, styling, and output systems
🎚️🔀 VMSlider--stringConvertInterpolate
Props
• `VMSlider--stringConvertInterpolate`: Converts and interpolates values into display-ready strings
• `VMSlider--stringConvertInterpolate`: Converts and interpolates values into display-ready strings
• `VMSlider--stringConvertInterpolate`: Converts and interpolates values into display-ready strings
• `VMSlider--stringConvertInterpolate`: Converts and interpolates values into display-ready strings
👉⚛️ stroke
Props
• `stroke`: Raw starting value, bound to controlled attribute (e.g. width, scale) • Modified live by slider
• `stroke`: Raw starting value, bound to controlled attribute (e.g. width, scale) • Modified live by slider
• `stroke`: Raw starting value, bound to controlled attribute (e.g. width, scale) • Modified live by slider
• `stroke`: Raw starting value, bound to controlled attribute (e.g. width, scale) • Modified live by slider
👉🔀 stroke--interpolated
Props
• `stroke--interpolated`: Smoothed output = `alphaVec` + interpolation • Enables fluid, eased transitions over raw changes
• `stroke--interpolated`: Smoothed output = `alphaVec` + interpolation • Enables fluid, eased transitions over raw changes
• `stroke--interpolated`: Smoothed output = `alphaVec` + interpolation • Enables fluid, eased transitions over raw changes
• `stroke--interpolated`: Smoothed output = `alphaVec` + interpolation • Enables fluid, eased transitions over raw changes
`Slider--trackCurrent` → updates `propX` → outputs `propX--interpolated`. All slider interactions propagate through this chain for smooth state updates
`Slider--trackCurrent` → updates `propX` → outputs `propX--interpolated`. All slider interactions propagate through this chain for smooth state updates
`Slider--trackCurrent` → updates `propX` → outputs `propX--interpolated`. All slider interactions propagate through this chain for smooth state updates
`Slider--trackCurrent` → updates `propX` → outputs `propX--interpolated`. All slider interactions propagate through this chain for smooth state updates
TL;DR
Handled by generationUX__switch via nested ABSwitch inside ABSwitch — fully integrated
Handled by generationUX__switch via nested ABSwitch inside ABSwitch — fully integrated
Handled by generationUX__switch via nested ABSwitch inside ABSwitch — fully integrated
Handled by generationUX__switch via nested ABSwitch inside ABSwitch — fully integrated
Mode
Mode
Mode
Mode
Handled by generationUX__switch via nested ABSwitch inside ABSwitch — fully integrated
Handled by generationUX__switch via nested ABSwitch inside ABSwitch — fully integrated
Handled by generationUX__switch via nested ABSwitch inside ABSwitch — fully integrated
Handled by generationUX__switch via nested ABSwitch inside ABSwitch — fully integrated
How it works
• Run `StateMachine` view • Toggle `generationUX__switch` • Observe light/dark transition in `mode` view
• Run `StateMachine` view • Toggle `generationUX__switch` • Observe light/dark transition in `mode` view
• Run `StateMachine` view • Toggle `generationUX__switch` • Observe light/dark transition in `mode` view
• Run `StateMachine` view • Toggle `generationUX__switch` • Observe light/dark transition in `mode` view
State Transitions
• `< >` bindings = data flow • Conditions = logic gates • Based on conditions → activate dark or light timeline
• `< >` bindings = data flow • Conditions = logic gates • Based on conditions → activate dark or light timeline
• `< >` bindings = data flow • Conditions = logic gates • Based on conditions → activate dark or light timeline
• `< >` bindings = data flow • Conditions = logic gates • Based on conditions → activate dark or light timeline
• Each timeline = unique keyframes • Supports custom animations, layouts, style shifts • Enables precise, mode-specific behavior
• Each timeline = unique keyframes • Supports custom animations, layouts, style shifts • Enables precise, mode-specific behavior
• Each timeline = unique keyframes • Supports custom animations, layouts, style shifts • Enables precise, mode-specific behavior
• Each timeline = unique keyframes • Supports custom animations, layouts, style shifts • Enables precise, mode-specific behavior
TL;DR
Light/Dark mode = condition-driven + fully animated. It’s not a theme toggle — it’s a vibe shift. 😎
Light/Dark mode = condition-driven + fully animated. It’s not a theme toggle — it’s a vibe shift. 😎
Light/Dark mode = condition-driven + fully animated. It’s not a theme toggle — it’s a vibe shift. 😎
Light/Dark mode = condition-driven + fully animated. It’s not a theme toggle — it’s a vibe shift. 😎
Blend Modes
GenerationUX uses blend modes—not hardcoded themes—for fluid transitions. • Layered blends = smooth visual shifts • Enables dynamic, theme-responsive styling
GenerationUX uses blend modes—not hardcoded themes—for fluid transitions. • Layered blends = smooth visual shifts • Enables dynamic, theme-responsive styling
GenerationUX uses blend modes—not hardcoded themes—for fluid transitions. • Layered blends = smooth visual shifts • Enables dynamic, theme-responsive styling
GenerationUX uses blend modes—not hardcoded themes—for fluid transitions. • Layered blends = smooth visual shifts • Enables dynamic, theme-responsive styling
#000000 → Difference: Inverts colors for that punchy contrast flip #FFFFFF → Exclusion: Softer inverse, perfect for subtle tone shifts #808080 → Color Burn: Deepens shadows, richens blacks. Mood: activated #808080 → Color Dodge: Boosts highlights, brightens whites. Hello clarity
#000000 → Difference: Inverts colors for that punchy contrast flip #FFFFFF → Exclusion: Softer inverse, perfect for subtle tone shifts #808080 → Color Burn: Deepens shadows, richens blacks. Mood: activated #808080 → Color Dodge: Boosts highlights, brightens whites. Hello clarity
#000000 → Difference: Inverts colors for that punchy contrast flip #FFFFFF → Exclusion: Softer inverse, perfect for subtle tone shifts #808080 → Color Burn: Deepens shadows, richens blacks. Mood: activated #808080 → Color Dodge: Boosts highlights, brightens whites. Hello clarity
#000000 → Difference: Inverts colors for that punchy contrast flip #FFFFFF → Exclusion: Softer inverse, perfect for subtle tone shifts #808080 → Color Burn: Deepens shadows, richens blacks. Mood: activated #808080 → Color Dodge: Boosts highlights, brightens whites. Hello clarity
One stack powers both themes. Blend modes + timelines = animated theme shifts, zero styling bloat.
One stack powers both themes. Blend modes + timelines = animated theme shifts, zero styling bloat.
One stack powers both themes. Blend modes + timelines = animated theme shifts, zero styling bloat.
One stack powers both themes. Blend modes + timelines = animated theme shifts, zero styling bloat.
Display
Display
Display
Display
ABSwitch/Display = compact toggle for managing UI visibility — a true space-saver
ABSwitch/Display = compact toggle for managing UI visibility — a true space-saver
ABSwitch/Display = compact toggle for managing UI visibility — a true space-saver
ABSwitch/Display = compact toggle for managing UI visibility — a true space-saver
Shrinks Slider UI to show only: • Label ID (e.g. “Size”) • Current value
Shrinks Slider UI to show only: • Label ID (e.g. “Size”) • Current value
Shrinks Slider UI to show only: • Label ID (e.g. “Size”) • Current value
Shrinks Slider UI to show only: • Label ID (e.g. “Size”) • Current value
• Slider groups → cleaner stacks • Minimal layouts → reduced noise • Quick value refs → no interaction needed
• Slider groups → cleaner stacks • Minimal layouts → reduced noise • Quick value refs → no interaction needed
• Slider groups → cleaner stacks • Minimal layouts → reduced noise • Quick value refs → no interaction needed
• Slider groups → cleaner stacks • Minimal layouts → reduced noise • Quick value refs → no interaction needed
Toggle `ABSwitch/Display` → instant compact slider mode. Boom.
Toggle `ABSwitch/Display` → instant compact slider mode. Boom.
Toggle `ABSwitch/Display` → instant compact slider mode. Boom.
Toggle `ABSwitch/Display` → instant compact slider mode. Boom.