# @npm-polymer/paper-ripple

> Adds a material design ripple to any container

Latest version **1.0.9** (published 2017-06-03) · http://polymer.github.io/LICENSE.txt license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install @npm-polymer/paper-ripple
pnpm add @npm-polymer/paper-ripple
yarn add @npm-polymer/paper-ripple
bun add @npm-polymer/paper-ripple
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.0.9 |
| Published | 2017-06-03 |
| First published | 2017-06-03 |
| Weekly downloads | 0 |
| License | http://polymer.github.io/LICENSE.txt |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 58 |
| Maintainers | npm-polymer |
| Keywords | web-components, polymer, ripple |

## Links

- npm: https://www.npmjs.com/package/@npm-polymer/paper-ripple
- Repository: https://github.com/PolymerElements/paper-ripple
- Homepage: https://github.com/PolymerElements/paper-ripple#readme
- Issues: https://github.com/PolymerElements/paper-ripple/issues
- npm.io page: https://npm.io/package/@npm-polymer/paper-ripple

## Dependencies (2)

- [@npm-polymer/polymer](https://npm.io/package/@npm-polymer/polymer.md) 2.0.1
- [@npm-polymer/iron-a11y-keys-behavior](https://npm.io/package/@npm-polymer/iron-a11y-keys-behavior.md) 1.1.9

## Recent versions

- 1.0.9 (latest) — 2017-06-03

## README

[![Build status](https://travis-ci.org/PolymerElements/paper-ripple.svg?branch=master)](https://travis-ci.org/PolymerElements/paper-ripple)

##<paper-ripple>

Material design: [Surface reaction](https://www.google.com/design/spec/animation/responsive-interaction.html#responsive-interaction-surface-reaction)

`paper-ripple` provides a visual effect that other paper elements can
use to simulate a rippling effect emanating from the point of contact.  The
effect can be visualized as a concentric circle with motion.

<!---
```
<custom-element-demo>
  <template>
    <script src="../webcomponentsjs/webcomponents-lite.js"></script>
    <link rel="import" href="paper-ripple.html">
    <style is="custom-style">
      div {
        height: 100px;
        width: 100%;
        box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24);
      }
      
      paper-ripple {
        color: #4285f4;
      }
    </style>
    <next-code-block></next-code-block>
  </template>
</custom-element-demo>
```
-->
```html
<div style="position: relative">
  <paper-ripple></paper-ripple>
</div
```

---
_Source: https://npm.io/package/@npm-polymer/paper-ripple · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._