🎨 Play Metaphor Effects Reference

Design immersive UI experiences using metaphor-based visual effects. This guide outlines core effect types, tunable intensities, theme alignment, and performance tradeoffs.

---

🧾 Introduction

Play+ brings expressive, emotion-driven theming to enterprise UI through three core metaphors: Glass, Light, and Liquid. These effects shape how components look, feel, and respond—bringing clarity, depth, and fluidity to interactions.

This system is designed to scale. Use Minimal as your base theme. Layer on Professional, Modern, or Vibrant styles as needed—all while staying mindful of performance budgets.

Key elements:

• Metaphors: Glass (structure), Light (focus), Liquid (motion)
• Intensity levels: From subtle to dramatic
• Themes: Tailored visual personalities for different use cases

---

🎭 Theme Definitions

Minimal

• Clean lines, generous whitespace
• Neutral colors (grays, whites)
• Simple typography, low-interaction depth
• Prioritizes clarity and speed

Professional

• Structured, clean, and trustworthy
• Balanced colors and layout grids
• Focus on hierarchy, legibility, and precision
• Suitable for enterprise products

Modern

• Trend-driven, animated, responsive
• Bold colors, smooth transitions
• Slight depth and motion for engagement
• Appeals to tech-savvy users

Vibrant

• Bright gradients, bold type, and energetic motion
• Playful micro-interactions for expressive feedback
• Ideal for creative tools, youth-focused or consumer apps

---

🧊 GLASS EFFECTS

Glass effects create structure and depth using layers of blur and transparency.

Variable	Description
glass-0	Solid with slight gradient – no transparency
glass-10	Barely visible transparency and blur
glass-25	Light frost with minor background diffusion
glass-50	Balanced transparency and blur
glass-75	Noticeable glass, content visible beneath
glass-100	Strong blur and full transparency

⚠️ Higher values (> glass-50) may affect performance on lower-end devices due to backdrop-filter usage.

---

💡 LIGHT EFFECTS

Light effects help guide attention, add focus, and simulate ambiance. Categorized below for clarity:

Glow & Aura:

• box-shadow-glow – Soft glowing shadow around component
• neon-glow – Strong colored glow (neon-style)
• pulse-glow – Expanding-contracting glow cycle
• diffuse-glow – Foggy ambient glow

Motion & Focus:

• shine-on-hover – Subtle sweep of light during hover
• flicker-spark – Sparkling flicker for animated focus
• gradient-shimmer – Animated shimmer across surface

Ambient & Depth:

• soft-ambient-shadow – Mild depth-inducing shadow
• radial-background-glow – Light aura behind the element
• blur-opacity-layer – Diffuse white layer for bloom effect

Visual Tricks:

• lens-flare – Directional light burst for highlights
• reflection-transform – Mirror-like reflection using CSS transform
• prism – Multi-spectrum lighting for prism-like shimmer

---

🌊 LIQUID EFFECTS

Liquid effects simulate organic motion, elasticity, and interaction feedback.

Variable	Description	Best For
ripple-wave	Circular ripple on tap	Buttons, cards
drip-droplet	Droplet fall animation	Loading, progress
blob-morph	Shape-shifting blob interaction	Backgrounds, modals
liquid-rise	Fluid fill animation	Progress, volume bars
surface-stretch	Elastic surface reaction	Hover/press feedback
merge-absorb-split	Merge or split of blobs	Interactive canvases
viscosity-drag	Resistance feel on drag	Sliders, sliders
swirl	Swirling liquid feedback	Action transitions
refract-distort	Water-like distortion effect	Background visuals
splash-impact	Burst of splash at interaction point	Button tap effect
elastic-hover	Bounce/stretch on hover	Cards, nav items
ripple-press	Ripple-out on click or press	CTA buttons
fill-up-hold	Hold-to-fill animation bar	Upload, hold actions

---

🎚️ Intensity Levels

Use suffixes to modulate effect strength and theme mapping:

Suffix	Visual Intensity
-0	None / Off
-10	Barely there
-25	Subtle
-50	Balanced
-75	Strong
-100	Intense

Examples:

• glass-50: Mid-strength frosted panel
• pulse-glow-75: Vibrant heartbeat glow
• blob-morph-25: Gentle morphing feedback
• ripple-wave-100: Fullscreen impact ripple

🔧 Use consistent token naming: --effect-type-intensity or effect-class-50

---

🧮 Performance Budgeting Guidelines

Rich effects can cost performance. Balance visuals with frame budget:

Frame Budget Target

• Target 60fps → 16.6ms per frame
• Leave ~6ms for UI effects max

Cost Scale (approx.):

Effect Type	Example	Performance Impact
Blur (backdrop-filter)	glass-50+	🔴 High (3–8ms)
Glows & shadows	box-shadow-glow	🟠 Medium (1–3ms)
Animated gradients	gradient-shimmer	🟠 Medium (1–3ms)
Transforms	swirl, stretch	🟢 Low (<1ms)
Opacity & static layers	light-fog, fill	🟢 Low (<1ms)

✅ Use will-change: transform and avoid complex stacking contexts.

---

♿ Accessibility: A Core Principle

Motion and Vestibular Disorders

All motion-based effects must respect user preferences:

@media (prefers-reduced-motion: no-preference) {
  .pulse-glow-25 {
    animation: pulse 2s infinite;
  }
}

Provide transition: none or static fallbacks when motion is disabled.

Readability and Contrast

• All text/icons must meet WCAG AA:

  • 4.5:1 for normal text
  • 3:1 for large/UI text

• Don’t rely on color alone for focus or active states.

• Blur effects must use a semi-opaque layer to enhance legibility.

---

🌑 Dark Theme Considerations

• Use lighter glows, subtle blurs, and softened shadows.
• Validate hover/focus states to ensure visibility.
• Avoid saturated neons or pure whites in dark UI.
• ✅ Test with prefers-color-scheme: dark in DevTools.

---

🛠️ Developer Tips

Organized for clarity:

Performance:

• Use will-change to trigger GPU compositing
• Minimize nested transparency or blur layers
• Prefer transforms and transitions over keyframes

Theming:

• All effects should use scoped, reusable tokens
• Components must reference tokens for runtime theme switching
• Use consistent naming for effect tokens and classes

Motion Safety:

• Implement prefers-reduced-motion fallbacks
• Avoid animations that loop endlessly without user input

Maintainability:

• Use utility classes or token-based overrides for intensities
• Apply effects as layerable utilities (e.g., hover:glass-25)
• Limit animations per screen to avoid distraction

---

✅ Conclusion

Play+ theming is expressive, flexible, and scalable. Whether you're building a calm enterprise dashboard or a high-energy creative tool, these metaphors bring your UI to life.

Use:

• Glass for structure and clarity
• Light for focus and elevation
• Liquid for movement and emotional touch

🎯 Building a modern tool? Add shimmer and micro-motions. 🧘 Need clarity? Use subtle structure and light shadows. 💥 Want emotion? Embrace ripple, bounce, and expressive glow.

Great UI isn't about more effects—it's about intentional delight that respects performance.

Effects are not decoration—they're signals. Use them to express meaning, mood, and momentum.