Delight And Whimsy

---
name: delight-and-whimsy
description: Add a restrained set of memorable, brand-appropriate interaction details, easter eggs, micro-moments, and playful affordances without sacrificing usability or turning the product into a gimmick.
---

# Delight and Whimsy

Use late in a design pass, after hierarchy, usability, responsiveness, and core motion are already solid.

## Goal

Find a few moments that make the interface feel authored and memorable. One excellent surprise is worth more than twenty decorative animations.

## Opportunity scan

Look for:

- logo or brand-mark behavior;
- contextual cursor states;
- tactile press/drag feedback;
- hover reveals with useful information;
- transitions between meaningful states;
- empty/success/loading states with personality;
- subtle physics or momentum;
- optional sound cues;
- easter eggs that do not block normal use;
- small 3D/material reactions;
- copy or microcopy with character;
- playful interactions around a product's actual behavior.

## Restraint rules

- Never add delight to every component.
- Never delay a frequent action for spectacle.
- Do not obscure controls or basic information.
- Respect reduced motion and sound preferences.
- Avoid cursor hijacking that harms precision.
- Avoid novelty that conflicts with the brand.
- Mobile interactions need an equivalent; hover-only delight is incomplete.
- Performance cost must be proportional to impact.

## Prioritization

Score each idea on:

1. brand relevance;
2. memorability;
3. usability impact;
4. implementation cost;
5. runtime cost;
6. frequency of exposure.

Prefer 2-5 high-value moments. Reject ideas whose only argument is “it looks cool.”

## Output contract

Return a ranked list containing:

- moment/location;
- behavior;
- why it fits the brand/story;
- fallback/reduced-motion behavior;
- implementation approach;
- risk of becoming annoying;
- keep/cut recommendation.

Pair with `emil-design-eng` for motion feel and `impeccable` for final craft review.