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.

Visual Effects

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)

Ticker Tape

A canvas-based ticker-tape parade. Coloured strips fall, sway, rotate, and fade.

  • Theme-aware palettes
  • 11 built-in colour schemes
  • Continuous or one-shot burst
  • Container-scoped or full-page
Domma.effects.tickerTape(selector, options)

Butterflies

Procedurally drawn butterflies wander and rise with flapping wings.

  • Wander-and-rise flight
  • Flapping wings on canvas
  • Theme-aware palettes
  • Container-scoped or full-page
Domma.effects.butterflies(selector, options)

Strobe

A timed full-page or container colour flash. Reduced-motion safe.

  • Configurable frequency & colours
  • Auto-stop duration
  • Photosensitivity guard
  • Container-scoped or full-page
Domma.effects.strobe(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
  • tickerTape() - ticker-tape parade
  • butterflies() - wandering butterflies
  • strobe() - timed colour flash
Domma.effects.breathe() .reveal() .ripple() .twinkle() .tickerTape() .butterflies() .strobe()

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 
<!-- Glow Effects -->
<a href="/showcase/effects/glow" class="card card-hover h-full flex flex-col no-underline text-inherit">
    <div class="card-body flex-1">
        <div class="mb-4 text-primary glow-primary" style="font-size: 2rem;" data-icon="zap"></div>
        <h3 class="card-title">Glow Effects</h3>
        <p class="card-text">Text and box glow effects with multiple intensities and colours.</p>
        <ul class="list-none p-0 mt-4 feature-list-item-bullet">
            <li>Text shadows</li>
            <li>Box glows</li>
            <li>Hover effects</li>
            <li>Theme colours</li>
        </ul>
    </div>
    <div class="card-footer">
        <code>.glow .glow-primary .glow-hover</code>
    </div>
</a>

<!-- Fireworks -->
<a href="/showcase/effects/fireworks" class="card card-hover h-full flex flex-col no-underline text-inherit">
    <div class="card-body flex-1">
        <div class="mb-4 text-primary" style="font-size: 2rem;" data-icon="star"></div>
        <h3 class="card-title">Fireworks</h3>
        <p class="card-text">Animated fireworks for celebrations and special moments.</p>
        <ul class="list-none p-0 mt-4 feature-list-item-bullet">
            <li>Burst animations</li>
            <li>Sparkle effects</li>
            <li>Trail particles</li>
            <li>Hover triggers</li>
        </ul>
    </div>
    <div class="card-footer">
        <code>.firework .firework-burst .firework-sparkle</code>
    </div>
</a>

<!-- Shadows -->
<a href="/showcase/effects/shadows" class="card card-hover h-full flex flex-col no-underline text-inherit">
    <div class="card-body flex-1">
        <div class="mb-4 text-primary" style="font-size: 2rem;" data-icon="layers"></div>
        <h3 class="card-title">Shadows</h3>
        <p class="card-text">Box shadow utilities for depth and elevation.</p>
        <ul class="list-none p-0 mt-4 feature-list-item-bullet">
            <li>Multiple sizes</li>
            <li>Inner shadows</li>
            <li>Elevation levels</li>
            <li>Custom shadows</li>
        </ul>
    </div>
    <div class="card-footer">
        <code>.shadow .shadow-lg .shadow-inner</code>
    </div>
</a>

<!-- Animations -->
<a href="/showcase/effects/animations" class="card card-hover h-full flex flex-col no-underline text-inherit">
    <div class="card-body flex-1">
        <div class="mb-4 text-primary" style="font-size: 2rem;" data-icon="activity"></div>
        <h3 class="card-title">Animations</h3>
        <p class="card-text">Keyframe animations and transitions.</p>
        <ul class="list-none p-0 mt-4 feature-list-item-bullet">
            <li>Fade effects</li>
            <li>Slide transitions</li>
            <li>Pulse animations</li>
            <li>Spin effects</li>
        </ul>
    </div>
    <div class="card-footer">
        <code>.animate-fade-in .animate-bounce</code>
    </div>
</a>

<!-- Ambient Effects -->
<a href="/showcase/effects/ambient" class="card card-hover h-full flex flex-col no-underline text-inherit">
    <div class="card-body flex-1">
        <div class="mb-4 text-primary" style="font-size: 2rem;" data-icon="wind"></div>
        <h3 class="card-title">Ambient Effects</h3>
        <p class="card-text">Subtle animated backgrounds that add visual interest without distraction.</p>
        <ul class="list-none p-0 mt-4 feature-list-item-bullet">
            <li>Rotating gradients</li>
            <li>Floating shapes</li>
            <li>Wave patterns</li>
            <li>Aurora effects</li>
        </ul>
    </div>
    <div class="card-footer">
        <code>.bg-ambient-aurora .bg-ambient-float-blobs</code>
    </div>
</a>

<!-- Gradients -->
<a href="/showcase/effects/gradients" class="card card-hover h-full flex flex-col no-underline text-inherit">
    <div class="card-body flex-1">
        <div class="mb-4 text-primary" style="font-size: 2rem;" data-icon="droplet"></div>
        <h3 class="card-title">Gradients</h3>
        <p class="card-text">Dynamic gradient backgrounds and overlays.</p>
        <ul class="list-none p-0 mt-4 feature-list-item-bullet">
            <li>Animated gradients</li>
            <li>Named presets</li>
            <li>Text gradients</li>
            <li>Directional control</li>
        </ul>
    </div>
    <div class="card-footer">
        <code>.bg-gradient-sunset .text-gradient</code>
    </div>
</a>

<!-- Filters -->
<a href="/showcase/effects/filters" class="card card-hover h-full flex flex-col no-underline text-inherit">
    <div class="card-body flex-1">
        <div class="mb-4 text-primary" style="font-size: 2rem;" data-icon="eye"></div>
        <h3 class="card-title">Filters</h3>
        <p class="card-text">CSS filters for image and element effects.</p>
        <ul class="list-none p-0 mt-4 feature-list-item-bullet">
            <li>Blur effects</li>
            <li>Colour adjustments</li>
            <li>Brightness/contrast</li>
            <li>Backdrop filters</li>
        </ul>
    </div>
    <div class="card-footer">
        <code>.blur .grayscale .backdrop-blur</code>
    </div>
</a>

<!-- Twinkle -->
<a href="/showcase/effects/twinkle" class="card card-hover h-full flex flex-col no-underline text-inherit">
    <div class="card-body flex-1">
        <div class="mb-4 text-primary" style="font-size: 2rem;" data-icon="sparkles"></div>
        <h3 class="card-title">Twinkle</h3>
        <p class="card-text">Canvas-based twinkling stars - full-page overlay or scoped to any container.</p>
        <ul class="list-none p-0 mt-4 feature-list-item-bullet">
            <li>Full-page fixed overlay</li>
            <li>Container-scoped mode</li>
            <li>4-pointed star or circle shape</li>
            <li>Pause / resume / destroy</li>
        </ul>
    </div>
    <div class="card-footer">
        <code>Domma.effects.twinkle(selector, options)</code>
    </div>
</a>

<!-- Ticker Tape -->
<a href="/showcase/effects/ticker-tape" class="card card-hover h-full flex flex-col no-underline text-inherit">
    <div class="card-body flex-1">
        <div class="mb-4 text-primary" style="font-size: 2rem;" data-icon="party-popper"></div>
        <h3 class="card-title">Ticker Tape</h3>
        <p class="card-text">A canvas-based ticker-tape parade. Coloured strips fall, sway, rotate, and fade.</p>
        <ul class="list-none p-0 mt-4 feature-list-item-bullet">
            <li>Theme-aware palettes</li>
            <li>11 built-in colour schemes</li>
            <li>Continuous or one-shot burst</li>
            <li>Container-scoped or full-page</li>
        </ul>
    </div>
    <div class="card-footer">
        <code>Domma.effects.tickerTape(selector, options)</code>
    </div>
</a>

<a href="/showcase/effects/butterflies" class="card card-hover h-full flex flex-col no-underline text-inherit">
    <div class="card-body flex-1">
        <div class="mb-4 text-primary" style="font-size: 2rem;" data-icon="feather"></div>
        <h3 class="card-title">Butterflies</h3>
        <p class="card-text">Procedurally drawn butterflies wander and rise with flapping wings.</p>
        <ul class="list-none p-0 mt-4 feature-list-item-bullet">
            <li>Wander-and-rise flight</li>
            <li>Flapping wings on canvas</li>
            <li>Theme-aware palettes</li>
            <li>Container-scoped or full-page</li>
        </ul>
    </div>
    <div class="card-footer">
        <code>Domma.effects.butterflies(selector, options)</code>
    </div>
</a>

<a href="/showcase/effects/strobe" class="card card-hover h-full flex flex-col no-underline text-inherit">
    <div class="card-body flex-1">
        <div class="mb-4 text-primary" style="font-size: 2rem;" data-icon="zap"></div>
        <h3 class="card-title">Strobe</h3>
        <p class="card-text">A timed full-page or container colour flash. Reduced-motion safe.</p>
        <ul class="list-none p-0 mt-4 feature-list-item-bullet">
            <li>Configurable frequency &amp; colours</li>
            <li>Auto-stop duration</li>
            <li>Photosensitivity guard</li>
            <li>Container-scoped or full-page</li>
        </ul>
    </div>
    <div class="card-footer">
        <code>Domma.effects.strobe(selector, options)</code>
    </div>
</a>

<!-- JavaScript Effects -->
<a href="/showcase/effects/javascript" class="card card-hover h-full flex flex-col no-underline text-inherit">
    <div class="card-body flex-1">
        <div class="mb-4 text-primary" style="font-size: 2rem;" data-icon="zap"></div>
        <h3 class="card-title">JavaScript Effects</h3>
        <p class="card-text">Programmatic animations via Domma.effects module.</p>
        <ul class="list-none p-0 mt-4 feature-list-item-bullet">
            <li>breathe() - floating</li>
            <li>pulse() - scaling</li>
            <li>scribe() - text animation</li>
            <li>reveal() - scroll entrance</li>
            <li>scramble() - text decode</li>
            <li>counter() - number counting</li>
            <li>ripple() - click ripple</li>
            <li>shake() - error shake</li>
            <li>twinkle() - twinkling stars</li>
            <li>tickerTape() - ticker-tape parade</li>
            <li>butterflies() - wandering butterflies</li>
            <li>strobe() - timed colour flash</li>
        </ul>
    </div>
    <div class="card-footer">
        <code>Domma.effects.breathe() .reveal() .ripple() .twinkle() .tickerTape() .butterflies() .strobe()</code>
    </div>
</a>

<!-- Celebrations Example -->
<a href="/showcase/effects/celebrations" class="card card-hover h-full flex flex-col no-underline text-inherit">
    <div class="card-body flex-1">
        <div class="mb-4 text-primary" style="font-size: 2rem;" data-icon="sparkles"></div>
        <h3 class="card-title">Celebrations</h3>
        <p class="card-text">Year-round visual effects system with themed animations.</p>
        <ul class="list-none p-0 mt-4 feature-list-item-bullet">
            <li>8 celebration themes</li>
            <li>Canvas-based particles</li>
            <li>Theme auto-detection</li>
            <li>Live demo</li>
        </ul>
    </div>
    <div class="card-footer">
        <code>Real-world Domma.effects example</code>
    </div>
</a>

Section

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