1> **Additional context needed**: what's appropriate for the domain (playful vs professional vs quirky vs elegant).
2
3Find the moments where personality and unexpected polish would turn a functional interface into one users remember and tell other people about. Add only where the moment earns it; delight everywhere reads as noise.
4
5---
6
7## Register
8
9Brand: delight can be distributed across copy voice, section transitions, discovery rewards, seasonal touches, personality across the whole surface.
10
11Product: delight at specific moments, not pages. Completion, first-time actions, error recovery, milestone crossings. Reliability and consistency carry the rest of the experience; delight pushed everywhere reads as noise.
12
13---
14
15## Assess Delight Opportunities
16
17Identify where delight would enhance (not distract from) the experience:
18
191. **Find natural delight moments**:
20 - **Success states**: Completed actions (save, send, publish)
21 - **Empty states**: First-time experiences, onboarding
22 - **Loading states**: Waiting periods that could be entertaining
23 - **Achievements**: Milestones, streaks, completions
24 - **Interactions**: Hover states, clicks, drags
25 - **Errors**: Softening frustrating moments
26 - **Easter eggs**: Hidden discoveries for curious users
27
282. **Understand the context**:
29 - What's the brand personality? (Playful? Professional? Quirky? Elegant?)
30 - Who's the audience? (Tech-savvy? Creative? Corporate?)
31 - What's the emotional context? (Accomplishment? Exploration? Frustration?)
32 - What's appropriate? (Banking app ≠ gaming app)
33
343. **Define delight strategy**:
35 - **Subtle sophistication**: Refined micro-interactions (luxury brands)
36 - **Playful personality**: Whimsical illustrations and copy (consumer apps)
37 - **Helpful surprises**: Anticipating needs before users ask (productivity tools)
38 - **Sensory richness**: Satisfying sounds, smooth animations (creative tools)
39
40If any of these are unclear from the codebase, ask the user directly to clarify what you cannot infer.
41
42**CRITICAL**: Delight should enhance usability, never obscure it. If users notice the delight more than accomplishing their goal, you've gone too far.
43
44## Delight Principles
45
46Follow these guidelines:
47
48### Delight Amplifies, Never Blocks
49- Delight moments should be quick (< 1 second)
50- Never delay core functionality for delight
51- Make delight skippable or subtle
52- Respect user's time and task focus
53
54### Surprise and Discovery
55- Hide delightful details for users to discover
56- Reward exploration and curiosity
57- Don't announce every delight moment
58- Let users share discoveries with others
59
60### Appropriate to Context
61- Match delight to emotional moment (celebrate success, empathize with errors)
62- Respect the user's state (don't be playful during critical errors)
63- Match brand personality and audience expectations
64- Cultural sensitivity (what's delightful varies by culture)
65
66### Compound Over Time
67- Delight should remain fresh with repeated use
68- Vary responses (not same animation every time)
69- Reveal deeper layers with continued use
70- Build anticipation through patterns
71
72## Delight Techniques
73
74Add personality and joy through these methods:
75
76### Micro-interactions & Animation
77
78**Button delight**:
79```css
80/* Satisfying button press */
81.button {
82 transition: transform 0.1s, box-shadow 0.1s;
83}
84.button:active {
85 transform: translateY(2px);
86 box-shadow: 0 2px 4px rgba(0,0,0,0.2);
87}
88
89/* Ripple effect on click */
90/* Smooth lift on hover */
91.button:hover {
92 transform: translateY(-2px);
93 transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1); /* ease-out-quart */
94}
95```
96
97**Loading delight**:
98- Playful loading animations (not just spinners)
99- Personality in loading messages (write product-specific ones, not generic AI filler)
100- Progress indication with encouraging messages
101- Skeleton screens with subtle animations
102
103**Success animations**:
104- Checkmark draw animation
105- Confetti burst for major achievements
106- Gentle scale + fade for confirmation
107- Satisfying sound effects (subtle)
108
109**Hover surprises**:
110- Icons that animate on hover
111- Color shifts or glow effects
112- Tooltip reveals with personality
113- Cursor changes (custom cursors for branded experiences)
114
115### Personality in Copy
116
117**Playful error messages**:
118```
119"Error 404"
120"This page is playing hide and seek. (And winning)"
121
122"Connection failed"
123"Looks like the internet took a coffee break. Want to retry?"
124```
125
126**Encouraging empty states**:
127```
128"No projects"
129"Your canvas awaits. Create something amazing."
130
131"No messages"
132"Inbox zero! You're crushing it today."
133```
134
135**Playful labels & tooltips**:
136```
137"Delete"
138"Send to void" (for playful brand)
139
140"Help"
141"Rescue me" (tooltip)
142```
143
144**IMPORTANT**: Match copy personality to brand. Banks shouldn't be wacky, but they can be warm.
145
146### Illustrations & Visual Personality
147
148**Custom illustrations**:
149- Empty state illustrations (not stock icons)
150- Error state illustrations (friendly monsters, quirky characters)
151- Loading state illustrations (animated characters)
152- Success state illustrations (celebrations)
153
154**Icon personality**:
155- Custom icon set matching brand personality
156- Animated icons (subtle motion on hover/click)
157- Illustrative icons (more detailed than generic)
158- Consistent style across all icons
159
160**Background effects**:
161- Subtle particle effects
162- Gradient mesh backgrounds
163- Geometric patterns
164- Parallax depth
165- Time-of-day themes (morning vs night)
166
167### Satisfying Interactions
168
169**Drag and drop delight**:
170- Lift effect on drag (shadow, scale)
171- Snap animation when dropped
172- Satisfying placement sound
173- Undo toast ("Dropped in wrong place? [Undo]")
174
175**Toggle switches**:
176- Smooth slide with spring physics
177- Color transition
178- Haptic feedback on mobile
179- Optional sound effect
180
181**Progress & achievements**:
182- Streak counters with celebratory milestones
183- Progress bars that "celebrate" at 100%
184- Badge unlocks with animation
185- Playful stats ("You're on fire! 5 days in a row")
186
187**Form interactions**:
188- Input fields that animate on focus
189- Checkboxes with a satisfying scale pulse when checked
190- Success state that celebrates valid input
191- Auto-grow textareas
192
193### Sound Design
194
195**Subtle audio cues** (when appropriate):
196- Notification sounds (distinctive but not annoying)
197- Success sounds (satisfying "ding")
198- Error sounds (empathetic, not harsh)
199- Typing sounds for chat/messaging
200- Ambient background audio (very subtle)
201
202**IMPORTANT**:
203- Respect system sound settings
204- Provide mute option
205- Keep volumes quiet (subtle cues, not alarms)
206- Don't play on every interaction (sound fatigue is real)
207
208### Easter Eggs & Hidden Delights
209
210**Discovery rewards**:
211- Konami code unlocks special theme
212- Hidden keyboard shortcuts (Cmd+K for special features)
213- Hover reveals on logos or illustrations
214- Alt text jokes on images (for screen reader users too!)
215- Console messages for developers ("Like what you see? We're hiring!")
216
217**Seasonal touches**:
218- Holiday themes (subtle, tasteful)
219- Seasonal color shifts
220- Weather-based variations
221- Time-based changes (dark at night, light during day)
222
223**Contextual personality**:
224- Different messages based on time of day
225- Responses to specific user actions
226- Randomized variations (not same every time)
227- Progressive reveals with continued use
228
229### Loading & Waiting States
230
231**Make waiting engaging**:
232- Interesting loading messages that rotate
233- Progress bars with personality
234- Mini-games during long loads
235- Fun facts or tips while waiting
236- Countdown with encouraging messages
237
238```
239Loading messages: write ones specific to your product, not generic AI filler:
240- "Crunching your latest numbers..."
241- "Syncing with your team's changes..."
242- "Preparing your dashboard..."
243- "Checking for updates since yesterday..."
244```
245
246**WARNING**: Avoid cliched loading messages like "Herding pixels", "Teaching robots to dance", "Consulting the magic 8-ball", "Counting backwards from infinity". These are AI-slop copy, instantly recognizable as machine-generated. Write messages that are specific to what your product actually does.
247
248### Celebration Moments
249
250**Success celebrations**:
251- Confetti for major milestones
252- Animated checkmarks for completions
253- Progress bar celebrations at 100%
254- "Achievement unlocked" style notifications
255- Personalized messages ("You published your 10th article!")
256
257**Milestone recognition**:
258- First-time actions get special treatment
259- Streak tracking and celebration
260- Progress toward goals
261- Anniversary celebrations
262
263## Implementation Patterns
264
265**Animation libraries**:
266- Framer Motion (React)
267- GSAP (universal)
268- Lottie (After Effects animations)
269- Canvas confetti (party effects)
270
271**Sound libraries**:
272- Howler.js (audio management)
273- Use-sound (React hook)
274
275**Physics libraries**:
276- React Spring (spring physics)
277- Popmotion (animation primitives)
278
279**IMPORTANT**: File size matters. Compress images, optimize animations, lazy load delight features.
280
281**NEVER**:
282- Delay core functionality for delight
283- Force users through delightful moments (make skippable)
284- Use delight to hide poor UX
285- Overdo it (less is more)
286- Ignore accessibility (animate responsibly, provide alternatives)
287- Make every interaction delightful (special moments should be special)
288- Sacrifice performance for delight
289- Be inappropriate for context (read the room)
290
291## Verify Delight Quality
292
293Test that delight actually delights:
294
295- **User reactions**: Do users smile? Share screenshots?
296- **Doesn't annoy**: Still pleasant after 100th time?
297- **Doesn't block**: Can users opt out or skip?
298- **Performant**: No jank, no slowdown
299- **Appropriate**: Matches brand and context
300- **Accessible**: Works with reduced motion, screen readers
301
302When the moments feel earned, hand off to `/impeccable polish` for the final pass.