Shapes and Text

shapestextrectangleellipselinearroweditorbutton set

Shape elements are versatile building blocks for your Ripple. Use them for buttons, dividers, callout boxes, or any visual structure. Shapes can contain text, making them ideal for interactive cards and labelled buttons.

For standalone text (headings, instructions, labels), use the dedicated Text tool in the toolbox -- it creates a text element directly without needing to add a shape first.

Shape Types

Four shape types are available:

  • Rectangle — boxes, cards, buttons, panels
  • Ellipse — circles, ovals, badges
  • Line — dividers, connectors
  • Arrow — directional indicators, pointers

Adding Shapes

  1. Click the Shape tool in the toolbox to place a shape in the centre of your view, or drag it from the toolbox onto the canvas
  2. Choose the shape type

Styling

Fill and Border

  • Fill colour — the shape's background colour (set to transparent for outline-only shapes)
  • Border colour — the outline colour
  • Border width — thickness in pixels (0 to remove the border)
  • Border style — solid, dashed, or dotted
  • Corner radius — round the corners of rectangles (increase for a pill shape)

Opacity and Effects

  • Opacity — overall transparency (0 = invisible, 1 = fully visible)
  • Rotation — angle in degrees
  • Scale — size multiplier
  • Hover effect — animation on hover (scale, glow, lift-up, shake, pulse, bounce, spin)

Adding Text to Shapes

Shapes can contain text. Select a shape and look for the text section in the properties panel:

  • Text content — the text displayed inside the shape
  • Font size — size in pixels
  • Font weight — normal (400) through bold (700) and beyond
  • Font style — normal or italic
  • Text colour — colour of the text
  • Text alignment — left, centre, or right
  • Vertical alignment — top, middle, or bottom
  • Padding — space between the text and the shape edge

Card Layout (Header and Footer)

Rectangles support a card-like layout with separate header and footer text regions:

  • Header text — displayed at the top, typically for titles
  • Footer text — displayed at the bottom, useful for hints like "(Click to continue...)"

Each region has its own font size (as a percentage of the body font size), weight, style, and alignment.

Making Shapes Interactive

Like images, shapes can have actions attached:

  • Click to change scene, play sounds, show/hide layers
  • Use shapes as buttons with text labels
  • Combine with visual states for rich interactive elements

Hidden at Runtime

Mark a shape as Hidden at runtime to create an invisible click area. The shape shows in the editor with a dashed outline but is invisible to participants. Useful for creating clickable regions over background images.

Visual States

Shapes support the same state system as images. Define different visual properties for each state:

  • Change colours, text, borders, and position per state
  • See States System for the full list of built-in states

Button Sets

Button sets give shapes radio-button behaviour — only one shape in the set can be selected at a time. Clicking a shape selects it and automatically deselects the previously selected shape in the same set.

Assigning a Button Set

You can assign a button set in two ways:

  • Properties panel — open the Selection card in the Behavior section and type or choose a name in the Button Set field
  • Context menu — right-click a shape and use the Button Set submenu to pick an existing set or create a new one

When you assign a button set, Rippily automatically creates a Selected state on the shape (if it does not already have one) and enables the On Select and On Deselect triggers. You can then style the Selected state to give visual feedback when a shape is active.

How It Works at Runtime

  • Shapes in the same button set are mutually exclusive — selecting one deselects the others
  • Shapes without a button set toggle independently (checkbox-like behaviour)
  • You can assign multiple shapes (and images) to the same button set

Button sets are useful for answer choices in quizzes, tab-style navigation, option selectors, and any UI where only one choice should be active.

Tips

  • Use transparent-fill rectangles with borders as framing devices
  • Combine a rectangle with text for quick, styled buttons
  • Use lines and arrows to create visual flow or highlight connections
  • The card layout (header/body/footer) works well for information cards and quiz questions