States System

statesappearancevisualhoverselecteddrag-dropbreakoutlock

The states system lets elements have multiple visual configurations. Each state defines a set of appearance overrides — colours, opacity, size, text, transforms, and more. When an element switches to a state, it takes on that state's appearance. When it returns to default, it reverts.

This is how buttons change colour on hover, quiz answers show correct/incorrect feedback, and drag items highlight when dropped in the right zone.

How States Work

Every element starts in the Default state. Other states define visual overrides — only the properties you explicitly set are changed. Everything else inherits from Default.

For example, if you create a "Hover" state and only set opacity: 0.8, the element will keep its default colours, size, and position but become slightly transparent on hover.

States can be activated in three ways:

  1. Automatically: Some built-in states activate on their own (e.g. Hover activates when the cursor is over the element)
  2. Via actions: The Change State action switches an element to a specific state
  3. Via system events: Drag states activate during drag-and-drop interactions, breakout states activate when zones are enabled

Built-In States

Rippily provides 18 built-in states organised into five categories.

Interaction States

State Description Activation
Default Normal appearance Always active when no other state is
Hover When cursor is over the element Automatic on mouse enter, reverts on mouse leave
Down While the element is being clicked Automatic on mouse press, reverts on release
Disabled Element cannot be interacted with Set via Change State action
Hidden Completely invisible Set via Change State action
Visited After being clicked once Automatic after first click (permanent for session)
Selected Toggle state — click to select, click again to deselect. Assign a button set for radio behaviour. Automatic on click (toggles)

Drag Item States

For elements configured as draggable items:

State Description Activation
Dragging While the item is being dragged Automatic during drag
Drag Over Zone While the item hovers over a valid drop zone Automatic during drag
Dropped Correct After being placed in the correct zone Automatic on correct drop
Dropped Incorrect After being placed in the wrong zone Automatic on incorrect drop

Drop Target States

For shapes configured as drop zones:

State Description Activation
Item Hovering A drag item is hovering over this zone Automatic during drag
Has Correct Item Contains a correctly placed item Automatic on correct drop
Has Incorrect Item Contains an incorrectly placed item Automatic on incorrect drop

Breakout States

For breakout zone elements and other elements that respond to breakout mode:

State Description Activation
Default When breakout mode is off Default state for breakout zones
Breakout Active When breakout mode is on Automatic when breakouts enabled
Breakout Hover Hovering while breakout is active Automatic on hover (only when active)

Lock States

For elements that respond to room lock status:

State Description Activation
Locked Default Room is locked, host is present Automatic when room locked
Locked Host Away Room is locked, host has left Automatic when host away

Custom States

Beyond the built-in states, you can create custom states with any name. Custom states are activated exclusively through the Change State action — they don't activate automatically.

To add a custom state:

  1. Select an element
  2. Open the States panel
  3. Click Add State
  4. Name your state (e.g. "Correct", "Error", "Highlighted", "Phase 2")
  5. Configure the visual overrides

Custom states are ideal for multi-state elements like quiz answers (default / correct / incorrect), buttons with multiple modes, or indicators that change based on game state.

Visual Properties You Can Override

Each state can override any combination of these properties:

Transform

  • Position: Absolute (x, y) or relative offset (offsetX, offsetY)
  • Size: Width and height
  • Scale: Uniform scaling (0.5 = half size, 2 = double)
  • Rotation: Degrees of rotation
  • Flip: Horizontal or vertical mirroring

Appearance

  • Opacity: 0 (invisible) to 1 (fully visible)
  • Fill colour: Background colour (or transparent)
  • Fill opacity: Separate opacity for the fill
  • Stroke: Border colour, width, opacity, and style (solid, dashed, dotted)
  • Border radius: Rounded corners
  • Shadow: CSS box-shadow for depth
  • Blur: Gaussian blur effect
  • Cursor: Custom cursor for this state

Text (for shapes with text)

  • Text content: Change the text itself
  • Text colour: Colour of the text
  • Font size: Size in pixels
  • Font weight: 100 (thin) to 900 (bold)
  • Font style: Normal or italic
  • Text alignment: Left, centre, or right
  • Vertical alignment: Top, middle, or bottom
  • Padding: Inner spacing
  • Header and footer text: For card-layout shapes

State Inheritance

Some states inherit from other states rather than from Default:

  • Breakout Active inherits from Breakout Inactive (Default)
  • Breakout Hover inherits from Breakout Active
  • Locked Host Away inherits from Locked Default

This means if you set a colour on Breakout Active, Breakout Hover will also use that colour unless it has its own override. This reduces repetitive configuration.

Tips

  • Start with Hover: The most impactful state is Hover. Adding a subtle opacity change or scale-up to interactive elements immediately communicates that they're clickable.
  • Keep it subtle: Small changes (5-10% opacity shift, 1.05 scale) often feel more polished than dramatic ones. Reserve big visual changes for important feedback like correct/incorrect.
  • Use Selected for toggles: The Selected state creates built-in toggle behaviour without any extra actions. Click to select, click again to deselect. Assign a button set to get radio behaviour where only one element can be selected at a time.
  • Test all states: Preview your Ripple and interact with elements to see how states feel. The timing and visual contrast between states matters.

What's Next?