Visual Effects
CSS-powered visual effects and animations to enhance your UI with glow, fireworks, shadows, and more. Pure CSS implementations for performance and simplicity.

Glow Effects

Text and box glow effects with multiple intensities and colours.

  • Text shadows
  • Box glows
  • Hover effects
  • Theme colours
.glow .glow-primary .glow-hover

Fireworks

Animated fireworks for celebrations and special moments.

  • Burst animations
  • Sparkle effects
  • Trail particles
  • Hover triggers
.firework .firework-burst .firework-sparkle

Shadows

Box shadow utilities for depth and elevation.

  • Multiple sizes
  • Inner shadows
  • Elevation levels
  • Custom shadows
.shadow .shadow-lg .shadow-inner

Animations

Keyframe animations and transitions.

  • Fade effects
  • Slide transitions
  • Pulse animations
  • Spin effects
.animate-fade-in .animate-bounce

Ambient Effects

Subtle animated backgrounds that add visual interest without distraction.

  • Rotating gradients
  • Floating shapes
  • Wave patterns
  • Aurora effects
.bg-ambient-aurora .bg-ambient-float-blobs

Gradients

Dynamic gradient backgrounds and overlays.

  • Animated gradients
  • Named presets
  • Text gradients
  • Directional control
.bg-gradient-sunset .text-gradient

Filters

CSS filters for image and element effects.

  • Blur effects
  • Colour adjustments
  • Brightness/contrast
  • Backdrop filters
.blur .grayscale .backdrop-blur

Twinkle

Canvas-based twinkling stars — full-page overlay or scoped to any container.

  • Full-page fixed overlay
  • Container-scoped mode
  • 4-pointed star or circle shape
  • Pause / resume / destroy
Domma.effects.twinkle(selector, options)

JavaScript Effects

Programmatic animations via Domma.effects module.

  • breathe() - floating
  • pulse() - scaling
  • scribe() - text animation
  • reveal() - scroll entrance
  • scramble() - text decode
  • counter() - number counting
  • ripple() - click ripple
  • shake() - error shake
  • twinkle() - twinkling stars
Domma.effects.breathe() .reveal() .ripple() .twinkle()

Celebrations

Year-round visual effects system with themed animations.

  • 8 celebration themes
  • Canvas-based particles
  • Theme auto-detection
  • Live demo
Real-world Domma.effects example

About Visual Effects

Domma's visual effects are pure CSS implementations designed to enhance your UI without JavaScript overhead. These effects are hardware-accelerated for smooth performance and work seamlessly with Domma's theme system.

Key Features

  • Pure CSS: No JavaScript required for basic effects
  • Performance: Hardware-accelerated animations
  • Theme Integration: Works with Domma's colour system
  • Responsive: Effects scale appropriately on all devices
  • Customizable: CSS variables for easy customization

Usage

Effects can be applied directly via CSS classes:

<!-- Glow effect -->
<h1 class="glow-primary">Glowing Title</h1>

<!-- Fireworks on hover -->
<button class="btn firework-on-hover">Celebrate!</button>

<!-- Shadow depth -->
<div class="card shadow-xl">Elevated Card</div>

Performance Tips

  • Use transform and opacity for animations when possible
  • Limit the number of animated elements on screen
  • Consider using will-change for frequently animated properties
  • Test on lower-end devices to ensure smooth performance