Ripple Effect

Material Design click ripple. Adds a circular wave effect emanating from the click/touch point for tactile UI feedback.

Domma.effects.ripple()

The ripple() effect creates a Material Design-style circular wave expanding from the click/touch point. The ripple element is absolutely positioned, scales from 0 to 4x, and fades out. Perfect for buttons, cards, and interactive elements.

// Add ripple to all buttons
Domma.effects.ripple('.btn');

// Custom colour and duration
Domma.effects.ripple('.card', {
  colour: 'rgba(59, 130, 246, 0.3)',
  duration: 800,
  centered: false
});

// Clean up
ctrl.destroy();

Demo: Button Ripples

Click on these buttons to see the ripple effect. The ripple emanates from the click point.

Demo: Button Ripples
Primary Success Danger Dark 
<span class="ripple-target ripple-btn-primary ripple-demo-1">Primary</span>
<span class="ripple-target ripple-btn-success ripple-demo-1">Success</span>
<span class="ripple-target ripple-btn-danger ripple-demo-1">Danger</span>
<span class="ripple-target ripple-btn-dark ripple-demo-1">Dark</span>
/**
 * Demo: Button Ripples - from public/showcase/effects/ripple.
 */
export function mount(root) {
        // Demo 1: Basic buttons
    Domma.effects.ripple('.ripple-demo-1', {
          colour: 'rgba(255, 255, 255, 0.35)',
          duration: 600,
          respectMotionPreference: false
        });
}
Domma.effects.ripple('.btn', {
  colour: 'rgba(255, 255, 255, 0.35)',
  duration: 600
});

Demo: Custom Ripple Colours

Different ripple colours for different contexts.

Demo: Custom Ripple Colours
Blue Ripple Green Ripple Red Ripple 
<span class="ripple-target ripple-colour-blue" style="background: #e3f2fd; color: #1565c0; border: 1px solid #90caf9;">Blue Ripple</span>
<span class="ripple-target ripple-colour-green" style="background: #e8f5e9; color: #2e7d32; border: 1px solid #a5d6a7;">Green Ripple</span>
<span class="ripple-target ripple-colour-red" style="background: #ffebee; color: #c62828; border: 1px solid #ef9a9a;">Red Ripple</span>
/**
 * Demo: Custom Ripple Colours - from public/showcase/effects/ripple.
 */
export function mount(root) {
        // Demo 2: Custom colours
    Domma.effects.ripple('.ripple-colour-blue', {
          colour: 'rgba(21, 101, 192, 0.3)',
          respectMotionPreference: false
        });
    Domma.effects.ripple('.ripple-colour-green', {
          colour: 'rgba(46, 125, 50, 0.3)',
          respectMotionPreference: false
        });
    Domma.effects.ripple('.ripple-colour-red', {
          colour: 'rgba(198, 40, 40, 0.3)',
          respectMotionPreference: false
        });
}
Domma.effects.ripple('.blue', { colour: 'rgba(21, 101, 192, 0.3)' });
Domma.effects.ripple('.green', { colour: 'rgba(46, 125, 50, 0.3)' });
Domma.effects.ripple('.red', { colour: 'rgba(198, 40, 40, 0.3)' });

Demo: Centred Ripple

With centered: true, the ripple always starts from the centre of the element regardless of click position.

Demo: Centred Ripple
Click Anywhere 
<span class="ripple-target ripple-btn-primary ripple-centered" style="width: 200px;">Click Anywhere</span>
/**
 * Demo: Centred Ripple - from public/showcase/effects/ripple.
 */
export function mount(root) {
        // Demo 3: Centred
    Domma.effects.ripple('.ripple-centered', {
          centered: true,
          colour: 'rgba(255, 255, 255, 0.4)',
          respectMotionPreference: false
        });
}
Domma.effects.ripple('.element', {
  centered: true
});

Demo: Card Ripples

Ripple effect on cards for interactive list items or dashboards.

Demo: Card Ripples

Documents

24 files

Photos

148 files

Music

52 files

<div class="ripple-card ripple-card-demo">
    <div style="font-size: 2rem;" data-icon="folder"></div>
    <h4 class="mt-2">Documents</h4>
    <p class="text-muted">24 files</p>
</div>
<div class="ripple-card ripple-card-demo">
    <div style="font-size: 2rem;" data-icon="image"></div>
    <h4 class="mt-2">Photos</h4>
    <p class="text-muted">148 files</p>
</div>
<div class="ripple-card ripple-card-demo">
    <div style="font-size: 2rem;" data-icon="music"></div>
    <h4 class="mt-2">Music</h4>
    <p class="text-muted">52 files</p>
</div>
/**
 * Demo: Card Ripples - from public/showcase/effects/ripple.
 */
export function mount(root) {
        // Demo 4: Card ripples
    Domma.effects.ripple('.ripple-card-demo', {
          colour: 'rgba(13, 110, 253, 0.15)',
          duration: 800,
          respectMotionPreference: false
        });
}
Domma.effects.ripple('.file-card', {
  colour: 'rgba(13, 110, 253, 0.15)',
  duration: 800
});

Demo: Duration Comparison

Compare different ripple durations.

Demo: Duration Comparison
Fast (300ms) Normal (600ms) Slow (1200ms) 
<span class="ripple-target ripple-btn-primary ripple-fast">Fast (300ms)</span>
<span class="ripple-target ripple-btn-primary ripple-normal">Normal (600ms)</span>
<span class="ripple-target ripple-btn-primary ripple-slow">Slow (1200ms)</span>
/**
 * Demo: Duration Comparison - from public/showcase/effects/ripple.
 */
export function mount(root) {
        // Demo 5: Duration comparison
    Domma.effects.ripple('.ripple-fast', {
          duration: 300,
          colour: 'rgba(255, 255, 255, 0.4)',
          respectMotionPreference: false
        });
    Domma.effects.ripple('.ripple-normal', {
          duration: 600,
          colour: 'rgba(255, 255, 255, 0.4)',
          respectMotionPreference: false
        });
    Domma.effects.ripple('.ripple-slow', {
          duration: 1200,
          colour: 'rgba(255, 255, 255, 0.4)',
          respectMotionPreference: false
        });
}

Options Reference

Option Type Default Description
colour string 'rgba(255, 255, 255, 0.35)' Ripple colour (CSS colour value)
duration number 600 Ripple animation duration in ms
opacity number 0.35 Starting opacity
unbounded boolean false Allow ripple to overflow element
centered boolean false Always ripple from centre
trigger string 'pointerdown' 'click', 'mousedown', 'pointerdown'
respectMotionPreference boolean true Honour prefers-reduced-motion