https://github.com/phucbm/ripple-effect

A TypeScript utility for applying a ripple effect to a set of elements.
https://github.com/phucbm/ripple-effect

Last synced: 6 months ago
JSON representation

A TypeScript utility for applying a ripple effect to a set of elements.

• Host: GitHub
• URL: https://github.com/phucbm/ripple-effect
• Owner: phucbm
• License: mit
• Created: 2025-07-13T12:36:28.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2025-08-01T23:50:33.000Z (12 months ago)
• Last Synced: 2025-08-02T04:34:33.075Z (12 months ago)
• Language: TypeScript
• Homepage: https://phucbm.github.io/ripple-effect/
• Size: 176 KB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE
  • Codeowners: .github/CODEOWNERS

Awesome Lists containing this project

README

          
# ripple-effect

Applies a ripple effect that distributes normalized values [0; 1] from a center point. Useful for animations or visual

emphasis.

[![npm version](https://badgen.net/npm/v/@phucbm/ripple-effect?icon=npm)](https://www.npmjs.com/package/@phucbm/ripple-effect)

[![npm downloads](https://badgen.net/npm/dm/@phucbm/ripple-effect?icon=npm)](https://www.npmjs.com/package/@phucbm/ripple-effect)

[![npm dependents](https://badgen.net/npm/dependents/@phucbm/ripple-effect?icon=npm)](https://www.npmjs.com/package/@phucbm/ripple-effect)

[![github stars](https://badgen.net/github/stars/phucbm/ripple-effect?icon=github)](https://github.com/phucbm/ripple-effect/)

[![github license](https://badgen.net/github/license/phucbm/ripple-effect?icon=github)](https://github.com/phucbm/ripple-effect/blob/main/LICENSE)

![Screen Recording 2025-07-13 at 18 35 54](https://github.com/user-attachments/assets/afce54ce-a80c-4fb4-8575-6eed833a1ab4)

## Installation

```bash

npm i @phucbm/ripple-effect

```

```bash

pnpm add @phucbm/ripple-effect

```

## Usage

```typescript

import {applyRippleEffect} from '@phucbm/ripple-effect';

const elements = document.querySelectorAll('.item');

applyRippleEffect({

    length: elements.length,

    centerIndex: 5,

    rippleRadius: 3,

    callback: (normalizedValue, index) => {

        const scale = 1 + normalizedValue; // [1.0 - 2.0]

        elements[index].style.transform = `scale(${scale})`;

    }

});

```

## Development

```bash

# Install dependencies

pnpm install

# Run tests

pnpm test

# Build the package

pnpm run build

# Run tests in watch mode

pnpm run test:watch

```

## License

MIT © [phucbm](https://github.com/phucbm)