buzzvilbuzzvil:design-library
Agents

Composition Rules

How to combine components into interaction flows. These rules guide agents in composing brand experiences for each funnel stage.

Flow Roles

Every component in a recipe has a role that determines its position and purpose in the flow.

entry

Opens the interaction. Sets brand context, builds anticipation. Usually BrandTransition or a progress indicator.

Typical duration: First 1–3 seconds

transition

Bridges between core interactions. Provides visual continuity, loading states, or brief animations.

Typical duration: 0.5–2 seconds

core

The primary interaction. Where user engagement and brand education happens. One per flow, or repeated (quiz cards, story slides).

Typical duration: 5–120 seconds

reward

Celebrates completion. Delivers visual payoff — confetti, overlays, reveals. Bridges core → exit.

Typical duration: 1–5 seconds

exit

Closes the experience. Confirms reward, provides CTA, or shows a toast. Must feel complete.

Typical duration: 2–5 seconds

Patterns by Funnel Stage

Awareness

Introduce the brand. Create curiosity and deliver a quick reward.

entry → core (quick, visual) → reward → exit
  • •Keep total duration under 20 seconds
  • •Use high-dopamine mechanics: flip, scratch, spin, stories
  • •Always end with a tangible reward (points, coupon)
  • •Brand identity should be visible but not dominating — the experience comes first
  • •One core interaction only — don't chain multiple

Consideration

Deepen brand engagement. Educate about products, collect preferences.

entry → core (interactive, multi-step) → reward → exit
  • •Can be longer (30–120 seconds) or span multiple sessions
  • •Use knowledge-building mechanics: quiz, swipe, bingo, missions
  • •Collect user preference data through interaction choices
  • •Progressive rewards — each step delivers small value
  • •End with a personalized recommendation or meaningful reward

Conversion

Drive immediate action. Create urgency, deliver clear incentive.

core (urgent, clear value) → reward → exit (CTA)
  • •Short and direct — under 15 seconds
  • •Skip or minimize entry animation (user already knows the brand)
  • •Use urgency mechanics: countdown, timed offer, flash deal
  • •Always include a copy-able coupon code or clear CTA
  • •The CTA must navigate to a purchase or claim page

Anti-patterns

✗

Chaining multiple core interactions

Users lose focus. One core mechanic per flow.

✗

Skipping the reward step

Every interaction needs a payoff. No reward = user feels cheated.

✗

Using conversion mechanics for awareness

Countdown urgency on first brand exposure feels aggressive.

✗

Long entry animations on conversion flows

User already knows the brand. Get to the offer fast.

✗

Reward without exit

Users need closure. A toast or CTA confirms the experience is complete.

✗

Mixing funnel stages in one flow

Each flow targets one stage. Cross-stage journeys are separate sessions.

Programmatic Access

TypeScript
import { suggestFlow, getCompositionGraph } from '@buzzvil/design-library/manifest';

// Get component suggestions for a funnel stage + intent
const flow = suggestFlow('awareness', 'engage');

// Get all flow connections for a component
const graph = getCompositionGraph('SpinWheel');
// { predecessors: ['BrandTransition'], successors: ['Burst', 'CouponCard', ...] }