Reusable Components · UX Assets

Mood — an emotional-design asset kit

A series of non-functional illustrations and animated assets. They render no data and gate no flow — their only job is to make the moments around the work feel human: less anxious, more delightful, worth coming back to. Each asset is mapped to one emotional moment in a product journey, with the UX payoff it earns.

Visceral
First-glance warmth — soft shapes, friendly faces, gentle motion.
Behavioral
Motion reassures: progress, success, and patience made visible.
Reflective
Personality the user remembers and re-tells to others.
Empty State
Nothing here — yet

A blank list is a dead end. A cheerful box turns absence into an invitation to start.

Cuts the "is it broken?" anxiety of empty screens and points to the first action.
listsfirst-runsearch-zero
Success
Done — and it felt good

A drawn-on check plus a confetti burst rewards completion the instant it happens.

Positive reinforcement closes the loop and nudges the next action.
submitcheckoutstreaks
Error · Reassurance
A loose connection

An unplugged-cable mascot frames failure as fixable and small — never the user's fault.

Defuses frustration and lowers rage-quits; pairs with a clear retry.
network500offline
Loading · Patience
Hang tight

Two cheerful dots orbiting a calm core make a wait feel shorter and intentional.

Continuous motion lowers perceived wait time and signals "still working".
fetchuploadprocessing
Welcome · Mascot
Hi, glad you're here

A small waving character greets first-run users and gives the product a face.

Builds early emotional connection and warms up onboarding.
onboardingsplashtooltip
404
404 · Lost
This page flew off

A wandering paper plane turns a dead-end URL into a light, forgivable moment.

Keeps the user smiling instead of bouncing; pairs with a "go home" link.
404not-foundrouting
Saved · Synced
Safe in the cloud

A cloud that quietly draws its own check tells users their work landed — no save button anxiety.

Builds trust in autosave and removes the "did it save?" double-check.
autosavesyncbackup
Achievement · Pride
You earned this

A medal that springs in with twinkling sparkles marks a milestone and makes mastery feel rewarded.

Taps intrinsic motivation, reinforcing progress and habit formation.
milestonegamificationlevel-up
Appreciation · Delight
Thanks for being here

A gently beating heart turns a like, a thank-you, or a renewal into a warm, human moment.

Deepens emotional attachment and lifts retention at feel-good touchpoints.
likethank-yourenewal
Be right back · Maintenance
Grab a coffee

Planned downtime is unavoidable; a warm mug reframes the wait as a short, friendly break — not a broken product.

Turns maintenance frustration into patience and protects trust during outages.
maintenancedowntimescheduled

No assets in this stage yet.

Mood — emotional-design asset kit · all assets are pure inline SVG + CSS, dependency-free, and honor prefers-reduced-motion — toggle Reduce motion to preview that still fallback. Copy SVG drops self-animating markup onto your clipboard, or hit the download button to save a standalone .svg file — both embed their own animation <style>, so the asset stays alive the moment you paste or open it.
Copied!