Ripple Cards

ripple cardlinkingnavigationpresencewaveeditor

A Ripple card is a rectangular element that links to another Ripple in the same Wave. In the editor it shows a static preview. At runtime it shows live presence data — who is there, how many people, and whether the room is active — and clicking it navigates directly to that Ripple.

Ripple cards turn a Wave into a navigable space. Place them on a lobby scene to create a venue map, a course menu, or a conference floor where participants can see activity at a glance and move between rooms.

Adding a Ripple Card

  1. Click the Ripple tool in the toolbox (left panel) to place a card in the centre of your view, or drag it from the toolbox onto the canvas
  2. In the properties panel, choose the Target Ripple from the dropdown

The dropdown lists all other Ripples in the same Wave. If the Wave has no other Ripples yet, create one first.

If you select an unlisted Ripple, a warning appears: visitors and guests will not see the card at runtime.

What Participants See

At runtime, each Ripple card updates automatically with live data from its target:

Live

A green LIVE badge with a pulsing dot appears when participants are present. The card shows an avatar stack (up to 20 avatars) and a participant count. If only a few people are in the room, their names are listed instead of a count.

Empty

The card appears muted when no one is in the target Ripple. It remains clickable.

Paused

An amber PAUSED badge appears when the target Ripple is paused by a moderator.

Locked

A red lock icon badge appears when the target Ripple has restricted access.

Cover Image

The card displays the target Ripple's cover image as a background. The image fills the card area. If no cover image is set, the card shows a dark glass surface.

Title Bar

By default, a title bar sits at the bottom of the card displaying the target Ripple's name. You can customise it or turn it off entirely with the Title Bar toggle in the properties panel.

When the title bar is visible, two styling sections appear:

  • Title Text — a colour picker for the text colour, plus Align buttons (left, centre, right)
  • Title Background — a colour picker for the background colour, plus an opacity slider

Toggling the title bar on or off automatically adjusts the card's height to keep the media area proportional.

Sizing and Proportions

Ripple cards default to 280 x 180 canvas units with a locked aspect ratio. You can resize them, and the aspect ratio stays consistent by default. The minimum size is 120 x 80 and the maximum is 600 x 400.

At small rendered sizes, the card automatically hides details that would be too cramped to read -- status badges, the avatar stack, and the participant count progressively disappear as the card shrinks.

Styling

Ripple cards support the same styling options as other elements:

  • Opacity — control overall transparency
  • Stroke — border colour, width, and style (solid, dashed, dotted)
  • Border radius — round the corners (default 12px)

States

Ripple cards support the full element states system, including Selected and Visited states. This lets you change a card's appearance when a participant has already visited that Ripple, or highlight the currently selected card in a menu.

Actions

Like any element, Ripple cards can have actions attached to them. The built-in click behaviour (navigating to the target Ripple) always runs alongside any custom click actions you add. Hover effects also work — you can add visual feedback like scale, glow, or lift on hover.

Hold Ctrl (or Cmd on Mac) and click a Ripple card to open the target in a new browser tab instead of navigating away.

Visibility and Behaviour

Ripple cards support the same visibility and behaviour options as other elements:

  • Visibility conditions — show or hide based on expressions
  • Fade in/out durations
  • Show To — restrict visibility by role
  • Layer assignment — include in layer groups for show/hide control

If the target Ripple is deleted or the card's access is denied, the card is hidden automatically at runtime.

Tips

  • Lobby pattern: Place several Ripple cards on a lobby scene to create a conference-style venue where participants can see which rooms are active before choosing where to go.
  • Course navigation: Use Ripple cards on a menu scene to let learners pick their next lesson, with live indicators showing where classmates are.
  • Cover images matter: A Ripple card's visual appeal depends on the target Ripple's cover image. Set meaningful cover images on your Ripples for the best lobby experience.

What's Next?

  • Scenes — use scenes to create a lobby layout for your Ripple cards
  • Layers — group Ripple cards into layers for show/hide control
  • Actions Overview — attach additional actions to Ripple cards