skills/ai-host-video/references/motion-style-funky-modular.md

# Funky Modular

Use this direction for playful explanation, optimistic learning, culture and
energetic graphic storytelling. Modules act on one another; colour and elasticity
help explain the relationships instead of becoming a layer of stickers.

## Still composition

- Arrange strips, geometric tiles or an irregular but aligned cluster around a
  clear focal module. Preserve gaps so neighbouring forms remain distinct.
- Use bold, readable display type with simple supporting text. Put words in a
  banner, tab or label only when the container gives them a role.
- Contrast large plain areas with a smaller patterned area. A circle, stripe or
  checker treatment can distinguish a category without filling every surface.
- Start from a saturated duotone or triad with neutral support; assign colour to
  meaning consistently across related scenes.
- Use arrows, pointers, numbered tags and offset outlines to explain selection,
  direction or sequence. Keep the overall silhouette legible without these details.

## Motion vocabulary

- **Sort and regroup:** modules gather by category, leaving their original group
  understandable through consistent colour and shape.
- **Make room:** an existing module shifts as a new one joins, showing a change
  in the system rather than simply covering the old layout.
- **Pass the action:** a moving arrow, tab or token hands attention to the next
  element; a short compression or tilt may mark the point of contact.
- **Change a role:** a tile stretches into a strip or opens into an explanation
  when that change makes the relationship easier to follow.
- **Snap and settle:** give the focal arrival a little elasticity while supporting
  elements resolve more quietly, then hold a clean final arrangement.

## Adjustable starting points

- Try 250–500 ms for a module move, with a quick start and a controlled settle.
  A focal scale overshoot around 2–4% can feel playful; omit it where precision matters.
- A nudge around 3–8% of module width often communicates contact without making
  the entire composition wobble.
- Sequential builds can start about 60–110 ms apart when each step remains clear.
  Let the final arrangement hold; motion need not continue after the idea lands.

## Example development

Several items begin in an unsorted cluster. Their coloured tabs line up into two
groups, then one shared attribute bridges the gap as a connecting strip. The strip
widens into the next scene's heading while the groups remain briefly as context.
The playful rearrangement makes the classification visible.

## Standalone typography

The words themselves can be the modules. Arrange a few bold words on an open field;
one shifts to make room for the next, then they regroup into a meaningful phrase.
Use colour, shared baselines and one controlled settle to connect them, without
placing tiles or badges behind the letters.

## Avoid

Constant bounce, sticker spam, arbitrary pattern changes, childish decoration,
a box around every line and morphing that makes objects lose their identity.
Do not distort quantities or meaningful chart geometry for a comic reaction.