1---
2name: delight
3description: Add moments of joy, personality, and unexpected touches that make interfaces memorable and enjoyable to use. Elevates functional to delightful. Use when the user asks to add polish, personality, animations, micro-interactions, delight, or make an interface feel fun or memorable.
4version: 2.1.1
5---
6
7Identify opportunities to add moments of joy, personality, and unexpected polish that transform functional interfaces into delightful experiences.
8
9## MANDATORY PREPARATION
10
11Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. Additionally gather: what's appropriate for the domain (playful vs professional vs quirky vs elegant).
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
302Remember: Delight is the difference between a tool and an experience. Add personality, surprise users positively, and create moments worth sharing. But always respect usability - delight should enhance, never obstruct.