# moving-shadow

> A JavaScript module, which creates a responsive text shadow based on mouse position (desktop) or device orientation (mobile)

Latest version **1.1.5** (published 2026-02-13) · ISC license · 0 weekly downloads

## Install

```sh
npm install moving-shadow
pnpm add moving-shadow
yarn add moving-shadow
bun add moving-shadow
```

## Health

**Score 45/100 (D)** — status: stable.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

## Facts

| | |
|---|---|
| Version | 1.1.5 |
| Published | 2026-02-13 |
| First published | 2020-08-15 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 806.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | gaijinbrandybuck |
| Maintainers | gaijinbrandybuck |
| Keywords | text-shadow, shadow, dynamic, moving, perspective, javascript, text, shift |

## Links

- npm: https://www.npmjs.com/package/moving-shadow
- Repository: https://github.com/oh-kay-blanket/moving-shadow
- Homepage: https://github.com/oh-kay-blanket/moving-shadow#readme
- Issues: https://github.com/oh-kay-blanket/moving-shadow/issues
- npm.io page: https://npm.io/package/moving-shadow

## Alternatives

- [ext-list](https://npm.io/package/ext-list.md) — 6.3M weekly downloads
- [@lexical/selection](https://npm.io/package/@lexical/selection.md) — 3.8M weekly downloads
- [@lexical/text](https://npm.io/package/@lexical/text.md) — 3.6M weekly downloads
- [@lexical/clipboard](https://npm.io/package/@lexical/clipboard.md) — 3.0M weekly downloads
- [@tiptap/extension-mention](https://npm.io/package/@tiptap/extension-mention.md) — 3.0M weekly downloads

## Recent versions

- 1.1.5 (latest) — 2026-02-13
- 1.1.3 — 2020-12-05
- 1.1.2 — 2020-12-05
- 1.1.1 — 2020-12-05
- 1.1.0 — 2020-12-04
- 1.0.13 — 2020-08-29
- 1.0.12 — 2020-08-29
- 1.0.11 — 2020-08-22
- 1.0.10 — 2020-08-22
- 1.0.9 — 2020-08-20
- 1.0.8 — 2020-08-20
- 1.0.7 — 2020-08-17
- 1.0.6 — 2020-08-17
- 1.0.5 — 2020-08-17
- 1.0.4 — 2020-08-16
- … 4 more at https://npm.io/package/moving-shadow/versions

## README

# moving-shadow.js
[![npm version](https://badge.fury.io/js/moving-shadow.svg)](https://badge.fury.io/js/moving-shadow)

A JavaScript module, which creates a responsive text shadow based on mouse position (desktop) or device orientation (mobile).

As of iOS 12.2, Safari has disabled `window.getDeviceOrientation`. Until a fix is put in place, moving-shadow will not work on iOS devices.

## Examples
* [Flat text with moving shadow](https://oh-kay-blanket.github.io/moving-shadow/examples/shadow) - ([source](https://github.com/oh-kay-blanket/moving-shadow/blob/master/examples/shadow.html))
* [Fixed raised text with moving shadow](https://oh-kay-blanket.github.io/moving-shadow/examples/shadow-raised) - ([source](https://github.com/oh-kay-blanket/moving-shadow/blob/master/examples/shadow-raised.html))
* [Moving perspective text and box](https://oh-kay-blanket.github.io/moving-shadow/examples/perspective) - ([source](https://github.com/oh-kay-blanket/moving-shadow/blob/master/examples/perspective.html))
* [Moving perspective text with moving shadow](https://oh-kay-blanket.github.io/moving-shadow/examples/perspective-shadow) - ([source](https://github.com/oh-kay-blanket/moving-shadow/blob/master/examples/perspective-shadow.html))
* [Moving perspective box with moving shadow](https://oh-kay-blanket.github.io/moving-shadow/examples/perspective-box-shadow) - ([source](https://github.com/oh-kay-blanket/moving-shadow/blob/master/examples/perspective-box-shadow.html))
* [Drop shadow](https://oh-kay-blanket.github.io/moving-shadow/examples/drop-shadow) - ([source](https://github.com/oh-kay-blanket/moving-shadow/blob/master/examples/drop-shadow.html))


## Quick Start
`npm i moving-shadow`  
then  
`import movingShadow from 'moving-shadow';`  
or  
`<script src="https://unpkg.com/moving-shadow"></script>`  
then  
`movingShadow();`

## Configuration
Options with defaults
```javascript
const settings = {
  shadowType:   "shadow",    // "shadow", "perspective","perspective-shadow", "dropShadow"
  selector:     "h1, h2",    // tag, class, or id to apply shadow to
  angle:        20,          // height of view source. Should be between 10 - 100
  relativeAngle:false,       // false. desktop only, allows for each element to move relative to the mouse
  diffusion:    0,           // blur-radius
  color:        "#333333CC", // shadow-color or perspective color
  altColor:     "#333333CC", // shadow-color (perspective-shadow only)
  shineColor:   "#fff3",     // reflected light (perspective-shadow only)
  fixedShadow:  null,        // "5px 5px #555" to include an optional fixed shadow
  xOffset:      0,           // X offset value, set to max fixedShadow x offset
  yOffset:      0            // Y offset value, set to max fixedShadow y offset
}

movingShadow(settings);
```

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